Author: jmorliaguet
Date: Mon Dec 26 02:02:06 2005
New Revision: 2079

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

- saving work:

  simpler registration of contextual menus (inspired from the BackBase
  approach (backbase.com) .com where XML markup is converted into XHTML)

  TODO: wire the controller



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 Mon Dec 26 
02:02:06 2005
@@ -20,6 +20,8 @@
   Version: '0.1'
 }
 
+var controllers = [];
+
 // Identifiable DOM elements.
 
 if (!window.Identifiable) var Identifiable = new Object();
@@ -94,103 +96,141 @@
 
 });
 
+// TODO to rewrite
+function init() {
+  var els = document.getElementsByTagName('*');
+  var m = $('message');
+  for (var i=0;i<els.length;i++) {
+    var tag = els[i].tagName;
+    if (tag.match(/^cpsskins:/i)) {
+      var el = els[i];
+      render(el);
+    }
+  }
+}
+
+function render(node) {
+  if (node.tagName == 'CPSSKINS:CONTEXTUALMENU') {
+    var menu = document.createElement('div');
+    Element.addClassName(menu, 'contextMenu');
+    Element.addClassName(menu, node.getAttribute('class'));
+    var items = node.getElementsByTagName('item');
+    var actions = new Object();
+    for (var i=0;i<items.length;i++) {
+      var item = document.createElement('a');
+      var data = items[i];
+      var action = data.getAttribute('action');
+      item.setAttribute('href', '#');
+      item.setAttribute('action', action);
+      item.setAttribute('confirm', data.getAttribute('confirm'));
+      item.appendChild(document.createTextNode(data.innerHTML));
+      menu.appendChild(item);
+      actions[action] = {};
+      actions[action]['handler'] = data.getAttribute('handler') || function() 
{};
+      actions[action]['visibility'] = data.getAttribute('visibility') || '';
+      actions[action]['choices'] = data.getAttribute('choices') || '';
+    }
+    var area = node.getAttribute('area');
+    node.parentNode.replaceChild(menu, node);
+    new CPSSkins.ContextualMenu(menu, area, actions);
+  }
+}
+
+// Controller
+
+CPSSkins.Controller = Class.create();
+CPSSkins.Controller.prototype = {
+
+  initialize: function(id) {
+    this.id = id;
+    controllers.push(this);
+  },
+
+  add: function(items) {
+    // TODO
+  }
+
+}
 
 // Contextual menu
 
 CPSSkins.ContextualMenu = Class.create();
 CPSSkins.ContextualMenu.prototype = {
 
-  initialize: function(menu, area, actions, options) {
+  initialize: function(menu, area, actions) {
     this.menu = menu;
-    this.area = area;
-    this.menunode = $(menu);
     this.actions = actions;
-    this.setOptions(options || {});
+    this.areanode = $(area);
+    this.menunode = $(menu);
 
     this.selected = null;
-    this.submenunode = null;
+    this.width = Element.getDimensions(this.menunode)['width'];
 
     this.browseEvent = this.browse.bindAsEventListener(this);
     this.clickEvent = this.click.bindAsEventListener(this);
 
     Event.observe(document, 'click', this.clickEvent);
     Event.observe(this.menunode, 'mouseover', this.browseEvent);
-  },
 
-  setOptions: function(options) {
-    this.options = Object.extend({
-      maxwidth: 250
-    }, options || {});
   },
 
   click: function(e) {
-    var  node = Event.element(e);
+    var node = Event.element(e);
+    var x = Event.pointerX(e);
+    var y = Event.pointerY(e);
+
     if (this.active) {
-      this.hide();
-      if (Position.within($(this.menunode), x, y)) {
+      if (Position.within(this.menunode, x, y)) {
         this.call(node);
       }
+      Element.hide(this.menunode);
+
     } else {
       this.selected = Identifiable.getIdentifiable(node);
-      var x = Event.pointerX(e);
-      var y = Event.pointerY(e);
-      if (Position.within($(this.area), x, y)) {
+      if (Position.within(this.areanode, x, y)) {
         this.show(x, y);
       }
     }
+    this.active = !this.active;
   },
 
   browse: function(e) {
     node = Event.element(e);
     if (Element.hasClassName(node, 'submenu')) {
-      this.submenunode = document.getElementsByClassName('items', node)[0];
-      var xpos = Element.getDimensions(this.menunode)['width'] -5;
-      if (!document.all)
-        xpos += parseInt(this.menunode.style.left);
-      Element.setStyle(this.submenunode, 'left', xpos + 'px');
-      Element.show(this.submenunode);
+      Element.show(node);
     }
   },
 
   call: function(item) {
-    if (!item) { return; }
     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');
+    var choice = item.getAttribute('choice') || action;
     var handler = this.actions[action]['handler'];
     if (handler) { handler(this.selected, choice); }
-    this.hide();
-  },
-
-  hide: function() {
-    Element.hide(this.menunode);
-    this.active = false;
   },
 
   show: function(x, y) {
     var menunode = this.menunode;
+    // Display the menu inside the screen
     var dimensions = Element.getDimensions(menunode);
     var menuWidth = dimensions['width'];
     var menuHeight = dimensions['height'];
     var page_w = window.innerWidth || document.body.clientWidth;
     var page_h = window.innerHeight || document.body.clientHeight;
-
     var menuX = (x + menuWidth > page_w) ? x - menuWidth -1 : x + 1;
     var menuY = (y + menuHeight > page_h) ? y - menuHeight -1 : y + 1;
+    // menu position
     menunode.style.left = menuX + 'px';
     menunode.style.top =  menuY + 'px';
+    // submenu position
+    this.submenuLeft  = this.width -5;
+    if (!document.all)
+      this.submenuLeft += parseInt(menunode.style.left);
 
-    var width = this.width;
-    if (menuWidth >= this.options.maxwidth) {
-      width = this.options.maxwidth;
-    }
-    menunode.style.width = width + 'px';
-
-    this.active = true;
     this.filterMenuItems();
     Element.show(this.menunode);
   },
@@ -199,33 +239,39 @@
     var node = node || this.menunode;
     var selected = this.selected;
     if (!selected) { return; }
-
     if (!node.getAttribute) { return; }
-    var action = node.getAttribute(action);
-    if (action && action != this.menu) {
-      var action_info = this.actions[action];
 
+    var action = node.getAttribute('action');
+    if (action) {
       var visible = true;
+      var action_info = {};
+      try {
+        action_info = this.actions[action];
+      } catch(e) {}
+
       var visibility = action_info['visibility'];
       if (visibility) {
-        visible = (selected.getAttribute(visibility) == 1);
+        visible = (selected.getAttribute(visibility) == 1)
       }
 
       if (visible) {
-        var choices = action_info['choices'];
+        choices = action_info['choices'];
         if (choices) {
           var items = selected.getAttribute(choices);
           if (items) {
-            var html = '<div class="items">';
             var items = items.split(',');
+            var submenu = document.createElement('div');
             for (var i=0; i<items.length; i++) {
               var s = items[i].split(':');
-              html += '<a href="#"'
-                      + ' choice="' + s[0] + '">'
-                      + (s[1] ? s[1] : s[0]) + '</a>';
+              var item = document.createElement('a');
+              item.setAttribute('href', '#');
+              item.setAttribute('choice', s[0]);
+              item.appendChild(document.createTextNode(s[1] ? s[1] : s[0]));
+              submenu.appendChild(item);
             }
-            html += '</div>';
-            new Insertion.Bottom(actionid, html);
+            Element.addClassName(submenu, 'submenu');
+            submenu.style.left = this.submenuX;
+            node.appendChild(submenu);
           }
         }
         Element.show(node);
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to