Merge pull request linkedin#9 from smfoote/gh-pages-partials

Add more Dust Template API documentation
prashn64 · Jan 24, 2015 · 04e4586 · 04e4586
2 parents ab69854 + 893a050
commit 04e4586
Show file tree

Hide file tree

Showing 13 changed files with 259 additions and 92 deletions.
diff --git a/bower.json b/bower.json
@@ -16,7 +16,7 @@
   ],
   "dependencies": {
     "polymer": "Polymer/polymer#~0.5.2",
-    "dust-demo": "~0.1.4",
+    "dust-demo": "~0.1.5",
     "webcomponentsjs": "~0.5.2"
   }
 }
diff --git a/bower_components/dust-demo/.bower.json b/bower_components/dust-demo/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "dust-demo",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "homepage": "http://smfoote.github.io/dust-demo/",
   "authors": [
     "Steven Foote <smfoote@gmail.com>"
@@ -24,13 +24,13 @@
     "webcomponentsjs": "~0.5.2",
     "polymer": "Polymer/polymer#~0.5.2"
   },
-  "_release": "0.1.4",
+  "_release": "0.1.5",
   "_resolution": {
     "type": "version",
-    "tag": "v0.1.4",
-    "commit": "257d4536070ff760712cf5cbd03d1c19daff67ce"
+    "tag": "v0.1.5",
+    "commit": "593ef5acc42f6aa016dec1b2143ce14f4010553b"
   },
   "_source": "git://github.com/smfoote/dust-demo.git",
-  "_target": "~0.1.4",
+  "_target": "~0.1.5",
   "_originalSource": "dust-demo"
 }
diff --git a/bower_components/dust-demo/bower.json b/bower_components/dust-demo/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "dust-demo",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "homepage": "http://smfoote.github.io/dust-demo/",
   "authors": [
     "Steven Foote <smfoote@gmail.com>"

diff --git a/bower_components/dust-demo/components/dust-demo-json.html b/bower_components/dust-demo/components/dust-demo-json.html
@@ -1,16 +1,18 @@
-<template id="dust-json-template" whitespace="preserve"><content></content>
+<template id="dust-json-template" whitespace="preserve">
+  <textarea id="workspace"></textarea>
   <style>
-    :host {
-      display: block;
-      min-height: 120px;
-      padding: 10px;
-      margin-bottom: 10px;
-      background-color: #222;
-      color: #72CC72;
-      font-family: Consolas, Courier, monospace;
-      font-size: 15px;
-      white-space: pre;
-    }
+  #workspace {
+    display: block;
+    padding: 10px;
+    margin-bottom: 10px;
+    min-height: 120px;
+    background-color: #222;
+    color: #72CC72;
+    font-family: Consolas, Courier, monospace;
+    font-size: 15px;
+    width: calc(100% - 23px);
+    resize: vertical;
+  }
   </style>
 </template>
 <script>
@@ -19,11 +21,22 @@
       this.context = context;
 
       this.shadow = this.context.createShadowRoot();
-      this.context.setAttribute('contenteditable', 'true');
 
       // stamp out our template in the shadow dom
       var template = dom.querySelector("#dust-json-template").content.cloneNode(true);
       this.shadow.appendChild(template);
+      this.textarea = this.shadow.querySelector('#workspace');
+      this.textarea.innerHTML = this.context.innerHTML;
+
+      this.setupListeners();
+    }
+
+    DustDemoJSONController.prototype.setupListeners = function() {
+      this.textarea.addEventListener('input', function(evt) {
+        var newEvt = new Event('dust-update');
+        this.context.innerHTML = this.textarea.value;
+        this.context.dispatchEvent(newEvt);
+      }.bind(this));
     }
 
 

diff --git a/bower_components/dust-demo/components/dust-demo-template.html b/bower_components/dust-demo/components/dust-demo-template.html
@@ -1,6 +1,7 @@
-<template id="dust-demo-tl-template" whitespace="preserve"><content></content>
+<template id="dust-demo-tl-template">
+  <textarea id="workspace"></textarea>
   <style>
-    :host {
+    #workspace {
       display: block;
       padding: 10px;
       margin-bottom: 10px;
@@ -9,7 +10,8 @@
       color: #72CC72;
       font-family: Consolas, Courier, monospace;
       font-size: 15px;
-      white-space: pre;
+      width: calc(100% - 23px);
+      resize: vertical;
     }
   </style>
 </template>
@@ -19,11 +21,22 @@
       this.context = context;
 
       this.shadow = this.context.createShadowRoot();
-      this.context.setAttribute('contenteditable', 'true');
 
       // stamp out our template in the shadow dom
       var template = dom.querySelector("#dust-demo-tl-template").content.cloneNode(true);
       this.shadow.appendChild(template);
+      this.textarea = this.shadow.querySelector('#workspace');
+      this.textarea.innerHTML = this.context.innerHTML;
+
+      this.setupListeners();
+    }
+
+    DustDemoTemplateController.prototype.setupListeners = function() {
+      this.textarea.addEventListener('input', function(evt) {
+        var newEvt = new Event('dust-update');
+        this.context.innerHTML = this.textarea.value;
+        this.context.dispatchEvent(newEvt);
+      }.bind(this));
     }
 
 

diff --git a/bower_components/dust-demo/components/dust-demo.html b/bower_components/dust-demo/components/dust-demo.html
@@ -54,8 +54,8 @@ <h3 id="output-header">Output</h3>
 
     #dev-toggle {
       position: absolute;
