add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / plugin / SortableList.js

/**\r
 * @class Ext.plugin.SortableList\r
 * @extends Ext.Component\r
 * The SortableList plugin gives your list items the ability to be reordered by tapping and \r
 * dragging elements within the item.   \r
 *\r
 * The list-sortablehandle is not added to your tpl by default, so it's important that you \r
 * manually include it. It's also important to recognize that list-items are not draggable \r
 * themselves.  You must add an element to the itemTpl for it to be dragged.\r
 *\r
 *     Ext.Viewport.add({\r
 *          xtype: 'list',\r
 *          infinite: true,\r
 *          plugins: 'sortablelist',\r
 *          itemTpl: '<span class="myStyle ' + Ext.baseCSSPrefix + 'list-sortablehandle"></span>{text}',\r
 *          data: [{\r
 *              text: 'Item 1'\r
 *          }, {\r
 *              text: 'Item 2'\r
 *          }, {\r
 *              text: 'Item 3'\r
 *          }]\r
 *     });\r
 *\r
 * The CSS for MyStyle can be anything that creates an element to tap and drag.  For this \r
 * example we made a simple rectangle like so:\r
 *\r
 *      .myStyle{\r
 *          width:30px;\r
 *          height:20px;\r
 *          background:gray;\r
 *          float:left;\r
 *      }\r
 * \r
 * Note: You must have infinite set to 'true' when using the SortableList plugin.\r
 * \r
 */\r
Ext.define('Ext.plugin.SortableList', {\r
    extend: 'Ext.Component',\r
\r
    alias: 'plugin.sortablelist',\r
\r
    mixins: ['Ext.mixin.Hookable'],\r
\r
    config: {\r
        list: null,\r
        handleSelector: '.' + Ext.baseCSSPrefix + 'list-sortablehandle'\r
    },\r
\r
    init: function(list) {\r
        this.setList(list);\r
    },\r
\r
    updateList: function(list) {\r
        if (list) {\r
            if (list.initialized) {\r
                this.attachListeners();\r
            }\r
            else {\r
                list.on({\r
                    initialize: 'attachListeners',\r
                    scope: this,\r
                    single: true\r
                });\r
            }\r
        }\r
    },\r
\r
    attachListeners: function() {\r
        var list = this.getList(),\r
            scrollerElement = list.getScrollable().getElement();\r
\r
        this.scrollerElement = scrollerElement;\r
\r
        scrollerElement.onBefore({\r
            dragstart: 'onScrollerDragStart',\r
            scope: this\r
        });\r
    },\r
\r
    onScrollerDragStart: function(e, target) {\r
        if (Ext.DomQuery.is(target, this.getHandleSelector())) {\r
            if (!this.animating) {\r
                this.onDragStart(e, target);\r
            }\r
            return false;\r
        }\r
    },\r
\r
    onDragStart: function(e) {\r
        var row = Ext.getCmp(e.getTarget('.' + Ext.baseCSSPrefix + 'list-item').id),\r
            list = this.getList(),\r
            store = list.getStore();\r
\r
        this.scrollerElement.on({\r
            drag: 'onDrag',\r
            dragend: 'onDragEnd',\r
            scope: this\r
        });\r
\r
        this.positionMap = list.getItemMap();\r
        this.listStore = store;\r
        this.previousIndexDistance = 0;\r
\r
        this.dragRow = row;\r
        this.dragRecord = row.getRecord();\r
\r
        this.dragRowIndex = this.currentDragRowIndex = row.$dataIndex;\r
        this.dragRowHeight = this.positionMap.getItemHeight(this.dragRowIndex);\r
\r
        if (list.getInfinite()) {\r
            this.startTranslate = this.positionMap.map[this.dragRowIndex];\r
        } else {\r
            row.translate(0, 0);\r
            this.startTranslate = 0;\r
        }\r
\r
        row.addCls(Ext.baseCSSPrefix + 'list-item-dragging');\r
    },\r
\r
    onDrag: function(e) {\r
        var list = this.getList(),\r
            listItems = list.listItems,\r
            store = list.getStore(),\r
            collection = list.getStore().data,\r
            dragRow = this.dragRow,\r
            dragRecordKey = dragRow.id,\r
            listItemInfo = list.getListItemInfo(),\r
            positionMap = this.positionMap,\r
            distance = 0,\r
            i, item, ln, targetItem, targetIndex, itemIndex,\r
            swapIndex, swapPosition, record, swapKey, draggingUp;\r
\r
        this.dragRowPosition = this.startTranslate + e.deltaY;\r
        dragRow.translate(0, this.dragRowPosition);\r
\r
        targetIndex = positionMap.findIndex(this.dragRowPosition + (this.dragRowHeight / 2));\r
        targetItem = list.getItemAt(targetIndex);\r
\r
        if (targetItem) {\r
            distance = targetIndex - this.currentDragRowIndex;\r
\r
            if (distance !== 0) {\r
                draggingUp = distance < 0;\r
\r
                for (i = 0, ln = Math.abs(distance); i < ln; i++) {\r
                    if (draggingUp) {\r
                        swapIndex = this.currentDragRowIndex - i;\r
                        item = list.getItemAt(swapIndex - 1);\r
                    } else {\r
                        swapIndex = this.currentDragRowIndex + i;\r
                        item = list.getItemAt(swapIndex + 1);\r
                    }\r
\r
                    swapPosition = positionMap.map[swapIndex];\r
\r
                    item.translate(0, swapPosition);\r
\r
                    record = item.getRecord();\r
                    swapKey = record.id;\r
\r
                    Ext.Array.remove(collection.items, record);\r
                    collection.items.splice(swapIndex, 0, record);\r
                    collection.indices[dragRecordKey] = collection.indices[swapKey];\r
                    collection.indices[swapKey] = swapIndex;\r
\r
                    list.updateListItem(item, swapIndex, listItemInfo);\r
                    item.$position = swapPosition;\r
                }\r
\r
                itemIndex = listItems.indexOf(dragRow);\r
                Ext.Array.remove(listItems, dragRow);\r
                listItems.splice(itemIndex + distance, 0, dragRow);\r
\r
                dragRow.$dataIndex = targetIndex;\r
                dragRow.$position = positionMap.map[targetIndex];\r
\r
                this.currentDragRowIndex = targetIndex;\r
            }\r
        }\r
    },\r
\r
    onDragEnd: function() {\r
        var me = this,\r
            row = me.dragRow,\r
            list = me.getList(),\r
            listItemInfo = list.getListItemInfo(),\r
            position = row.$position;\r
\r
        me.scrollerElement.un({\r
            drag: 'onDrag',\r
            dragend: 'onDragEnd',\r
            scope: me\r
        });\r
\r
        me.animating = true;\r
\r
        row.getTranslatable().on('animationend', function() {\r
            row.removeCls(Ext.baseCSSPrefix + 'list-item-dragging');\r
\r
            var currentIdx = this.currentDragRowIndex,\r
                dragIdx = this.dragRowIndex;\r
\r
            if (currentIdx !== dragIdx) {\r
                list.updateListItem(row, row.$dataIndex, listItemInfo);\r
                row.$position = position;\r
\r
                list.fireEvent('dragsort', list, row, currentIdx, dragIdx);\r
            }\r
            me.animating = false;\r
        }, me, {single: true});\r
\r
        row.translate(0, position, {duration: 100});\r
    }\r
});\r