extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/tree/ViewDragZone.js

@@ -0,0 +1,49 @@
+/**
+ * @private
+ */
+Ext.define('Ext.tree.ViewDragZone', {
+    extend: 'Ext.view.DragZone',
+
+    isPreventDrag: function(e, record) {
+        return (record.get('allowDrag') === false) || !!e.getTarget(this.view.expanderSelector);
+    },
+    
+    afterRepair: function() {
+        var me = this,
+            view = me.view,
+            selectedRowCls = view.selectedItemCls,
+            records = me.dragData.records,
+            r,
+            rLen    = records.length,
+            fly = Ext.fly,
+            item;
+        
+        if (Ext.enableFx && me.repairHighlight) {
+            // Roll through all records and highlight all the ones we attempted to drag.
+            for (r = 0; r < rLen; r++) {
+                // anonymous fns below, don't hoist up unless below is wrapped in
+                // a self-executing function passing in item.
+                item = view.getNode(records[r]);
+
+                // We must remove the selected row class before animating, because
+                // the selected row class declares !important on its background-color.
+                fly(item.firstChild).highlight(me.repairHighlightColor, {
+                    listeners: {
+                        beforeanimate: function() {
+                            if (view.isSelected(item)) {
+                                fly(item).removeCls(selectedRowCls);
+                            }
+                        },
+                        afteranimate: function() {
+                            if (view.isSelected(item)) {
+                                fly(item).addCls(selectedRowCls);
+                            }
+                        }
+                    }
+                });
+            }
+
+        }
+        me.dragging = false;
+    }
+});

data/app/assets/javascripts/extjs-rails/src/tree/ViewDropZone.js

