Author: jmorliaguet
Date: Sun Mar 12 12:43:45 2006
New Revision: 2610
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_dragdrop_test.html
Log:
- drag-and-drop: drop targets can be highlighted on drag start events
- added 'activate' and 'deactivate' effects (need to be polished)
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
12:43:45 2006
@@ -663,6 +663,15 @@
this.y1 = Event.pointerY(e) - this.y0;
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}
+ );
+ });
+ }
},
moveEvent: function(e) {
@@ -702,6 +711,15 @@
this.moved.parentNode.removeChild(this.moved);
}
}
+
+ var highlight = this.def.dropping.highlight;
+ if (highlight) {
+ this._dropzones.each(function(el) {
+ CPSSkins.Effects.deactivate(el,
+ {'duration': highlight.duration || 1000}
+ );
+ });
+ }
}
});
@@ -939,6 +957,20 @@
}
},
+ setBackgroundColor: function(element, options) {
+ var r = parseInt(options.r * 255);
+ var g = parseInt(options.g * 255);
+ var b = parseInt(options.b * 255);
+ element.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
+ },
+
+ getBackgroundColor: function(element) {
+ var regExp = new RegExp("^rgb\\((\\d+),(\\d+),(\\d+)\\)$");
+ var bgColor = element.getStyle('background-color') || 'rgb(255,255,255)';
+ var match = regExp.exec(bgColor.replace(/\s+/g,''));
+ return {'r': match[1]/255, 'g': match[2]/255, 'b': match[3]/255}
+ },
+
moveTo: function(element, options) {
var x = options.x;
var y = options.y;
@@ -1048,12 +1080,11 @@
fadein: function(node, options) {
node.setOpacity(0);
- return new CPSSkins.Scheduler({
- delay: options.delay,
- duration: options.duration,
+ Object.extend(options, {
action: function(value) { node.setOpacity(value) },
onComplete: function() { node.show() }
});
+ return new CPSSkins.Scheduler(options);
},
fadeout: function(node, options) {
@@ -1090,7 +1121,29 @@
onComplete: function() { node.setStyle({height: '0px'}); }
});
return new CPSSkins.Scheduler(options);
+ },
+
+ activate: function(node, options) {
+ var bg = node._saved_bg_color = node.getBackgroundColor();
+ Object.extend(options, {
+ action: function(value) {
+ node.setBackgroundColor({'r': bg.r, 'g': bg.g, 'b': bg.b-value});
+ }
+ });
+ return new CPSSkins.Scheduler(options);
+ },
+
+ deactivate: function(node, options) {
+ var bg = node._saved_bg_color;
+ Object.extend(options, {
+ action: function(value) {
+ node.setBackgroundColor({'r': bg.r, 'g': bg.g, 'b': bg.b-(1-value)});
+ },
+ onComplete: function() { node.setBgColor(bg) }
+ });
+ return new CPSSkins.Scheduler(options);
}
+
});
// Model
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 12:43:45 2006
@@ -53,7 +53,7 @@
"dragging": {
"sources": ["div.drag", "#dragthis"],
"clone": {
- "opacity": 0.7
+ "opacity": 0.8
},
"revert": {
"duration": 500
@@ -62,6 +62,7 @@
"dropping": {
"targets": ["div.drop"],
"highlight": {
+ "duration": 300
}
}}
</ins>
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
