add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / layout / wrapper / BoxDock.js

/**\r
 *\r
 */\r
Ext.define('Ext.layout.wrapper.BoxDock', {\r
    config: {\r
        direction: 'horizontal',\r
        element: {\r
            className: Ext.baseCSSPrefix + 'dock'\r
        },\r
        bodyElement: {\r
            className: Ext.baseCSSPrefix + 'dock-body'\r
        },\r
        innerWrapper: null,\r
        sizeState: false,\r
        container: null\r
    },\r
\r
    positionMap: {\r
        top: 'start',\r
        left: 'start',\r
        bottom: 'end',\r
        right: 'end'\r
    },\r
\r
    constructor: function(config) {\r
        this.items = {\r
            start: [],\r
            end: []\r
        };\r
\r
        this.itemsCount = 0;\r
\r
        this.initConfig(config);\r
    },\r
\r
    addItems: function(items) {\r
        var i, ln, item;\r
\r
        for (i = 0, ln = items.length; i < ln; i++) {\r
            item = items[i];\r
            this.addItem(item);\r
        }\r
    },\r
\r
    addItem: function(item) {\r
        var docked = item.getDocked(),\r
            position = this.positionMap[docked],\r
            wrapper = item.$dockWrapper,\r
            container = this.getContainer(),\r
            index = container.indexOf(item),\r
            element = item.element,\r
            items = this.items,\r
            sideItems = items[position],\r
            i, ln, sibling, referenceElement, siblingIndex;\r
\r
        if (wrapper) {\r
            wrapper.removeItem(item);\r
        }\r
\r
        item.$dockWrapper = this;\r
        item.addCls(Ext.baseCSSPrefix + 'dock-item');\r
        item.addCls(Ext.baseCSSPrefix + 'docked-' + docked);\r
\r
        for (i = 0, ln = sideItems.length; i < ln; i++) {\r
            sibling = sideItems[i];\r
            siblingIndex = container.indexOf(sibling);\r
\r
            if (siblingIndex > index) {\r
                referenceElement = sibling.element;\r
                sideItems.splice(i, 0, item);\r
                break;\r
            }\r
        }\r
\r
        if (!referenceElement) {\r
            sideItems.push(item);\r
            referenceElement = this.getBodyElement();\r
        }\r
\r
        this.itemsCount++;\r
\r
        if (position === 'start') {\r
            element.insertBefore(referenceElement);\r
        }\r
        else {\r
            element.insertAfter(referenceElement);\r
        }\r
    },\r
\r
    removeItem: function(item) {\r
        var position = item.getDocked(),\r
            items = this.items[this.positionMap[position]];\r
\r
        Ext.Array.remove(items, item);\r
        item.element.detach();\r
        delete item.$dockWrapper;\r
        item.removeCls(Ext.baseCSSPrefix + 'dock-item');\r
        item.removeCls(Ext.baseCSSPrefix + 'docked-' + position);\r
\r
        if (--this.itemsCount === 0) {\r
            this.destroy();\r
        }\r
    },\r
\r
    getItemsSlice: function(index) {\r
        var container = this.getContainer(),\r
            items = this.items,\r
            slice = [],\r
            sideItems, i, ln, item;\r
\r
        for (sideItems = items.start, i = 0, ln = sideItems.length; i < ln; i++) {\r
            item = sideItems[i];\r
            if (container.indexOf(item) > index) {\r
                slice.push(item);\r
            }\r
        }\r
\r
        for (sideItems = items.end, i = 0, ln = sideItems.length; i < ln; i++) {\r
            item = sideItems[i];\r
            if (container.indexOf(item) > index) {\r
                slice.push(item);\r
            }\r
        }\r
\r
        return slice;\r
    },\r
\r
    applyElement: function(element) {\r
        return Ext.Element.create(element);\r
    },\r
\r
    updateElement: function(element) {\r
        element.addCls(Ext.baseCSSPrefix + 'dock-' + this.getDirection());\r
    },\r
\r
    applyBodyElement: function(bodyElement) {\r
        return Ext.Element.create(bodyElement);\r
    },\r
\r
    updateBodyElement: function(bodyElement) {\r
        this.getElement().append(bodyElement);\r
    },\r
\r
    updateInnerWrapper: function(innerWrapper, oldInnerWrapper) {\r
        var bodyElement = this.getBodyElement();\r
\r
        if (oldInnerWrapper && oldInnerWrapper.$outerWrapper === this) {\r
            oldInnerWrapper.getElement().detach();\r
            delete oldInnerWrapper.$outerWrapper;\r
        }\r
\r
        if (innerWrapper) {\r
            innerWrapper.setSizeState(this.getSizeState());\r
            innerWrapper.$outerWrapper = this;\r
            bodyElement.append(innerWrapper.getElement());\r
        }\r
    },\r
\r
    updateSizeState: function(state) {\r
        var innerWrapper = this.getInnerWrapper();\r
\r
        this.getElement().setSizeState(state);\r
\r
        if (innerWrapper) {\r
            innerWrapper.setSizeState(state);\r
        }\r
    },\r
\r
    destroy: function() {\r
        var me = this,\r
            innerWrapper = me.getInnerWrapper(),\r
            outerWrapper = me.$outerWrapper,\r
            innerWrapperElement;\r
\r
        if (innerWrapper) {\r
            if (outerWrapper) {\r
                outerWrapper.setInnerWrapper(innerWrapper);\r
            } else {\r
                innerWrapperElement = innerWrapper.getElement();\r
                if (!innerWrapperElement.destroyed) {\r
                    innerWrapperElement.replace(me.getElement());\r
                }\r
                delete innerWrapper.$outerWrapper;\r
            }\r
        }\r
\r
        delete me.$outerWrapper;\r
\r
        me.setInnerWrapper(null);\r
\r
        me.unlink(['_bodyElement', '_element']);\r
\r
        me.callParent();\r
    }\r
});\r