extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/resizer/Splitter.js

@@ -0,0 +1,242 @@
+/**
+ * This class functions **between siblings of a {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox}
+ * layout** to resize both immediate siblings.
+ *
+ * A Splitter will preserve the flex ratio of any flexed siblings it is required to resize. It does this by setting the `flex` property of *all* flexed siblings
+ * to equal their pixel size. The actual numerical `flex` property in the Components will change, but the **ratio** to the total flex value will be preserved.
+ *
+ * A Splitter may be configured to show a centered mini-collapse tool orientated to collapse the {@link #collapseTarget}.
+ * The Splitter will then call that sibling Panel's {@link Ext.panel.Panel#method-collapse collapse} or {@link Ext.panel.Panel#method-expand expand} method
+ * to perform the appropriate operation (depending on the sibling collapse state). To create the mini-collapse tool but take care
+ * of collapsing yourself, configure the splitter with `{@link #performCollapse}: false`.
+ */
+Ext.define('Ext.resizer.Splitter', {
+    extend: 'Ext.Component',
+    requires: ['Ext.XTemplate'],
+    uses: ['Ext.resizer.SplitterTracker'],
+    alias: 'widget.splitter',
+
+    childEls: [
+        'collapseEl'
+    ],
+
+    renderTpl: [
+        '<tpl if="collapsible===true">',
+            '<div id="{id}-collapseEl" class="', Ext.baseCSSPrefix, 'collapse-el ',
+                Ext.baseCSSPrefix, 'layout-split-{collapseDir}">&#160;</div>',
+        '</tpl>'
+    ],
+
+    baseCls: Ext.baseCSSPrefix + 'splitter',
+    collapsedClsInternal: Ext.baseCSSPrefix + 'splitter-collapsed',
+
+    /**
+     * @cfg {Boolean} collapsible
+     * True to show a mini-collapse tool in the Splitter to toggle expand and collapse on the {@link #collapseTarget} Panel.
+     * Defaults to the {@link Ext.panel.Panel#collapsible collapsible} setting of the Panel.
+     */
+    collapsible: false,
+
+    /**
+     * @cfg {Boolean} performCollapse
+     * Set to false to prevent this Splitter's mini-collapse tool from managing the collapse
+     * state of the {@link #collapseTarget}.
+     */
+
+    /**
+     * @cfg {Boolean} collapseOnDblClick
+     * True to enable dblclick to toggle expand and collapse on the {@link #collapseTarget} Panel.
+     */
+    collapseOnDblClick: true,
+
+    /**
+     * @cfg {Number} defaultSplitMin
+     * Provides a default minimum width or height for the two components
+     * that the splitter is between.
+     */
+    defaultSplitMin: 40,
+
+    /**
+     * @cfg {Number} defaultSplitMax
+     * Provides a default maximum width or height for the two components
+     * that the splitter is between.
+     */
+    defaultSplitMax: 1000,
+
+    /**
+     * @cfg {String} collapsedCls
+     * A class to add to the splitter when it is collapsed. See {@link #collapsible}.
+     */
+
+    width: 5,
+    height: 5,
+
+    /**
+     * @cfg {String/Ext.panel.Panel} collapseTarget
+     * A string describing the relative position of the immediate sibling Panel to collapse. May be 'prev' or 'next'.
+     *
+     * Or the immediate sibling Panel to collapse.
+     *
+     * The orientation of the mini-collapse tool will be inferred from this setting.
+     *
+     * **Note that only Panels may be collapsed.**
+     */
+    collapseTarget: 'next',
+
+    /**
+     * @property {String} orientation
+     * Orientation of this Splitter. `'vertical'` when used in an hbox layout, `'horizontal'`
+     * when used in a vbox layout.
+     */
+
+    horizontal: false,
+    vertical: false,
+
+    /**
+     * Returns the config object (with an `xclass` property) for the splitter tracker. This
+     * is overridden by {@link Ext.resizer.BorderSplitter BorderSplitter} to create a
+     * {@link Ext.resizer.BorderSplitterTracker BorderSplitterTracker}.
+     * @protected
+     */
+    getTrackerConfig: function () {
+        return {
+            xclass: 'Ext.resizer.SplitterTracker',
+            el: this.el,
+            splitter: this
+        };
+    },
+
+    beforeRender: function() {
+        var me = this,
+            target = me.getCollapseTarget(),
+            collapseDir = me.getCollapseDirection();
+
+        me.callParent();
+        
+        if (target.collapsed) {
+            me.addCls(me.collapsedClsInternal);
+        }
+        
+        me.addCls(me.baseCls + '-' + me.orientation);
+        Ext.applyIf(me.renderData, {
+            collapseDir: collapseDir,
+            collapsible: me.collapsible || target.collapsible
+        });
+    },
+
+    onRender: function() {
+        var me = this;
+
+        me.callParent(arguments);
+
+        // Add listeners on the mini-collapse tool unless performCollapse is set to false
+        if (me.performCollapse !== false) {
+            if (me.renderData.collapsible) {
+                me.mon(me.collapseEl, 'click', me.toggleTargetCmp, me);
+            }
+            if (me.collapseOnDblClick) {
+                me.mon(me.el, 'dblclick', me.toggleTargetCmp, me);
+            }
+        }
+
+        // Ensure the mini collapse icon is set to the correct direction when the target is collapsed/expanded by any means
+        me.mon(me.getCollapseTarget(), {
+            collapse: me.onTargetCollapse,
+            expand: me.onTargetExpand,
+            scope: me
+        });
+
+        me.el.unselectable();
+        me.tracker = Ext.create(me.getTrackerConfig());
+
+        // Relay the most important events to our owner (could open wider later):
+        me.relayEvents(me.tracker, [ 'beforedragstart', 'dragstart', 'dragend' ]);
+    },
+
+    getCollapseDirection: function() {
+        var me = this,
+            dir = me.collapseDirection,
+            collapseTarget, idx, items, type;
+
+        if (!dir) {
+            collapseTarget = me.collapseTarget;
+            if (collapseTarget.isComponent) {
+                dir = collapseTarget.collapseDirection;
+            }
+
+            if (!dir) {
+                // Avoid duplication of string tests.
+                // Create a two bit truth table of the configuration of the Splitter:
+                // Collapse Target | orientation
+                //        0              0             = next, horizontal
+                //        0              1             = next, vertical
+                //        1              0             = prev, horizontal
+                //        1              1             = prev, vertical
+                type = me.ownerCt.layout.type;
+                if (collapseTarget.isComponent) {
+                    items = me.ownerCt.items;
+                    idx = Number(items.indexOf(collapseTarget) == items.indexOf(me) - 1) << 1 | Number(type == 'hbox');
+                } else {
+                    idx = Number(me.collapseTarget == 'prev') << 1 | Number(type == 'hbox');
+                }
+
+                // Read the data out the truth table
+                dir = ['bottom', 'right', 'top', 'left'][idx];
+            }
+
+            me.collapseDirection = dir;
+        }
+
+        me.orientation = (dir == 'top' || dir == 'bottom') ? 'horizontal' : 'vertical';
+        me[me.orientation] = true;
+
+        return dir;
+    },
+
+    getCollapseTarget: function() {
+        var me = this;
+
+        return me.collapseTarget.isComponent ? me.collapseTarget : me.collapseTarget == 'prev' ? me.previousSibling() : me.nextSibling();
+    },
+
+    onTargetCollapse: function(target) {
+        this.el.addCls([this.collapsedClsInternal, this.collapsedCls]);
+    },
+
+    onTargetExpand: function(target) {
+        this.el.removeCls([this.collapsedClsInternal, this.collapsedCls]);
+    },
+
+    toggleTargetCmp: function(e, t) {
+        var cmp = this.getCollapseTarget(),
+            placeholder = cmp.placeholder,
+            toggle;
+
+        if (placeholder && !placeholder.hidden) {
+            toggle = true;
+        } else {
+            toggle = !cmp.hidden;
+        }
+
+        if (toggle) {
+            if (cmp.collapsed) {
+                cmp.expand();
+            } else if (cmp.collapseDirection) {
+                cmp.collapse();
+            } else {
+                cmp.collapse(this.renderData.collapseDir);
+            }
+        }
+    },
+
+    /*
+     * Work around IE bug. %age margins do not get recalculated on element resize unless repaint called.
+     */
+    setSize: function() {
+        var me = this;
+        me.callParent(arguments);
+        if (Ext.isIE && me.el) {
+            me.el.repaint();
+        }
+    }
+});

