add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / grid / header / DropZone.js

/**\r
 * @private\r
 */\r
Ext.define('Ext.grid.header.DropZone', {\r
    extend: 'Ext.dd.DropZone',\r
    colHeaderCls: Ext.baseCSSPrefix + 'column-header',\r
    proxyOffsets: [-4, -9],\r
\r
    constructor: function(headerCt) {\r
        var me = this;\r
\r
        me.headerCt = headerCt;\r
        me.ddGroup = me.getDDGroup();\r
        me.autoGroup = true;\r
        me.callParent([headerCt.el]);\r
    },\r
\r
    destroy: function () {\r
        this.callParent();\r
        Ext.destroy(this.topIndicator, this.bottomIndicator);\r
    },\r
\r
    getDDGroup: function() {\r
        return 'header-dd-zone-' + this.headerCt.up('[scrollerOwner]').id;\r
    },\r
\r
    getTargetFromEvent : function(e){\r
        return e.getTarget('.' + this.colHeaderCls);\r
    },\r
\r
    getTopIndicator: function() {\r
        if (!this.topIndicator) {\r
            this.topIndicator = Ext.getBody().createChild({\r
                role: 'presentation',\r
                cls: Ext.baseCSSPrefix + "col-move-top",\r
                //<debug>\r
                // tell the spec runner to ignore this element when checking if the dom is clean\r
                "data-sticky": true,\r
                //</debug>\r
                html: "&#160;"\r
            });\r
            this.indicatorXOffset = Math.floor((this.topIndicator.dom.offsetWidth + 1) / 2);\r
        }\r
        return this.topIndicator;\r
    },\r
\r
    getBottomIndicator: function() {\r
        if (!this.bottomIndicator) {\r
            this.bottomIndicator = Ext.getBody().createChild({\r
                role: 'presentation',\r
                cls: Ext.baseCSSPrefix + "col-move-bottom",\r
                //<debug>\r
                // tell the spec runner to ignore this element when checking if the dom is clean\r
                "data-sticky": true,\r
                //</debug>\r
                html: "&#160;"\r
            });\r
        }\r
        return this.bottomIndicator;\r
    },\r
\r
    getLocation: function(e, t) {\r
        var x      = e.getXY()[0],\r
            region = Ext.fly(t).getRegion(),\r
            pos;\r
\r
        if ((region.right - x) <= (region.right - region.left) / 2) {\r
            pos = "after";\r
        } else {\r
            pos = "before";\r
        }\r
        return {\r
            pos: pos,\r
            header: Ext.getCmp(t.id),\r
            node: t\r
        };\r
    },\r
\r
    positionIndicator: function(data, node, e){\r
        var me = this,\r
            dragHeader   = data.header,\r
            dropLocation = me.getLocation(e, node),\r
            targetHeader = dropLocation.header,\r
            pos          = dropLocation.pos,\r
            nextHd,\r
            prevHd,\r
            topIndicator, bottomIndicator, topAnchor, bottomAnchor,\r
            topXY, bottomXY, headerCtEl, minX, maxX,\r
            allDropZones, ln, i, dropZone;\r
\r
        // Avoid expensive CQ lookups and DOM calculations if dropPosition has not changed\r
        if (targetHeader === me.lastTargetHeader && pos === me.lastDropPos) {\r
            return;\r
        }\r
        nextHd       = dragHeader.nextSibling('gridcolumn:not([hidden])');\r
        prevHd       = dragHeader.previousSibling('gridcolumn:not([hidden])');\r
        me.lastTargetHeader = targetHeader;\r
        me.lastDropPos = pos;\r
\r
        // Cannot drag to before non-draggable start column\r
        if (!targetHeader.draggable && pos === 'before' && targetHeader.getIndex() === 0) {\r
            return false;\r
        }\r
\r
        data.dropLocation = dropLocation;\r
\r
        if ((dragHeader !== targetHeader) &&\r
            ((pos === "before" && nextHd !== targetHeader) ||\r
            (pos === "after" && prevHd !== targetHeader)) &&\r
            !targetHeader.isDescendantOf(dragHeader)) {\r
\r
            // As we move in between different DropZones that are in the same\r
            // group (such as the case when in a locked grid), invalidateDrop\r
            // on the other dropZones.\r
            allDropZones = Ext.dd.DragDropManager.getRelated(me);\r
            ln = allDropZones.length;\r
            i  = 0;\r
\r
            for (; i < ln; i++) {\r
                dropZone = allDropZones[i];\r
                if (dropZone !== me && dropZone.invalidateDrop) {\r
                    dropZone.invalidateDrop();\r
                }\r
            }\r
\r
            me.valid = true;\r
            topIndicator = me.getTopIndicator();\r
            bottomIndicator = me.getBottomIndicator();\r
            if (pos === 'before') {\r
                topAnchor = 'bc-tl';\r
                bottomAnchor = 'tc-bl';\r
            } else {\r
                topAnchor = 'bc-tr';\r
                bottomAnchor = 'tc-br';\r
            }\r
\r
            // Calculate arrow positions. Offset them to align exactly with column border line\r
            topXY = topIndicator.getAlignToXY(targetHeader.el, topAnchor);\r
            bottomXY = bottomIndicator.getAlignToXY(targetHeader.el, bottomAnchor);\r
\r
            // constrain the indicators to the viewable section\r
            headerCtEl = me.headerCt.el;\r
            minX = headerCtEl.getX() - me.indicatorXOffset;\r
            maxX = headerCtEl.getX() + headerCtEl.getWidth();\r
\r
            topXY[0] = Ext.Number.constrain(topXY[0], minX, maxX);\r
            bottomXY[0] = Ext.Number.constrain(bottomXY[0], minX, maxX);\r
\r
            // position and show indicators\r
            topIndicator.setXY(topXY);\r
            bottomIndicator.setXY(bottomXY);\r
            topIndicator.show();\r
            bottomIndicator.show();\r
\r
        // invalidate drop operation and hide indicators\r
        } else {\r
            me.invalidateDrop();\r
        }\r
    },\r
\r
    invalidateDrop: function() {\r
        this.valid = false;\r
        this.hideIndicators();\r
    },\r
\r
    onNodeOver: function(node, dragZone, e, data) {\r
        var me = this,\r
            from = data.header,\r
            doPosition,\r
            to,\r
            fromPanel,\r
            toPanel;\r
\r
        if (data.header.el.dom === node) {\r
            doPosition = false;\r
        } else {\r
            data.isLock = data.isUnlock = data.crossPanel = false;\r
            to = me.getLocation(e, node).header;\r
\r
            // Dragging within the same container - always valid\r
            doPosition = (from.ownerCt === to.ownerCt);\r
\r
            // If from different containers, and they are not sealed, then continue checking\r
            if (!doPosition && (!from.ownerCt.sealed && !to.ownerCt.sealed)) {\r
\r
                doPosition = true;\r
                fromPanel = from.up('tablepanel');\r
                toPanel = to.up('tablepanel');\r
                if (fromPanel !== toPanel) {\r
                    data.crossPanel = true;\r
\r
                    // If it's a lock operation, check that it's allowable.\r
                    data.isLock   = toPanel.isLocked && !fromPanel.isLocked;\r
                    data.isUnlock = !toPanel.isLocked && fromPanel.isLocked;\r
                    if ((data.isUnlock && from.lockable === false) || (data.isLock && !from.isLockable())) {\r
                        doPosition = false;\r
                    }\r
                }\r
            }\r
        }\r
\r
        if (doPosition) {\r
            me.positionIndicator(data, node, e);\r
        } else {\r
            me.valid = false;\r
        }\r
        return me.valid ? me.dropAllowed : me.dropNotAllowed;\r
    },\r
\r
    hideIndicators: function() {\r
        var me = this;\r
\r
        me.getTopIndicator().hide();\r
        me.getBottomIndicator().hide();\r
        me.lastTargetHeader = me.lastDropPos = null;\r
    },\r
\r
    onNodeOut: function() {\r
        this.hideIndicators();\r
    },\r
\r
    /**\r
     * @private\r
     * Used to determine the move position for the view's data columns for nested headers at any level.\r
     */\r
    getNestedHeader: function (header, first) {\r
        var items = header.items,\r
            pos;\r
\r
        if (header.isGroupHeader && items.length) {\r
            pos = !first ? 'first' : 'last';\r
            header = this.getNestedHeader(items[pos](), first);\r
        }\r
\r
        return header;\r
    },\r
\r
    onNodeDrop: function(node, dragZone, e, data) {\r
        // Do not process the upcoming click after this mouseup. It's not a click gesture\r
        this.headerCt.blockNextEvent();\r
\r
        // Note that dropLocation.pos refers to whether the header is dropped before or after the target node!\r
        if (!this.valid) {\r
            return;\r
        }\r
        \r
        var me = this,\r
            dragHeader = data.header,\r
            dropLocation = data.dropLocation,\r
            dropPosition = dropLocation.pos,\r
            targetHeader = dropLocation.header,\r
            fromCt = dragHeader.ownerCt,\r
            fromCtRoot =  fromCt.getRootHeaderCt(),\r
            toCt = targetHeader.ownerCt,\r
            // Use the full column manager here, the indices we want are for moving the actual items in the container.\r
            // The HeaderContainer translates this to visible columns for informing the view and firing events.\r
            visibleColumnManager = me.headerCt.visibleColumnManager,\r
            visibleFromIdx = visibleColumnManager.getHeaderIndex(dragHeader),\r
            visibleToIdx, colsToMove, moveMethod, scrollerOwner, savedWidth;\r
\r
        // If we are dragging in between two HeaderContainers that have had the lockable mixin injected we will lock/unlock\r
        // headers in between sections, and then continue with another execution of onNodeDrop to ensure the header is\r
        // dropped into the correct group.\r
        if (data.isLock || data.isUnlock) {\r
            scrollerOwner = fromCt.up('[scrollerOwner]');\r
            visibleToIdx = toCt.items.indexOf(targetHeader);\r
\r
            if (dropPosition === 'after') {\r
                visibleToIdx++;\r
            }\r
\r
            if (data.isLock) {\r
                scrollerOwner.lock(dragHeader, visibleToIdx, toCt);\r
            } else {\r
                scrollerOwner.unlock(dragHeader, visibleToIdx, toCt);\r
            }\r
        }\r
        // This is a drop within the same HeaderContainer.\r
        else {\r
            // For the after position, we need to update the visibleToIdx index. In case it's nested in one or more\r
            // grouped headers, we need to get the last header (or the first, depending on the dropPosition) in the\r
            // items collection for the most deeply-nested header, whether it be first or last in the collection.\r
            // This will yield the header index in the visibleColumnManager, which will correctly maintain a list\r
            // of all the headers.\r
            visibleToIdx = dropPosition === 'after' ?\r
                // Get the last header in the most deeply-nested header group and add one.\r
                visibleColumnManager.getHeaderIndex(me.getNestedHeader(targetHeader, 1)) + 1 :\r
                // Get the first header in the most deeply-nested header group.\r
                visibleColumnManager.getHeaderIndex(me.getNestedHeader(targetHeader, 0));\r
\r
            me.invalidateDrop();\r
            // Cache the width here, we need to get it before we removed it from the DOM\r
            savedWidth = dragHeader.getWidth();\r
\r
            // Suspend layouts while we sort all this out.\r
            Ext.suspendLayouts();\r
\r
            // When removing and then adding, the owning gridpanel will be informed of column mutation twice\r
            // Both remove and add handling inform the owning grid.\r
            // The isDDMoveInGrid flag will prevent the remove operation from doing this.\r
            // See Ext.grid.header.Container#onRemove.\r
            fromCt.isDDMoveInGrid = toCt.isDDMoveInGrid = !data.crossPanel;\r
\r
            // ***Move the headers***\r
            //\r
            // If both drag and target headers are groupHeaders, we have to check and see if they are nested, i.e.,\r
            // there are multiple stacked group headers with only subheaders at the lowest level:\r
            //\r
            //           +-----------------------------------+\r
            //           |               Group 1             |\r
            //           |-----------------------------------|\r
            //           |               Group 2             |\r
            //   other   |-----------------------------------|   other\r
            //  headers  |               Group 3             |  headers\r
            //           |-----------------------------------|\r
            //           | Field3 | Field4 | Field5 | Field6 |\r
            //           |===================================|\r
            //           |               view                |\r
            //           +-----------------------------------+\r
            //\r
            // In these cases, we need to mark the groupHeader that is the ownerCt of the targetHeader and then only\r
            // remove the headers up until that (removal of headers is recursive and assumes that any header with no\r
            // children can be safely removed, which is not a safe assumption).\r
            // See Ext.grid.header.Container#onRemove.\r
            if (dragHeader.isGroupHeader && targetHeader.isGroupHeader) {\r
                dragHeader.setNestedParent(targetHeader);\r
            }\r
\r
            // We only need to be concerned with moving the dragHeader component before or after the targetHeader\r
            // component rather than trying to pass indices, which is too ambiguous and could refer to any\r
            // collection at any level of (grouped) header containers.\r
            if (dropPosition === 'before') {\r
                targetHeader.insertNestedHeader(dragHeader);\r
            } else {\r
                // Capitalize the first letter. This will call either ct.moveAfter() or ct.moveBefore().\r
                moveMethod = 'move' + dropPosition.charAt(0).toUpperCase() + dropPosition.substr(1);\r
                toCt[moveMethod](dragHeader, targetHeader);\r
            }\r
\r
            // ***Move the view data columns***\r
            // Refresh the view if it's not the last header in a group. If it is the last header, we don't need\r
            // to refresh the view as the headers and the corrresponding data columns will already be correctly\r
            // aligned (think of the group header sitting directly atop the last header in the group).\r
            // Also, it's not necessary to refresh the view if the indices are the same.\r
            // NOTE that targetHeader can be destroyed by this point if it was a group header\r
            // and we just dragged the last column out of it; in that case header's items collection\r
            // will be nulled.\r
            if (visibleToIdx >= 0 && \r
                !(targetHeader.isGroupHeader && (!targetHeader.items || !targetHeader.items.length)) &&\r
                visibleFromIdx !== visibleToIdx)\r
            {\r
                colsToMove = dragHeader.isGroupHeader ?\r
                    dragHeader.query(':not([hidden]):not([isGroupHeader])').length :\r
                    1;\r
\r
                // We need to adjust the visibleToIdx when both of the following conditions are met:\r
                //   1. The drag is forward, i.e., the dragHeader is being dragged to the right.\r
                //   2. There is more than one column being dragged, i.e., an entire group.\r
                if ((visibleFromIdx <= visibleToIdx) && colsToMove > 1) {\r
                    visibleToIdx -= colsToMove;\r
                }\r
\r
                // It's necessary to lookup the ancestor grid of the grouped header b/c the header could be\r
                // nested at any level.\r
                toCt.getRootHeaderCt().grid.view.moveColumn(visibleFromIdx, visibleToIdx, colsToMove);\r
            }\r
\r
            // We need to always fire a columnmove event. Check for an .ownerCt first in case this is a\r
            // grouped header.\r
            fromCtRoot.fireEvent('columnmove', fromCt, dragHeader, visibleFromIdx, visibleToIdx);\r
\r
            fromCt.isDDMoveInGrid = toCt.isDDMoveInGrid = false;\r
\r
            // Group headers skrinkwrap their child headers.\r
            // Therefore a child header may not flex; it must contribute a fixed width.\r
            // But we restore the flex value when moving back into the main header container\r
            //\r
            // Note that we don't need to save the flex if coming from another group header b/c it couldn't\r
            // have had one!\r
            if (toCt.isGroupHeader && !fromCt.isGroupHeader) {\r
                // Adjust the width of the "to" group header only if we dragged in from somewhere else.\r
                // If not within the same container.\r
                if (fromCt !== toCt) {\r
                    dragHeader.savedFlex = dragHeader.flex;\r
                    delete dragHeader.flex;\r
                    dragHeader.width = savedWidth;\r
                }\r
            } else if (!fromCt.isGroupHeader) {\r
                if (dragHeader.savedFlex) {\r
                    dragHeader.flex = dragHeader.savedFlex;\r
                    delete dragHeader.width;\r
                }\r
            }\r
\r
            Ext.resumeLayouts(true);\r
            // Ext.grid.header.Container will handle the removal of empty groups, don't handle it here.\r
        }\r
    }\r
});\r