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