Changes to generator for input components - Polyup

lenses · Nov 24, 2015 · 7768c27 · 7768c27
1 parent 90702ea
commit 7768c27
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 15 deletions.
diff --git a/seed/templates/_bower.json b/seed/templates/_bower.json
@@ -1,14 +1,18 @@
 {
   "name": "<%= elementName %>",
   "version": "0.0.0",
-  "keywords": "lenses, polymer, web-components, data visualization",
+  "keywords": "lenses, polymer, web-components",
   "license": "MIT",
   "main": "<%= elementName %>.html",
   "dependencies": {
-    "polymer": "Polymer/polymer#~0.5.1",
-    "core-component-page" : "Polymer/core-component-page#^0.5.5"
+    "polymer": "Polymer/polymer#^1.2.0",
+    "webcomponentsjs": "~0.7.15"
   },
   "devDependencies": {
     "web-component-tester": "Polymer/web-component-tester#^1.4.2"
+  },
+  "resolutions": {
+    "webcomponentsjs": "^0.7.2",
+    "polymer": "^1.1.2" 
   }
 }
diff --git a/seed/templates/_demo.html b/seed/templates/_demo.html
@@ -3,7 +3,7 @@
   <head>
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
     <title><%= elementName %> Demo</title>
-    <script src="../webcomponentsjs/webcomponents.js"></script>
+    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="<%= elementName %>.html">
 
     <style>
@@ -101,7 +101,7 @@
 
     <div class="logo">
     </div> 
-    <h1>lens-data-crossfilter</h1>
+    <h1><%= elementName %></h1>
     <p>
       A '<a href="http://lenses.github.io/lenses-freeform/components/lenses-freeform/" target="_blank">lenses</a>'' component. Source on <a href="https://github.com/<%=ghUser %>/<%= elementName %>" target="_blank">Github</a>
     </p>
@@ -118,16 +118,28 @@ <h1>lens-data-crossfilter</h1>
 
       <section class="component">
         <label>An example of <%= elementName %>:</label>
-          <<%= elementName %> id="component" output="{{myoutput}}" ></<%= elementName %>>
+          <<%= elementName %> id="component"></<%= elementName %>>
       </section>
 
       <% if(componentType!=='output') {%>
       <section>
-        <label>Result:</label>
-        <pre id="output">{{myoutput | json}}</pre>
+        <label>Output:</label><span class="count"></span>
+        <pre id="output"></pre>
       </section>
       <% } %>
 
+
+      <script>
+        window.onload = function() {
+          var component = document.querySelector('#component');
+          var preOutput = document.getElementById('output');
+
+          component.addEventListener('lens-output-changed', function(val) {
+            preOutput.textContent = JSON.stringify(val.detail, undefined, 2);
+          });
+        }
+      </script>
+
     </template>
   </body>
 </html>
diff --git a/seed/templates/_element-name-input.html b/seed/templates/_element-name-input.html
@@ -1,6 +1,6 @@
 <link rel="import" href="../polymer/polymer.html"> 
 <!--
-A Thelma component for input
+A Lenses component for input
 
 ##### Example
 
@@ -13,17 +13,18 @@
 @homepage http://<%= ghUser %>.github.io/<%= elementName %>
 -->
 
-<polymer-element name="<%= elementName %>" attributes="output">
+<dom-module id="<%= elementName %>">
 
   <template>
     <link rel="stylesheet" href="<%= elementName %>.css">
-    <div class="th-container">
+    <div class="lens-container lens-input">
 	    <label class="label">label</label>
-    	<input type="text">		
+    	<input type="text">
     </div>
   </template>
   <script>
-    Polymer('<%= elementName %>', {
+    Polymer({
+      is: '<%= elementName %>',
       /**
        * Output data
        *
@@ -49,9 +50,9 @@
       },
 
       outputChanged: function(){
-        this.fire('lens-output-ready', this);
+        this.fire('lens-output-changed', this);
       }
 
     });
   </script>
-</polymer-element>
+</dom-module>