-      top: 10px;
-      right: 0;
+      top: 33px;
+      right: 5px;
       opacity: 0;
     }
 
@@ -77,7 +77,9 @@ <h3 id="output-header">Output</h3>
     }
 
     h3 {
-      float: right;
+      position: absolute;
+      top: 0;
+      right: 0;
       padding: 5px;
       margin: 0;
       color: #FFF;
@@ -131,7 +133,7 @@ <h3 id="output-header">Output</h3>
         var editor;
 
         for (var i=0; (editor = editors[i]); i++) {
-          editor.addEventListener('input', function(evt) {
+          editor.addEventListener('dust-update', function(evt) {
             that.renderDust();
           });
         }

diff --git a/bower_components/dust-demo/components/polymer/dust-demo-json.html b/bower_components/dust-demo/components/polymer/dust-demo-json.html
@@ -1,23 +1,33 @@
 <polymer-element name="dust-demo-json">
-  <template id="dust-json-template" whitespace="preserve"><content></content>
+  <template id="dust-json-template">
+    <textarea id="workspace"></textarea>
     <style>
-      :host {
+      #workspace {
         display: block;
-        min-height: 120px;
         padding: 10px;
         margin-bottom: 10px;
+        min-height: 120px;
         background-color: #222;
         color: #72CC72;
         font-family: Consolas, Courier, monospace;
         font-size: 15px;
-        white-space: pre;
+        width: calc(100% - 23px);
+        resize: vertical;
       }
     </style>
   </template>
   <script>
     Polymer({
       ready: function() {
-        this.setAttribute('contenteditable', 'true');
+        this.$.workspace.innerHTML = this.innerHTML;
+        this.setupEventListeners();
+      },
+      setupEventListeners: function() {
+        this.$.workspace.addEventListener('input', function(evt) {
+          var newEvt = new Event('dust-update');
+          this.innerHTML = this.$.workspace.value;
+          this.dispatchEvent(newEvt);
+        }.bind(this));
       }
     });
   </script>

diff --git a/bower_components/dust-demo/components/polymer/dust-demo-template.html b/bower_components/dust-demo/components/polymer/dust-demo-template.html
@@ -1,7 +1,8 @@
 <polymer-element name="dust-demo-template">
-  <template id="dust-demo-tl-template" whitespace="preserve"><content></content>
+  <template id="dust-demo-tl-template">
+    <textarea id="workspace"></textarea>
     <style>
-      :host {
+      #workspace {
         display: block;
         padding: 10px;
         margin-bottom: 10px;
@@ -10,14 +11,23 @@
         color: #72CC72;
         font-family: Consolas, Courier, monospace;
         font-size: 15px;
-        white-space: pre;
+        width: calc(100% - 23px);
+        resize: vertical;
       }
     </style>
   </template>
   <script>
     Polymer({
       ready: function() {
-        this.setAttribute('contenteditable', 'true');
+        this.$.workspace.innerHTML = this.innerHTML;
+        this.setupEventListeners();
+      },
+      setupEventListeners: function() {
+        this.$.workspace.addEventListener('input', function(evt) {
+          var newEvt = new Event('dust-update');
+          this.innerHTML = this.$.workspace.value;
+          this.dispatchEvent(newEvt);
+        }.bind(this));
       }
     });
   </script>

diff --git a/bower_components/dust-demo/components/polymer/dust-demo.html b/bower_components/dust-demo/components/polymer/dust-demo.html
@@ -81,7 +81,9 @@ <h3 id="output-header">Output</h3>
       }
 
       :host /deep/ h3 {
-        float: right;
+        position: absolute;
+        top: 0;
+        right: 0;
         padding: 5px;
         margin: 0;
         color: #FFF;
@@ -116,7 +118,7 @@ <h3 id="output-header">Output</h3>
           var editor;
 
           for (var i=0; (editor = editors[i]); i++) {
-            editor.addEventListener('input', this.handleEditorUpdate.bind(this));
+            editor.addEventListener('dust-update', this.handleEditorUpdate.bind(this));
           }
           this.editorListenersInitialized = true;
         }
@@ -204,6 +206,10 @@ <h3>Expected Output</h3>
         opacity: 0;
         left: 115px;
       }
+
+      .container {
+        position: relative;
+      }
     </style>
   </template>
   <script>

diff --git a/bower_components/dust-demo/index.html → bower_components/dust-demo/polymer-test.html b/bower_components/dust-demo/index.html → bower_components/dust-demo/polymer-test.html
@@ -14,5 +14,11 @@
 }</dust-demo-json>
     <dust-tutorial-answer>Hello Steve</dust-tutorial-answer>
   </dust-tutorial>
+  <dust-demo name="ref">
+  <dust-demo-template>Hello {name}</dust-demo-template>
+  <dust-demo-json>{
+    "name": "Steven"
+  }</dust-demo-json>
+</dust-demo>
 </body>
 </html>
diff --git a/bower_components/dust-demo/test.html b/bower_components/dust-demo/test.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Dust Demo... Demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="import" href="components/dust-demo.html">
+  <script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
+</head>
+<body>
+  <dust-demo name="ref">
+    <dust-demo-template>Hello {name}</dust-demo-template>
+<dust-demo-json>{
+  "name": "Steven"
+}</dust-demo-json>
+  </dust-demo>
+</body>
+</html>
diff --git a/docs/syntax.md b/docs/syntax.md