/** * This class is used for managing the configurator's panel drop zone. * * @private */Ext.define('Ext.pivot.plugin.configurator.DropZone', { extend: 'Ext.dd.DropZone', proxyOffsets: [-4, -9], configPanelCls: Ext.baseCSSPrefix + 'pivot-grid-config-container-body', configColumnCls: Ext.baseCSSPrefix + 'pivot-grid-config-column', constructor: function(panel){ this.panel = panel; this.ddGroup = this.getDDGroup(); this.callParent([panel.id]); }, disable: function() { this.disabled = true; }, enable: function() { this.disabled = false; }, getDDGroup: function() { // return the column header dd group so we can allow column droping inside the grouping panel return 'configurator-' + this.panel.id; }, getTargetFromEvent : function(e){ return e.getTarget('.' + this.configColumnCls) || e.getTarget('.' + this.configPanelCls); }, getTopIndicator: function() { if (!this.topIndicator) { this.self.prototype.topIndicator = Ext.DomHelper.append(Ext.getBody(), { cls: 'col-move-top ' + Ext.baseCSSPrefix + 'col-move-top', html: " " }, true); this.self.prototype.indicatorXOffset = Math.floor((this.topIndicator.dom.offsetWidth + 1) / 2); } return this.topIndicator; }, getBottomIndicator: function() { if (!this.bottomIndicator) { this.self.prototype.bottomIndicator = Ext.DomHelper.append(Ext.getBody(), { cls: 'col-move-bottom ' + Ext.baseCSSPrefix + 'col-move-bottom', html: " " }, true); } return this.bottomIndicator; }, getLocation: function(data, t, e) { var x = e.getXY()[0], target = Ext.getCmp(t.id), region, pos; if(target instanceof Ext.pivot.plugin.configurator.Container){ // that means that the column is dragged above the grouping panel so find out if there are any columns already if(target.items.getCount() > 0){ // now fetch the position of the last item region = Ext.fly(target.items.last().el).getRegion(); }else{ region = new Ext.util.Region(0, 1000000, 0, 0); } }else{ region = Ext.fly(t).getRegion(); } if ((region.right - x) <= (region.right - region.left) / 2) { pos = "after"; } else { pos = "before"; } return data.dropLocation = { pos: pos, header: Ext.getCmp(t.id), node: t }; }, positionIndicator: function(data, node, e){ var me = this, dragHeader = data.header, dropLocation = me.getLocation(data, node, e), targetHeader = dropLocation.header, pos = dropLocation.pos, nextHd, prevHd, topIndicator, bottomIndicator, topAnchor, bottomAnchor, topXY, bottomXY, headerCtEl, minX, maxX, allDropZones, ln, i, dropZone; // Avoid expensive CQ lookups and DOM calculations if dropPosition has not changed if (targetHeader === me.lastTargetHeader && pos === me.lastDropPos) { return; } nextHd = dragHeader.nextSibling('pivotconfigfield:not([hidden])'); prevHd = dragHeader.previousSibling('pivotconfigfield:not([hidden])'); me.lastTargetHeader = targetHeader; me.lastDropPos = pos; if ((dragHeader !== targetHeader) && ((pos === "before" && nextHd !== targetHeader) || (pos === "after" && prevHd !== targetHeader)) && !targetHeader.isDescendantOf(dragHeader)) { // As we move in between different DropZones that are in the same // group (such as the case when in a locked grid), invalidateDrop // on the other dropZones. allDropZones = Ext.dd.DragDropManager.getRelated(me); ln = allDropZones.length; i = 0; for (; i < ln; i++) { dropZone = allDropZones[i]; if (dropZone !== me && dropZone.invalidateDrop) { dropZone.invalidateDrop(); } } me.valid = true; topIndicator = me.getTopIndicator(); bottomIndicator = me.getBottomIndicator(); if (pos === 'before') { topAnchor = 'bc-tl'; bottomAnchor = 'tc-bl'; } else { topAnchor = 'bc-tr'; bottomAnchor = 'tc-br'; } // Calculate arrow positions. Offset them to align exactly with column border line if(targetHeader.isConfiguratorContainer && targetHeader.items.getCount() > 0){ // if dropping zone is the container then align the rows to the last column item topXY = topIndicator.getAlignToXY(targetHeader.items.last().el, topAnchor); bottomXY = bottomIndicator.getAlignToXY(targetHeader.items.last().el, bottomAnchor); }else{ topXY = topIndicator.getAlignToXY(targetHeader.el, topAnchor); bottomXY = bottomIndicator.getAlignToXY(targetHeader.el, bottomAnchor); } // constrain the indicators to the viewable section headerCtEl = me.panel.el; minX = headerCtEl.getX() - me.indicatorXOffset; maxX = headerCtEl.getX() + headerCtEl.getWidth(); topXY[0] = Ext.Number.constrain(topXY[0], minX, maxX); bottomXY[0] = Ext.Number.constrain(bottomXY[0], minX, maxX); // position and show indicators topIndicator.setXY(topXY); bottomIndicator.setXY(bottomXY); topIndicator.show(); bottomIndicator.show(); // invalidate drop operation and hide indicators } else { me.invalidateDrop(); } }, invalidateDrop: function() { this.valid = false; this.hideIndicators(); }, onNodeOver: function(node, dragZone, e, data) { var me = this, doPosition = true, dragColumn = data.header, target = me.getLocation(data, node, e); if (data.header.el.dom === node) { doPosition = false; } if(target && target.header && dragColumn) { doPosition = doPosition && dragColumn.getField().getSettings().isAllowed(target.header); } if (doPosition) { me.positionIndicator(data, node, e); } else { me.valid = false; } return me.valid ? me.dropAllowed : me.dropNotAllowed; }, hideIndicators: function() { var me = this; me.getTopIndicator().hide(); me.getBottomIndicator().hide(); me.lastTargetHeader = me.lastDropPos = null; }, onNodeOut: function() { this.hideIndicators(); }, onNodeDrop: function(node, dragZone, e, data) { var me = this, dragColumn = data.header, dropLocation = data.dropLocation; if (me.valid && dropLocation){ me.panel.dragDropField(dropLocation.header, dragColumn, dropLocation.pos); } }});