@@ -0,0 +1,287 @@
+/**
+ * @private
+ */
+Ext.define('Ext.tree.ViewDropZone', {
+    extend: 'Ext.view.DropZone',
+
+    /**
+     * @cfg {Boolean} allowParentInsert
+     * Allow inserting a dragged node between an expanded parent node and its first child that will become a
+     * sibling of the parent when dropped.
+     */
+    allowParentInserts: false,
+ 
+    /**
+     * @cfg {String} allowContainerDrop
+     * True if drops on the tree container (outside of a specific tree node) are allowed.
+     */
+    allowContainerDrops: false,
+
+    /**
+     * @cfg {String} appendOnly
+     * True if the tree should only allow append drops (use for trees which are sorted).
+     */
+    appendOnly: false,
+
+    /**
+     * @cfg {String} expandDelay
+     * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node
+     * over the target.
+     */
+    expandDelay : 500,
+
+    indicatorCls: Ext.baseCSSPrefix + 'tree-ddindicator',
+
+    // private
+    expandNode : function(node) {
+        var view = this.view;
+        if (!node.isLeaf() && !node.isExpanded()) {
+            view.expand(node);
+            this.expandProcId = false;
+        }
+    },
+
+    // private
+    queueExpand : function(node) {
+        this.expandProcId = Ext.Function.defer(this.expandNode, this.expandDelay, this, [node]);
+    },
+
+    // private
+    cancelExpand : function() {
+        if (this.expandProcId) {
+            clearTimeout(this.expandProcId);
+            this.expandProcId = false;
+        }
+    },
+
+    getPosition: function(e, node) {
+        var view = this.view,
+            record = view.getRecord(node),
+            y = e.getPageY(),
+            noAppend = record.isLeaf(),
+            noBelow = false,
+            region = Ext.fly(node).getRegion(),
+            fragment;
+
+        // If we are dragging on top of the root node of the tree, we always want to append.
+        if (record.isRoot()) {
+            return 'append';
+        }
+
+        // Return 'append' if the node we are dragging on top of is not a leaf else return false.
+        if (this.appendOnly) {
+            return noAppend ? false : 'append';
+        }
+
+        if (!this.allowParentInsert) {
+            noBelow = record.hasChildNodes() && record.isExpanded();
+        }
+
+        fragment = (region.bottom - region.top) / (noAppend ? 2 : 3);
+        if (y >= region.top && y < (region.top + fragment)) {
+            return 'before';
+        }
+        else if (!noBelow && (noAppend || (y >= (region.bottom - fragment) && y <= region.bottom))) {
+            return 'after';
+        }
+        else {
+            return 'append';
+        }
+    },
+
+    isValidDropPoint : function(node, position, dragZone, e, data) {
+        if (!node || !data.item) {
+            return false;
+        }
+
+        var view = this.view,
+            targetNode = view.getRecord(node),
+            draggedRecords = data.records,
+            dataLength = draggedRecords.length,
+            ln = draggedRecords.length,
+            i, record;
+
+        // No drop position, or dragged records: invalid drop point
+        if (!(targetNode && position && dataLength)) {
+            return false;
+        }
+
+        // If the targetNode is within the folder we are dragging
+        for (i = 0; i < ln; i++) {
+            record = draggedRecords[i];
+            if (record.isNode && record.contains(targetNode)) {
+                return false;
+            }
+        }
+        
+        // Respect the allowDrop field on Tree nodes
+        if (position === 'append' && targetNode.get('allowDrop') === false) {
+            return false;
+        }
+        else if (position != 'append' && targetNode.parentNode.get('allowDrop') === false) {
+            return false;
+        }
+
+        // If the target record is in the dragged dataset, then invalid drop
+        if (Ext.Array.contains(draggedRecords, targetNode)) {
+             return false;
+        }
+
+        // @TODO: fire some event to notify that there is a valid drop possible for the node you're dragging
+        // Yes: this.fireViewEvent(blah....) fires an event through the owning View.
+        return true;
+    },
+
+    onNodeOver : function(node, dragZone, e, data) {
+        var position = this.getPosition(e, node),
+            returnCls = this.dropNotAllowed,
+            view = this.view,
+            targetNode = view.getRecord(node),
+            indicator = this.getIndicator(),
+            indicatorX = 0,
+            indicatorY = 0;
+
+        // auto node expand check
+        this.cancelExpand();
+        if (position == 'append' && !this.expandProcId && !Ext.Array.contains(data.records, targetNode) && !targetNode.isLeaf() && !targetNode.isExpanded()) {
+            this.queueExpand(targetNode);
+        }
+            
+            
+        if (this.isValidDropPoint(node, position, dragZone, e, data)) {
+            this.valid = true;
+            this.currentPosition = position;
+            this.overRecord = targetNode;
+
+            indicator.setWidth(Ext.fly(node).getWidth());
+            indicatorY = Ext.fly(node).getY() - Ext.fly(view.el).getY() - 1;
+
+            /*
+             * In the code below we show the proxy again. The reason for doing this is showing the indicator will
+             * call toFront, causing it to get a new z-index which can sometimes push the proxy behind it. We always 
+             * want the proxy to be above, so calling show on the proxy will call toFront and bring it forward.
+             */
+            if (position == 'before') {
+                returnCls = targetNode.isFirst() ? Ext.baseCSSPrefix + 'tree-drop-ok-above' : Ext.baseCSSPrefix + 'tree-drop-ok-between';
+                indicator.showAt(0, indicatorY);
+                dragZone.proxy.show();
+            } else if (position == 'after') {
+                returnCls = targetNode.isLast() ? Ext.baseCSSPrefix + 'tree-drop-ok-below' : Ext.baseCSSPrefix + 'tree-drop-ok-between';
+                indicatorY += Ext.fly(node).getHeight();
+                indicator.showAt(0, indicatorY);
+                dragZone.proxy.show();
+            } else {
+                returnCls = Ext.baseCSSPrefix + 'tree-drop-ok-append';
+                // @TODO: set a class on the parent folder node to be able to style it
+                indicator.hide();
+            }
+        } else {
+            this.valid = false;
+        }
+
+        this.currentCls = returnCls;
+        return returnCls;
+    },
+
+    onContainerOver : function(dd, e, data) {
+        return e.getTarget('.' + this.indicatorCls) ? this.currentCls : this.dropNotAllowed;
+    },
+    
+    notifyOut: function() {
+        this.callParent(arguments);
+        this.cancelExpand();
+    },
+
+    handleNodeDrop : function(data, targetNode, position) {
+        var me = this,
+            view = me.view,
+            parentNode = targetNode.parentNode,
+            store = view.getStore(),
+            recordDomNodes = [],
+            records, i, len,
+            insertionMethod, argList,
+            needTargetExpand,
+            transferData,
+            processDrop;
+
+        // If the copy flag is set, create a copy of the Models with the same IDs
+        if (data.copy) {
+            records = data.records;
+            data.records = [];
+            for (i = 0, len = records.length; i < len; i++) {
+                data.records.push(Ext.apply({}, records[i].data));
+            }
+        }
+
+        // Cancel any pending expand operation
+        me.cancelExpand();
+
+        // Grab a reference to the correct node insertion method.
+        // Create an arg list array intended for the apply method of the
+        // chosen node insertion method.
+        // Ensure the target object for the method is referenced by 'targetNode'
+        if (position == 'before') {
+            insertionMethod = parentNode.insertBefore;
+            argList = [null, targetNode];
+            targetNode = parentNode;
+        }
+        else if (position == 'after') {
+            if (targetNode.nextSibling) {
+                insertionMethod = parentNode.insertBefore;
+                argList = [null, targetNode.nextSibling];
+            }
+            else {
+                insertionMethod = parentNode.appendChild;
+                argList = [null];
+            }
+            targetNode = parentNode;
+        }
+        else {
+            if (!targetNode.isExpanded()) {
+                needTargetExpand = true;
+            }
+            insertionMethod = targetNode.appendChild;
+            argList = [null];
+        }
+
+        // A function to transfer the data into the destination tree
+        transferData = function() {
+            var node,
+                r, rLen, color, n;
+            for (i = 0, len = data.records.length; i < len; i++) {
+                argList[0] = data.records[i];
+                node = insertionMethod.apply(targetNode, argList);
+                
+                if (Ext.enableFx && me.dropHighlight) {
+                    recordDomNodes.push(view.getNode(node));
+                }
+            }
+            
+            // Kick off highlights after everything's been inserted, so they are
+            // more in sync without insertion/render overhead.
+            if (Ext.enableFx && me.dropHighlight) {
+                //FIXME: the check for n.firstChild is not a great solution here. Ideally the line should simply read 
+                //Ext.fly(n.firstChild) but this yields errors in IE6 and 7. See ticket EXTJSIV-1705 for more details
+                rLen  = recordDomNodes.length;
+                color = me.dropHighlightColor;
+
+                for (r = 0; r < rLen; r++) {
+                    n = recordDomNodes[r];
+
+                    if (n) {
+                        Ext.fly(n.firstChild ? n.firstChild : n).highlight(color);
+                    }
+                }
+            }
+        };
+
+        // If dropping right on an unexpanded node, transfer the data after it is expanded.
+        if (needTargetExpand) {
+            targetNode.expand(false, transferData);
+        }
+        // Otherwise, call the data transfer function immediately
+        else {
+            transferData();
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/tree/plugin/TreeViewDragDrop.js

@@ -0,0 +1,244 @@
+/**
+ * This plugin provides drag and/or drop functionality for a TreeView.
+ *
+ * It creates a specialized instance of {@link Ext.dd.DragZone DragZone} which knows how to drag out of a
+ * {@link Ext.tree.View TreeView} and loads the data object which is passed to a cooperating
+ * {@link Ext.dd.DragZone DragZone}'s methods with the following properties:
+ *
+ *   - copy : Boolean
+ *
+ *     The value of the TreeView's `copy` property, or `true` if the TreeView was configured with `allowCopy: true` *and*
+ *     the control key was pressed when the drag operation was begun.
+ *
+ *   - view : TreeView
+ *
+ *     The source TreeView from which the drag originated.
+ *
+ *   - ddel : HtmlElement
+ *
+ *     The drag proxy element which moves with the mouse
+ *
+ *   - item : HtmlElement
+ *
+ *     The TreeView node upon which the mousedown event was registered.
+ *
+ *   - records : Array
+ *
+ *     An Array of {@link Ext.data.Model Models} representing the selected data being dragged from the source TreeView.
+ *
+ * It also creates a specialized instance of {@link Ext.dd.DropZone} which cooperates with other DropZones which are
+ * members of the same ddGroup which processes such data objects.
+ *
+ * Adding this plugin to a view means that two new events may be fired from the client TreeView, {@link #beforedrop} and
+ * {@link #drop}.
+ *
+ * Note that the plugin must be added to the tree view, not to the tree panel. For example using viewConfig:
+ *
+ *     viewConfig: {
+ *         plugins: { ptype: 'treeviewdragdrop' }
+ *     }
+ */
+Ext.define('Ext.tree.plugin.TreeViewDragDrop', {
+    extend: 'Ext.AbstractPlugin',
+    alias: 'plugin.treeviewdragdrop',
+
+    uses: [
+        'Ext.tree.ViewDragZone',
+        'Ext.tree.ViewDropZone'
+    ],
+
+    /**
+     * @event beforedrop
+     *
+     * **This event is fired through the TreeView. Add listeners to the TreeView object**
+     *
+     * Fired when a drop gesture has been triggered by a mouseup event in a valid drop position in the TreeView.
+     *
+     * @param {HTMLElement} node The TreeView node **if any** over which the mouse was positioned.
+     *
+     * Returning `false` to this event signals that the drop gesture was invalid, and if the drag proxy will animate
+     * back to the point from which the drag began.
+     *
+     * Returning `0` To this event signals that the data transfer operation should not take place, but that the gesture
+     * was valid, and that the repair operation should not take place.
+     *
+     * Any other return value continues with the data transfer operation.
+     *
+     * @param {Object} data The data object gathered at mousedown time by the cooperating
+     * {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following
+     * properties:
+     * @param {Boolean} data.copy The value of the TreeView's `copy` property, or `true` if the TreeView was configured with
+     * `allowCopy: true` and the control key was pressed when the drag operation was begun
+     * @param {Ext.tree.View} data.view The source TreeView from which the drag originated.
+     * @param {HTMLElement} data.ddel The drag proxy element which moves with the mouse
+     * @param {HTMLElement} data.item The TreeView node upon which the mousedown event was registered.
+     * @param {Ext.data.Model[]} data.records An Array of {@link Ext.data.Model Model}s representing the selected data being
+     * dragged from the source TreeView.
+     *
+     * @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
+     *
+     * @param {String} dropPosition `"before"`, `"after"` or `"append"` depending on whether the mouse is above or below
+     * the midline of the node, or the node is a branch node which accepts new child nodes.
+     *
+     * @param {Object} dropHandler An object containing methods to complete/cancel the data transfer operation and either
+     * move or copy Model instances from the source View's Store to the destination View's Store.
+     *
+     * This is useful when you want to perform some kind of asynchronous processing before confirming/cancelling
+     * the drop, such as an {@link Ext.window.MessageBox#confirm confirm} call, or an Ajax request.
+     *
+     * Set dropHandler.wait = true in this event handler to delay processing. When you want to complete the event, call
+     * dropHandler.processDrop(). To cancel the drop, call dropHandler.cancelDrop.
+     */
+
+    /**
+     * @event drop
+     *
+     * **This event is fired through the TreeView. Add listeners to the TreeView object** Fired when a drop operation
+     * has been completed and the data has been moved or copied.
+     *
+     * @param {HTMLElement} node The TreeView node **if any** over which the mouse was positioned.
+     *
+     * @param {Object} data The data object gathered at mousedown time by the cooperating
+     * {@link Ext.dd.DragZone DragZone}'s {@link Ext.dd.DragZone#getDragData getDragData} method it contains the following
+     * properties:
+     * @param {Boolean} data.copy The value of the TreeView's `copy` property, or `true` if the TreeView was configured with
+     * `allowCopy: true` and the control key was pressed when the drag operation was begun
+     * @param {Ext.tree.View} data.view The source TreeView from which the drag originated.
+     * @param {HTMLElement} data.ddel The drag proxy element which moves with the mouse
+     * @param {HTMLElement} data.item The TreeView node upon which the mousedown event was registered.
+     * @param {Ext.data.Model[]} data.records An Array of {@link Ext.data.Model Model}s representing the selected data being
+     * dragged from the source TreeView.
+     *
+     * @param {Ext.data.Model} overModel The Model over which the drop gesture took place.
+     *
+     * @param {String} dropPosition `"before"`, `"after"` or `"append"` depending on whether the mouse is above or below
+     * the midline of the node, or the node is a branch node which accepts new child nodes.
+     */
+    //<locale>
+    dragText : '{0} selected node{1}',
+    //</locale>
+
+    /**
+     * @cfg {Boolean} allowParentInsert
+     * Allow inserting a dragged node between an expanded parent node and its first child that will become a sibling of
+     * the parent when dropped.
+     */
+    allowParentInserts: false,
+
+    /**
+     * @cfg {String} allowContainerDrop
+     * True if drops on the tree container (outside of a specific tree node) are allowed.
+     */
+    allowContainerDrops: false,
+
+    /**
+     * @cfg {String} appendOnly
+     * True if the tree should only allow append drops (use for trees which are sorted).
+     */
+    appendOnly: false,
+
+    /**
+     * @cfg {String} ddGroup
+     * A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and
+     * DropZone used by this plugin will only interact with other drag drop objects in the same group.
+     */
+    ddGroup : "TreeDD",
+
+    /**
+     * @cfg {String} dragGroup
+     * The ddGroup to which the DragZone will belong.
+     *
+     * This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other
+     * Drag/DropZones which are members of the same ddGroup.
+     */
+
+    /**
+     * @cfg {String} dropGroup
+     * The ddGroup to which the DropZone will belong.
+     *
+     * This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other
+     * Drag/DropZones which are members of the same ddGroup.
+     */
+
+    /**
+     * @cfg {String} expandDelay
+     * The delay in milliseconds to wait before expanding a target tree node while dragging a droppable node over the
+     * target.
+     */
+    expandDelay : 1000,
+
+    /**
+     * @cfg {Boolean} enableDrop
+     * Set to `false` to disallow the View from accepting drop gestures.
+     */
+    enableDrop: true,
+
+    /**
+     * @cfg {Boolean} enableDrag
+     * Set to `false` to disallow dragging items from the View.
+     */
+    enableDrag: true,
+
+    /**
+     * @cfg {String} nodeHighlightColor
+     * The color to use when visually highlighting the dragged or dropped node (default value is light blue).
+     * The color must be a 6 digit hex value, without a preceding '#'. See also {@link #nodeHighlightOnDrop} and
+     * {@link #nodeHighlightOnRepair}.
+     */
+    nodeHighlightColor: 'c3daf9',
+
+    /**
+     * @cfg {Boolean} nodeHighlightOnDrop
+     * Whether or not to highlight any nodes after they are
+     * successfully dropped on their target. Defaults to the value of `Ext.enableFx`.
+     * See also {@link #nodeHighlightColor} and {@link #nodeHighlightOnRepair}.
+     */
+    nodeHighlightOnDrop: Ext.enableFx,
+
+    /**
+     * @cfg {Boolean} nodeHighlightOnRepair
+     * Whether or not to highlight any nodes after they are
+     * repaired from an unsuccessful drag/drop. Defaults to the value of `Ext.enableFx`.
+     * See also {@link #nodeHighlightColor} and {@link #nodeHighlightOnDrop}.
+     */
+    nodeHighlightOnRepair: Ext.enableFx,
+
+    init : function(view) {
+        view.on('render', this.onViewRender, this, {single: true});
+    },
+
+    /**
+     * @private
+     * AbstractComponent calls destroy on all its plugins at destroy time.
+     */
+    destroy: function() {
+        Ext.destroy(this.dragZone, this.dropZone);
+    },
+
+    onViewRender : function(view) {
+        var me = this;
+
+        if (me.enableDrag) {
+            me.dragZone = new Ext.tree.ViewDragZone({
+                view: view,
+                ddGroup: me.dragGroup || me.ddGroup,
+                dragText: me.dragText,
+                repairHighlightColor: me.nodeHighlightColor,
+                repairHighlight: me.nodeHighlightOnRepair
+            });
+        }
+
+        if (me.enableDrop) {
+            me.dropZone = new Ext.tree.ViewDropZone({
+                view: view,
+                ddGroup: me.dropGroup || me.ddGroup,
+                allowContainerDrops: me.allowContainerDrops,
+                appendOnly: me.appendOnly,
+                allowParentInserts: me.allowParentInserts,
+                expandDelay: me.expandDelay,
+                dropHighlightColor: me.nodeHighlightColor,
+                dropHighlight: me.nodeHighlightOnDrop
+            });
+        }
+    }
+});