Author: jmorliaguet
Date: Thu Dec 29 22:13:46 2005
New Revision: 2096

Modified:
   cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
Log:
- fixed a couple of race conditions in the tooltip that were causing
  some flickering.

- added a "show" and "hide delay" option



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 Thu Dec 29 
22:13:46 2005
@@ -159,6 +159,9 @@
   },
 
   setOpacity: function(element, opacity) {
+    if (element.style.display == 'none') {
+      element.style.display = '';
+    }
     if (window.ActiveXObject) {
       element.style.filter = "alpha(opacity=" + opacity*100 + ")";
     } else {
@@ -174,21 +177,33 @@
 
   initialize: function(element, options) {
     this.element = $(element);
-    this.effect = options.effect || function(value) {};
+    this.action = options.action || function(value) {};
+    this.delay = options.delay || 0;
     this.complete = options.complete || function() {};
     this.duration = options.duration || 300;
+
+    this.start()
+  },
+
+  start: function() {
     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();
+    var pos = ((new Date).getTime() - this.startTime - this.delay)
+              / this.duration;
+    if (pos < 0) return;
+    if (pos > 1) {
+      this.stop();
     } else {
-      this.effect((1-Math.cos(Tpos*Math.PI))/2);
+      this.action((1-Math.cos(pos*Math.PI))/2);
     }
+  },
+
+  stop: function() {
+    clearInterval(this.timer);
+    this.complete();
   }
 
 }
@@ -231,7 +246,8 @@
     tooltip.style.position = 'absolute';
     tooltip.style.display = 'none';
     var options = {
-      delay: node.getAttribute('delay') || 1000
+      showdelay: node.getAttribute('showdelay') || 1000,
+      hidedelay: node.getAttribute('hidedelay') || 100,
     }
     var area = node.parentNode;
     Canvas.addWidget(tooltip);
@@ -399,13 +415,12 @@
     this.options = options;
 
     this.hint = null;
+    this.effect = null;
 
     this.setupEvent = this.setup.bindAsEventListener(this);
     this.hideEvent = this.hide.bindAsEventListener(this);
 
-    var area = area || document;
-    Event.observe(area, 'mouseover', this.setupEvent);
-    Event.observe(area, 'mouseout', this.hideEvent);
+    Event.observe(area || document, 'mouseover', this.setupEvent);
   },
 
   setup: function(e) {
@@ -413,33 +428,58 @@
     var data = Canvas.getNodeData(selected);
     if (!data) return;
     this.hint = {
+      selected: selected,
       text: data['hint'],
       x: Event.pointerX(e),
       y: Event.pointerY(e)
     }
-    setTimeout((function() {this.show()}).bind(this), this.options.delay);
+    this.show();
   },
 
   show: function() {
     var node = this.node;
-    if (!this.hint) return;
     node.style.top = this.hint.y + 20 + 'px';
     node.style.left = this.hint.x + 'px';
     node.innerHTML = this.hint.text;
-    new CPSSkins.Effect(node, {
-      effect: function(value) { Canvas.setOpacity(node, value); },
-      complete: function() { Element.show(node); }
+
+    if (this.effect) {
+      this.effect.stop();
+    }
+
+    this.effect = new CPSSkins.Effect(node, {
+      delay: this.options.showdelay,
+      action: function(value) {
+        Canvas.setOpacity(node, value);
+        },
+      complete: function() {
+        Element.show(node);
+      }.bind(this)
     });
+
+    Event.observe(this.hint.selected, 'mouseout', this.hideEvent);
   },
 
   hide: function(e) {
-    this.hint = null;
     var node = this.node;
-    new CPSSkins.Effect(node, {
-      effect: function(value) { Canvas.setOpacity(node, 1-value); },
-      complete: function() { Element.hide(node); }
+
+    if (this.effect) {
+      this.effect.stop();
+    }
+
+    this.effect = new CPSSkins.Effect(node, {
+      delay: this.options.hidedelay,
+      action: function(value) {
+        Canvas.setOpacity(node, 1-value);
+        },
+      complete: function() {
+        Element.hide(node);
+        if (this.hint) {
+          Event.stopObserving(this.hint.selected, 'mouseout', this.hideEvent);
+        }
+      }.bind(this)
     });
-  },
+
+  }
 
 }
 

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
      (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
      Thu Dec 29 22:13:46 2005
@@ -18,37 +18,39 @@
 
   <div id="area1">
 
-    <![CDATA[{"hint":"Click here to open."}]]>
+    <![CDATA[{"hint":"Click here to open the document."}]]>
     <a href="#">Open</a>
 
-    <![CDATA[{"hint":"Click here to save."}]]>
+    <![CDATA[{"hint":"Click here to save the document."}]]>
     <a href="#">Save</a>
 
-    <![CDATA[{"hint":"Click here to close."}]]>
+    <![CDATA[{"hint":"Click here to close the document."}]]>
     <a href="#">Close</a>
 
-    <cpsskins:tooltip delay="100">
-    </cpsskins:tooltip>
+    <cpsskins:tooltip showdelay="1000" hidedelay="500" />
 
-    <p>Delay: 100ms</p>
+    <p>Show delay: 1s<br/>
+       Hide delay: 500ms</p>
   </div>
 
   <div id="area2">
 
-    <![CDATA[{"hint":"Click here to open."}]]>
+    <![CDATA[{"hint":"Click here to open the file."}]]>
     <a href="#">Open</a>
 
-    <![CDATA[{"hint":"Click here to save."}]]>
+    <![CDATA[{"hint":"Click here to save the file."}]]>
     <a href="#">Save</a>
 
-    <![CDATA[{"hint":"Click here to close."}]]>
+    <![CDATA[{"hint":"Click here to close the file."}]]>
     <a href="#">Close</a>
 
-    <cpsskins:tooltip delay="1000">
-    </cpsskins:tooltip>
+    <cpsskins:tooltip showdelay="500" hidedelay="1000" />
 
-    <p>Delay: 1s</p>
+    <p>Show delay: 500ms<br/>
+       Hide delay: 1s</p>
   </div>
 
+  <div id="msg"></div>
+
 </body>
 </html>
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to