Author: jmorliaguet
Date: Thu Mar 9 22:20:11 2006
New Revision: 2564
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
Log:
- drag-and-drop: implemented 'revert' effect as in scriptaculous
Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js (original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js Thu Mar 9
22:20:11 2006
@@ -650,16 +650,18 @@
this.moved = draggable;
}
var pos = Position.page(this.moved);
- this.x0 = Event.pointerX(e) - pos[0];
- this.y0 = Event.pointerY(e) - pos[1];
+ this.x0 = pos[0];
+ this.y0 = pos[1];
+ this.x1 = Event.pointerX(e) - this.x0;
+ this.y1 = Event.pointerY(e) - this.y0;
Event.observe(document, "mousemove", this.moveEvent);
Event.observe(document, "mouseup", this.dropEvent);
},
moveEvent: function(e) {
- var mouseX = Event.pointerX(e);
- var mouseY = Event.pointerY(e);
- CPSSkins.Canvas.moveTo(this.moved, mouseX-this.x0, mouseY-this.y0);
+ var x = Event.pointerX(e);
+ var y = Event.pointerY(e);
+ CPSSkins.Canvas.moveTo(this.moved,{'x': x-this.x1, 'y': y-this.y1});
},
dropEvent: function(e) {
@@ -675,7 +677,16 @@
});
if (this.def.ghosting) {
- this.moved.parentNode.removeChild(this.moved);
+ if (this.def.revert) {
+ CPSSkins.Canvas.moveTo(this.moved, {
+ 'x': this.x0,
+ 'y': this.y0,
+ 'duration': 400,
+ 'onComplete': function() { this.parentNode.removeChild(this) }
+ });
+ } else {
+ this.moved.parentNode.removeChild(this.moved);
+ }
}
if (inTarget) {
/* TODO: handle action */
@@ -860,9 +871,23 @@
}
},
- moveTo: function(node, x, y) {
+ moveTo: function(node, options) {
node = $(node);
Position.absolutize(node);
+ var x = options.x;
+ var y = options.y;
+ if (options.duration) {
+ var pos = Position.page(node);
+ var x0 = pos[0];
+ var y0 = pos[1];
+ new CPSSkins.Scheduler(Object.extend(options, {
+ action: function(value) {
+ node.style.left = x0 + (x - x0) * value + 'px';
+ node.style.top = y0 + (y - y0) * value + 'px';
+ },
+ onComplete: (options.onComplete || function() {}).bind(node)
+ }));
+ }
node.style.left = x + "px";
node.style.top = y + "px";
},
@@ -1499,7 +1524,7 @@
this.render(data);
if (this.def.render_effect) {
$(this.widget).hide();
- this.applyEffect(this.widget, this.def.render_effect)
+ this.applyEffect(this.def.render_effect)
}
CPSSkins.notify("displayed", {'publisher': this});
},
@@ -1518,7 +1543,7 @@
this.prepare();
if (this.def.show_effect) {
- this.applyEffect(widget, this.def.show_effect)
+ this.applyEffect(this.def.show_effect)
} else {
widget.show();
}
@@ -1532,7 +1557,7 @@
var widget = $(this.widget);
if (this.def.hide_effect) {
- this.applyEffect(widget, this.def.hide_effect);
+ this.applyEffect(this.def.hide_effect);
} else {
widget.hide();
}
@@ -1544,7 +1569,7 @@
this.teardown();
},
- applyEffect: function(node, options) {
+ applyEffect: function(options) {
if (this.effect) {
this.effect.stop();
}
@@ -1552,7 +1577,7 @@
if (node.style.display == "none") {
node.style.display = "";
}
- this.effect = CPSSkins.Effects[options.transition](node, options)
+ this.effect = CPSSkins.Effects[options.transition](this.widget, options)
}
}
@@ -1899,7 +1924,7 @@
// Display the menu inside the screen
var widget = this.widget;
- CPSSkins.Canvas.moveTo(widget, this.mouseX, this.mouseY);
+ CPSSkins.Canvas.moveTo(widget, {'x': this.mouseX, 'y': this.mouseY});
CPSSkins.Canvas.fitInsideScreen(widget);
},
@@ -1982,7 +2007,7 @@
if (!selected) return;
var widget = this.widget;
- CPSSkins.Canvas.moveTo(widget, this.mouseX -50, this.mouseY);
+ CPSSkins.Canvas.moveTo(widget, {'x': this.mouseX-50, 'y': this.mouseY});
CPSSkins.Canvas.fitInsideScreen(widget);
},
@@ -2095,7 +2120,7 @@
moveEvent: function(e) {
var mouseX = Event.pointerX(e);
var mouseY = Event.pointerY(e);
- CPSSkins.Canvas.moveTo(this.widget, mouseX+10, mouseY+10);
+ CPSSkins.Canvas.moveTo(this.widget, {'x': mouseX+10, 'y': mouseY+10});
},
hideEvent: function(e) {
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
