Author: jmorliaguet
Date: Sat Jan  7 01:12:53 2006
New Revision: 2173

Modified:
   cpsskins/branches/jmo-perspectives/ui/framework/cpsskins.js
   
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_model_view_test.html
Log:

- code cleaning, simplifications

- widgets are inserted just before the <cpsskins:view> tag to preserve their
  location on the page.



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 
01:12:53 2006
@@ -39,7 +39,10 @@
       var widget_id = e.getAttribute("widget").toLowerCase();
       var factory = Widgets[widget_id];
       if (factory) {
-        view = factory(e, index);
+        view = factory(e);
+        view.id = index;
+        e.parentNode.insertBefore(view.widget, e);
+
         var perspectives = (e.getAttribute("perspectives") || "").split(",");
         $A(perspectives).each(function(p) {
           if (!(p in CPSSkins.Perspectives)) {
@@ -284,7 +287,7 @@
     var observers = CPSSkins.Observers[node];
     if (observers) {
       observers.each(function(v) {
-        v.update(data);
+        v.render(data);
       });
     }
 
@@ -297,7 +300,7 @@
     this.setNodeData(element, current);
   },
 
-  addNode: function(container, options) {
+  createNode: function(options) {
     var node = document.createElement(options.tag);
     Element.addClassName(node, options.classes);
     Element.setStyle(node, options.style);
@@ -305,7 +308,7 @@
       node.setAttribute(attr[0], attr[1])
     });
     node.innerHTML = options.content || "";
-    return container.appendChild(node);
+    return node;
   },
 
   setOpacity: function(element, opacity) {
@@ -417,8 +420,8 @@
 if (!window.Widgets) { var Widgets = new Object(); }
 Object.extend(Widgets, {
 
-  contextmenu: function(view, index) {
-    var widget = Canvas.addNode(document.body, {
+  contextmenu: function(view) {
+    var widget = Canvas.createNode({
       tag: "div",
       classes: "contextMenu",
       style: {position:"absolute", display:"none"}
@@ -426,8 +429,8 @@
     return new CPSSkins.ContextualMenu(widget, view);
   },
 
-  tooltip: function(view, index) {
-    var widget = Canvas.addNode(document.body, {
+  tooltip: function(view) {
+    var widget = Canvas.createNode({
       tag: "div",
       classes: "tooltip",
       style: {position:"absolute", display:"none"}
@@ -435,11 +438,10 @@
     return new CPSSkins.Tooltip(widget, view);
   },
 
-  panel: function(view, index) {
-    var widget = Canvas.addNode(view.parentNode, {
+  panel: function(view) {
+    var widget = Canvas.createNode({
       tag: "div",
       style: {display: "none"},
-      attributes: {id: "cpsskins-panel" + index}
     });
     return new CPSSkins.Panel(widget, view);
   }
@@ -495,7 +497,7 @@
 
     var css = this.view.getAttribute("css");
     if (css) {
-      this.css_id = this.id;
+      this.css_id = "cpsskins-panel-css" + this.id;
       Canvas.addStyleSheet(this.css_id, css);
     }
 
@@ -686,7 +688,7 @@
             options.classes = "disabled";
           }
 
-          Canvas.addNode(container, options);
+          container.appendChild(Canvas.createNode(options));
 
           break;
         };
@@ -706,16 +708,17 @@
                 href: "javascript:void(0)"
               }
             }
-            Canvas.addNode(container, options);
+            container.appendChild(Canvas.createNode(options));
           };
           break;
         };
 
         case "separator": {
-          Canvas.addNode(container, {
+          var node = Canvas.createNode({
             tag: "div",
             classes: "separator"
           });
+          container.appendChild(node);
           break;
         };
 
@@ -729,7 +732,7 @@
           };
 
           if (disabled) { options.classes = "disabled"; }
-          var item = Canvas.addNode(container, options);
+          var item = container.appendChild(Canvas.createNode(options));
 
           if (disabled) break;
 
@@ -737,7 +740,7 @@
             this.submenuLeft = Element.getDimensions(this.widget).width -2;
           }
 
-          var submenu = Canvas.addNode(item, {
+          var submenu = Canvas.createNode({
             tag: "div",
             classes: "submenu",
             style: {
@@ -747,6 +750,7 @@
               margin: "-20px 0 0 0"
             }
           });
+          item.appendChild(submenu);
 
           this._renderFragment(submenu, tag);
 

Modified: 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_model_view_test.html
==============================================================================
--- 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_model_view_test.html
      (original)
+++ 
cpsskins/branches/jmo-perspectives/ui/framework/tests/functional/cpsskins_model_view_test.html
      Sat Jan  7 01:12:53 2006
@@ -13,7 +13,7 @@
   <link rel="stylesheet" href="../../cpsskins.css" type="text/css" />
 
   <style type="text/css">
-    .grid {
+    .counter {
       font-size: 2em;
       width: 460px;
       padding: 0 0.5em;
@@ -43,30 +43,30 @@
     }
 
     Object.extend(Widgets, {
-      grid: function(view, index) {
-        var widget = Canvas.addNode(document.body, {
-        tag: "div",
-        classes: "grid"
+      counter: function(view) {
+        var widget = Canvas.createNode({
+          tag: "div",
+          classes: "counter"
         });
-        return new Grid(widget, view);
+        return new Counter(widget, view);
       },
-      progressbar: function(view, index) {
-        var widget = Canvas.addNode(document.body, {
-        tag: "div",
-        classes: "progressBar"
+      progressbar: function(view) {
+        var widget = Canvas.createNode({
+          tag: "div",
+          classes: "progressBar"
         });
         return new ProgressBar(widget, view);
       }
     });
 
-    Grid= Class.create();
-    Grid.prototype = {
+    Counter= Class.create();
+    Counter.prototype = {
 
       initialize: function(widget, view) {
         this.widget = widget;
       },
 
-      update: function(data) {
+      render: function(data) {
         this.widget.innerHTML = data.size;
       }
 
@@ -79,7 +79,7 @@
         this.widget = widget;
       },
 
-      update: function(data) {
+      render: function(data) {
         this.widget.style.width = data.size % 50 * 10 +"px";
       }
 
@@ -93,14 +93,16 @@
 
   <h1>CPSSkins model-view test</h1>
 
-  <p>The view observes the model. When the model changes the view 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>
 
+  <h2>View 1 (progress bar widget)</h2>
   <cpsskins:view widget="progressbar" observe="data-provider"></cpsskins:view>
 
-  <cpsskins:view widget="grid" observe="data-provider"></cpsskins:view>
+  <h2>View 2 (counter widget)</h2>
+  <cpsskins:view widget="counter" observe="data-provider"></cpsskins:view>
 
 </body>
 
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to