Author: jmorliaguet
Date: Sun Jan  1 15:17:14 2006
New Revision: 2104

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

- more functional contextual menu

- renamed 'complete' as 'onComplete' as in prototype.js

- added a Canvas.addNode() function to simplify the creation of new elements
  with the assignment of style, attributes, content ...



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 Jan  1 
15:17:14 2006
@@ -183,10 +183,16 @@
     this.setNodeData(element, current);
   },
 
-  addWidget: function(element){
-    body = document.getElementsByTagName('body');
-    if (!body.length) return;
-    body.item(0).appendChild(element);
+  addNode: function(container, options) {
+    var node = document.createElement(options.tag);
+    Element.addClassName(node, options.class);
+    Element.setStyle(node, options.style);
+    $A(options.attributes).each(function(attr) {
+      node.setAttribute(node, attr)
+    });
+    node.innerHTML = options.content || '';
+    container.appendChild(node);
+    return node;
   },
 
   setOpacity: function(element, opacity) {
@@ -210,7 +216,7 @@
     this.element = $(element);
     this.action = options.action || function(value) {};
     this.delay = options.delay || 0;
-    this.complete = options.complete || function() {};
+    this.onComplete = options.onComplete || function() {};
     this.duration = options.duration || 300;
 
     this.start()
@@ -234,7 +240,7 @@
 
   stop: function() {
     clearInterval(this.timer);
-    this.complete();
+    this.onComplete();
   }
 
 }
@@ -244,23 +250,20 @@
 Object.extend(Renderer, {
 
   contextmenu: function(view) {
-    var widget = document.createElement('div');
-    Element.addClassName(widget, 'contextMenu');
-    Element.addClassName(widget, view.getAttribute('class'));
-    widget.style.position = 'absolute';
-    //widget.style.display = 'none';
-
-    Canvas.addWidget(widget);
+    var widget = Canvas.addNode(document.body, {
+      tag: 'div',
+      class: ['contextMenu', view.getAttribute('class')],
+      style: {position:'absolute'}
+    });
     new CPSSkins.ContextualMenu(widget, view);
   },
 
   tooltip: function(view) {
-    var widget = document.createElement('div');
-    Element.addClassName(widget, 'tooltip')
-    widget.style.position = 'absolute';
-    widget.style.display = 'none';
-
-    Canvas.addWidget(widget);
+    var widget = Canvas.addNode(document.body, {
+      tag: 'div',
+      class: 'tooltip',
+      style: {position:'absolute', display:'none'}
+    });
     new CPSSkins.Tooltip(widget, view);
   }
 
@@ -275,31 +278,33 @@
     this.view = view;
     this.area = view.parentNode;
 
-    this.selected = null;
-    this.width = Element.getDimensions(this.widget).width;
+    this.active = false;
 
     var controller = view.getAttribute('controller');
     this.handlers = controllers[controller].handlers;
 
-    this.actions = {};
-
-    this.active = false;
-
-    this.browseEvent = this.browse.bindAsEventListener(this);
-    this.clickEvent = this.click.bindAsEventListener(this);
+    this.clickEvent = this.clickEvent.bindAsEventListener(this);
     Event.observe(document, 'click', this.clickEvent);
-    Event.observe(this.widget, 'mouseover', this.browseEvent);
-
   },
 
-  click: function(e) {
+  clickEvent: function(e) {
     var element = Event.element(e);
     var x = Event.pointerX(e);
     var y = Event.pointerY(e);
 
     if (this.active) {
       if (Position.within(this.widget, x, y)) {
-        this.call(element);
+        var action = element.getAttribute('action');
+        if (!action) return;
+        var confirm = element.getAttribute("confirm");
+        if (confirm) {
+          if (!window.confirm(confirm)) return;
+        }
+        var choice = element.getAttribute('choice') || action;
+        var handler = this.handlers[action];
+        if (handler) {
+          handler(this.selected, choice);
+        }
       }
       Element.hide(this.widget);
 
@@ -312,32 +317,9 @@
     this.active = !this.active;
   },
 
-  browse: function(e) {
-    if (this.submenu) {
-      var x = Event.pointerX(e);
-      var y = Event.pointerY(e);
-      if (!Position.within(this.submenu, x, y)) {
-        Element.hide(this.submenu);
-      }
-    }
-    node = Event.element(e);
-    var submenus = document.getElementsByClassName('submenu', node);
-    if (submenus.length > 0) {
-      this.submenu = submenus[0];
-      Element.show(this.submenu);
-    }
-  },
-
-  call: function(item) {
-    var action = item.getAttribute('action');
-    if (!action) { return; }
-    var confirm = item.getAttribute("confirm");
-    if (confirm) {
-      if (!window.confirm(confirm)) { return; }
-    }
-    var choice = item.getAttribute('choice') || action;
-    var handler = this.handlers[action];
-    if (handler) { handler(this.selected, choice); }
+  _getSubmenu: function(e) {
+    var nodes = document.getElementsByClassName('submenu', Event.element(e))
+    return (nodes.length > 0) ? nodes[0] : null;
   },
 
   show: function(x, y) {
@@ -356,8 +338,8 @@
     // menu position
     widget.style.left = menuX + 'px';
     widget.style.top =  menuY + 'px';
-    // submenu position
-    this.submenuLeft = this.width -5;
+    // submenu relative position
+    this.submenuLeft = Element.getDimensions(this.widget).width -5;
     if (!document.all)
       this.submenuLeft += parseInt(widget.style.left);
 
@@ -368,22 +350,27 @@
 
     var data = Canvas.getNodeData(this.selected);
     var tags = view.getElementsByTagName('*');
-    var parent = widget;
 
+    var parent = widget;
     for (var i=0;i<tags.length;i++) {
       var tag = tags[i];
+
+      var visible = tag.getAttribute('visible');
+      if (data && visible) {
+        if (!data[visible]) continue;
+      }
+
       switch (tag.tagName.toLowerCase()) {
 
         case 'item': {
-          var item = document.createElement('a');
-          var visible = tag.getAttribute('visible');
-          if (data && visible) {
-            if (!data[visible]) break;
-          }
-          item.innerHTML = tag.getAttribute('label');
-          item.setAttribute('action', tag.getAttribute('action'));
-          item.setAttribute('href', '#');
-          widget.appendChild(item);
+          Canvas.addNode(widget, {
+            tag: 'a',
+            content: tag.getAttribute('label'),
+            attributes: {
+              action: tag.getAttribute('action'),
+              href: "#"
+            }
+          });
           break;
         };
 
@@ -392,29 +379,49 @@
           var choices = tag.getAttribute('choices');
           var items = data[choices] || [];
           for (var j=0;j<items.length;j++) {
-            var item = document.createElement('a');
-            item.innerHTML = items[j].label;
-            item.setAttribute('action', tag.getAttribute('action'));
-            item.setAttribute('choice', items[j].choice);
-            item.setAttribute('href', "#");
-            parent.appendChild(item);
+            Canvas.addNode(parent, {
+              tag: 'a',
+              content: items[j].label,
+              attributes: {
+                action: tag.getAttribute('action'),
+                choice: items[j].choice,
+                href: "#"
+              }
+            });
+
           };
           break;
         };
 
         case 'submenu': {
-          var visible = tag.getAttribute('visible');
-          if (data && visible) {
-            if (!data[visible]) break;
-          }
-          var item = document.createElement('a');
-          item.innerHTML = tag.getAttribute('label');
-          parent.appendChild(item);
-          var submenu = document.createElement('div');
-          Element.addClassName(submenu, 'submenu');
-          submenu.style.left = this.submenuLeft + 'px';
-          parent.appendChild(submenu);
+          var item = Canvas.addNode(parent, {
+            tag: 'a',
+            content: tag.getAttribute('label'),
+            attributes: {href:"#"}
+          });
+
+          var submenu = Canvas.addNode(item, {
+            tag: 'div',
+            class: 'submenu',
+            style: {left:this.submenuLeft + 'px'}
+          });
+
           parent = submenu;
+
+          var mouseOverEvent = function(e) {
+            var menu = this._getSubmenu(e);
+            if (menu) Element.show(menu);
+          }.bindAsEventListener(this);
+          Event.observe(item, 'mouseover', mouseOverEvent);
+
+          var mouseOutEvent = function(e) {
+            var menu = this._getSubmenu(e);
+            if (!Position.within(menu, Event.pointerX(e), Event.pointerY(e))) {
+              Element.hide(menu);
+            }
+          }.bindAsEventListener(this);
+          Event.observe(item, 'mouseout', mouseOutEvent);
+
           break;
         };
       }
@@ -473,7 +480,7 @@
       action: function(value) {
         Canvas.setOpacity(widget, value);
         },
-      complete: function() {
+      onComplete: function() {
         Element.show(widget);
       }.bind(this)
     });
@@ -493,7 +500,7 @@
       action: function(value) {
         Canvas.setOpacity(widget, 1-value);
         },
-      complete: function() {
+      onComplete: function() {
         Element.hide(widget);
         if (this.hint) {
           Event.stopObserving(this.hint.selected, 'mouseout', this.hideEvent);
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to