August 31, 2015 20:20 · Aug 31, 2015
diff --git a/index.html b/index.html
@@ -0,0 +1,667 @@
+<!doctype html>
+<html>
+<head><base href="http://open-elements.org/bower_components/new/">
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <title>pair-production demo</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../paper-input/paper-input.html">
+  <link rel="import" href="../paper-input/paper-input-container.html">
+  <link rel="import" href="../paper-input/paper-input-error.html">
+  <link rel="import" href="../paper-input/paper-input-char-counter.html">
+  <link rel="import" href="../paper-input/paper-textarea.html">
+  <link rel="import" href="../paper-styles/demo-pages.html">
+  <link rel="import" href="../iron-icons/iron-icons.html">
+  <link rel="import" href="../paper-menu/paper-menu.html">
+  <link rel="import" href="../paper-item/paper-item.html">
+  <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
+
+</head>
+<body unresolved style="padding: 40px;">
+
+<template is="dom-bind">
+  <h1>pair-production</h1>
+  <pair-production></pair-production>
+</template>
+
+<dom-module id="pair-production">
+  <template>
+    <div class="vertical center-justified layout">
+      <h4>Let me help you conjure a new element:</h4>
+        <paper-input style="width:300px" label="Name the new element" value="{{name}}" pattern="[a-z]+-[a-z\-]*[a-z]+" auto-validate  error-message="Need's to have a '-' between lowercase letters "></paper-input>
+        <template is="dom-if" if="{{name}}">
+          <paper-textarea value="{{description}}" label="{{cat('Tell me about <', name,'/> element')}}"></paper-textarea>
+
+          <variables-list-input name="{{name}}" variables="{{variables}}" ></variables-list-input>    
+          <paper-input label="what are the elements will your element need" value="{{dependencies}}" pattern="[a-zA-Z\-]*[a-zA-Z\,]*[a-zA-Z\-]+" auto-validate  error-message="sorry a ',' separated list "></paper-input>
+          <paper-input label="Give me list of functions it will need" value="{{functions}}" pattern="[a-zA-Z]*[a-zA-Z\,]*[a-zA-Z]+" auto-validate  error-message="sorry a ',' separated list "></paper-input>
+          <template is="dom-repeat" items="{{functionList}}" >
+            <function-list-input name="{{item}}"></function-list-input>   
+          </template>
+      </template>
+    </div>
+    <template is="dom-if" if="{{output.length}}"><h4>demo.html</h4></template>
+    <pre><template is="dom-repeat" items="{{output}}">{{item}}</template></pre>
+
+    <template is="dom-if" if="{{element.length}}"><h4><span>{{name}}</span>.html</h4></template>
+    <pre><template is="dom-repeat" items="{{element}}">{{item}}</template></pre>
+  </template>
+</dom-module>
+<script>
+
+(function () {
+  var at = 0;
+  var tabs = function(n) {
+    var output = "";
+
+    if (+n < 0) { at += n; }
+    for (var i = 0; i < at; ++i) {
+      output += "  ";
+    }
+    if (+n > 0) { at += n; }
+    return output;
+  };
+
+  var addLine = function(nl){
+    output = [];
+    for (var i = 0; i < nl.length; ++i) {
+      output.push('\n'+nl[i]);
+    }
+    return output;
+  };
+  function getElementsByLabel(label) {
+    var nodeList = document.getElementsByTagName('*');
+    var nodeArray = [];
+    var iterator = 0;
+    var node = null;
+
+    while (node = nodeList[iterator++]) {
+      if (node.getAttribute("label") !== null) {
+        if (node.getAttribute("label") === label) nodeArray.push(node);
+      } else {
+        if (node.innerHTML === label) {
+          nodeArray.push(node.nextElementSibling);
+        }
+      }
+
+    }
+
+    return nodeArray;
+  }
+  Polymer({
+      is: 'pair-production',
+      properties:{
+        name : {
+          type: String,
+          value: ""
+        },
+        description :{
+          type: String,
+          value: ""
+        },
+        functions : String,
+        functionList : {
+          computed:"getArray(functions)"
+        },
+        variables : {
+          type:String,
+          value:""
+        },
+        variableList : {
+          type: Array,
+          computed:"getArray(variables)"
+        },
+        dependencies:{
+          type:String,
+          value:"polymer"
+        },
+        dependencylist: {
+          computed:"getArray(dependencies)"
+        },
+        output :{
+          computed:"getCode(head,body)"
+        },
+        head :{
+          computed:"getHead(name)"
+        },
+        body :{
+          computed:"getBody(name)"
+        },
+        element :{
+          computed:"getElementCode(name, description, dependencylist, variableList, functionList)"
+        }
+      },
+      cat (a,b,c) {
+        return a+b+c;
+      },
+      getArray (s) {
+        return s.split(',');
+      },
+      getCode(head,body) {
+        at = 0;
+        var output = [
+          tabs() + '<!doctype html>',
+          tabs(1) + '<html>'
+        ];        
+        for (var i = 0; i < head.length; ++i) {
+          output.push(tabs() +head[i]);
+        }
+        for (var i = 0; i < body.length; ++i) {
+          output.push(tabs() +body[i]);
+        }
+        output.push(tabs(-1) + '</html>');
+        return addLine(output);
+      },
+      getHead(name) {
+         var output = [tabs(1) + '<head>',
+              tabs()+ '<base href="http://open-elements.org/bower_components/new/">',
+              tabs()+'<title>'+name+' demo</title>',
+              tabs()+'<sc'+'ript src="../webcomponentsjs/webcomponents-lite.js"></sc'+'ript>',
+              tabs()+'<sc'+'ript src="'+name+'.html"></sc'+'ript>'
+            ];
+
+        output.push(tabs(-1) + '</head>');
+        if (name !== "") return output ;
+      },
+      getBody(name) {
+        var output = [
+        tabs(1) + '<body>',
+        tabs() + '<' + name + '></' + name + '>',
+        tabs(-1) + '</body>'];
+
+        if (name !== "") return output;
+      },
+      getElementCode(name, description, dependencylist, variableList, functionList) {
+
+
+        var output = [
+          tabs()+ '<!--',
+          tabs()+ '`<'+name+'>`' + description,
+          tabs()+ '-->',
+          tabs(1)+ '<dom-module id="'+name+'">',
+          tabs(1)+ '<template>',     
+          tabs()+ '<style></style>',
+          tabs()+ '<h2>Hello from '+name+'</h2>',
+          tabs(-1)+ '</template>',
+          tabs(1)+ '<sc'+'ript>',
+          tabs(1)+ 'Polymer({'
+        ];
+        if (variableList.length > 0 && variableList[0] !== "") {
+          output.push(tabs()+ 'is: "'+name+'",');
+          output.push(tabs(1) + 'properties: {');
+          var comma = ","
+          for (var i = 0; i < variableList.length; ++i) {
+            if (variableList.length -1 === i) comma = "";
+            var nodes = getElementsByLabel('Tell me about '+variableList[i]);
+            if (nodes.length > 0) {
+              if (nodes[0].value !== ""){
+                output.push(tabs(0)+'/** '+nodes[0].value+ '*/' );
+              } 
+            }
+            var nodes = getElementsByLabel('so '+variableList[i]+'is a ...');
+            if (nodes.length > 0 && nodes[0].value !== ""){
+                output.push(tabs(0) +''+ variableList[i]+':'+nodes[0].value+comma);
+
+            } else {
+              output.push(tabs(0) +''+ variableList[i]+comma);
+            }
+
+          }
+          output.push(tabs(-1) + '},');
+        } else {
+          output.push(tabs()+ 'is: "'+name+'"')
+        }
+
+        output.push(tabs(-1) + '});');
+        output.push(tabs(-1) + '</sc'+'ript>');
+        output.push(tabs(-1) + '</dom-module>');
+
+        for (var i = 0; i < dependencylist.length; ++i) {
+          output.unshift(tabs(0) + '<link rel="import" href="../'+dependencylist[i]+'/'+dependencylist[i]+'.html">');
+        }
+        return addLine(output); 
+      }
+    });
+  })();
+</script>
+<dom-module is="variables-list-input">
+  <template>
+    <paper-input label="{{cat('Give me list of inputs/output/variables for ',name,'')}}" value="{{variables}}" pattern="[a-zA-Z]*[a-zA-Z\,]*[a-zA-Z]+" auto-validate  error-message="a ',' separated list "></paper-input>
+     <template is="dom-repeat" items="{{variableList}}" >
+      <paper-input label="{{cat('Tell me about ',item,'')}}" ></paper-input>
+      <type-selection item="{{item}}"></type-selection>
+    </template>
+
+  </template>
+</dom-module> 
+<script>
+  (function () {
+    Polymer({
+      is: 'variables-list-input',
+      properties:{
+        name:  String,
+        description: String,
+        variables: {
+          type:String,
+          notify:true
+        },
+        variableList: {
+          computed:"getArray(variables)"
+        }
+      },
+      cat (a,b,c) {
+        return a+b+c;
+      },
+      getArray (s) {
+        if (s !== "") return s.split(',');
+      }
+    });
+  })();  
+</script>  
+<dom-module is="function-list-input">
+  <template>
+    <paper-input label="{{cat('Give me list of variables for ',name,'')}}" value="{{variables}}" pattern="[a-zA-Z]*[a-zA-Z\,]*[a-zA-Z]+" auto-validate  error-message="a ',' separated list please :)"></paper-input>
+     <template is="dom-repeat" items="{{variableList}}" >
+      <paper-input label="{{cat('Tell me about ',item,'')}}" ></paper-input>
+      <type-selection item="{{item}}"></type-selection>
+
+    </template>
+
+    <paper-input label="{{cat('What does ',name,' return?')}}" value="{{returns}}"></paper-input>
+
+    <type-selection item="{{name}}"></type-selection>
+
+  </template>
+</dom-module> 
+<script>
+  (function () {
+    Polymer({
+      is: 'function-list-input',
+      properties:{
+        name: String,
+        description : String,
+        variables : String,
+        variableList : {
+          computed:"getArray(variables)"
+        }
+      },
+      cat (a,b,c) {
+        return a+b+c;
+      },
+      getArray (s) {
+        if (s !== "") return s.split(',');
+      }
+    });
+  })();  
+</script>
+
+<dom-module is="type-selection">
+  <template>
+    <paper-dropdown-menu label="{{cat('so ',item, ' is a ...')}}">
+      <paper-menu class="dropdown-content">
+        <template is="dom-repeat" items="[[options]]">
+          <paper-item>[[item]]</paper-item>
+        </template>
+      </paper-menu>
+    </paper-dropdown-menu>
+  </template>
+</dom-module>
+<script>
+  (function () {
+    Polymer({
+      is: 'type-selection',
+      properties:{
+        item : String,
+        options : {
+          type:Array,
+          value : ["Array", "Boolean", "Number","Object", "String", "Symbol"]
+        }
+      },
+      cat(a,b,c){
+        return a+b+c
+      }
+    });
+  })();  
+</script>
+
+<script id="jsbin-source-html" type="text/html"><!doctype html>
+<html>
+<head><base href="http://open-elements.org/bower_components/new/">
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <title>pair-production demo</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"><\/script>
+
+  <link rel="import" href="../paper-input/paper-input.html">
+  <link rel="import" href="../paper-input/paper-input-container.html">
+  <link rel="import" href="../paper-input/paper-input-error.html">
+  <link rel="import" href="../paper-input/paper-input-char-counter.html">
+  <link rel="import" href="../paper-input/paper-textarea.html">
+  <link rel="import" href="../paper-styles/demo-pages.html">
+  <link rel="import" href="../iron-icons/iron-icons.html">
+  <link rel="import" href="../paper-menu/paper-menu.html">
+  <link rel="import" href="../paper-item/paper-item.html">
+  <link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
+
+</head>
+<body unresolved style="padding: 40px;">
+
+<template is="dom-bind">
+  <h1>pair-production</h1>
+  <pair-production></pair-production>
+</template>
+
+<dom-module id="pair-production">
+  <template>
+    <div class="vertical center-justified layout">
+      <h4>Let me help you conjure a new element:</h4>
+        <paper-input style="width:300px" label="Name the new element" value="{{name}}" pattern="[a-z]+-[a-z\-]*[a-z]+" auto-validate  error-message="Need's to have a '-' between lowercase letters "></paper-input>
+        <template is="dom-if" if="{{name}}">
+          <paper-textarea value="{{description}}" label="{{cat('Tell me about <', name,'/> element')}}"></paper-textarea>
+
+          <variables-list-input name="{{name}}" variables="{{variables}}" ></variables-list-input>    
+          <paper-input label="what are the elements will your element need" value="{{dependencies}}" pattern="[a-zA-Z\-]*[a-zA-Z\,]*[a-zA-Z\-]+" auto-validate  error-message="sorry a ',' separated list "></paper-input>
+          <paper-input label="Give me list of functions it will need" value="{{functions}}" pattern="[a-zA-Z]*[a-zA-Z\,]*[a-zA-Z]+" auto-validate  error-message="sorry a ',' separated list "></paper-input>
+          <template is="dom-repeat" items="{{functionList}}" >
+            <function-list-input name="{{item}}"></function-list-input>   
+          </template>
+      </template>
+    </div>
+    <template is="dom-if" if="{{output.length}}"><h4>demo.html</h4></template>
+    <pre><template is="dom-repeat" items="{{output}}">{{item}}</template></pre>
+
+    <template is="dom-if" if="{{element.length}}"><h4><span>{{name}}</span>.html</h4></template>
+    <pre><template is="dom-repeat" items="{{element}}">{{item}}</template></pre>
+  </template>
+</dom-module>
+<script>
+
+(function () {
+  var at = 0;
+  var tabs = function(n) {
+    var output = "";
+
+    if (+n < 0) { at += n; }
+    for (var i = 0; i < at; ++i) {
+      output += "  ";
+    }
+    if (+n > 0) { at += n; }
+    return output;
+  };
+
+  var addLine = function(nl){
+    output = [];
+    for (var i = 0; i < nl.length; ++i) {
+      output.push('\n'+nl[i]);
+    }
+    return output;
+  };
+  function getElementsByLabel(label) {
+    var nodeList = document.getElementsByTagName('*');
+    var nodeArray = [];
+    var iterator = 0;
+    var node = null;
+
+    while (node = nodeList[iterator++]) {
+      if (node.getAttribute("label") !== null) {
+        if (node.getAttribute("label") === label) nodeArray.push(node);
+      } else {
+        if (node.innerHTML === label) {
+          nodeArray.push(node.nextElementSibling);
+        }
+      }
+
+    }
+
+    return nodeArray;
+  }
+  Polymer({
+      is: 'pair-production',
+      properties:{
+        name : {
+          type: String,
+          value: ""
+        },
+        description :{
+          type: String,
+          value: ""
+        },
+        functions : String,
+        functionList : {
+          computed:"getArray(functions)"
+        },
+        variables : {
+          type:String,
+          value:""
+        },
+        variableList : {
+          type: Array,
+          computed:"getArray(variables)"
+        },
+        dependencies:{
+          type:String,
+          value:"polymer"
+        },
+        dependencylist: {
+          computed:"getArray(dependencies)"
+        },
+        output :{
+          computed:"getCode(head,body)"
+        },
+        head :{
+          computed:"getHead(name)"
+        },
+        body :{
+          computed:"getBody(name)"
+        },
+        element :{
+          computed:"getElementCode(name, description, dependencylist, variableList, functionList)"
+        }
+      },
+      cat (a,b,c) {
+        return a+b+c;
+      },
+      getArray (s) {
+        return s.split(',');
+      },
+      getCode(head,body) {
+        at = 0;
+        var output = [
+          tabs() + '<!doctype html>',
+          tabs(1) + '<html>'
+        ];        
+        for (var i = 0; i < head.length; ++i) {
+          output.push(tabs() +head[i]);
+        }
+        for (var i = 0; i < body.length; ++i) {
+          output.push(tabs() +body[i]);
+        }
+        output.push(tabs(-1) + '</html>');
+        return addLine(output);
+      },
+      getHead(name) {
+         var output = [tabs(1) + '<head>',
+              tabs()+ '<base href="http://open-elements.org/bower_components/new/">',
+              tabs()+'<title>'+name+' demo</title>',
+              tabs()+'<sc'+'ript src="../webcomponentsjs/webcomponents-lite.js"></sc'+'ript>',
+              tabs()+'<sc'+'ript src="'+name+'.html"></sc'+'ript>'
+            ];
+
+        output.push(tabs(-1) + '</head>');
+        if (name !== "") return output ;
+      },
+      getBody(name) {
+        var output = [
+        tabs(1) + '<body>',
+        tabs() + '<' + name + '></' + name + '>',
+        tabs(-1) + '</body>'];
+
+        if (name !== "") return output;
+      },
+      getElementCode(name, description, dependencylist, variableList, functionList) {
+
+
+        var output = [
+          tabs()+ '<\!--',
+          tabs()+ '`<'+name+'>`' + description,
+          tabs()+ '-->',
+          tabs(1)+ '<dom-module id="'+name+'">',
+          tabs(1)+ '<template>',     
+          tabs()+ '<style></style>',
+          tabs()+ '<h2>Hello from '+name+'</h2>',
+          tabs(-1)+ '</template>',
+          tabs(1)+ '<sc'+'ript>',
+          tabs(1)+ 'Polymer({'
+        ];
+        if (variableList.length > 0 && variableList[0] !== "") {
+          output.push(tabs()+ 'is: "'+name+'",');
+          output.push(tabs(1) + 'properties: {');
+          var comma = ","
+          for (var i = 0; i < variableList.length; ++i) {
+            if (variableList.length -1 === i) comma = "";
+            var nodes = getElementsByLabel('Tell me about '+variableList[i]);
+            if (nodes.length > 0) {
+              if (nodes[0].value !== ""){
+                output.push(tabs(0)+'/** '+nodes[0].value+ '*/' );
+              } 
+            }
+            var nodes = getElementsByLabel('so '+variableList[i]+'is a ...');
+            if (nodes.length > 0 && nodes[0].value !== ""){
+                output.push(tabs(0) +''+ variableList[i]+':'+nodes[0].value+comma);
+
+            } else {
+              output.push(tabs(0) +''+ variableList[i]+comma);
+            }
+
+          }
+          output.push(tabs(-1) + '},');
+        } else {
+          output.push(tabs()+ 'is: "'+name+'"')
+        }
+
+        output.push(tabs(-1) + '});');
+        output.push(tabs(-1) + '</sc'+'ript>');
+        output.push(tabs(-1) + '</dom-module>');
+
+        for (var i = 0; i < dependencylist.length; ++i) {
+          output.unshift(tabs(0) + '<link rel="import" href="../'+dependencylist[i]+'/'+dependencylist[i]+'.html">');
+        }
+        return addLine(output); 
+      }
+    });
+  })();
+<\/script>
+<dom-module is="variables-list-input">
+  <template>
+    <paper-input label="{{cat('Give me list of inputs/output/variables for ',name,'')}}" value="{{variables}}" pattern="[a-zA-Z]*[a-zA-Z\,]*[a-zA-Z]+" auto-validate  error-message="a ',' separated list "></paper-input>
+     <template is="dom-repeat" items="{{variableList}}" >
+      <paper-input label="{{cat('Tell me about ',item,'')}}" ></paper-input>
+      <type-selection item="{{item}}"></type-selection>
+    </template>
+
+  </template>
+</dom-module> 
+<script>
+  (function () {
+    Polymer({
+      is: 'variables-list-input',
+      properties:{
+        name:  String,
+        description: String,
+        variables: {
+          type:String,
+          notify:true
+        },
+        variableList: {
+          computed:"getArray(variables)"
+        }
+      },
+      cat (a,b,c) {
+        return a+b+c;
+      },
+      getArray (s) {
+        if (s !== "") return s.split(',');
+      }
+    });
+  })();  
+<\/script>  
+<dom-module is="function-list-input">
+  <template>
+    <paper-input label="{{cat('Give me list of variables for ',name,'')}}" value="{{variables}}" pattern="[a-zA-Z]*[a-zA-Z\,]*[a-zA-Z]+" auto-validate  error-message="a ',' separated list please :)"></paper-input>
+     <template is="dom-repeat" items="{{variableList}}" >
+      <paper-input label="{{cat('Tell me about ',item,'')}}" ></paper-input>
+      <type-selection item="{{item}}"></type-selection>
+
+    </template>
+
+    <paper-input label="{{cat('What does ',name,' return?')}}" value="{{returns}}"></paper-input>
+
+    <type-selection item="{{name}}"></type-selection>
+
+  </template>
+</dom-module> 
+<script>
+  (function () {
+    Polymer({
+      is: 'function-list-input',
+      properties:{
+        name: String,
+        description : String,
+        variables : String,
+        variableList : {
+          computed:"getArray(variables)"
+        }
+      },
+      cat (a,b,c) {
+        return a+b+c;
+      },
+      getArray (s) {
+        if (s !== "") return s.split(',');
+      }
+    });
+  })();  
+<\/script>
+
+<dom-module is="type-selection">
+  <template>
+    <paper-dropdown-menu label="{{cat('so ',item, ' is a ...')}}">
+      <paper-menu class="dropdown-content">
+        <template is="dom-repeat" items="[[options]]">
+          <paper-item>[[item]]</paper-item>
+        </template>
+      </paper-menu>
+    </paper-dropdown-menu>
+  </template>
+</dom-module>
+<script>
+  (function () {
+    Polymer({
+      is: 'type-selection',
+      properties:{
+        item : String,
+        options : {
+          type:Array,
+          value : ["Array", "Boolean", "Number","Object", "String", "Symbol"]
+        }
+      },
+      cat(a,b,c){
+        return a+b+c
+      }
+    });
+  })();  
+<\/script>
+</body>
+</html>
+</script>
+
+</body>
+</html>