Rambox-CE/ext/src/rtl/Component.js

/**
 * This override adds RTL support and the `rtl` config option to AbstactComponent.
 */
Ext.define('Ext.rtl.Component', {
    override: 'Ext.Component',

    /**
     * @cfg {Boolean} rtl
     * True to layout this component and its descendants in "rtl" (right-to-left) mode.
     * Can be explicitly set to false to override a true value inherited from an ancestor.
     */

    applyScrollable: function(scrollable, oldScrollable) {
        var ret = this.callParent([scrollable, oldScrollable]);

        if (ret && this.getInherited().rtl) {
            ret.setRtl(true);
        }

        return ret;
    },

    convertPositionSpec: function(posSpec) {
        // Since anchoring is done based on page level coordinates, we need to invert
        // left and right in the position spec when the direction of the compoent being
        // aligned is not the same as the direction of the viewport/body
        if ((Ext.rootInheritedState.rtl || false) !== (this.getInherited().rtl || false)) {
            posSpec = posSpec.replace(/l/g, 'tmp').replace(/r/g, 'l').replace(/tmp/g, 'r');
        }
        return posSpec;
    },

    getAnchorToXY: function(el, anchor, local, mySize) {
        var doc = document,
            pos, scroll, extraX, extraY;

        if (el.dom === doc.body || el.dom === doc) {
            // anchor the element using the same coordinate system as the viewport or body
            scroll = Ext.rootInheritedState.rtl ? el.rtlGetScroll() : el.getScroll();
            extraX = scroll.left;
            extraY = scroll.top;
        } else {
            pos = el.getXY();
            extraX = local ? 0 : pos[0];
            extraY = local ? 0 : pos[1];
        }

        return el.calculateAnchorXY(anchor, extraX, extraY, mySize);
    },

    getBorderPadding: function() {
        var borderPadding = this.el.getBorderPadding(),
            xBegin;
                
        if (this.isParentRtl()) {
            xBegin = borderPadding.xBegin;
            borderPadding.xBegin = borderPadding.xEnd;
            borderPadding.xEnd = xBegin;
        }

        return borderPadding;
    },

    getLocalX: function() {
        return this.isLocalRtl() ? this.el.rtlGetLocalX() : this.el.getLocalX();
    },

    getLocalXY: function() {
        return this.isLocalRtl() ? this.el.rtlGetLocalXY() : this.el.getLocalXY();
    },
    
    unitizeBox: function(box) {
        if (this.getInherited().rtl) {
            return Ext.dom.Element.rtlUnitizeBox(box); 
        } else {
            return this.callParent(arguments);
        } 
    },

    initInheritedState: function (inheritedState) {
        this.callParent(arguments);

        var rtl = this.rtl;

        if (rtl !== undefined) {
            // unlike the other hierarchical properties which should always
            // be inherited from the hierarchy unless true, rtl should only
            // be inherited if undefined, that is if this component instance
            // does not have rtl specified as true or false.
            inheritedState.rtl = rtl;
        }
    },

    /**
     * Returns true if this component's local coordinate system is rtl. For normal
     * components this equates to the value of isParentRtl().  Floaters are a bit different
     * because a floater's element can be a childNode of something other than its
     * parent component's element.  For floaters we have to read the dom to see if the
     * component's element's parentNode has a css direction value of "rtl".
     * @return {Boolean}
     * @private
     */
    isLocalRtl: function() {
        var me = this,
            rtl, offsetParent;

        if (me.floating) {
            if (me._isOffsetParentRtl === undefined) {
                
                // position:fixed elements do not report an offsetParent, so fall back to parentNode
                offsetParent = this.el.dom.offsetParent || this.el.dom.parentNode;
                if (offsetParent) {
                    me._isOffsetParentRtl =
                        Ext.fly(offsetParent, '_isLocalRtl').isStyle('direction', 'rtl');
                }
            }
            rtl = !!me._isOffsetParentRtl;
        } else {
            rtl = this.isParentRtl();
        }

        return rtl;
    },

    /**
     * Returns true if this component's parent container is rtl. Used by rtl positioning
     * methods to determine if the component should be positioned using a right-to-left
     * coordinate system.
     * @return {Boolean}
     * @private
     */
    isParentRtl: function() {
        var me = this,
            inheritedState = me.getInherited(),
            isRtl = false,
            myRtl;

        if (inheritedState.hasOwnProperty('rtl')) {
            // Temporarily remove this component's rtl property so we can see what the rtl
            // value is on the prototype.  A component is only rtl positioned if it is
            // inside of an rtl coordinate system (if one of it's ancestors is rtl). We
            // can't just use ownerCt/floatParent inheritedState, because components may
            // not have a container, but might still be part of a rtl coordinate system by
            // virtue of the Viewport. These components will inherit the correct rtl
            // value from the prototype because all hierarchy states inherit from
            // Ext.rootInheritedState
            myRtl = inheritedState.rtl;
            delete inheritedState.rtl;
        }

        if (inheritedState.rtl) {
            isRtl = true;
        }

        if (myRtl !== undefined) {
            // restore this component's original inheritedState rtl property
            inheritedState.rtl = myRtl;
        }

        return isRtl;
    },

    setLocalX: function(x) {
        return this.isLocalRtl() ? this.el.rtlSetLocalX(x) : this.el.setLocalX(x);
    },

    setLocalXY: function(x, y) {
        return this.isLocalRtl() ? this.el.rtlSetLocalXY(x, y) : this.el.setLocalXY(x, y);
    },
    
    isOppositeRootDirection: function(){
        return !this.getInherited().rtl !== !Ext.rootInheritedState.rtl; // jshint ignore:line
    },

    privates: {
        initStyles: function(){
            if (this.getInherited().rtl) {
                this.horizontalPosProp = 'right';
            }
            this.callParent(arguments);
        },

        parseBox: function(box) {
            if (this.getInherited().rtl) {
                return Ext.dom.Element.rtlParseBox(box);
            } else {
                return this.callParent(arguments);
            }
        }
    }
}, function() {
    Ext.onInternalReady(function() {
        // If the document or body has "direction:rtl" then we set the rtl flag in the
        // root hierarchy state so that the page-level coordinate system will be
        // right-based (similar to using a Viewport with "rtl: true").
        if ((Ext.fly(document.documentElement).isStyle('direction', 'rtl')) ||
            (Ext.getBody().isStyle('direction', 'rtl'))) {
            Ext.rootInheritedState.rtl = true;
        }
    });
});