data/app/assets/javascripts/extjs-rails/src/resizer/SplitterTracker.js

@@ -0,0 +1,230 @@
+/**
+ * Private utility class for Ext.Splitter.
+ * @private
+ */
+Ext.define('Ext.resizer.SplitterTracker', {
+    extend: 'Ext.dd.DragTracker',
+    requires: ['Ext.util.Region'],
+    enabled: true,
+    
+    overlayCls: Ext.baseCSSPrefix + 'resizable-overlay',
+
+    createDragOverlay: function () {
+        var overlay;
+
+        overlay = this.overlay =  Ext.getBody().createChild({
+            cls: this.overlayCls, 
+            html: ' '
+        });
+
+        overlay.unselectable();
+        overlay.setSize(Ext.Element.getViewWidth(true), Ext.Element.getViewHeight(true));
+        overlay.show();
+    },
+
+    getPrevCmp: function() {
+        var splitter = this.getSplitter();
+        return splitter.previousSibling();
+    },
+
+    getNextCmp: function() {
+        var splitter = this.getSplitter();
+        return splitter.nextSibling();
+    },
+
+    // ensure the tracker is enabled, store boxes of previous and next
+    // components and calculate the constrain region
+    onBeforeStart: function(e) {
+        var me = this,
+            prevCmp = me.getPrevCmp(),
+            nextCmp = me.getNextCmp(),
+            collapseEl = me.getSplitter().collapseEl,
+            target = e.getTarget(),
+            box;
+
+        if (collapseEl && target === me.getSplitter().collapseEl.dom) {
+            return false;
+        }
+
+        // SplitterTracker is disabled if any of its adjacents are collapsed.
+        if (nextCmp.collapsed || prevCmp.collapsed) {
+            return false;
+        }
+
+        // store boxes of previous and next
+        me.prevBox  = prevCmp.getEl().getBox();
+        me.nextBox  = nextCmp.getEl().getBox();
+        me.constrainTo = box = me.calculateConstrainRegion();
+
+        if (!box) {
+            return false;
+        }
+
+        me.createDragOverlay();
+
+        return box;
+    },
+
+    // We move the splitter el. Add the proxy class.
+    onStart: function(e) {
+        var splitter = this.getSplitter();
+        splitter.addCls(splitter.baseCls + '-active');
+    },
+
+    // calculate the constrain Region in which the splitter el may be moved.
+    calculateConstrainRegion: function() {
+        var me         = this,
+            splitter   = me.getSplitter(),
+            splitWidth = splitter.getWidth(),
+            defaultMin = splitter.defaultSplitMin,
+            orient     = splitter.orientation,
+            prevBox    = me.prevBox,
+            prevCmp    = me.getPrevCmp(),
+            nextBox    = me.nextBox,
+            nextCmp    = me.getNextCmp(),
+            // prev and nextConstrainRegions are the maximumBoxes minus the
+            // minimumBoxes. The result is always the intersection
+            // of these two boxes.
+            prevConstrainRegion, nextConstrainRegion;
+
+        // vertical splitters, so resizing left to right
+        if (orient === 'vertical') {
+
+            // Region constructor accepts (top, right, bottom, left)
+            // anchored/calculated from the left
+            prevConstrainRegion = new Ext.util.Region(
+                prevBox.y,
+                // Right boundary is x + maxWidth if there IS a maxWidth.
+                // Otherwise it is calculated based upon the minWidth of the next Component
+                (prevCmp.maxWidth ? prevBox.x + prevCmp.maxWidth : nextBox.right - (nextCmp.minWidth || defaultMin)) + splitWidth,
+                prevBox.bottom,
+                prevBox.x + (prevCmp.minWidth || defaultMin)
+            );
+            // anchored/calculated from the right
+            nextConstrainRegion = new Ext.util.Region(
+                nextBox.y,
+                nextBox.right - (nextCmp.minWidth || defaultMin),
+                nextBox.bottom,
+                // Left boundary is right - maxWidth if there IS a maxWidth.
+                // Otherwise it is calculated based upon the minWidth of the previous Component
+                (nextCmp.maxWidth ? nextBox.right - nextCmp.maxWidth : prevBox.x + (prevBox.minWidth || defaultMin)) - splitWidth
+            );
+        } else {
+            // anchored/calculated from the top
+            prevConstrainRegion = new Ext.util.Region(
+                prevBox.y + (prevCmp.minHeight || defaultMin),
+                prevBox.right,
+                // Bottom boundary is y + maxHeight if there IS a maxHeight.
+                // Otherwise it is calculated based upon the minWidth of the next Component
+                (prevCmp.maxHeight ? prevBox.y + prevCmp.maxHeight : nextBox.bottom - (nextCmp.minHeight || defaultMin)) + splitWidth,
+                prevBox.x
+            );
+            // anchored/calculated from the bottom
+            nextConstrainRegion = new Ext.util.Region(
+                // Top boundary is bottom - maxHeight if there IS a maxHeight.
+                // Otherwise it is calculated based upon the minHeight of the previous Component
+                (nextCmp.maxHeight ? nextBox.bottom - nextCmp.maxHeight : prevBox.y + (prevCmp.minHeight || defaultMin)) - splitWidth,
+                nextBox.right,
+                nextBox.bottom - (nextCmp.minHeight || defaultMin),
+                nextBox.x
+            );
+        }
+
+        // intersection of the two regions to provide region draggable
+        return prevConstrainRegion.intersect(nextConstrainRegion);
+    },
+
+    // Performs the actual resizing of the previous and next components
+    performResize: function(e, offset) {
+        var me        = this,
+            splitter  = me.getSplitter(),
+            orient    = splitter.orientation,
+            prevCmp   = me.getPrevCmp(),
+            nextCmp   = me.getNextCmp(),
+            owner     = splitter.ownerCt,
+            flexedSiblings = owner.query('>[flex]'),
+            len       = flexedSiblings.length,
+            i         = 0,
+            dimension,
+            size,
+            totalFlex = 0;
+
+        // Convert flexes to pixel values proportional to the total pixel width of all flexes.
+        for (; i < len; i++) {
+            size = flexedSiblings[i].getWidth();
+            totalFlex += size;
+            flexedSiblings[i].flex = size;
+        }
+
+        offset = offset || me.getOffset('dragTarget');
+
+        if (orient === 'vertical') {
+            offset = offset[0];
+            dimension = 'width';
+        } else {
+            dimension = 'height';
+            offset = offset[1];
+        }
+        if (prevCmp) {
+            size = me.prevBox[dimension] + offset;
+            if (prevCmp.flex) {
+                prevCmp.flex = size;
+            } else {
+                prevCmp[dimension] = size;
+            }
+        }
+        if (nextCmp) {
+            size = me.nextBox[dimension] - offset;
+            if (nextCmp.flex) {
+                nextCmp.flex = size;
+            } else {
+                nextCmp[dimension] = size;
+            }
+        }
+
+        owner.updateLayout();
+    },
+
+    // Cleans up the overlay (if we have one) and calls the base. This cannot be done in
+    // onEnd, because onEnd is only called if a drag is detected but the overlay is created
+    // regardless (by onBeforeStart).
+    endDrag: function () {
+        var me = this;
+
+        if (me.overlay) {
+             me.overlay.remove();
+             delete me.overlay;
+        }
+
+        me.callParent(arguments); // this calls onEnd
+    },
+
+    // perform the resize and remove the proxy class from the splitter el
+    onEnd: function(e) {
+        var me = this,
+            splitter = me.getSplitter();
+            
+        splitter.removeCls(splitter.baseCls + '-active');
+        me.performResize(e, me.getOffset('dragTarget'));
+    },
+
+    // Track the proxy and set the proper XY coordinates
+    // while constraining the drag
+    onDrag: function(e) {
+        var me        = this,
+            offset    = me.getOffset('dragTarget'),
+            splitter  = me.getSplitter(),
+            splitEl   = splitter.getEl(),
+            orient    = splitter.orientation;
+
+        if (orient === "vertical") {
+            splitEl.setX(me.startRegion.left + offset[0]);
+        } else {
+            splitEl.setY(me.startRegion.top + offset[1]);
+        }
+    },
+
+    getSplitter: function() {
+        return this.splitter;
+    }
+});