• Choose a category
• All
• Classic-Fiction

manipulation done by the TextSuggest component:

injectSuggestBehavior: function() {

// HTML Dom Behavior Injection...

this.createSuggestionsDiv();

},

The last line of the injectSuggestBehavior() method calls the createSuggestionsDiv() method, which creates the outermost containing div of the suggestion pop-up. Since this is the container of all GUI artifacts, it’s the logical place to start looking at UI code. The details of the implementation are shown in listing 10.33. Listing 10.33 Creating the suggestion pop-up UI

createSuggestionsDiv: function() {

this.suggestionsDiv =

document.createElement("div"); b

Create the div

this.suggestionsDiv.className =

this.options.suggestDivClassName; c

Style the div

var divStyle =

this.suggestionsDiv.style;

d Add

divStyle.position = 'absolute';

behavioral

divStyle.zIndex = 101;

style

divStyle.display = "none";

this.textInput.parentNode.appendChild

(this.suggestionsDiv); e

Insert into document

},

The creation method of the container has four basic responsibilities. First, it has to create the DIV via the document’s createElement() API b.

Second, it has to style the DIV according to the client configuration c. Recall that one of our requirements was to make the CSS styling of each component instance individually configurable. We achieve that in this case by setting the div’s className attribute according to the suggestDivClassName property of the options object. You will recall that we set the default value of this property to suggestDiv within the setOptions method. So if the user doesn’t explicitly specify a value for a property, this is what she will get. This is a convenient feature because it allows the client of our component to have a default stylesheet that uses our Licensed to jonathan zheng

Refactoring

415

default class names to style all TextSuggest component instances used across the application. Other stylesheets could also be provided (for example, product-or customer-specific stylesheets) that override the definitions of these standard style names. And finally, an individual page can override the value of the suggestDivClassName parameter to provide a page-level or instance-level styling to the component. Sounds pretty flexible to us. There are certain aspects of the style of the pop-up that are nonnegotiable, annotated as “Behavioral style,” so we style them explicitly through the style attribute of the element d. Note that anything styled programmatically via the style attribute overrides anything specified via a CSS className, typically by a stylesheet. These nonnegotiable aspects are 1) position='absolute' because the component must manage the positioning of the div internally, 2) zIndex=101, which we use to make sure the pop-up is on top of everything on the page, and 3) display="none" because the pop-up has to be hidden from the user’s view until the user’s keystrokes trigger it. Note that the value of 101 for the zIndex is somewhat arbitrary. Finally, the method inserts the div into the document as a sibling of the text field e. The parent in this case really doesn’t matter, since the div will be positioned absolutely. Positioning the pop-up

Now that our pop-up has been created, at some point it will have to be shown. But before it can be shown, it has to be positioned. When we show the pop-up, we want it to appear just below the text field and to be aligned with the left side of the text field. Let’s write the positionSuggestionsDiv method in listing 10.34. Listing 10.34 Positioning the pop-up UI

positionSuggestionsDiv: function() {

var textPos = RicoUtil.toDocumentPosition(this.textInput);

var divStyle = this.suggestionsDiv.style;

divStyle.top = (textPos.y + this.textInput.offsetHeight)

+ "px";

divStyle.left = textPos.x + "px";

if ( this.options.matchTextWidth )

divStyle.width = (this.textInput.offsetWidth –

this.padding()) + "px";

},

Licensed to jonathan zheng

416

CHAPTER 10

Type-ahead suggest

You will recall that in the previous version