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
