add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / rtl / Component.js

/**\r
 * This override adds RTL support and the `rtl` config option to AbstactComponent.\r
 */\r
Ext.define('Ext.rtl.Component', {\r
    override: 'Ext.Component',\r
\r
    /**\r
     * @cfg {Boolean} rtl\r
     * True to layout this component and its descendants in "rtl" (right-to-left) mode.\r
     * Can be explicitly set to false to override a true value inherited from an ancestor.\r
     */\r
\r
    applyScrollable: function(scrollable, oldScrollable) {\r
        var ret = this.callParent([scrollable, oldScrollable]);\r
\r
        if (ret && this.getInherited().rtl) {\r
            ret.setRtl(true);\r
        }\r
\r
        return ret;\r
    },\r
\r
    convertPositionSpec: function(posSpec) {\r
        // Since anchoring is done based on page level coordinates, we need to invert\r
        // left and right in the position spec when the direction of the compoent being\r
        // aligned is not the same as the direction of the viewport/body\r
        if ((Ext.rootInheritedState.rtl || false) !== (this.getInherited().rtl || false)) {\r
            posSpec = posSpec.replace(/l/g, 'tmp').replace(/r/g, 'l').replace(/tmp/g, 'r');\r
        }\r
        return posSpec;\r
    },\r
\r
    getAnchorToXY: function(el, anchor, local, mySize) {\r
        var doc = document,\r
            pos, scroll, extraX, extraY;\r
\r
        if (el.dom === doc.body || el.dom === doc) {\r
            // anchor the element using the same coordinate system as the viewport or body\r
            scroll = Ext.rootInheritedState.rtl ? el.rtlGetScroll() : el.getScroll();\r
            extraX = scroll.left;\r
            extraY = scroll.top;\r
        } else {\r
            pos = el.getXY();\r
            extraX = local ? 0 : pos[0];\r
            extraY = local ? 0 : pos[1];\r
        }\r
\r
        return el.calculateAnchorXY(anchor, extraX, extraY, mySize);\r
    },\r
\r
    getBorderPadding: function() {\r
        var borderPadding = this.el.getBorderPadding(),\r
            xBegin;\r
                \r
        if (this.isParentRtl()) {\r
            xBegin = borderPadding.xBegin;\r
            borderPadding.xBegin = borderPadding.xEnd;\r
            borderPadding.xEnd = xBegin;\r
        }\r
\r
        return borderPadding;\r
    },\r
\r
    getLocalX: function() {\r
        return this.isLocalRtl() ? this.el.rtlGetLocalX() : this.el.getLocalX();\r
    },\r
\r
    getLocalXY: function() {\r
        return this.isLocalRtl() ? this.el.rtlGetLocalXY() : this.el.getLocalXY();\r
    },\r
    \r
    unitizeBox: function(box) {\r
        if (this.getInherited().rtl) {\r
            return Ext.dom.Element.rtlUnitizeBox(box); \r
        } else {\r
            return this.callParent(arguments);\r
        } \r
    },\r
\r
    initInheritedState: function (inheritedState) {\r
        this.callParent(arguments);\r
\r
        var rtl = this.rtl;\r
\r
        if (rtl !== undefined) {\r
            // unlike the other hierarchical properties which should always\r
            // be inherited from the hierarchy unless true, rtl should only\r
            // be inherited if undefined, that is if this component instance\r
            // does not have rtl specified as true or false.\r
            inheritedState.rtl = rtl;\r
        }\r
    },\r
\r
    /**\r
     * Returns true if this component's local coordinate system is rtl. For normal\r
     * components this equates to the value of isParentRtl().  Floaters are a bit different\r
     * because a floater's element can be a childNode of something other than its\r
     * parent component's element.  For floaters we have to read the dom to see if the\r
     * component's element's parentNode has a css direction value of "rtl".\r
     * @return {Boolean}\r
     * @private\r
     */\r
    isLocalRtl: function() {\r
        var me = this,\r
            rtl, offsetParent;\r
\r
        if (me.floating) {\r
            if (me._isOffsetParentRtl === undefined) {\r
                \r
                // position:fixed elements do not report an offsetParent, so fall back to parentNode\r
                offsetParent = this.el.dom.offsetParent || this.el.dom.parentNode;\r
                if (offsetParent) {\r
                    me._isOffsetParentRtl =\r
                        Ext.fly(offsetParent, '_isLocalRtl').isStyle('direction', 'rtl');\r
                }\r
            }\r
            rtl = !!me._isOffsetParentRtl;\r
        } else {\r
            rtl = this.isParentRtl();\r
        }\r
\r
        return rtl;\r
    },\r
\r
    /**\r
     * Returns true if this component's parent container is rtl. Used by rtl positioning\r
     * methods to determine if the component should be positioned using a right-to-left\r
     * coordinate system.\r
     * @return {Boolean}\r
     * @private\r
     */\r
    isParentRtl: function() {\r
        var me = this,\r
            inheritedState = me.getInherited(),\r
            isRtl = false,\r
            myRtl;\r
\r
        if (inheritedState.hasOwnProperty('rtl')) {\r
            // Temporarily remove this component's rtl property so we can see what the rtl\r
            // value is on the prototype.  A component is only rtl positioned if it is\r
            // inside of an rtl coordinate system (if one of it's ancestors is rtl). We\r
            // can't just use ownerCt/floatParent inheritedState, because components may\r
            // not have a container, but might still be part of a rtl coordinate system by\r
            // virtue of the Viewport. These components will inherit the correct rtl\r
            // value from the prototype because all hierarchy states inherit from\r
            // Ext.rootInheritedState\r
            myRtl = inheritedState.rtl;\r
            delete inheritedState.rtl;\r
        }\r
\r
        if (inheritedState.rtl) {\r
            isRtl = true;\r
        }\r
\r
        if (myRtl !== undefined) {\r
            // restore this component's original inheritedState rtl property\r
            inheritedState.rtl = myRtl;\r
        }\r
\r
        return isRtl;\r
    },\r
\r
    setLocalX: function(x) {\r
        return this.isLocalRtl() ? this.el.rtlSetLocalX(x) : this.el.setLocalX(x);\r
    },\r
\r
    setLocalXY: function(x, y) {\r
        return this.isLocalRtl() ? this.el.rtlSetLocalXY(x, y) : this.el.setLocalXY(x, y);\r
    },\r
    \r
    isOppositeRootDirection: function(){\r
        return !this.getInherited().rtl !== !Ext.rootInheritedState.rtl; // jshint ignore:line\r
    },\r
\r
    privates: {\r
        initStyles: function(){\r
            if (this.getInherited().rtl) {\r
                this.horizontalPosProp = 'right';\r
            }\r
            this.callParent(arguments);\r
        },\r
\r
        parseBox: function(box) {\r
            if (this.getInherited().rtl) {\r
                return Ext.dom.Element.rtlParseBox(box);\r
            } else {\r
                return this.callParent(arguments);\r
            }\r
        }\r
    }\r
}, function() {\r
    Ext.onInternalReady(function() {\r
        // If the document or body has "direction:rtl" then we set the rtl flag in the\r
        // root hierarchy state so that the page-level coordinate system will be\r
        // right-based (similar to using a Viewport with "rtl: true").\r
        if ((Ext.fly(document.documentElement).isStyle('direction', 'rtl')) ||\r
            (Ext.getBody().isStyle('direction', 'rtl'))) {\r
            Ext.rootInheritedState.rtl = true;\r
        }\r
    });\r
});\r
\r