Author: jmorliaguet Date: Tue Dec 27 00:02:08 2005 New Revision: 2086 Modified: cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js Log:
- wired the controller - improved the contextual menu / submenus (not finished) 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 Dec 27 00:02:08 2005 @@ -41,19 +41,20 @@ Event.observe(window, 'load', CPSSkins.init); - // Controller -var controllers = []; +var controllers = new Object(); CPSSkins.Controller = Class.create(); CPSSkins.Controller.prototype = { initialize: function(id) { this.id = id; - controllers.push(this); + this.handlers = {}; + controllers[id] = this; }, - add: function(items) { + add: function(handlers) { + Object.extend(this.handlers, handlers); } } @@ -158,8 +159,10 @@ menu.appendChild(item); } var area = node.getAttribute('area'); + menu.style.display = 'none'; node.parentNode.replaceChild(menu, node); - new CPSSkins.ContextualMenu(menu, area, actions); + var controller = node.getAttribute('controller'); + new CPSSkins.ContextualMenu(menu, area, controller, actions); }, tooltip: function(node) { @@ -167,6 +170,7 @@ tooltip.style.position = 'absolute'; Element.hide(tooltip); Element.addClassName(tooltip, node.getAttribute('class')) + tooltip.style.display = 'none'; node.parentNode.replaceChild(tooltip, node) var area = node.getAttribute('area'); var options = { @@ -182,13 +186,16 @@ CPSSkins.ContextualMenu = Class.create(); CPSSkins.ContextualMenu.prototype = { - initialize: function(menu, area, actions) { + initialize: function(menu, area, controller, actions) { this.actions = actions; this.area = $(area); this.menu = $(menu); + this.handlers = controllers[controller].handlers; + + this.submenu = null; this.selected = null; - this.width = Element.getDimensions(this.menu)['width']; + this.width = Element.getDimensions(this.menu).width; this.browseEvent = this.browse.bindAsEventListener(this); this.clickEvent = this.click.bindAsEventListener(this); @@ -220,8 +227,12 @@ browse: function(e) { node = Event.element(e); - if (Element.hasClassName(node, 'submenu')) { - Element.show(node); + var submenus = document.getElementsByClassName('submenu', node); + if (submenus.length > 0) { + this.submenu = submenus[0]; + Element.show(this.submenu); + } else { + if (this.submenu) Element.hide(this.submenu); } }, @@ -233,7 +244,7 @@ if (!window.confirm(confirm)) { return; } } var choice = item.getAttribute('choice') || action; - var handler = this.actions[action]['handler']; + var handler = this.handlers[action]; if (handler) { handler(this.selected, choice); } }, @@ -241,8 +252,8 @@ var menu = this.menu; // Display the menu inside the screen var dimensions = Element.getDimensions(menu); - var menuWidth = dimensions['width']; - var menuHeight = dimensions['height']; + 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; @@ -251,7 +262,7 @@ menu.style.left = menuX + 'px'; menu.style.top = menuY + 'px'; // submenu position - this.submenuLeft = this.width -5; + this.submenuLeft = this.width -5; if (!document.all) this.submenuLeft += parseInt(menu.style.left); @@ -273,13 +284,13 @@ action_info = this.actions[action]; } catch(e) {} - var visibility = action_info['visible']; + var visibility = action_info.visible; if (visibility) { visible = (selected.getAttribute(visibility) == 1) } if (visible) { - choices = action_info['choices']; + choices = action_info.choices; if (choices) { var items = selected.getAttribute(choices); if (items) { @@ -296,6 +307,7 @@ Element.addClassName(submenu, 'submenu'); submenu.style.left = this.submenuX; node.appendChild(submenu); + Element.hide(submenu); } } Element.show(node); @@ -343,9 +355,9 @@ 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']; + node.style.top = this.hint.y + 20 + 'px'; + node.style.left = this.hint.x + 'px'; + node.innerHTML = this.hint.text; Element.show(node); }, -- http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins