Author: jmorliaguet
Date: Tue Mar 21 23:24:33 2006
New Revision: 2679

Modified:
   cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
   cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/data2.txt
Log:

- tooltips and contextual menus use CSS selectors to define active areas



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 Tue Mar 21 
23:24:33 2006
@@ -2017,10 +2017,7 @@
 CPSSkins.ContextualMenu.prototype = Object.extend(new CPSSkins.View(), {
 
   setup: function() {
-    this.area = this.def.parentNode || document;
-    this.active = false;
-
-    this.showEvent = this.showEvent.bindAsEventListener(this);
+    var showEvent = this.showEvent = this.showEvent.bindAsEventListener(this);
     this.hideEvent = this.hideEvent.bindAsEventListener(this);
     this.callEvent = this.callEvent.bindAsEventListener(this);
     this.mouseOverEvent = this.mouseOverEvent.bindAsEventListener(this);
@@ -2028,8 +2025,13 @@
     Event.observe(this.widget, "mousedown", function(e) {Event.stop(e)});
     Event.observe(this.widget, "mouseup", this.callEvent);
     Event.observe(this.widget, "mouseover", this.mouseOverEvent);
-    Event.observe(this.area, "mouseup", this.showEvent);
     Event.observe(document, "mousedown", this.hideEvent);
+
+    $A(this.def.selectors || []).each(function(s) {
+      $$(s).each(function(e) {
+        Event.observe(e, "mouseup", showEvent);
+      });
+    });
   },
 
   render: function(data) {
@@ -2205,23 +2207,13 @@
 
     var widget = this.widget;
 
-    if (!this.active) {
-      this.selected = selected;
-      this.show();
-      this.active = true;
-    } else {
-      this.active = false;
-    }
+    this.selected = selected;
+    this.show();
     Event.stop(e);
   },
 
   hideEvent: function(e) {
     this.hide();
-    var mouseX = Event.pointerX(e);
-    var mouseY = Event.pointerY(e);
-    if (!Position.within(this.area, mouseX, mouseY)) {
-      this.active = false;
-    }
     Event.stop(e);
   },
 
@@ -2244,7 +2236,6 @@
       "options": {'action': action, 'choice': choice}
     }
     CPSSkins.notify("command", event);
-    this.active = false;
     Event.stop(e);
   },
 
@@ -2326,17 +2317,11 @@
   },
 
   hideEvent: function(e) {
-    if (this.entered) { this.hide(); }
-    var mouseX = Event.pointerX(e);
-    var mouseY = Event.pointerY(e);
-    if (!Position.within(this.area, mouseX, mouseY)) {
-      this.active = false;
-    }
+    this.hide();
     Event.stop(e);
   },
 
   mouseOverEvent: function(e) {
-    this.entered = true;
     Event.stop(e);
   }
 
@@ -2348,13 +2333,15 @@
 CPSSkins.Tooltip.prototype = Object.extend(new CPSSkins.View(), {
 
   setup: function() {
-    this.area = this.def.parentNode;
-
-    this.showEvent = this.showEvent.bindAsEventListener(this);
-    this.hideEvent = this.hideEvent.bindAsEventListener(this);
+    var showEvent = this.showEvent = this.showEvent.bindAsEventListener(this);
+    var hideEvent = this.hideEvent = this.hideEvent.bindAsEventListener(this);
     this.moveEvent = this.moveEvent.bindAsEventListener(this);
-    Event.observe(this.area || document, "mouseover", this.showEvent);
-    Event.observe(this.area || document, "mouseout", this.hideEvent);
+    $A(this.def.selectors || []).each(function(s) {
+      $$(s).each(function(e) {
+        Event.observe(e, "mouseover", showEvent);
+        Event.observe(e, "mouseout", hideEvent);
+      });
+    });
   },
 
   render: function(data) {
@@ -2368,7 +2355,7 @@
 
   /* Event handlers */
   showEvent: function(e) {
-    var selected = Event.element(e);
+    var selected = $(Event.element(e));
 
     var model = CPSSkins.Canvas.getModel(selected);
     if (!model) return;
@@ -2382,7 +2369,7 @@
     this.selected = selected;
 
     if (this.def.widget.follow) {
-      Event.observe(this.area || document, "mousemove", this.moveEvent);
+      Event.observe(document, "mousemove", this.moveEvent);
     }
 
     this.show();
@@ -2401,7 +2388,7 @@
     if (selected != this.selected) return;
 
     if (this.def.widget.follow) {
-      Event.stopObserving(this.area || document, "mousemove", this.moveEvent);
+      Event.stopObserving(document, "mousemove", this.moveEvent);
     }
 
     this.hide();

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
       (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualactions_test.html
       Tue Mar 21 23:24:33 2006
@@ -39,6 +39,7 @@
     <!-- View: contextual actions widget -->
     <ins class="view">
     {"id": "menu",
+     "selectors": ["div"],
      "widget": {
        "type": "contextualactions",
        "items": [

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
  (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
  Tue Mar 21 23:24:33 2006
@@ -42,6 +42,7 @@
 
     <ins class="view">
     {"id": "menu",
+     "selectors": ["div"],
      "widget": {
        "type": "contextmenu",
        "items": [
@@ -122,6 +123,8 @@
       "copyable":true
     }}
     </ins>
+
+    <div id="area">
     <div id="area1" class="pad">area1</div>
 
     <ins class="model">
@@ -172,6 +175,7 @@
       </ins>
       <div id="area5" class="pad">area5</div>
     </div>
+    </div>
   </div>
 
   <!-- Controller -->

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
      Tue Mar 21 23:24:33 2006
@@ -65,7 +65,7 @@
       "hint":"Click here to open the document."
     }}
     </ins>
-    <a href="#">Open</a>
+    <a class="hint1" href="#">Open</a>
 
     <ins class="model">
     {"id": "m2",
@@ -73,7 +73,7 @@
       "hint":"Click here to save the document."
     }}
     </ins>
-    <a href="#">Save</a>
+    <a class="hint1" href="#">Save</a>
 
     <ins class="model">
     {"id": "m3",
@@ -81,10 +81,11 @@
       "hint":"Click here to close the document."
     }}
     </ins>
-    <a href="#">Close</a>
+    <a class="hint1" href="#">Close</a>
 
     <ins class="view">
     {"id": "tooltip1",
+     "selectors": [".hint1"],
      "widget": {
        "type": "tooltip"
      },
@@ -111,7 +112,7 @@
       "hint":"Click here to open the file."
     }}
     </ins>
-    <a href="#">Open</a>
+    <a class="hint2" href="#">Open</a>
 
     <ins class="model">
     {"id": "m5",
@@ -119,7 +120,7 @@
       "hint":"Click here to save the file."
     }}
     </ins>
-    <a href="#">Save</a>
+    <a class="hint2" href="#">Save</a>
 
     <ins class="model">
     {"id": "m6",
@@ -127,10 +128,11 @@
       "hint":"Click here to close the file."
     }}
     </ins>
-    <a href="#">Close</a>
+    <a class="hint2" href="#">Close</a>
 
     <ins class="view">
     {"id": "tooltip2",
+     "selectors": [".hint2"],
      "widget": {
        "type": "tooltip"
      },
@@ -150,7 +152,5 @@
        Hide delay: 1s</p>
   </div>
 
-  <div id="msg"></div>
-
 </body>
 </html>

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/data2.txt
==============================================================================
--- cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/data2.txt  
(original)
+++ cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/data2.txt  
Tue Mar 21 23:24:33 2006
@@ -1,5 +1,6 @@
 
 {"id": "tooltip",
+ "selectors": ["#area1"],
  "widget": {
    "type": "tooltip",
    "follow": true
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to