• Choose a category
• All
• Classic-Fiction

By Root 4006 0

of this script, we wrote a method to calculate the absolute position of the text field. In this refactored version, we are relying on a utility method provided by Rico—toDocumentPosition(). All we have to do is to use this method to get our reference point and perform the appropriate calculations to get our pop-up below and align on the left with the text field. We then check for the existence of the configuration option matchTextWidth, and if it is true, we also size the width of the div element to match the width of the text input. Note that we adjust the width by the padding value. We do this because, as you recall, we’ve allowed the div element to be externally styled through a CSS

class. We don’t know if the user will have put margins and borders on the component, which would throw off the visual alignment to the width of the text field. Let’s write a padding() method (listing 10.35) to compute the left and right padding values and margins to subtract from the overall width. Listing 10.35 Calculation of left and right padding

padding: function() {

try{

var styleFunc = RicoUtil.getElementsComputedStyle;

var lPad = styleFunc( this.suggestionsDiv,

"paddingLeft",

"padding-left" );

var rPad = styleFunc( this.suggestionsDiv,

"paddingRight",

"padding-right" );

var lBorder = styleFunc( this.suggestionsDiv,

"borderLeftWidth",

"border-left-width" );

var rBorder = styleFunc( this.suggestionsDiv,

"borderRightWidth",

"border-right-width" );

lPad = isNaN(lPad) ? 0 : lPad;

rPad = isNaN(rPad) ? 0 : rPad;

lBorder = isNaN(lBorder) ? 0 : lBorder;

rBorder = isNaN(rBorder) ? 0 : rBorder;

return parseInt(lPad) + parseInt(rPad) +

parseInt(lBorder) + parseInt(rBorder);

}catch (e){ return 0; }

},

Getting the calculated style of an element—the actual value of an attribute regardless of how it was set—is tricky business. To achieve this, IE provides a proprietary currentStyle attribute for each element. Mozilla-based browsers use a getComputedStyle() method of the defaultView property of the document to Licensed to jonathan zheng

Refactoring

417

calculate this. Each one of these mechanisms expects a different specification for the attribute being queried, as well. The IE currentStyle expects style attributes specified via the JavaScript-like binding (for example, borderRightWidth), whereas the Mozilla getComputedStyle() expects attributes specified with the stylesheetlike syntax (for example, border-right-width). Luckily, Rico provides a method that takes care of all of this for us—RicoUtil.getElementsComputedStyle(). We just pass it the element, the IE name for the attribute, and the Mozilla name for the attribute, and the method returns a value. Our method here gets the values of the left and right borders and margins, sums them up, and returns them. The Rico.getElementsComputedStyle() is known to have issues with some versions of Safari, and so we provide a default return value within a try...catch block. Creating the pop-up contents

Now that we have the code to create and position the pop-up, we need to write a method to populate it with actual suggestions before it can be useful. Recall that our ajaxUpdate() method parses the XML from the response into an array of suggestion objects. And, if at least one suggestion exists, it calls a method named this.updateSugggestionsDiv(). This method is the transformer of the in-memory collection of suggestions to actual SPAN elements within the pop-up div. Let’s look at how that’s done now:

updateSuggestionsDiv: function() {

this.suggestionsDiv.innerHTML = "";

Remove prior content

var suggestLines = this.createSuggestionSpans();

for (var i = 0; i < suggestLines.length; i++)

Create new

this.suggestionsDiv.appendChild(suggestLines[i]);

content

},

This method is deceptively simple, but there’s still lots of work to do, so hang with us. This method simply sets the value of the innerHTML property of the suggestionsDiv created earlier to an empty string in order to wipe out any prior content. Then it calls createSuggestionSpans() to create a span