/*!
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.ux.Reorderer
+ * @extends Object
+ * Generic base class for handling reordering of items. This base class must be extended to provide the
+ * actual reordering functionality - the base class just sets up events and abstract logic functions.
+ * It will fire events and set defaults, deferring the actual reordering to a doReorder implementation.
+ * See Ext.ux.TabReorderer for an example.
+ */
+Ext.ux.Reorderer = Ext.extend(Object, {
+ /**
+ * @property defaults
+ * @type Object
+ * Object containing default values for plugin configuration details. These can be overridden when
+ * constructing the plugin
+ */
+ defaults: {
+ /**
+ * @cfg animate
+ * @type Boolean
+ * If set to true, the rearranging of the toolbar items is animated
+ */
+ animate: true,
+
+ /**
+ * @cfg animationDuration
+ * @type Number
+ * The duration of the animation used to move other toolbar items out of the way
+ */
+ animationDuration: 0.2,
+
+ /**
+ * @cfg defaultReorderable
+ * @type Boolean
+ * True to make every toolbar draggable unless reorderable is specifically set to false.
+ * This defaults to false
+ */
+ defaultReorderable: false
+ },
+
+ /**
+ * Creates the plugin instance, applies defaults
+ * @constructor
+ * @param {Object} config Optional config object
+ */
+ constructor: function(config) {
+ Ext.apply(this, config || {}, this.defaults);
+ },
+
+ /**
+ * Initializes the plugin, stores a reference to the target
+ * @param {Mixed} target The target component which contains the reorderable items
+ */
+ init: function(target) {
+ /**
+ * @property target
+ * @type Ext.Component
+ * Reference to the target component which contains the reorderable items
+ */
+ this.target = target;
+
+ this.initEvents();
+
+ var items = this.getItems(),
+ length = items.length,
+ i;
+
+ for (i = 0; i < length; i++) {
+ this.createIfReorderable(items[i]);
+ }
+ },
+
+ /**
+ * Reorders the items in the target component according to the given mapping object. Example:
+ * this.reorder({
+ * 1: 5,
+ * 3: 2
+ * });
+ * Would move the item at index 1 to index 5, and the item at index 3 to index 2
+ * @param {Object} mappings Object containing current item index as key and new index as property
+ */
+ reorder: function(mappings) {
+ var target = this.target;
+
+ if (target.fireEvent('before-reorder', mappings, target, this) !== false) {
+ this.doReorder(mappings);
+
+ target.fireEvent('reorder', mappings, target, this);
+ }
+ },
+
+ /**
+ * Abstract function to perform the actual reordering. This MUST be overridden in a subclass
+ * @param {Object} mappings Mappings of the old item indexes to new item indexes
+ */
+ doReorder: function(paramName) {
+ throw new Error("doReorder must be implemented in the Ext.ux.Reorderer subclass");
+ },
+
+ /**
+ * Should create and return an Ext.dd.DD for the given item. This MUST be overridden in a subclass
+ * @param {Mixed} item The item to create a DD for. This could be a TabPanel tab, a Toolbar button, etc
+ * @return {Ext.dd.DD} The DD for the given item
+ */
+ createItemDD: function(item) {
+ throw new Error("createItemDD must be implemented in the Ext.ux.Reorderer subclass");
+ },
+
+ /**
+ * Sets up the given Toolbar item as a draggable
+ * @param {Mixed} button The item to make draggable (usually an Ext.Button instance)
+ */
+ createItemDD: function(button) {
+ var el = button.getEl(),
+ id = el.id,
+ tbar = this.target,
+ me = this;
+
+ button.dd = new Ext.dd.DD(el, undefined, {
+ isTarget: false
+ });
+
+ button.dd.constrainTo(tbar.getEl());
+ button.dd.setYConstraint(0, 0, 0);
+
+ Ext.apply(button.dd, {
+ b4StartDrag: function() {
+ this.startPosition = el.getXY();
+
+ //bump up the z index of the button being dragged but keep a reference to the original
+ this.startZIndex = el.getStyle('zIndex');
+ el.setStyle('zIndex', 10000);
+
+ button.suspendEvents();
+ },
+
+ onDrag: function(e) {
+ //calculate the button's index within the toolbar and its current midpoint
+ var buttonX = el.getXY()[0],
+ deltaX = buttonX - this.startPosition[0],
+ items = tbar.items.items,
+ oldIndex = items.indexOf(button),
+ newIndex;
+
+ //find which item in the toolbar the midpoint is currently over
+ for (var index = 0; index < items.length; index++) {
+ var item = items[index];
+
+ if (item.reorderable && item.id != button.id) {
+ //find the midpoint of the button
+ var box = item.getEl().getBox(),
+ midpoint = (me.buttonXCache[item.id] || box.x) + (box.width / 2),
+ movedLeft = oldIndex > index && deltaX < 0 && buttonX < midpoint,
+ movedRight = oldIndex < index && deltaX > 0 && (buttonX + el.getWidth()) > midpoint;
+
+ if (movedLeft || movedRight) {
+ me[movedLeft ? 'onMovedLeft' : 'onMovedRight'](button, index, oldIndex);
+ break;
+ }
+ }
+ }
+ },
+
+ /**
+ * After the drag has been completed, make sure the button being dragged makes it back to
+ * the correct location and resets its z index
+ */
+ endDrag: function() {
+ //we need to update the cache here for cases where the button was dragged but its
+ //position in the toolbar did not change
+ me.updateButtonXCache();
+
+ el.moveTo(me.buttonXCache[button.id], undefined, {
+ duration: me.animationDuration,
+ scope : this,
+ callback: function() {
+ button.resumeEvents();
+
+ tbar.fireEvent('reordered', button, tbar);
+ }
+ });
+
+ el.setStyle('zIndex', this.startZIndex);
+ }
+ });
+ },
+
+ /**
+ * @private
+ * Creates a DD instance for a given item if it is reorderable
+ * @param {Mixed} item The item
+ */
+ createIfReorderable: function(item) {
+ if (this.defaultReorderable && item.reorderable == undefined) {
+ item.reorderable = true;
+ }
+
+ if (item.reorderable && !item.dd) {
+ if (item.rendered) {
+ this.createItemDD(item);
+ } else {
+ item.on('render', this.createItemDD.createDelegate(this, [item]), this, {single: true});
+ }
+ }
+ },
+
+ /**
+ * Returns an array of items which will be made draggable. This defaults to the contents of this.target.items,
+ * but can be overridden - e.g. for TabPanels
+ * @return {Array} The array of items which will be made draggable
+ */
+ getItems: function() {
+ return this.target.items.items;
+ },
+
+ /**
+ * Adds before-reorder and reorder events to the target component
+ */
+ initEvents: function() {
+ this.target.addEvents(
+ /**
+ * @event before-reorder
+ * Fires before a reorder occurs. Return false to cancel
+ * @param {Object} mappings Mappings of the old item indexes to new item indexes
+ * @param {Mixed} component The target component
+ * @param {Ext.ux.TabReorderer} this The plugin instance
+ */
+ 'before-reorder',
+
+ /**
+ * @event reorder
+ * Fires after a reorder has occured.
+ * @param {Object} mappings Mappings of the old item indexes to the new item indexes
+ * @param {Mixed} component The target component
+ * @param {Ext.ux.TabReorderer} this The plugin instance
+ */
+ 'reorder'
+ );
+ }
+});
+
+/**
+ * @class Ext.ux.HBoxReorderer
+ * @extends Ext.ux.Reorderer
+ * Description
+ */
+Ext.ux.HBoxReorderer = Ext.extend(Ext.ux.Reorderer, {
+ /**
+ * Initializes the plugin, decorates the container with additional functionality
+ */
+ init: function(container) {
+ /**
+ * This is used to store the correct x value of each button in the array. We need to use this
+ * instead of the button's reported x co-ordinate because the buttons are animated when they move -
+ * if another onDrag is fired while the button is still moving, the comparison x value will be incorrect
+ */
+ this.buttonXCache = {};
+
+ container.on({
+ scope: this,
+ add : function(container, item) {
+ this.createIfReorderable(item);
+ }
+ });
+
+ //super sets a reference to the toolbar in this.target
+ Ext.ux.HBoxReorderer.superclass.init.apply(this, arguments);
+ },
+
+ /**
+ * Sets up the given Toolbar item as a draggable
+ * @param {Mixed} button The item to make draggable (usually an Ext.Button instance)
+ */
+ createItemDD: function(button) {
+ if (button.dd != undefined) {
+ return;
+ }
+
+ var el = button.getEl(),
+ id = el.id,
+ me = this,
+ tbar = me.target;
+
+ button.dd = new Ext.dd.DD(el, undefined, {
+ isTarget: false
+ });
+
+ el.applyStyles({
+ position: 'absolute'
+ });
+
+ //if a button has a menu, it is disabled while dragging with this function
+ var menuDisabler = function() {
+ return false;
+ };
+
+ Ext.apply(button.dd, {
+ b4StartDrag: function() {
+ this.startPosition = el.getXY();
+
+ //bump up the z index of the button being dragged but keep a reference to the original
+ this.startZIndex = el.getStyle('zIndex');
+ el.setStyle('zIndex', 10000);
+
+ button.suspendEvents();
+ if (button.menu) {
+ button.menu.on('beforeshow', menuDisabler, me);
+ }
+ },
+
+ startDrag: function() {
+ this.constrainTo(tbar.getEl());
+ this.setYConstraint(0, 0, 0);
+ },
+
+ onDrag: function(e) {
+ //calculate the button's index within the toolbar and its current midpoint
+ var buttonX = el.getXY()[0],
+ deltaX = buttonX - this.startPosition[0],
+ items = tbar.items.items,
+ length = items.length,
+ oldIndex = items.indexOf(button),
+ newIndex, index, item;
+
+ //find which item in the toolbar the midpoint is currently over
+ for (index = 0; index < length; index++) {
+ item = items[index];
+
+ if (item.reorderable && item.id != button.id) {
+ //find the midpoint of the button
+ var box = item.getEl().getBox(),
+ midpoint = (me.buttonXCache[item.id] || box.x) + (box.width / 2),
+ movedLeft = oldIndex > index && deltaX < 0 && buttonX < midpoint,
+ movedRight = oldIndex < index && deltaX > 0 && (buttonX + el.getWidth()) > midpoint;
+
+ if (movedLeft || movedRight) {
+ me[movedLeft ? 'onMovedLeft' : 'onMovedRight'](button, index, oldIndex);
+ break;
+ }
+ }
+ }
+ },
+
+ /**
+ * After the drag has been completed, make sure the button being dragged makes it back to
+ * the correct location and resets its z index
+ */
+ endDrag: function() {
+ //we need to update the cache here for cases where the button was dragged but its
+ //position in the toolbar did not change
+ me.updateButtonXCache();
+
+ el.moveTo(me.buttonXCache[button.id], el.getY(), {
+ duration: me.animationDuration,
+ scope : this,
+ callback: function() {
+ button.resumeEvents();
+ if (button.menu) {
+ button.menu.un('beforeshow', menuDisabler, me);
+ }
+
+ tbar.fireEvent('reordered', button, tbar);
+ }
+ });
+
+ el.setStyle('zIndex', this.startZIndex);
+ }
+ });
+ },
+
+ onMovedLeft: function(item, newIndex, oldIndex) {
+ var tbar = this.target,
+ items = tbar.items.items,
+ length = items.length,
+ index;
+
+ if (newIndex != undefined && newIndex != oldIndex) {
+ //move the button currently under drag to its new location
+ tbar.remove(item, false);
+ tbar.insert(newIndex, item);
+
+ //set the correct x location of each item in the toolbar
+ this.updateButtonXCache();
+ for (index = 0; index < length; index++) {
+ var obj = items[index],
+ newX = this.buttonXCache[obj.id];
+
+ if (item == obj) {
+ item.dd.startPosition[0] = newX;
+ } else {
+ var el = obj.getEl();
+
+ el.moveTo(newX, el.getY(), {
+ duration: this.animationDuration
+ });
+ }
+ }
+ }
+ },
+
+ onMovedRight: function(item, newIndex, oldIndex) {
+ this.onMovedLeft.apply(this, arguments);
+ },
+
+ /**
+ * @private
+ * Updates the internal cache of button X locations.
+ */
+ updateButtonXCache: function() {
+ var tbar = this.target,
+ items = tbar.items,
+ totalX = tbar.getEl().getBox(true).x;
+
+ items.each(function(item) {
+ this.buttonXCache[item.id] = totalX;
+
+ totalX += item.getEl().getWidth();
+ }, this);
+ }
+});