/*
This file is part of Ext JS 3.4
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-04-03 15:07:25
*/
/**
* @class Ext.ux.ToolbarReorderer
* @extends Ext.ux.Reorderer
* Plugin which can be attached to any Ext.Toolbar instance. Provides ability to reorder toolbar items
* with drag and drop. Example:
* <pre>
* new Ext.Toolbar({
* plugins: [
* new Ext.ux.ToolbarReorderer({
* defaultReorderable: true
* })
* ],
* items: [
* {text: 'Button 1', reorderable: false},
* {text: 'Button 2'},
* {text: 'Button 3'}
* ]
* });
* </pre>
* In the example above, buttons 2 and 3 will be reorderable via drag and drop. An event named 'reordered'
* is added to the Toolbar, and is fired whenever a reorder has been completed.
*/
Ext.ux.ToolbarReorderer = Ext.extend(Ext.ux.Reorderer, {
/**
* Initializes the plugin, decorates the toolbar with additional functionality
*/
init: function(toolbar) {
/**
* 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 = {};
toolbar.on({
scope: this,
add : function(toolbar, item) {
this.createIfReorderable(item);
}
});
this.movedTask = new Ext.util.DelayedTask(this.finishMove, this);
//super sets a reference to the toolbar in this.target
Ext.ux.ToolbarReorderer.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,
tbar = this.target,
me = this;
button.dd = new Ext.dd.DD(el, undefined, {
isTarget: false
});
//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,
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], el.getY(), {
duration: me.animationDuration,
scope : this,
callback: function() {
me.movedTask.delay(200);
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;
this.movedTask.cancel();
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 (var index = 0; index < items.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);
},
finishMove: function(){
var tbar = this.target;
tbar.items.each(function(btn){
btn.el.dom.style.left = '';
});
tbar.doLayout();
},
/**
* @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);
}
});