Workshop sample data

Boilerplate widgets

Signed-off-by: Gordon Smith <[email protected]>

demos/dermatology.html

@@ -90,7 +90,8 @@
     <script>
         require.config({
             paths: {
-                "test": "../test"
+                "test": "../test",
+                "templates": "../templates"
             }
         });
     </script>

src/common/HTMLWidget.js

@@ -10,6 +10,7 @@
         Widget.call(this);
 
         this._drawStartPos = "origin";
+        this._tag = "div";
         this._boundingBox = null;
     }
     HTMLWidget.prototype = Object.create(Widget.prototype);

templates/HTMLTemplate.css

@@ -0,0 +1,8 @@
+.template_HTMLTemplate ul {
+    padding-left: 24px;
+}
+
+.template_HTMLTemplate .dataRow {
+    list-style-type: disc;
+}
+

templates/HTMLTemplate.js

@@ -0,0 +1,42 @@
+"use strict";
+(function (root, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(["src/common/HTMLWidget", "css!./HTMLTemplate"], factory);
+    } else {
+        root.template_HTMLTemplate = factory(root.common_HTMLWidget);
+    }
+}(this, function (HTMLWidget) {
+    function HTMLTemplate(target) {
+        HTMLWidget.call(this);
+    }
+    HTMLTemplate.prototype = Object.create(HTMLWidget.prototype);
+    HTMLTemplate.prototype.constructor = HTMLTemplate;
+    HTMLTemplate.prototype._class += " template_HTMLTemplate";
+
+    HTMLTemplate.prototype.publish("stringProp", "defaultValue", "string", "Sample Property");
+
+    HTMLTemplate.prototype.enter = function (domNode, element) {
+        HTMLWidget.prototype.enter.apply(this, arguments);
+        this._ul = element.append("ul");
+    };
+
+    HTMLTemplate.prototype.update = function (domNode, element) {
+        HTMLWidget.prototype.update.apply(this, arguments);
+
+        var li = this._ul.selectAll(".dataRow").data(this.data());
+        li.enter().append("li")
+            .attr("class", "dataRow")
+        ;
+        li
+            .text(function (row) { return row[0]; })
+        ;
+        li.exit().remove();
+    };
+
+    HTMLTemplate.prototype.exit = function (domNode, element) {
+        this._ul.remove();  //  Not really needed  ---
+        HTMLWidget.prototype.exit.apply(this, arguments);
+    };
+
+    return HTMLTemplate;
+}));

templates/SVGTemplate.css

@@ -0,0 +1,5 @@
+.template_SVGTemplate .someItem {
+    stroke: green;
+    fill: navy;
+}
+

templates/SVGTemplate.js

@@ -0,0 +1,51 @@
+"use strict";
+(function (root, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(["src/common/SVGWidget", "css!./SVGTemplate"], factory);
+    } else {
+        root.template_SVGTemplate = factory(root.common_SVGWidget);
+    }
+}(this, function (SVGWidget) {
+    function SVGTemplate(target) {
+        SVGWidget.call(this);
+        this._drawStartPos = "origin";
+    }
+    SVGTemplate.prototype = Object.create(SVGWidget.prototype);
+    SVGTemplate.prototype.constructor = SVGTemplate;
+    SVGTemplate.prototype._class += " template_SVGTemplate";
+
+    SVGTemplate.prototype.publish("stringProp", "defaultValue", "string", "Sample Property");
+
+    SVGTemplate.prototype.enter = function (domNode, element) {
+        SVGWidget.prototype.enter.apply(this, arguments);
+    };
+
+    SVGTemplate.prototype.update = function (domNode, element) {
+        SVGWidget.prototype.update.apply(this, arguments);
+
+        var g = element.selectAll(".dataRow").data(this.data());
+        g.enter().append("g")
+            .attr("class", "dataRow")
+            .each(function (d) {
+                var g = d3.select(this);
+                g.append("circle")
+                    .attr("cx", -8)
+                    .attr("cy", -4)
+                    .attr("r", 4)
+                ;
+                g.append("text");
+            })
+        ;
+        g
+            .attr("transform", function (d, idx) { return "translate(32 " + ((idx + 1) * 16) + ")";})
+        ;
+        g.select("text").text(function (row) { return row[0]; });
+        g.exit().remove();
+    };
+
+    SVGTemplate.prototype.exit = function (domNode, element) {
+        SVGWidget.prototype.exit.apply(this, arguments);
+    };
+
+    return SVGTemplate;
+}));