element.js

javascript 很酷的类库

    // We could also check for documentBody to avoid crashing in the case where we were 
    // passed bad params.
    var iterations = 0;
    while (nextParent != targetElement && nextParent != targetParent) {    

        // Add the currentNode's offsetLeft - left w.r.t. its offsetParent
        var subOffset = (isLeft ? this.ns.Element.getOffsetLeft(currentNode) :
                            this.ns.Element.getOffsetTop(currentNode));
        offset += subOffset;                            

        // The offsetLeft/top value is relative to the content of the parent's element - so if
        // the parent is scrolled, and we want the floating position of this element within
        // it's parent we have to deduct the scrollLeft of the parent to page coordinate 
        // relative to the parent's element's top/left
        if (!rtl) {
            // deduct the scrollLeft/top
            offset -= ((isLeft ? nextParent.scrollLeft : nextParent.scrollTop) || 0);      
        } else {
            // rtl var is only ever true when calculating left offset.
            if (isc.isA.Number(nextParent.scrollLeft)) {
                
                var maxScrollLeft = (nextParent.scrollWidth - nextParent.clientWidth);
                offset += (maxScrollLeft - nextParent.scrollLeft);
            }
        }


        // add the border / margin thickness, because when we add the parent's offsetLeft
        // this will be the distance from the OUTSIDE of this element's border/margin 
        // to the inside of the next parent's element.
        // Note: Skip this if the margin is negative as in this case the value we have from
        // getOffsetTop() / Left() is actually relative to the outside of the element
        var styleObj, borderWidth, marginWidth;
        if (isc.Browser.isIE || isc.Browser.isOpera) {
            
            styleObj = nextParent.currentStyle;

            // In Opera, currentStyle is available, but border / borderLeftWidth et al are
            // reported as 3 when no border is specified. Therefore look at borderStyle as
            // well in this browser.
            if (isc.Browser.isOpera && 
                (isLeft ? styleObj.borderLeftStyle == this._$none 
                        : styleObj.borderTopStyle == this._$none)) borderWidth = 0;
            else borderWidth = parseInt(styleObj[borderWidthProp]);
            
            if (isc.isA.Number(borderWidth)) offset += borderWidth;
            
            marginWidth = parseInt(styleObj[marginProp]);      
            if (isc.isA.Number(marginWidth) && marginWidth > 0) offset += marginWidth;
            
        } else if (isc.Browser.isMoz) {
             
            styleObj = document.defaultView.getComputedStyle(nextParent, null);

            borderWidth = parseInt(styleObj.getPropertyValue(borderWidthProp));
            offset += borderWidth;

            marginWidth = parseInt(styleObj.getPropertyValue(marginProp));
            if (marginWidth > 0) offset += marginWidth;

        } else {
            borderWidth = parseInt(this.getComputedStyleAttribute(nextParent, 
                                                                  borderWidthProp));
            if (isc.isA.Number(borderWidth)) offset += borderWidth;

            marginWidth = parseInt(this.getComputedStyleAttribute(nextParent, 
                                                                  marginProp));
            if (isc.isA.Number(marginWidth) && marginWidth > 0) offset += marginWidth;

        }

        // Move up the DOM chain
        currentNode = nextParent;
        nextParent = currentNode.offsetParent;        
        iterations++;
    }    

    // At this point the nextParent is either the target or it's offsetParent.
    // add the offsetLeft between the current node and the nextParent.
    offset += (isLeft ? this.ns.Element.getOffsetLeft(currentNode) :
                        this.ns.Element.getOffsetTop(currentNode));
                       
    // OffsetLeft from the last iteration was relative to the target's offsetParent -
    // deduct the target's offsetLeft to get the offset relative to the target instead.
    if (nextParent == targetParent) {
        // deduct the targetElement's offsetLeft
        // No need to adjust for border / padding in this case
        offset -= (isLeft ? this.ns.Element.getOffsetLeft(targetElement) :
                            this.ns.Element.getOffsetTop(targetElement));                  
    }
    //this.logWarn("iterations: " + iterations);
    return offset;
},

   



// ----------------------------------------------------------------------------------------
// CSS / Styling Lookups
// ----------------------------------------------------------------------------------------
// Retrieval of CSS style declaration and computed styles

// Styling: what we need and why:
// We need to be able to look up border, padding and margin sizes in order to:
// - compensate for errors in reported offsetLeft / offsetTop to have correct page-level
//   coordinates when relatively positioned (needed for arbitrary containing elements not
//   created by ISC)
// - when using the CSS standard box model, be able to write HTML that will render with
//   predictable sizes even when using author-specified CSS styling.  This is critical for grid
//   cell rendering, where correcting sizes after draw is not even close to feasible.
// - get correct scrollHeight when allowing natively positioned children



// cache of CSS style objects
_styleCache:{},
// get the edge widths (border, margin, padding) for a CSS style
getStyleEdges : function (className) {
    
    if (isc.Browser.isSafari && !isc.Element._safariStrictChecked) {
        isc.Browser.isStrict = isc.Element._testForSafariStrictMode();
        isc.Element._safariStrictChecked = true;
    }
    

    if (className == null) return null;

    // check whether cache value is defined, so we can cache failed lookups as nulls
    var undef;
    if (this._styleCache[className] !== undef) return this._styleCache[className];

    //this.logWarn("style lookup: " + className + this.getStackTrace());

    
    var cantDeriveStyles = (isc.Browser.isMoz && isc.Browser.geckoVersion < 20040616),
        styleInfo;
    
    if (cantDeriveStyles) {
        styleInfo = this.getStyleDeclaration(className);
    } else {
        
        var mask = isc.Browser.isIE ? this._styleEdgeMaskArray : this._styleEdgeMask;
        styleInfo = this._deriveStyleProperties(className, mask);
    }

    
    this._styleCache[className] = styleInfo;
    return styleInfo;
},

// In Safari, documnent.compatMode is not available, so we rely on the fact that 
// table cells render their padding outside their specified height in strict mode but not in
// normal compat mode to determine whether we're currently in strict mode
_testForSafariStrictMode : function () {
    if (document.compatMode != null) {
        
        return document.compatMode == "CSS1Compat";
    }
    
    var tableHTML = "<TABLE cellspacing=0 cellpadding=2 border=0><tr><td height=30>x</td></tr></TABLE>"
    
    var tester = isc.Element.createAbsoluteElement(tableHTML);
    
    var isStrict = tester.offsetHeight > 30;
    isc.Element.clear(tester);
    
    return isStrict;
},
  
// get certain key properties of a style by applying it to an element and inspecting that
// element.  Edge-related properties are reliably derivable this way, cssText is known not
// available, other properties would need testing.

_deriveStyleProperties : function (className, mask) {
    
    var requiresDivTester = (isc.Browser.isIE || isc.Browser.isOpera || isc.Browser.isSafari
                                || (isc.Browser.isMoz && isc.Browser.geckoVersion >=20080205));
    if (!this._cellStyleTester) {
        
        this.createAbsoluteElement(
            "<TABLE CELLPADDING=81 STYLE='position:absolute;left:0px;top:-300px;'><TR><TD " +
            
            //(isc.Browser.isSafari ? "style='position:absolute;left:0px;top:0px;' " : "") +
            " ID=isc_cellStyleTester>&nbsp;</TD></TR></TABLE>"                
        );
        this._cellStyleTester = isc.Element.get("isc_cellStyleTester");
        this._$81px = "81px";                                 
        this._$16384px = "-16384px";       
        
        

        if (requiresDivTester) {
            this.createAbsoluteElement(
                "<DIV ID=isc_styleTester STYLE='position:absolute;left:0px;top:-100px;'>&nbsp;</DIV>"
            );
            this._styleTester = isc.Element.get("isc_styleTester");
            this._marginMask = ["marginLeft", "marginTop", "marginRight", "marginBottom"];
        }
    }
        
    this._cellStyleTester.className = className;
    var style = this.getComputedStyle(this._cellStyleTester, mask);

    //this.logWarn(className + " style is: " + this.echo(style));

    // test for unset padding 
    var nullIndicator = this._$81px;
    if (style.paddingLeft == nullIndicator) style.paddingLeft = null;
    if (style.paddingTop == nullIndicator) style.paddingTop = null;
    if (style.paddingRight == nullIndicator) style.paddingRight = null;
    if (style.paddingBottom == nullIndicator) style.paddingBottom = null;

    if (isc.Browser.isSafari) {
        // older Safari versions report unset padding as "auto" instead of reporting the
        // cellPadding
        if (isc.Browser.safariVersion < 419.3) {
            nullIndicator = isc.Canvas.AUTO;
            if (style.paddingLeft == nullIndicator) style.paddingLeft = null;
            if (style.paddingTop == nullIndicator) style.paddingTop = null;
            if (style.paddingRight == nullIndicator) style.paddingRight = null;
            if (style.paddingBottom == nullIndicator) style.paddingBottom = null;
        }

        // serious bug introduced in Safari 419.3 / 2.0.4, aka Tiger update 10.4.7: unset
        // marginTop/Bottom on cells reported as "-16384px".  Chimp factor 9.89
        nullIndicator = this._$16384px;        
        if (style.marginTop == nullIndicator) style.marginTop = null;
        if (style.marginBottom == nullIndicator) style.marginBottom = null;
    }


    
    if (requiresDivTester) {
        this._styleTester.className = className;
        var results = this.getComputedStyle(this._styleTester, this._marginMask);
        style.marginLeft = results.marginLeft;
        style.marginRight = results.marginRight;
        style.marginTop = results.marginTop;
        style.marginBottom = results.marginBottom;
    }
    return style;

},

//> @classMethod Element.getComputedStyle()
//  Returns an object containing the current (computed) style for a DOM element.  This object 
//  includes all the attributes set directly on the element's style property, and those inherited
//  from the element's CSS class.
//  @param  ID  (string | object)   element, or ID of the element
//  @param  mask    (array)         list of propertyNames to include in the returned object
//  @return (object)    object containing computed style attributes.
//<
getComputedStyle : function (ID, mask) {
    
    var element, style, styleInfo;
    
    if (isc.isA.String(ID)) {
        element = isc.Element.get(ID);
    } else {
        // Otherwise just assume the DOM element was passed in directly
        element = ID;
    }

    if (element == null || !isc.isAn.Object(element)) {
        //>DEBUG
        this.logWarn("getComputedStyle: Unable to get to DOM element specified by '" + ID + "'." + this.getStackTrace());
        //<DEBUG
        return null;
    }
    
    if (isc.Browser.isIE || isc.Browser.isOpera) {
        
        style = element.currentStyle;
        // NOTE: use Array form of mask, faster with applyMask
        if (mask == null) mask = this._styleFullMaskArray;
        var results = isc.applyMask(style, mask);
        return results;
    } 

    // prepare a mask from camelCaps property to CSS dashed-property-name, because we want to
    // return camelCaps'd values but native getPropertyValue() uses dashed versions
    if (mask == null) { 
        // retrieve all properties
        mask = this._styleFullMask;
    } else if (isc.isAn.Array(mask)) {
        // if we have an explicit list of properties to retrieve, build a mask of camelCaps
        // name to CSS standard name (dash-separated) for just the desired properties.
        var obj = {},
            fullMask = this._styleFullMask;
        for (var i = 0; i < mask.length; i++) {
            obj[mask[i]] = fullMask[mask[i]];
        }
        mask = obj;
    }
    
    
    var safariPre13 = isc.Browser.isSafari && isc.Browser.safariVersion < 312,
        classStyleObject;
    if (safariPre13) {
        style = element.style;
        classStyleObject = this.getStyleDeclaration(element.className);
    } else {
        style = document.defaultView.getComputedStyle(element, null);
    }

    styleInfo = {};
    for (var property in mask) {
        styleInfo[property] = style.getPropertyValue(mask[property]);
            
        if (safariPre13 && styleInfo[property] == null && 
            classStyleObject != null && classStyleObject[property] != null && 
            !isc.isAn.emptyString(classStyleObject[property])) 
        { 
            
            styleInfo[property] = classStyleObject[property];
        }
    }
     
    //this.logWarn("styleInfo for style: " + className + " is: " + this.echo(styleInfo));
    return styleInfo;
    
},

// return an individual attribute from the computed style.  Quicker than getting the full set
// of properties if you need only one.

_$operaBorderStyles:{
    border:"borderStyle", 
    borderWidth:"borderStyle", 
    borderLeft:"borderLeftStyle", 
    borderRight:"borderRightStyle", 
    borderTop:"borderTopStyle",