Author: jmorliaguet Date: Sun Jan 8 19:00:38 2006 New Revision: 2192 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_panel_test.html cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_tooltip.html Log:
- the tooltip widget now uses the API 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 8 19:00:38 2006 @@ -476,6 +476,10 @@ }, /* Public API */ + inspect: function() { + return "[CPSSkins " + this.tag.getAttribute("widget") + "]"; + }, + setup: function() { /* to override: setup the view */ }, @@ -489,7 +493,7 @@ }, teardown: function() { - /* to override: teardown the widget after hiding it */ + /* to override: tear down the widget after hiding it */ }, /* Private API */ @@ -502,7 +506,7 @@ update: function() { var data = this.getData(); - this.render(data); + if (data) this.render(data); }, show: function() { @@ -511,14 +515,25 @@ this.prepare(); var widget = this.widget; - Element.show(widget); + if (this.effects.indexOf("fadein") >= 0) { + + if (this.effect) { + this.effect.stop(); + } + Canvas.setOpacity(widget, 0); - new CPSSkins.Scheduler(widget, { + this.effect = new CPSSkins.Scheduler(widget, { action: function(value) { Canvas.setOpacity(widget, value); + }, + onComplete: function() { + Element.show(widget); } }); + + } else { + Element.show(widget); } this.visible = true; @@ -527,7 +542,27 @@ hide: function() { if (!this.visible) return; - Element.hide(this.widget); + var widget = this.widget; + + if (this.effect && !this.effect.started) { + Element.hide(widget); + return; + } + + if (this.effects.indexOf("fadeout") >= 0) { + this.effect = new CPSSkins.Scheduler(widget, { + action: function(value) { + Canvas.setOpacity(widget, 1-value); + }, + onComplete: function() { + Element.hide(widget); + } + }); + + } else { + Element.hide(widget); + } + this.visible = false; this.teardown(); @@ -585,18 +620,23 @@ return '[CPSSkins Panel:' + this.url + ']'; }, + getData: function() { + return this.url; + }, + render: function(data) { + var url = data; var script = this.tag.getAttribute("script"); if (script) { this.script_id = this.id; Canvas.addScript(this.script_id, script); } - var url = this.url; + var widget = this.widget; var options = { onComplete: function() { - CPSSkins.parse(this.widget); - }.bind(this) + CPSSkins.parse(widget); + } }; if (url) { @@ -605,7 +645,7 @@ var url = parts[0]; options.parameters = parts[1]; } - new Ajax.Updater(this.widget, url, options); + new Ajax.Updater(widget, url, options); } }, @@ -622,6 +662,7 @@ Canvas.removeStyleSheet(this.css_id); } } + }); // Contextual menu @@ -644,68 +685,9 @@ Event.observe(document, "mousedown", this.hideEvent); }, - inspect: function() { - return '[CPSSkins Contextual Menu]'; - }, - - showEvent: function(e) { - var element = Event.element(e); - var selected = Identifiable.getIdentifiable(element); - if (!selected) return; - - this.x = Event.pointerX(e); - this.y = Event.pointerY(e); - - var widget = this.widget; - - if (!this.active) { - this.selected = selected; - this.show(); - this.active = true; - } else { - this.active = false; - } - }, - - hideEvent: function(e) { - CPSSkins.removeObserver(this); - this.hide(); - var x = Event.pointerX(e); - var y = Event.pointerY(e); - if (!Position.within(this.area, x, y)) { - this.active = false; - } - }, - - callEvent: function(e) { - var element = Event.element(e); - if (element.getAttribute("disabled")) return; - var action = element.getAttribute("action"); - if (!action) return; - var choice = element.getAttribute("choice") || action; - var confirm = element.getAttribute("confirm"); - this.hide(); - if (confirm) { - if (!window.confirm(confirm)) return; - } - /* notify the controller */ - CPSSkins.notify(this.tag, this.selected, action, choice); - this.active = false; - }, - - mouseOverEvent: function(e) { - var here = Event.element(e); - if (Element.hasClassName(here, "submenuitem")) { - var menu = this._getSubmenu(here); - if (!menu) return; - - document.getElementsByClassName("submenu", here.parentNode).each( - function(v) { - Element.hide(v); - } - ); - Element.show(menu); - } + render: function(data) { + this.widget.innerHTML = ''; + this._renderFragment(this.widget, this.tag, data); }, _getSubmenu: function(element) { @@ -720,27 +702,6 @@ return null; }, - prepare: function() { - var selected = this.selected; - if (!selected) return; - - // Display the menu inside the screen - var widget = this.widget; - Canvas.moveTo(widget, this.x, this.y); - Canvas.fitInsideScreen(widget); - - // TODO: move this elsewhere - if (!this.tag.getAttribute("observe")) { - CPSSkins.addObserver(selected, this); - } - - }, - - render: function(data) { - this.widget.innerHTML = ''; - this._renderFragment(this.widget, this.tag, data); - }, - _renderFragment: function(container, fragment, data) { var tags = fragment.childNodes; @@ -854,8 +815,84 @@ } }, + prepare: function() { + var selected = this.selected; + if (!selected) return; + + // Display the menu inside the screen + var widget = this.widget; + Canvas.moveTo(widget, this.mouseX, this.mouseY); + Canvas.fitInsideScreen(widget); + + // TODO: move this elsewhere + if (!this.tag.getAttribute("observe")) { + CPSSkins.addObserver(selected, this); + } + }, + teardown: function() { CPSSkins.removeObserver(this); + }, + + /* Event handlers */ + showEvent: function(e) { + var element = Event.element(e); + var selected = Identifiable.getIdentifiable(element); + if (!selected) return; + + this.mouseX = Event.pointerX(e); + this.mouseY = Event.pointerY(e); + + var widget = this.widget; + + if (!this.active) { + this.selected = selected; + this.show(); + this.active = true; + } else { + this.active = false; + } + }, + + hideEvent: function(e) { + CPSSkins.removeObserver(this); + this.hide(); + var mouseX = Event.pointerX(e); + var mouseY = Event.pointerY(e); + if (!Position.within(this.area, mouseX, mouseY)) { + this.active = false; + } + }, + + callEvent: function(e) { + var element = Event.element(e); + if (element.getAttribute("disabled")) return; + var action = element.getAttribute("action"); + if (!action) return; + var choice = element.getAttribute("choice") || action; + var confirm = element.getAttribute("confirm"); + this.hide(); + if (confirm) { + if (!window.confirm(confirm)) return; + } + /* notify the controller */ + CPSSkins.notify(this.tag, this.selected, action, choice); + this.active = false; + }, + + mouseOverEvent: function(e) { + var here = Event.element(e); + if (Element.hasClassName(here, "submenuitem")) { + var menu = this._getSubmenu(here); + if (!menu) return; + + document.getElementsByClassName("submenu", here.parentNode).each( + function(v) { + Element.hide(v); + } + ); + Element.show(menu); + } } }); @@ -865,13 +902,7 @@ CPSSkins.Tooltip.prototype = Object.extend(new CPSSkins.View(), { setup: function() { - var tag = this.tag; - this.area = tag.parentNode; - this.options = { - showdelay: tag.getAttribute("showdelay") || 1000, - hidedelay: tag.getAttribute("hidedelay") || 100 - } - this.effect = null; + this.area = this.tag.parentNode; this.showEvent = this.showEvent.bindAsEventListener(this); this.hideEvent = this.hideEvent.bindAsEventListener(this); @@ -879,70 +910,38 @@ Event.observe(this.area || document, "mouseout", this.hideEvent); }, - inspect: function() { - return '[CPSSkins Tooltip]'; - }, - render: function(data) { - if (!data) return; this.widget.innerHTML = data.hint; }, + prepare: function() { + CPSSkins.addObserver(this.selected, this); + + this.widget.style.top = this.mouseY + 20 + "px"; + this.widget.style.left = this.mouseY + "px"; + Canvas.fitInsideScreen(this.widget); + }, + + /* Event handlers */ showEvent: function(e) { - this.selected = Event.element(e); + var selected = Event.element(e); - var data = Canvas.getNodeData(this.selected); + var data = Canvas.getNodeData(selected); if (!data) return; if (!data.hint) return; - CPSSkins.addObserver(this.selected, this); + this.mouseX = Event.pointerX(e); + this.mouseY = Event.pointerY(e); + this.selected = selected; - var widget = this.widget; - widget.style.top = Event.pointerY(e) + 20 + "px"; - widget.style.left = Event.pointerX(e) + "px"; - Canvas.fitInsideScreen(widget); - - if (this.effect) { - this.effect.stop(); - } - - Element.hide(widget); - this.effect = new CPSSkins.Scheduler(widget, { - delay: this.options.showdelay, - action: function(value) { - Canvas.setOpacity(widget, value); - }, - onComplete: function() { - Element.show(widget); - } - }); + this.show(); }, hideEvent: function(e) { var selected = Event.element(e); if (selected != this.selected) return; - var widget = this.widget; - - if (this.effect) { - this.effect.stop(); - } - - if (this.effect && !this.effect.started) { - Element.hide(widget); - return; - } - - this.effect = new CPSSkins.Scheduler(widget, { - delay: this.options.hidedelay, - action: function(value) { - Canvas.setOpacity(widget, 1-value); - }, - onComplete: function() { - Element.hide(widget); - }.bind(this) - }); - + this.hide(); } }); 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 Sun Jan 8 19:00:38 2006 @@ -22,8 +22,11 @@ <!-- View: contextual menu widget --> - <cpsskins:view widget="contextmenu" controller="controller" - effects="fadein"> + <cpsskins:view + widget="contextmenu" + controller="controller" + effects="fadein,fadeout"> + <item label="Edit" icon="edit.png" action="edit" visible="editable"></item> Modified: cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_panel_test.html ============================================================================== --- cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_panel_test.html (original) +++ cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_panel_test.html Sun Jan 8 19:00:38 2006 @@ -58,30 +58,45 @@ <tr style="vertical-align: top"> <td style="width: 20%"> - <cpsskins:view widget="panel" perspectives="page-designer" url="panel2.html"> + <cpsskins:view + widget="panel" + perspectives="page-designer" + url="panel2.html"> </cpsskins:view> - <cpsskins:view widget="panel" perspectives="site-designer,layout-designer" - url="panel3.html"> + <cpsskins:view widget="panel" + perspectives="site-designer,layout-designer" + url="panel3.html"> </cpsskins:view> </td> <td syle="width: 60%"> - <cpsskins:view widget="panel" perspectives="page-designer" url="panel3.html"> + <cpsskins:view + widget="panel" + perspectives="page-designer" + url="panel3.html"> </cpsskins:view> - <cpsskins:view widget="panel" perspectives="page-designer" url="panel4.html"> + <cpsskins:view + widget="panel" + perspectives="page-designer" + url="panel4.html"> </cpsskins:view> </td> <td style="width: 20%"> - <cpsskins:view widget="panel" perspectives="site-designer,layout-designer" - url="panel4.html"> + <cpsskins:view + widget="panel" + perspectives="site-designer,layout-designer" + url="panel4.html"> </cpsskins:view> - <cpsskins:view widget="panel" perspectives="site-designer" url="panel2.html"> + <cpsskins:view + widget="panel" + perspectives="site-designer" + url="panel2.html"> </cpsskins:view> </td> @@ -89,7 +104,8 @@ </tr> </table> - <cpsskins:view widget="panel" + <cpsskins:view + widget="panel" perspectives="element-editor" url="panel5.html" css="popup.css"> 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 Sun Jan 8 19:00:38 2006 @@ -28,7 +28,12 @@ <!-- model: {"hint":"Click here to close the document."} --> <a href="#">Close</a> - <cpsskins:view widget="tooltip" showdelay="1000" hidedelay="500"></cpsskins:view> + <cpsskins:view + widget="tooltip" + effects="fadein,fadeout" + showdelay="1000" + hidedelay="500"> + </cpsskins:view> <p>Show delay: 1s<br/> Hide delay: 500ms</p> @@ -45,7 +50,12 @@ <!-- model: {"hint":"Click here to close the file."} --> <a href="#">Close</a> - <cpsskins:view widget="tooltip" showdelay="500" hidedelay="1000"></cpsskins:view> + <cpsskins:view + widget="tooltip" + effects="fadein,fadeout" + showdelay="500" + hidedelay="1000"> + </cpsskins:view> <p>Show delay: 500ms<br/> Hide delay: 1s</p> -- http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins