Author: jmorliaguet
Date: Sat Jan 7 14:46:50 2006
New Revision: 2177
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_observer_test.html
Log:
- we register the tooltip as an observer of the selected element
- added test to see that the tooltip's view gets dynamically updated when
the model changes.
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 Jan 7
14:46:50 2006
@@ -53,17 +53,30 @@
var observed = e.getAttribute("observe");
if (observed) {
- observed = $(observed);
- if (!(observed in CPSSkins.Observers)) {
- CPSSkins.Observers[observed] = $A([]);
- }
- CPSSkins.Observers[observed].push(view);
+ CPSSkins.addObserver(observed, view)
}
}
});
},
+ addObserver: function(observed, view) {
+ observed = $(observed);
+ if (!(observed in CPSSkins.Observers)) {
+ CPSSkins.Observers[observed] = $A([]);
+ }
+ CPSSkins.Observers[observed].push(view);
+ view.observed = observed;
+ },
+
+ removeObserver: function(view) {
+ var observed = view.observed;
+ if (observed) {
+ var observers = CPSSkins.Observers[observed];
+ observers = observers.without(view);
+ }
+ },
+
/* Controller */
getController: function(tag) {
@@ -426,12 +439,28 @@
initialize: function(widget, tag) {
this.widget = widget;
this.tag = tag;
+
+ var observed = tag.getAttribute("observe");
+ if (observed) {
+ this.observed = $(observed);
+ } else {
+ this.observed = null;
+ }
+
+ this.setup();
+ },
+
+ setup: function() {
+ /* to override: setup the view */
+ },
+
+ render: function(data) {
+ /* to override: render the view from the data */
},
getData: function() {
- var observed = this.tag.getAttribute("observe");
- if (observed) {
- return Canvas.getNodeData(observed);
+ if (this.observed) {
+ return Canvas.getNodeData(this.observed);
}
return null;
},
@@ -439,10 +468,6 @@
update: function() {
var data = this.getData();
this.render(data);
- },
-
- render: function(data) {
- /* to override */
}
}
@@ -801,14 +826,13 @@
CPSSkins.Tooltip = Class.create();
CPSSkins.Tooltip.prototype = Object.extend(new CPSSkins.View(), {
- initialize: function(widget, tag) {
- this.widget = widget;
+ setup: function() {
+ var tag = this.tag;
this.area = tag.parentNode;
this.options = {
showdelay: tag.getAttribute("showdelay") || 1000,
hidedelay: tag.getAttribute("hidedelay") || 100
}
- this.hint = null;
this.effect = null;
this.showEvent = this.showEvent.bindAsEventListener(this);
@@ -817,13 +841,6 @@
Event.observe(this.area || document, "mouseout", this.hideEvent);
},
- getData: function() {
- var selected = this.selected;
- if (!selected) return selected;
- var data = Canvas.getNodeData(selected);
- return data;
- },
-
render: function(data) {
if (!data) return;
this.widget.innerHTML = data.hint;
@@ -832,12 +849,16 @@
showEvent: function(e) {
this.selected = Event.element(e);
+ var data = Canvas.getNodeData(this.selected);
+ if (!data) return;
+ if (!data.hint) return;
+
+ CPSSkins.addObserver(this.selected, this);
+
var widget = this.widget;
widget.style.top = Event.pointerY(e) + 20 + "px";
widget.style.left = Event.pointerX(e) + "px";
- this.update();
-
if (this.effect) {
this.effect.stop();
}
@@ -853,6 +874,7 @@
}
});
+ this.update();
},
hideEvent: function(e) {
@@ -880,6 +902,8 @@
}.bind(this)
});
+ CPSSkins.removeObserver(this);
+
}
});
Modified:
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_observer_test.html
==============================================================================
---
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_observer_test.html
(original)
+++
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_observer_test.html
Sat Jan 7 14:46:50 2006
@@ -13,6 +13,15 @@
<link rel="stylesheet" href="../../cpsskins.css" type="text/css" />
<style type="text/css">
+ #data-provider {
+ border: 1px solid orange;
+ padding: 0.7em;
+ background-color: #fc0;
+ width: 120px;
+ text-align: center;
+ cursor: default;
+ }
+
.counter {
font-size: 2em;
width: 460px;
@@ -44,6 +53,7 @@
function updateModel() {
var data = Canvas.getNodeData("data-provider");
data.size += 1;
+ data.hint = "The size is now " + data.size;
Canvas.updateNodeData("data-provider", data);
}
@@ -93,10 +103,12 @@
<h1>CPSSkins model-view test</h1>
- <p>The views observe the model. When the model changes the views gets
updated.</p>
+ <p>The views observe the model.
+ When the model changes the views gets updated.</p>
<!-- model: {"size": 1} -->
- <div id="data-provider"></div>
+ <div id="data-provider">DATA PROVIDER</div>
+ <cpsskins:view widget="tooltip"></cpsskins:view>
<h2>progress bar widget</h2>
<cpsskins:view widget="progressbar" observe="data-provider"></cpsskins:view>
--
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins
