Author: jmorliaguet
Date: Sun Mar 12 16:14:52 2006
New Revision: 2617
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
Log:
- DnD fixes, test updates
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 Sun Mar 12
16:14:52 2006
@@ -597,9 +597,11 @@
this.cancelEvent = new Function("return false");
var dropzones = this._dropzones = [];
- (this.def.dropping.targets || []).each(function(d) {
- $$(d).each(function(el) { dropzones.push(el); });
- });
+ if (this.def.dropping) {
+ (this.def.dropping.targets || []).each(function(d) {
+ $$(d).each(function(el) { dropzones.push(el); });
+ });
+ }
// cancel text selection
document.onmousedown = this.cancelEvent;
@@ -640,21 +642,31 @@
if (!draggable) {
return false;
}
- if (this.def.dragging.clone) {
+ if (this.def.dragging.feedback) {
var dim = draggable.getDimensions();
- var clone = CPSSkins.Canvas.createNode({"tag": "div"});
- clone.setStyle({
+ var feedback = CPSSkins.Canvas.createNode({"tag": "div"});
+ feedback.setStyle({
'z-index': parseInt(draggable.getStyle('z-index') || 0) +1,
'position': 'absolute',
- 'width': '' + dim.width + 'px',
- 'height': '' + dim.height + 'px'
+ 'width': dim.width + 'px',
+ 'height': dim.height + 'px'
});
- clone.appendChild(draggable.cloneNode(true));
- clone.setOpacity(this.def.dragging.clone.opacity);
- draggable.parentNode.insertBefore(clone, draggable);
- this.moved = clone;
+ if (this.def.dragging.feedback.clone) {
+ feedback.appendChild(draggable.cloneNode(true));
+ } else {
+ feedback.setStyle({
+ 'border-color': this.def.dragging.feedback.border || '#000',
+ 'background-color': this.def.dragging.feedback.background || '#fc3',
+ 'border-style': 'solid',
+ 'border-width': '1px'
+ })
+ }
+ feedback.setOpacity(this.def.dragging.feedback.opacity);
+ draggable.parentNode.insertBefore(feedback, draggable);
+ this.moved = feedback;
} else {
this.moved = draggable;
+ this.moved.setStyle({'position': 'absolute'});
}
var pos = Position.cumulativeOffset(this.moved);
this.x0 = pos[0];
@@ -664,20 +676,24 @@
Event.observe(document, "mousemove", this.moveEvent);
Event.observe(document, "mouseup", this.dropEvent);
- var highlight = this.def.dropping.highlight;
- if (highlight) {
- this._dropzones.each(function(el) {
- CPSSkins.Effects.activate(el,
- {'duration': highlight.duration || 1000}
- );
- });
+ if (this.def.dropping) {
+ var highlight = this.def.dropping.highlight;
+ if (highlight) {
+ this._dropzones.each(function(el) {
+ CPSSkins.Effects.activate(el,
+ {'duration': highlight.duration || 1000}
+ );
+ });
+ }
}
+ Event.stop(e);
},
moveEvent: function(e) {
var x = Event.pointerX(e);
var y = Event.pointerY(e);
this.moved.moveTo({'x': x-this.x1, 'y': y-this.y1});
+ Event.stop(e);
},
dropEvent: function(e) {
@@ -699,7 +715,7 @@
alert('NotImplemented');
}
- if (this.def.dragging.clone) {
+ if (this.def.dragging.feedback) {
if (revert) {
this.moved.moveTo({
'x': this.x0,
@@ -712,14 +728,17 @@
}
}
- var highlight = this.def.dropping.highlight;
- if (highlight) {
- this._dropzones.each(function(el) {
- CPSSkins.Effects.deactivate(el,
- {'duration': highlight.duration || 1000}
- );
- });
+ if (this.def.dropping) {
+ var highlight = this.def.dropping.highlight;
+ if (highlight) {
+ this._dropzones.each(function(el) {
+ CPSSkins.Effects.deactivate(el,
+ {'duration': highlight.duration || 1000}
+ );
+ });
+ }
}
+ Event.stop(e);
}
});
@@ -1139,7 +1158,7 @@
action: function(value) {
node.setBackgroundColor({'r': bg.r, 'g': bg.g, 'b': bg.b-(1-value)});
},
- onComplete: function() { node.setBgColor(bg) }
+ onComplete: function() { node.setBackgroundColor(bg) }
});
return new CPSSkins.Scheduler(options);
}
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
Sun Mar 12 16:14:52 2006
@@ -12,7 +12,7 @@
<link rel="stylesheet" href="../../cpsskins.css" type="text/css" />
<style stype="text/css">
- div.drag {
+ div.dragdrop {
background-color: #efc;
border: 1px solid #999;
padding: 1em;
@@ -20,17 +20,37 @@
margin: 10px;
}
div.drop {
- background-color: #ffe;
- border: 1px solid #999;
+ background-color: #fff;
+ border: 1px dotted #666;
padding: 2em;
- width: 200px;
+ width: 190px;
margin: 10px;
+ height: 40px;
}
#dragthis {
padding: 1em;
border: 1px solid #fc0;
background-color: #ffc;
}
+ #movethis {
+ padding: 1em;
+ border: 1px solid #006;
+ background-color: #fdf;
+ width: 120px;
+ margin: 10px;
+ }
+ #drophere {
+ background-color: #fff;
+ border: 1px dotted #666;
+ padding: 2em;
+ width: 190px;
+ margin: 10px;
+ height: 40px;
+ }
+ #dragthis {
+ padding: 1em;
+ border: 1px solid #fc0;
+ }
</style>
</head>
@@ -38,9 +58,7 @@
<h1>CPSSkins: drag-and-drop</h1>
- <div class="drag">DRAG ME</div>
-
- <div class="drag">DRAG ME
+ <div class="dragdrop">DRAG-AND-DROP ME
<div id="dragthis">DRAG ME</div>
</div>
@@ -51,9 +69,10 @@
"type": "drag-and-drop",
"action": "displayInfo",
"dragging": {
- "sources": ["div.drag", "#dragthis"],
- "clone": {
- "opacity": 0.8
+ "sources": ["div.dragdrop"],
+ "feedback": {
+ "opacity": 0.8,
+ "clone": true
},
"revert": {
"duration": 500
@@ -67,6 +86,37 @@
}}
</ins>
+ <ins class="controller">
+ {"id": "dnd2",
+ "type": "drag-and-drop",
+ "action": "displayInfo",
+ "dragging": {
+ "sources": ["#dragthis"],
+ "feedback": {
+ "opacity": 0.8,
+ "border": "#000",
+ "background": "#fc3"
+ }
+ }
+ }}
+ </ins>
+
+ <ins class="controller">
+ {"id": "dnd3",
+ "type": "drag-and-drop",
+ "action": "displayInfo",
+ "dragging": {
+ "sources": ["#movethis"]
+ },
+ "dropping": {
+ "targets": ["#drophere"],
+ "highlight": {
+ "duration": 800
+ }
+ }
+ }
+ </ins>
+
<ins class="model">
{"id": "dummy"}
</ins>
@@ -77,10 +127,16 @@
"template": "draggable.html"
},
"model": "dummy",
- "controllers": ["dnd"]
+ "controllers": ["dnd", "dnd2", "dnd3"]
}
</ins>
+ <div class="drop">DROP ZONE</div>
+
+ <div id="drophere">DROP ME HERE</div>
+
+ <div id="movethis">MOVE ME</div>
+
<script type="text/javascript">
function displayInfo(event) {
}
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
