Author: jmorliaguet
Date: Wed Dec 28 22:55:34 2005
New Revision: 2095

Modified:
   cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
Log:

- added a timer / effect. Tooltips popups appear progressively.



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 Wed Dec 28 
22:55:34 2005
@@ -156,11 +156,43 @@
     body = document.getElementsByTagName('body');
     if (!body.length) return;
     body[0].appendChild(element);
+  },
+
+  setOpacity: function(element, opacity) {
+    if (window.ActiveXObject) {
+      element.style.filter = "alpha(opacity=" + opacity*100 + ")";
+    } else {
+      element.style.opacity = opacity;
+    }
   }
 
 });
 
 
+CPSSkins.Effect = Class.create();
+CPSSkins.Effect.prototype = {
+
+  initialize: function(element, options) {
+    this.element = $(element);
+    this.effect = options.effect || function(value) {};
+    this.complete = options.complete || function() {};
+    this.duration = options.duration || 300;
+    this.startTime = (new Date).getTime();
+    this.timer = setInterval(this.step.bind(this), 20);
+  },
+
+  step: function() {
+    var Tpos = ((new Date).getTime() - this.startTime) / this.duration;
+    if (Tpos > 1) {
+      clearInterval(this.timer);
+      this.complete();
+    } else {
+      this.effect((1-Math.cos(Tpos*Math.PI))/2);
+    }
+  }
+
+}
+
 // Renderer (converts XML controls to XHTML)
 if (!window.Renderer) { var Renderer = new Object(); }
 Object.extend(Renderer, {
@@ -394,12 +426,20 @@
     node.style.top = this.hint.y + 20 + 'px';
     node.style.left = this.hint.x + 'px';
     node.innerHTML = this.hint.text;
-    Element.show(node);
+    new CPSSkins.Effect(node, {
+      effect: function(value) { Canvas.setOpacity(node, value); },
+      complete: function() { Element.show(node); }
+    });
   },
 
   hide: function(e) {
     this.hint = null;
-    Element.hide(this.node);
-  }
+    var node = this.node;
+    new CPSSkins.Effect(node, {
+      effect: function(value) { Canvas.setOpacity(node, 1-value); },
+      complete: function() { Element.hide(node); }
+    });
+  },
+
 }
 
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to