add extjs 6.0.1 sources

[extjs.git] / extjs / packages / ux / classic / src / BoxReorderer.js

/**\r
 * Base class from Ext.ux.TabReorderer.\r
 */\r
Ext.define('Ext.ux.BoxReorderer', {\r
    requires: [\r
        'Ext.dd.DD'\r
    ],\r
\r
    mixins: {\r
        observable: 'Ext.util.Observable'\r
    },\r
\r
    /**\r
     * @cfg {String} itemSelector\r
     * A {@link Ext.DomQuery DomQuery} selector which identifies the encapsulating elements of child\r
     * Components which participate in reordering.\r
     */\r
    itemSelector: '.x-box-item',\r
\r
    /**\r
     * @cfg {Mixed} animate\r
     * If truthy, child reordering is animated so that moved boxes slide smoothly into position.\r
     * If this option is numeric, it is used as the animation duration in milliseconds.\r
     */\r
    animate: 100,\r
\r
    /**\r
     * @event StartDrag\r
     * Fires when dragging of a child Component begins.\r
     * @param {Ext.ux.BoxReorderer} this\r
     * @param {Ext.container.Container} container The owning Container\r
     * @param {Ext.Component} dragCmp The Component being dragged\r
     * @param {Number} idx The start index of the Component being dragged.\r
     */\r
\r
    /**\r
     * @event Drag\r
     * Fires during dragging of a child Component.\r
     * @param {Ext.ux.BoxReorderer} this\r
     * @param {Ext.container.Container} container The owning Container\r
     * @param {Ext.Component} dragCmp The Component being dragged\r
     * @param {Number} startIdx The index position from which the Component was initially dragged.\r
     * @param {Number} idx The current closest index to which the Component would drop.\r
     */\r
\r
    /**\r
     * @event ChangeIndex\r
     * Fires when dragging of a child Component causes its drop index to change.\r
     * @param {Ext.ux.BoxReorderer} this\r
     * @param {Ext.container.Container} container The owning Container\r
     * @param {Ext.Component} dragCmp The Component being dragged\r
     * @param {Number} startIdx The index position from which the Component was initially dragged.\r
     * @param {Number} idx The current closest index to which the Component would drop.\r
     */\r
\r
    /**\r
     * @event Drop\r
     * Fires when a child Component is dropped at a new index position.\r
     * @param {Ext.ux.BoxReorderer} this\r
     * @param {Ext.container.Container} container The owning Container\r
     * @param {Ext.Component} dragCmp The Component being dropped\r
     * @param {Number} startIdx The index position from which the Component was initially dragged.\r
     * @param {Number} idx The index at which the Component is being dropped.\r
     */\r
\r
    constructor: function() {\r
        this.mixins.observable.constructor.apply(this, arguments);\r
    },\r
\r
    init: function(container) {\r
        var me = this;\r
\r
        me.container = container;\r
\r
        // Set our animatePolicy to animate the start position (ie x for HBox, y for VBox)\r
        me.animatePolicy = {};\r
        me.animatePolicy[container.getLayout().names.x] = true;\r
\r
\r
\r
        // Initialize the DD on first layout, when the innerCt has been created.\r
        me.container.on({\r
            scope: me,\r
            boxready: me.onBoxReady,\r
            beforedestroy: me.onContainerDestroy\r
        });\r
    },\r
\r
    /**\r
     * @private\r
     * Clear up on Container destroy\r
     */\r
    onContainerDestroy: function() {\r
        var dd = this.dd;\r
        if (dd) {\r
            dd.unreg();\r
            this.dd = null;\r
        }\r
    },\r
\r
    onBoxReady: function() {\r
        var me = this,\r
            layout = me.container.getLayout(),\r
            names = layout.names,\r
            dd;\r
\r
        // Create a DD instance. Poke the handlers in.\r
        // TODO: Ext5's DD classes should apply config to themselves.\r
        // TODO: Ext5's DD classes should not use init internally because it collides with use as a plugin\r
        // TODO: Ext5's DD classes should be Observable.\r
        // TODO: When all the above are trus, this plugin should extend the DD class.\r
        dd = me.dd = new Ext.dd.DD(layout.innerCt, me.container.id + '-reorderer');\r
        Ext.apply(dd, {\r
            animate: me.animate,\r
            reorderer: me,\r
            container: me.container,\r
            getDragCmp: me.getDragCmp,\r
            clickValidator: Ext.Function.createInterceptor(dd.clickValidator, me.clickValidator, me, false),\r
            onMouseDown: me.onMouseDown,\r
            startDrag: me.startDrag,\r
            onDrag: me.onDrag,\r
            endDrag: me.endDrag,\r
            getNewIndex: me.getNewIndex,\r
            doSwap: me.doSwap,\r
            findReorderable: me.findReorderable\r
        });\r
\r
        // Decide which dimension we are measuring, and which measurement metric defines\r
        // the *start* of the box depending upon orientation.\r
        dd.dim = names.width;\r
        dd.startAttr = names.beforeX;\r
        dd.endAttr = names.afterX;\r
    },\r
\r
    getDragCmp: function(e) {\r
        return this.container.getChildByElement(e.getTarget(this.itemSelector, 10));\r
    },\r
\r
    // check if the clicked component is reorderable\r
    clickValidator: function(e) {\r
        var cmp = this.getDragCmp(e);\r
\r
        // If cmp is null, this expression MUST be coerced to boolean so that createInterceptor is able to test it against false\r
        return !!(cmp && cmp.reorderable !== false);\r
    },\r
\r
    onMouseDown: function(e) {\r
        var me = this,\r
            container = me.container,\r
            containerBox,\r
            cmpEl,\r
            cmpBox;\r
\r
        // Ascertain which child Component is being mousedowned\r
        me.dragCmp = me.getDragCmp(e);\r
        if (me.dragCmp) {\r
            cmpEl = me.dragCmp.getEl();\r
            me.startIndex = me.curIndex = container.items.indexOf(me.dragCmp);\r
\r
            // Start position of dragged Component\r
            cmpBox = cmpEl.getBox();\r
\r
            // Last tracked start position\r
            me.lastPos = cmpBox[me.startAttr];\r
\r
            // Calculate constraints depending upon orientation\r
            // Calculate offset from mouse to dragEl position\r
            containerBox = container.el.getBox();\r
            if (me.dim === 'width') {\r
                me.minX = containerBox.left;\r
                me.maxX = containerBox.right - cmpBox.width;\r
                me.minY = me.maxY = cmpBox.top;\r
                me.deltaX = e.getX() - cmpBox.left;\r
            } else {\r
                me.minY = containerBox.top;\r
                me.maxY = containerBox.bottom - cmpBox.height;\r
                me.minX = me.maxX = cmpBox.left;\r
                me.deltaY = e.getY() - cmpBox.top;\r
            }\r
            me.constrainY = me.constrainX = true;\r
        }\r
    },\r
\r
    startDrag: function() {\r
        var me = this,\r
            dragCmp = me.dragCmp;\r
\r
        if (dragCmp) {\r
            // For the entire duration of dragging the *Element*, defeat any positioning and animation of the dragged *Component*\r
            dragCmp.setPosition = Ext.emptyFn;\r
            dragCmp.animate = false;\r
\r
            // Animate the BoxLayout just for the duration of the drag operation.\r
            if (me.animate) {\r
                me.container.getLayout().animatePolicy = me.reorderer.animatePolicy;\r
            }\r
            // We drag the Component element\r
            me.dragElId = dragCmp.getEl().id;\r
            me.reorderer.fireEvent('StartDrag', me, me.container, dragCmp, me.curIndex);\r
            // Suspend events, and set the disabled flag so that the mousedown and mouseup events\r
            // that are going to take place do not cause any other UI interaction.\r
            dragCmp.suspendEvents();\r
            dragCmp.disabled = true;\r
            dragCmp.el.setStyle('zIndex', 100);\r
        } else {\r
            me.dragElId = null;\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Find next or previous reorderable component index.\r
     * @param {Number} newIndex The initial drop index.\r
     * @return {Number} The index of the reorderable component.\r
     */\r
    findReorderable: function(newIndex) {\r
        var me = this,\r
            items = me.container.items,\r
            newItem;\r
\r
        if (items.getAt(newIndex).reorderable === false) {\r
            newItem = items.getAt(newIndex);\r
            if (newIndex > me.startIndex) {\r
                 while(newItem && newItem.reorderable === false) {\r
                    newIndex++;\r
                    newItem = items.getAt(newIndex);\r
                }\r
            } else {\r
                while(newItem && newItem.reorderable === false) {\r
                    newIndex--;\r
                    newItem = items.getAt(newIndex);\r
                }\r
            }\r
        }\r
\r
        newIndex = Math.min(Math.max(newIndex, 0), items.getCount() - 1);\r
\r
        if (items.getAt(newIndex).reorderable === false) {\r
            return -1;\r
        }\r
        return newIndex;\r
    },\r
\r
    /**\r
     * @private\r
     * Swap 2 components.\r
     * @param {Number} newIndex The initial drop index.\r
     */\r
    doSwap: function(newIndex) {\r
        var me = this,\r
            items = me.container.items,\r
            container = me.container,\r
            wasRoot = me.container._isLayoutRoot,\r
            orig, dest, tmpIndex;\r
\r
        newIndex = me.findReorderable(newIndex);\r
\r
        if (newIndex === -1) {\r
            return;\r
        }\r
\r
        me.reorderer.fireEvent('ChangeIndex', me, container, me.dragCmp, me.startIndex, newIndex);\r
        orig = items.getAt(me.curIndex);\r
        dest = items.getAt(newIndex);\r
        items.remove(orig);\r
        tmpIndex = Math.min(Math.max(newIndex, 0), items.getCount() - 1);\r
        items.insert(tmpIndex, orig);\r
        items.remove(dest);\r
        items.insert(me.curIndex, dest);\r
\r
        // Make the Box Container the topmost layout participant during the layout.\r
        container._isLayoutRoot = true;\r
        container.updateLayout();\r
        container._isLayoutRoot = wasRoot;\r
        me.curIndex = newIndex;\r
    },\r
\r
    onDrag: function(e) {\r
        var me = this,\r
            newIndex;\r
\r
        newIndex = me.getNewIndex(e.getPoint());\r
        if ((newIndex !== undefined)) {\r
            me.reorderer.fireEvent('Drag', me, me.container, me.dragCmp, me.startIndex, me.curIndex);\r
            me.doSwap(newIndex);\r
        }\r
\r
    },\r
\r
    endDrag: function(e) {\r
        if (e) {\r
            e.stopEvent();\r
        }\r
        var me = this,\r
            layout = me.container.getLayout(),\r
            temp;\r
\r
        if (me.dragCmp) {\r
            delete me.dragElId;\r
\r
            // Reinstate the Component's positioning method after mouseup, and allow the layout system to animate it.\r
            delete me.dragCmp.setPosition;\r
            me.dragCmp.animate = true;\r
\r
            // Ensure the lastBox is correct for the animation system to restore to when it creates the "from" animation frame\r
            me.dragCmp.lastBox[layout.names.x] = me.dragCmp.getPosition(true)[layout.names.widthIndex];\r
\r
            // Make the Box Container the topmost layout participant during the layout.\r
            me.container._isLayoutRoot = true;\r
            me.container.updateLayout();\r
            me.container._isLayoutRoot = undefined;\r
\r
            // Attempt to hook into the afteranimate event of the drag Component to call the cleanup\r
            temp = Ext.fx.Manager.getFxQueue(me.dragCmp.el.id)[0];\r
            if (temp) {\r
                temp.on({\r
                    afteranimate: me.reorderer.afterBoxReflow,\r
                    scope: me\r
                });\r
            }\r
            // If not animated, clean up after the mouseup has happened so that we don't click the thing being dragged\r
            else {\r
                Ext.Function.defer(me.reorderer.afterBoxReflow, 1, me);\r
            }\r
\r
            if (me.animate) {\r
                delete layout.animatePolicy;\r
            }\r
            me.reorderer.fireEvent('drop', me, me.container, me.dragCmp, me.startIndex, me.curIndex);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Called after the boxes have been reflowed after the drop.\r
     * Re-enabled the dragged Component.\r
     */\r
    afterBoxReflow: function() {\r
        var me = this;\r
        me.dragCmp.el.setStyle('zIndex', '');\r
        me.dragCmp.disabled = false;\r
        me.dragCmp.resumeEvents();\r
    },\r
\r
    /**\r
     * @private\r
     * Calculate drop index based upon the dragEl's position.\r
     */\r
    getNewIndex: function(pointerPos) {\r
        var me = this,\r
            dragEl = me.getDragEl(),\r
            dragBox = Ext.fly(dragEl).getBox(),\r
            targetEl,\r
            targetBox,\r
            targetMidpoint,\r
            i = 0,\r
            it = me.container.items.items,\r
            ln = it.length,\r
            lastPos = me.lastPos;\r
\r
        me.lastPos = dragBox[me.startAttr];\r
\r
        for (; i < ln; i++) {\r
            targetEl = it[i].getEl();\r
\r
            // Only look for a drop point if this found item is an item according to our selector\r
            if (targetEl.is(me.reorderer.itemSelector)) {\r
                targetBox = targetEl.getBox();\r
                targetMidpoint = targetBox[me.startAttr] + (targetBox[me.dim] >> 1);\r
                if (i < me.curIndex) {\r
                    if ((dragBox[me.startAttr] < lastPos) && (dragBox[me.startAttr] < (targetMidpoint - 5))) {\r
                        return i;\r
                    }\r
                } else if (i > me.curIndex) {\r
                    if ((dragBox[me.startAttr] > lastPos) && (dragBox[me.endAttr] > (targetMidpoint + 5))) {\r
                        return i;\r
                    }\r
                }\r
            }\r
        }\r
    }\r
});\r