add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / Sortable.js

/**\r
 * A mixin which allows a data component to be sorted\r
 * @ignore\r
 */\r
Ext.define('Ext.Sortable', {\r
    mixins: {\r
        observable: 'Ext.mixin.Observable'\r
    },\r
\r
    requires: ['Ext.util.Draggable'],\r
\r
    config: {\r
        /**\r
         * @cfg\r
         * @inheritdoc\r
         */\r
        baseCls: Ext.baseCSSPrefix + 'sortable',\r
\r
        /**\r
         * @cfg {Number} delay\r
         * How many milliseconds a user must hold the draggable before starting a\r
         * drag operation.\r
         * @private\r
         * @accessor\r
         */\r
        delay: 0\r
\r
        },\r
\r
    /**\r
     * @cfg {String} direction\r
     * Possible values: 'vertical', 'horizontal'.\r
     */\r
    direction: 'vertical',\r
\r
    /**\r
     * @cfg {String} cancelSelector\r
     * A simple CSS selector that represents elements within the draggable\r
     * that should NOT initiate a drag.\r
     */\r
    cancelSelector: null,\r
\r
    // not yet implemented\r
    //indicator: true,\r
    //proxy: true,\r
    //tolerance: null,\r
\r
    /**\r
     * @cfg {HTMLElement/Boolean} constrain\r
     * An Element to constrain the Sortable dragging to.\r
     * If `true` is specified, the dragging will be constrained to the element\r
     * of the sortable.\r
     */\r
    constrain: window,\r
    /**\r
     * @cfg {String} group\r
     * Draggable and Droppable objects can participate in a group which are\r
     * capable of interacting.\r
     */\r
    group: 'base',\r
\r
    /**\r
     * @cfg {Boolean} revert\r
     * This should NOT be changed.\r
     * @private\r
     */\r
    revert: true,\r
\r
    /**\r
     * @cfg {String} itemSelector\r
     * A simple CSS selector that represents individual items within the Sortable.\r
     */\r
    itemSelector: null,\r
\r
    /**\r
     * @cfg {String} handleSelector\r
     * A simple CSS selector to indicate what is the handle to drag the Sortable.\r
     */\r
    handleSelector: null,\r
\r
    /**\r
     * @cfg {Boolean} disabled\r
     * Passing in `true` will disable this Sortable.\r
     */\r
    disabled: false,\r
\r
    // Properties\r
\r
    /**\r
     * Read-only property that indicates whether a Sortable is currently sorting.\r
     * @type Boolean\r
     * @private\r
     * @readonly\r
     */\r
    sorting: false,\r
\r
    /**\r
     * Read-only value representing whether the Draggable can be moved vertically.\r
     * This is automatically calculated by Draggable by the direction configuration.\r
     * @type Boolean\r
     * @private\r
     * @readonly\r
     */\r
    vertical: false,\r
\r
    /**\r
     * Creates new Sortable.\r
     * @param {Mixed} el\r
     * @param {Object} config\r
     */\r
    constructor : function(el, config) {\r
        config = config || {};\r
        Ext.apply(this, config);\r
\r
        this.addEvents(\r
            /**\r
             * @event sortstart\r
             * @param {Ext.Sortable} this\r
             * @param {Ext.event.Event} e\r
             */\r
            'sortstart',\r
            /**\r
             * @event sortend\r
             * @param {Ext.Sortable} this\r
             * @param {Ext.event.Event} e\r
             */\r
            'sortend',\r
            /**\r
             * @event sortchange\r
             * @param {Ext.Sortable} this\r
             * @param {Ext.Element} el The Element being dragged.\r
             * @param {Number} index The index of the element after the sort change.\r
             */\r
            'sortchange'\r
\r
            // not yet implemented.\r
            // 'sortupdate',\r
            // 'sortreceive',\r
            // 'sortremove',\r
            // 'sortenter',\r
            // 'sortleave',\r
            // 'sortactivate',\r
            // 'sortdeactivate'\r
        );\r
\r
        this.el = Ext.get(el);\r
        this.callParent();\r
\r
        this.mixins.observable.constructor.call(this);\r
\r
        if (this.direction == 'horizontal') {\r
            this.horizontal = true;\r
        }\r
        else if (this.direction == 'vertical') {\r
            this.vertical = true;\r
        }\r
        else {\r
            this.horizontal = this.vertical = true;\r
        }\r
\r
        this.el.addCls(this.baseCls);\r
        this.startEventName = (this.getDelay() > 0) ? 'taphold' : 'tapstart';\r
        if (!this.disabled) {\r
            this.enable();\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onStart : function(e, t) {\r
        if (this.cancelSelector && e.getTarget(this.cancelSelector)) {\r
            return;\r
        }\r
        if (this.handleSelector && !e.getTarget(this.handleSelector)) {\r
            return;\r
        }\r
\r
        if (!this.sorting) {\r
            this.onSortStart(e, t);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onSortStart : function(e, t) {\r
        this.sorting = true;\r
        var draggable = Ext.create('Ext.util.Draggable', t, {\r
            threshold: 0,\r
            revert: this.revert,\r
            direction: this.direction,\r
            constrain: this.constrain === true ? this.el : this.constrain,\r
            animationDuration: 100\r
        });\r
        draggable.on({\r
            drag: this.onDrag,\r
            dragend: this.onDragEnd,\r
            scope: this\r
        });\r
\r
        this.dragEl = t;\r
        this.calculateBoxes();\r
\r
        if (!draggable.dragging) {\r
            draggable.onStart(e);\r
        }\r
\r
        this.fireEvent('sortstart', this, e);\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    calculateBoxes : function() {\r
        this.items = [];\r
        var els = this.el.select(this.itemSelector, false),\r
            ln = els.length, i, item, el, box;\r
\r
        for (i = 0; i < ln; i++) {\r
            el = els[i];\r
            if (el != this.dragEl) {\r
                item = Ext.fly(el).getRegion();\r
                item.el = el;\r
                this.items.push(item);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onDrag : function(draggable, e) {\r
        var items = this.items,\r
            ln = items.length,\r
            region = draggable.region,\r
            sortChange = false,\r
            i, intersect, overlap, item;\r
\r
        for (i = 0; i < ln; i++) {\r
            item = items[i];\r
            intersect = region.intersect(item);\r
            if (intersect) {\r
                if (this.vertical && Math.abs(intersect.top - intersect.bottom) > (region.bottom - region.top) / 2) {\r
                    if (region.bottom > item.top && item.top > region.top) {\r
                        draggable.el.insertAfter(item.el);\r
                    }\r
                    else {\r
                        draggable.el.insertBefore(item.el);\r
                    }\r
                    sortChange = true;\r
                }\r
                else if (this.horizontal && Math.abs(intersect.left - intersect.right) > (region.right - region.left) / 2) {\r
                    if (region.right > item.left && item.left > region.left) {\r
                        draggable.el.insertAfter(item.el);\r
                    }\r
                    else {\r
                        draggable.el.insertBefore(item.el);\r
                    }\r
                    sortChange = true;\r
                }\r
\r
                if (sortChange) {\r
                    // We reset the draggable (initializes all the new start values)\r
                    draggable.reset();\r
\r
                    // Move the draggable to its current location (since the transform is now\r
                    // different)\r
                    draggable.moveTo(region.left, region.top);\r
\r
                    // Finally lets recalculate all the items boxes\r
                    this.calculateBoxes();\r
                    this.fireEvent('sortchange', this, draggable.el, this.el.select(this.itemSelector, false).indexOf(draggable.el.dom));\r
                    return;\r
                }\r
            }\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onDragEnd : function(draggable, e) {\r
        draggable.destroy();\r
        this.sorting = false;\r
        this.fireEvent('sortend', this, draggable, e);\r
    },\r
\r
    /**\r
     * Enables sorting for this Sortable.\r
     * This method is invoked immediately after construction of a Sortable unless\r
     * the disabled configuration is set to `true`.\r
     */\r
    enable : function() {\r
        this.el.on(this.startEventName, this.onStart, this, {delegate: this.itemSelector, holdThreshold: this.getDelay()});\r
        this.disabled = false;\r
    },\r
\r
    /**\r
     * Disables sorting for this Sortable.\r
     */\r
    disable : function() {\r
        this.el.un(this.startEventName, this.onStart, this);\r
        this.disabled = true;\r
    },\r
\r
    /**\r
     * Method to determine whether this Sortable is currently disabled.\r
     * @return {Boolean} The disabled state of this Sortable.\r
     */\r
    isDisabled: function() {\r
        return this.disabled;\r
    },\r
\r
    /**\r
     * Method to determine whether this Sortable is currently sorting.\r
     * @return {Boolean} The sorting state of this Sortable.\r
     */\r
    isSorting : function() {\r
        return this.sorting;\r
    },\r
\r
    /**\r
     * Method to determine whether this Sortable is currently disabled.\r
     * @return {Boolean} The disabled state of this Sortable.\r
     */\r
    isVertical : function() {\r
        return this.vertical;\r
    },\r
\r
    /**\r
     * Method to determine whether this Sortable is currently sorting.\r
     * @return {Boolean} The sorting state of this Sortable.\r
     */\r
    isHorizontal : function() {\r
        return this.horizontal;\r
    }\r
});