add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / dashboard / DropZone.js

/**\r
 * Internal class that manages drag/drop for the `Dashboard`.\r
 * @private\r
 */\r
Ext.define('Ext.dashboard.DropZone', {\r
    extend: 'Ext.dd.DropTarget',\r
\r
    ddScrollConfig: {\r
        vthresh: 75,\r
        hthresh: -1,\r
        animate: true,\r
        increment: 200\r
    },\r
\r
    containerScroll: true,\r
\r
    // This causes overflow to go hidden during the drag so that we don't cause panels to\r
    // wrap by triggering overflow.\r
    overClass: Ext.baseCSSPrefix + 'dashboard-dd-over',\r
\r
    constructor: function (dashboard, cfg) {\r
        this.dashboard = dashboard;\r
        dashboard.body.ddScrollConfig = this.ddScrollConfig;\r
\r
        this.callParent([dashboard.body, cfg]);\r
    },\r
\r
    getOverEvent: function (dd, e, data) {\r
        var dashboard = this.dashboard,\r
            dbody = dashboard.body,\r
            items = dashboard.items.items,\r
            bodyBox = dbody.getBox(),\r
            count = items.length,\r
            xy = e.getXY(),\r
            x = xy[0] - bodyBox.x + dbody.getScrollLeft(),\r
            y = xy[1] - bodyBox.y + dbody.getScrollTop(),\r
            over = {\r
                columnIndex: 0,\r
                column: null,\r
                dashboard: dashboard,\r
                above: null,\r
                extensible : false,\r
                beforeAfter : 0,\r
                data: data,\r
                panel: data.panel,\r
                rawEvent: e,\r
                source: dd,\r
                status: this.dropAllowed\r
            },\r
            t, ht, i, k, item, w, childCount, childItems, childItem;\r
\r
        for (i = 0; i < count; i += 2) {\r
            item = items[i];\r
            w = item.lastBox.width;\r
            if (items[i+1]) {\r
                w += items[i+1].lastBox.width;\r
            }\r
\r
            //if (x < w) {\r
            if (e.within(item.el)) {\r
                over.columnIndex = i;\r
                over.column = item;\r
                over.extensible = this.isRowExtensible(item.rowIndex);\r
\r
                t = Math.min(80, w * 0.2);\r
                over.beforeAfter = t = (over.extensible && ((x < t) ? -1 : ((x > w - t) ? 1 : 0)));\r
\r
                if (!t || !over.extensible) {\r
                    childItems = item.items.items;\r
                    // if we are not on an edge OR reached maxColumns (which means "insert the panel in\r
                    // between the columns"), we need to dig one more level down\r
                    //console.log('inside of column ' + i + ': x=' + x + ', y=' + y);\r
                    for (k = 0, childCount = childItems.length; k < childCount; ++k) {\r
                        childItem = childItems[k];\r
                        ht = childItem.el.getHeight();\r
                        //console.log(childItem.id + '.ht = ' + ht);\r
                        if (y < ht / 2) {\r
                            //console.log('above child ' + k);\r
                            // if mouse is above the current child's top, Y coord, it\r
                            // is considered as "above" the previous child\r
                            over.above = childItem;\r
                            break;\r
                        }\r
                        //console.log('below child ' + k);\r
                        y -= ht;\r
                    }\r
\r
                }\r
\r
                break;\r
            }\r
\r
            x -= w;\r
        }\r
\r
        return over;\r
    },\r
\r
    notifyOver: function (dd, e, data) {\r
        var me = this,\r
            dashboard = me.dashboard,\r
            over = me.getOverEvent(dd, e, data),\r
            colEl = over.column && over.column.el,\r
            proxy = dd.proxy,\r
            proxyProxy,\r
            aboveItem = over.above,\r
            colWidth, width = 0,\r
            padding,\r
            hasListeners = dashboard.hasListeners;\r
\r
        data.lastOver = over;\r
\r
        if ((!hasListeners.validatedrop || dashboard.fireEvent('validatedrop', over) !== false) &&\r
            (!hasListeners.beforedragover || dashboard.fireEvent('beforedragover', over) !== false ))\r
            {\r
\r
            proxyProxy = dd.panelProxy.getProxy();\r
\r
            // make sure proxy width is fluid in different width columns\r
            proxy.getProxy().setWidth('auto');\r
\r
            if ( colEl) {\r
\r
                width = colWidth = colEl.getWidth();\r
                // A floating column was targeted\r
                if (over.beforeAfter) {\r
\r
                    dd.panelProxy.moveProxy(colEl.dom, colEl.dom.firstChild);\r
\r
                    width = colWidth / 2;\r
                    proxyProxy.setWidth(width);\r
\r
                } else {\r
                    if (aboveItem) {\r
                        dd.panelProxy.moveProxy(aboveItem.el.dom.parentNode, aboveItem.el.dom);\r
                    } else {\r
                        dd.panelProxy.moveProxy(colEl.dom, null);\r
                    }\r
                    proxyProxy.setWidth('auto');\r
\r
                }\r
                if (width) {\r
                    //proxy.getProxy().setWidth(width);\r
                }\r
                proxyProxy.setStyle({\r
                    'float': 'none',\r
                    'clear' : 'none',\r
                    'margin-left': (over.beforeAfter > 0) ? (colWidth - width - colEl.getPadding('lr')) + 'px' : '',\r
                    'margin-top' : '7px'\r
                });\r
\r
            } else {\r
                padding = dashboard.body.getPadding('lr');\r
                proxyProxy.setStyle({\r
                    'float' : 'left',\r
                    'clear' : 'left',\r
                    'margin': '0 7px 0 7px'\r
                });\r
                proxyProxy.setWidth(dashboard.body.getWidth() - padding);\r
\r
                // Target the innerCt for the move\r
                dd.panelProxy.moveProxy(dashboard.body.dom.firstChild.firstChild, null);\r
            }\r
\r
            this.scrollPos = dashboard.body.getScroll();\r
\r
            if (hasListeners.dragover) {\r
                dashboard.fireEvent('dragover', over);\r
            }\r
        }\r
\r
        return over.status;\r
    },\r
\r
    isRowExtensible : function(rowIndex) {\r
      var me = this,\r
          dashboard = me.dashboard,\r
          maxColumns = dashboard.getMaxColumns() || 1;\r
\r
      return Ext.Array.from(dashboard.query('>dashboard-column[rowIndex=' + rowIndex + ']')).length < maxColumns;\r
    },\r
\r
    notifyDrop: function (dd, e, data) {\r
        this.callParent(arguments);\r
\r
        var dashboard = this.dashboard,\r
            over = data.lastOver,\r
            panel = over.panel,\r
            fromCt = panel.ownerCt,\r
            toCt = over.column,\r
            side = toCt ? over.beforeAfter : 1,\r
            currentIndex = fromCt.items.indexOf(panel),\r
            newIndex = toCt ? (over.above ? toCt.items.indexOf(over.above) : toCt.items.getCount()) : 0,\r
            colIndex, newCol,\r
            hasListeners = dashboard.hasListeners;\r
\r
//        console.log('DROP: ' + panel.id + '@' + currentIndex +\r
//                // ' from ' + fromCt.id +\r
//                (side ? ((side < 0) ? ' BEFORE ' : ' AFTER ')\r
//                      : (' AT ' + newIndex + ' IN ')) + toCt.id +\r
//                (over.above ? ' ABOVE ' + over.above.id : ' AT END'));\r
\r
        //Same column tests\r
        if (fromCt === toCt) {\r
            if (fromCt.items.getCount() === 1) {\r
                //console.log('Null op');\r
                return;\r
            }\r
            if (!side) {\r
                if (currentIndex < newIndex) {\r
                    --newIndex;\r
                    //console.log('Adjusted newIndex=' + newIndex);\r
                }\r
                if (currentIndex === newIndex) {\r
                    //console.log('No change');\r
                    return;\r
                }\r
            }\r
        }\r
\r
        if ((hasListeners.validatedrop && dashboard.fireEvent('validatedrop', over) === false) ||\r
            (hasListeners.beforedrop && dashboard.fireEvent('beforedrop', over) === false)) {\r
            return;\r
        }\r
\r
        Ext.suspendLayouts();\r
\r
        panel.isMoving = true;\r
        if (side) {\r
            colIndex = dashboard.items.indexOf(toCt);\r
\r
            // inserting into new Row ?\r
            if (colIndex < 0) {\r
                colIndex = dashboard.items.getCount();\r
            } else if (side > 0) {\r
                ++colIndex;\r
            }\r
\r
            newCol = dashboard.createColumn();\r
\r
            if (toCt) {\r
                newCol.columnWidth = toCt.columnWidth = toCt.columnWidth / 2;\r
                delete toCt.width;\r
            } else {\r
                newCol.columnWidth = 1;  //full row\r
            }\r
\r
            toCt = dashboard.insert(colIndex, newCol);\r
            newIndex = 0;\r
        }\r
\r
        // make sure panel is visible prior to inserting so the layout doesn't ignore it\r
        panel.el.dom.style.display = '';\r
\r
        toCt.insert(newIndex, panel);\r
\r
        panel.isMoving = false;\r
\r
        toCt.updateLayout();\r
        Ext.resumeLayouts(true);\r
\r
        if (hasListeners.drop) {\r
            dashboard.fireEvent('drop', over);\r
        }\r
    }\r
});\r