Author: jmorliaguet
Date: Sat Dec 31 01:22:12 2005
New Revision: 2101
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_contextualmenu_test.html
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html
Log:
- saving work. almost functional contextual menu
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 Sat Dec 31
01:22:12 2005
@@ -210,7 +210,7 @@
}
-// Renderer (converts XML controls to XHTML)
+// Renderer: instanciate a widget.
if (!window.Renderer) { var Renderer = new Object(); }
Object.extend(Renderer, {
@@ -218,32 +218,11 @@
var widget = document.createElement('div');
Element.addClassName(widget, 'contextMenu');
Element.addClassName(widget, view.getAttribute('class'));
-
- var tags = view.getElementsByTagName('*');
- for (var i=0;i<tags.length;i++) {
- var tag = tags[i];
- switch (tag.tagName.toLowerCase()) {
- case 'item': {
- var item = document.createElement('a');
- item.innerHTML = tag.getAttribute('label');
- item.setAttribute("href", "#");
- widget.appendChild(item);
- break;
- };
- case 'items': {
- break;
- };
- case 'submenu': {
- break;
- };
- }
-
- }
+ widget.style.position = 'absolute';
+ //widget.style.display = 'none';
Canvas.addWidget(widget);
- var area = view.parentNode;
- var controller = view.getAttribute('controller');
- new CPSSkins.ContextualMenu(widget, area, controller, actions);
+ new CPSSkins.ContextualMenu(widget, view);
},
tooltip: function(view) {
@@ -253,12 +232,7 @@
widget.style.display = 'none';
Canvas.addWidget(widget);
- var area = view.parentNode;
- var options = {
- showdelay: view.getAttribute('showdelay') || 1000,
- hidedelay: view.getAttribute('hidedelay') || 100,
- }
- new CPSSkins.Tooltip(widget, area, options);
+ new CPSSkins.Tooltip(widget, view);
}
});
@@ -267,38 +241,41 @@
CPSSkins.ContextualMenu = Class.create();
CPSSkins.ContextualMenu.prototype = {
- initialize: function(menu, area, controller, actions) {
- this.actions = actions;
- this.area = $(area);
- this.menu = $(menu);
+ initialize: function(widget, view) {
+ this.widget = widget;
+ this.view = view;
+ this.area = view.parentNode;
+
+ this.selected = null;
+ this.width = Element.getDimensions(this.widget).width;
+
+ var controller = view.getAttribute('controller');
this.handlers = controllers[controller].handlers;
- this.submenu = null;
+ this.actions = {};
- this.selected = null;
- this.width = Element.getDimensions(this.menu).width;
+ this.active = false;
this.browseEvent = this.browse.bindAsEventListener(this);
this.clickEvent = this.click.bindAsEventListener(this);
-
Event.observe(document, 'click', this.clickEvent);
- Event.observe(this.menu, 'mouseover', this.browseEvent);
+ Event.observe(this.widget, 'mouseover', this.browseEvent);
},
click: function(e) {
- var node = Event.element(e);
+ var element = Event.element(e);
var x = Event.pointerX(e);
var y = Event.pointerY(e);
if (this.active) {
- if (Position.within(this.menu, x, y)) {
- this.call(node);
+ if (Position.within(this.widget, x, y)) {
+ this.call(element);
}
- Element.hide(this.menu);
+ Element.hide(this.widget);
} else {
- this.selected = Identifiable.getIdentifiable(node);
+ this.selected = Identifiable.getIdentifiable(element);
if (Position.within(this.area, x, y)) {
this.show(x, y);
}
@@ -335,9 +312,12 @@
},
show: function(x, y) {
- var menu = this.menu;
+ var selected = this.selected;
+ if (!selected) return;
+ var widget = this.widget;
+ var view = this.view;
// Display the menu inside the screen
- var dimensions = Element.getDimensions(menu);
+ var dimensions = Element.getDimensions(widget);
var menuWidth = dimensions.width;
var menuHeight = dimensions.height;
var page_w = window.innerWidth || document.body.clientWidth;
@@ -345,89 +325,95 @@
var menuX = (x + menuWidth > page_w) ? x - menuWidth -1 : x + 1;
var menuY = (y + menuHeight > page_h) ? y - menuHeight -1 : y + 1;
// menu position
- menu.style.left = menuX + 'px';
- menu.style.top = menuY + 'px';
+ widget.style.left = menuX + 'px';
+ widget.style.top = menuY + 'px';
// submenu position
this.submenuLeft = this.width -5;
if (!document.all)
- this.submenuLeft += parseInt(menu.style.left);
+ this.submenuLeft += parseInt(widget.style.left);
- // clear all submenus
- document.getElementsByClassName('submenu', this.menu).each(function(v) {
+ // reset the menu
+ $A(widget.getElementsByTagName('*')).each(function(v) {
v.parentNode.removeChild(v);
});
- this.filterMenuItems();
- Element.show(this.menu);
- },
- filterMenuItems: function(node) {
- var node = node || this.menu;
- var selected = this.selected;
- if (!selected) { return; }
- if (!node.getAttribute) { return; }
+ var data = Canvas.getNodeData(this.selected);
+ var tags = view.getElementsByTagName('*');
+ var parent = widget;
- 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.visible;
- if (visibility) {
- visible = (selected.getAttribute(visibility) == 1)
- }
+ for (var i=0;i<tags.length;i++) {
+ var tag = tags[i];
+ switch (tag.tagName.toLowerCase()) {
- if (visible) {
- choices = action_info.choices;
- if (choices) {
- var items = selected.getAttribute(choices);
- if (items) {
- var items = items.split(',');
- var submenu = document.createElement('div');
- for (var i=0; i<items.length; i++) {
- var s = items[i].split(':');
- var item = document.createElement('a');
- item.setAttribute('href', '#');
- item.setAttribute('choice', s[0]);
- item.innerHTML = s[1] ? s[1] : s[0];
- submenu.appendChild(item);
- }
- Element.addClassName(submenu, 'submenu');
- submenu.style.left = this.submenuLeft + 'px';
- submenu.style.display = 'none';
- node.appendChild(submenu);
+ case 'item': {
+ var item = document.createElement('a');
+ var visible = tag.getAttribute('visible');
+ if (data && visible) {
+ if (!data[visible]) break;
}
- }
- node.style.display = 'block';
- } else {
- node.style.display = 'none';
+ item.innerHTML = tag.getAttribute('label');
+ item.setAttribute('action', tag.getAttribute('action'));
+ item.setAttribute('href', '#');
+ widget.appendChild(item);
+ break;
+ };
+
+ case 'items': {
+ if (!data) return;
+ 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);
+ };
+ 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);
+ parent = submenu;
+ break;
+ };
}
+
}
- var childnodes = node.childNodes;
- for (var i = 0; i < childnodes.length; i++)
- this.filterMenuItems(childnodes[i]);
+ Element.show(this.widget);
}
+
}
// Tooltip
CPSSkins.Tooltip = Class.create();
CPSSkins.Tooltip.prototype = {
- initialize: function(tooltip, area, options) {
- this.node = $(tooltip);
- this.area = $(area);
- this.options = options;
-
+ initialize: function(widget, view) {
+ this.widget = widget;
+ this.area = view.parentNode;
+ this.options = {
+ showdelay: view.getAttribute('showdelay') || 1000,
+ hidedelay: view.getAttribute('hidedelay') || 100
+ }
this.hint = null;
this.effect = null;
this.setupEvent = this.setup.bindAsEventListener(this);
this.hideEvent = this.hide.bindAsEventListener(this);
-
- Event.observe(area || document, 'mouseover', this.setupEvent);
+ Event.observe(this.area || document, 'mouseover', this.setupEvent);
},
setup: function(e) {
@@ -444,22 +430,22 @@
},
show: function() {
- var node = this.node;
- node.style.top = this.hint.y + 20 + 'px';
- node.style.left = this.hint.x + 'px';
- node.innerHTML = this.hint.text;
+ var widget = this.widget;
+ widget.style.top = this.hint.y + 20 + 'px';
+ widget.style.left = this.hint.x + 'px';
+ widget.innerHTML = this.hint.text;
if (this.effect) {
this.effect.stop();
}
- this.effect = new CPSSkins.Effect(node, {
+ this.effect = new CPSSkins.Effect(widget, {
delay: this.options.showdelay,
action: function(value) {
- Canvas.setOpacity(node, value);
+ Canvas.setOpacity(widget, value);
},
complete: function() {
- Element.show(node);
+ Element.show(widget);
}.bind(this)
});
@@ -467,19 +453,19 @@
},
hide: function(e) {
- var node = this.node;
+ var widget = this.widget;
if (this.effect) {
this.effect.stop();
}
- this.effect = new CPSSkins.Effect(node, {
+ this.effect = new CPSSkins.Effect(widget, {
delay: this.options.hidedelay,
action: function(value) {
- Canvas.setOpacity(node, 1-value);
+ Canvas.setOpacity(widget, 1-value);
},
complete: function() {
- Element.hide(node);
+ Element.hide(widget);
if (this.hint) {
Event.stopObserving(this.hint.selected, 'mouseout', this.hideEvent);
}
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
Sat Dec 31 01:22:12 2005
@@ -25,14 +25,14 @@
<!-- Contextual menu widget -->
<cpsskins:contextmenu controller="controller" class="large">
- <item label="Edit" action="edit" visible="editable" />
- <item label="Copy" action="copy" />
- <item label="Paste" action="paste" visible="editable" />
+ <item label="Edit" action="edit" visible="editable"></item>
+ <item label="Copy" action="copy"></item>
+ <item label="Paste" action="paste" visible="editable"></item>
<submenu label="Format" visible="formattable">
- <items action="format" choices="formats" />
+ <items action="format" choices="formats"></items>
</submenu>
<item label="Delete" action="delete" visible="editable"
- confirm="Deleting, are you sure?" />
+ confirm="Deleting, are you sure?"></item>
</cpsskins:contextmenu>
<!-- json-data: {"copyable":true} -->
@@ -65,14 +65,14 @@
<!-- Contextual menu widget -->
<cpsskins:contextmenu controller="controller" class="large">
- <item label="Edit" action="edit" visible="editable" />
- <item label="Copy" action="copy" />
- <item label="Paste" action="paste" visible="editable" />
+ <item label="Edit" action="edit" visible="editable"></item>
+ <item label="Copy" action="copy"></item>
+ <item label="Paste" action="paste" visible="editable"></item>
<submenu label="Format" visible="formattable">
- <items action="format" choices="formats" />
+ <items action="format" choices="formats"></items>
</submenu>
<item label="Delete" action="delete" visible="editable"
- confirm="Deleting, are you sure?" />
+ confirm="Deleting, are you sure?"></item>
</cpsskins:contextmenu>
<!-- json-data:
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
Sat Dec 31 01:22:12 2005
@@ -27,7 +27,7 @@
<!-- json-data: {"hint":"Click here to close the document."} -->
<a href="#">Close</a>
- <cpsskins:tooltip showdelay="1000" hidedelay="500" />
+ <cpsskins:tooltip showdelay="1000" hidedelay="500"></cpsskins:tooltip>
<p>Show delay: 1s<br/>
Hide delay: 500ms</p>
@@ -44,7 +44,7 @@
<!-- json-data: {"hint":"Click here to close the file."} -->
<a href="#">Close</a>
- <cpsskins:tooltip showdelay="500" hidedelay="1000" />
+ <cpsskins:tooltip showdelay="500" hidedelay="1000"></cpsskins:tooltip>
<p>Show delay: 500ms<br/>
Hide delay: 1s</p>
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
