[Z3lab-checkins] r2436 - cpsskins/branches/jmo-perspectives/ui/framework
Author: jmorliaguet
Date: Mon Feb 20 22:49:03 2006
New Revision: 2436
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
Log:
- drag and drop: save the pointer's offset relative to the widget.
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 Mon Feb 20
22:49:03 2006
@@ -543,6 +543,9 @@
dragEvent: function(e) {
var widget = this.view.widget;
+var pos = Position.page(widget);
+this.x0 = Event.pointerX(e) - pos[0];
+this.y0 = Event.pointerY(e) - pos[1];
Event.observe(document, mousemove, this.moveEvent);
Event.observe(document, mouseup, this.dropEvent);
},
@@ -551,7 +554,7 @@
var widget = this.view.widget;
var mouseX = Event.pointerX(e);
var mouseY = Event.pointerY(e);
-CPSSkins.Canvas.moveTo(widget, parseInt(mouseX)-20, parseInt(mouseY-20));
+CPSSkins.Canvas.moveTo(widget, mouseX-this.x0, mouseY-this.y0);
},
dropEvent: function(e) {
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
[Z3lab-checkins] r2437 - in cpsskins/branches/jmo-perspectives/ui/framework: . tests/functional
Author: jmorliaguet
Date: Mon Feb 20 23:25:32 2006
New Revision: 2437
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/draggable.html
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tests.html
Log:
- there are two ways to register draggable elements:
- through css selectors (draggable: [div.drag, ...])
- explicitly by associating a drag-and-drop controller to a view
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 Mon Feb 20
23:25:32 2006
@@ -212,6 +212,7 @@
var factory = CPSSkins.Controllers[controller_type];
if (factory) {
var controller = factory(el, def);
+controller.setup();
CPSSkins._controllers[name] = controller;
CPSSkins.notify(registered controller + def.id,
{'publisher': controller});
@@ -381,6 +382,10 @@
this.def = def;
},
+ setup: function() {
+/* to override */
+ },
+
register: function(view) {
/* to override */
}
@@ -532,18 +537,28 @@
CPSSkins.DragAndDropController.prototype = Object.extend(
new CPSSkins.Controller(), {
- register: function(view) {
-var widget = view.widget;
-
+ setup: function() {
this.dragEvent = this.dragEvent.bindAsEventListener(this);
this.moveEvent = this.moveEvent.bindAsEventListener(this);
this.dropEvent = this.dropEvent.bindAsEventListener(this);
+
+var dragEvent = this.dragEvent;
+$A(this.def.draggable || []).each(function(d) {
+ $A($$(d)).each(function(el) {
+Event.observe(el, mousedown, dragEvent);
+ });
+
+});
+ },
+
+ register: function(view) {
+var widget = view.widget;
Event.observe(widget, mousedown, this.dragEvent);
},
dragEvent: function(e) {
-var widget = this.view.widget;
-var pos = Position.page(widget);
+this.moved = Event.element(e);
+var pos = Position.page(this.moved);
this.x0 = Event.pointerX(e) - pos[0];
this.y0 = Event.pointerY(e) - pos[1];
Event.observe(document, mousemove, this.moveEvent);
@@ -551,14 +566,12 @@
},
moveEvent: function(e) {
-var widget = this.view.widget;
var mouseX = Event.pointerX(e);
var mouseY = Event.pointerY(e);
-CPSSkins.Canvas.moveTo(widget, mouseX-this.x0, mouseY-this.y0);
+CPSSkins.Canvas.moveTo(this.moved, mouseX-this.x0, mouseY-this.y0);
},
dropEvent: function(e) {
-var widget = this.view.widget;
Event.stopObserving(document, mousemove, this.moveEvent);
Event.stopObserving(document, mouseup, this.dropEvent);
}
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
==
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
Mon Feb 20 23:25:32 2006
@@ -12,6 +12,12 @@
link rel=stylesheet href=../../cpsskins.css type=text/css /
style stype=text/css
+ div.drag {
+background-color: #ddc;
+border: 1px solid #999;
+padding: 1em;
+width: 200px;
+ }
/style
/head
@@ -19,9 +25,16 @@
h1CPSSkins: drag-and-drop/h1
+ div class=dragDRAG ME/div
+
+ div class=dragDRAG ME/div
+
+ div id=dragthisDRAG ME/div
+
ins class=controller
{id: dnd,
type: drag-and-drop,
+ draggable: [div.drag, #dragthis],
action: displayInfo
}
/ins
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/draggable.html
==
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/draggable.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/draggable.html
Mon Feb 20 23:25:32 2006
@@ -1,5 +1,5 @@
-div style=border: 1px solid #ccc; padding: 1em; position: absolute;
+div style=border: 1px solid #999; padding: 1em; position: absolute;
background-color: #ffc; width: 300px
DRAG ME
/div
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tests.html
==
--- cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tests.html
(original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/tests.html
Mon Feb 20 23:25:32 2006
@@ -40,4 +40,8 @@
a target=main
[Z3lab-checkins] r2438 - in cpsskins/branches/jmo-perspectives/ui/framework: . tests/functional
Author: jmorliaguet
Date: Tue Feb 21 00:09:05 2006
New Revision: 2438
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
Log:
- implemented drop zones. TODO handle the drop action.
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 Tue Feb 21
00:09:05 2006
@@ -538,22 +538,23 @@
new CPSSkins.Controller(), {
setup: function() {
-this.dragEvent = this.dragEvent.bindAsEventListener(this);
+var dragEvent = this.dragEvent = this.dragEvent.bindAsEventListener(this);
this.moveEvent = this.moveEvent.bindAsEventListener(this);
this.dropEvent = this.dropEvent.bindAsEventListener(this);
-var dragEvent = this.dragEvent;
$A(this.def.draggable || []).each(function(d) {
$A($$(d)).each(function(el) {
-Event.observe(el, mousedown, dragEvent);
- });
+Event.observe(el, mousedown, dragEvent); });
+});
+var dropzones = this._dropzones = [];
+$A(this.def.droppable || []).each(function(d) {
+ $$(d).each(function(el) { dropzones.push(el); });
});
},
register: function(view) {
-var widget = view.widget;
-Event.observe(widget, mousedown, this.dragEvent);
+Event.observe(view.widget, mousedown, this.dragEvent);
},
dragEvent: function(e) {
@@ -574,6 +575,18 @@
dropEvent: function(e) {
Event.stopObserving(document, mousemove, this.moveEvent);
Event.stopObserving(document, mouseup, this.dropEvent);
+
+var x = Event.pointerX(e);
+var y = Event.pointerY(e);
+
+var inTarget = false;
+$A(this._dropzones).each(function(d) {
+ if (Position.within(d, x, y)) { inTarget = true; }
+});
+
+if (inTarget) {
+ /* TODO: handle action */
+}
}
});
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
==
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
Tue Feb 21 00:09:05 2006
@@ -13,11 +13,17 @@
style stype=text/css
div.drag {
-background-color: #ddc;
+background-color: #efc;
border: 1px solid #999;
padding: 1em;
width: 200px;
}
+ div.drop {
+background-color: #ffe;
+border: 1px solid #999;
+padding: 2em;
+width: 200px;
+ }
/style
/head
@@ -31,11 +37,14 @@
div id=dragthisDRAG ME/div
+ div class=dropDROP ZONE/div
+
ins class=controller
{id: dnd,
type: drag-and-drop,
+ action: displayInfo,
draggable: [div.drag, #dragthis],
- action: displayInfo
+ droppable: [div.drop]
}
/ins
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
