Skip to content

Instantly share code, notes, and snippets.

@marcus7777

marcus7777/index.html

Forked from anonymous/index.html
Last active September 1, 2015 10:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save marcus7777/a112af54baf60fd50926 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save marcus7777/a112af54baf60fd50926 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @marcus7778 marcus7778 revised this gist Sep 1, 2015. 1 changed file with 22 additions and 28 deletions.
    50 changes: 22 additions & 28 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -158,31 +158,32 @@ <h4>Let me help you conjure a new element:</h4>
    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>'
    ];

    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>'];
    tabs(1)+ '<body>',
    tabs()+ '<h1>' + name + ' Demo</h1>',
    tabs()+ '<' + name + '></' + name + '>',
    tabs(-1)+ '</body>'
    ];

    if (name !== "") return output;
    },
    getElementCode(name, description, dependencylist, variableList, functionList) {


    var output = [
    tabs()+ '<!--',
    tabs()+ '`<'+name+'>`' + description,
    tabs()+ '-->',
    tabs()+ '`<'+name+'>` ' + description,
    tabs()+ '@demo demo.html',
    tabs()+ '-->','',
    tabs(1)+ '<dom-module id="'+name+'">',
    tabs(1)+ '<template>',
    tabs()+ '<style></style>',
    @@ -205,12 +206,10 @@ <h4>Let me help you conjure a new element:</h4>
    }
    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);

    output.push(tabs(0) +''+ variableList[i]+':'+nodes[0].value+comma);
    } else {
    output.push(tabs(0) +''+ variableList[i]+comma);
    }

    }
    output.push(tabs(-1) + '},');
    } else {
    @@ -236,7 +235,6 @@ <h4>Let me help you conjure a new element:</h4>
    <paper-input label="{{cat('Tell me about ',item,'')}}" ></paper-input>
    <type-selection item="{{item}}"></type-selection>
    </template>

    </template>
    </dom-module>
    <script>
    @@ -266,18 +264,14 @@ <h4>Let me help you conjure a new element:</h4>
    <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}}" >
    <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>
    </dom-module>
    <script>
    (function () {
    Polymer({
    @@ -316,10 +310,10 @@ <h4>Let me help you conjure a new element:</h4>
    Polymer({
    is: 'type-selection',
    properties:{
    item : String,
    options : {
    type:Array,
    value : ["Array", "Boolean", "Number","Object", "String", "Symbol"]
    item: String,
    options: {
    type: Array,
    value : ["Array", "Boolean", "Number", "Object", "String", "Symbol"]
    }
    },
    cat(a,b,c){
  2. @marcus7778 marcus7778 revised this gist Aug 31, 2015. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    <!doctype html>
    <html>
    <head><base href="http://open-elements.org/bower_components/new/">

    @@ -7,7 +8,7 @@

    <title>pair-production demo</title>

    <script src="../webcomponentsjs/webcomponents-lite.js"><\/script>
    <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">
    @@ -179,7 +180,7 @@ <h4>Let me help you conjure a new element:</h4>


    var output = [
    tabs()+ '<\!--',
    tabs()+ '<!--',
    tabs()+ '`<'+name+'>`' + description,
    tabs()+ '-->',
    tabs(1)+ '<dom-module id="'+name+'">',
  3. @marcus7778 marcus7778 revised this gist Aug 31, 2015. 1 changed file with 2 additions and 338 deletions.
    340 changes: 2 additions & 338 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@
    <!doctype html>
    <html>
    <head><base href="http://open-elements.org/bower_components/new/">

    @@ -8,7 +7,7 @@

    <title>pair-production demo</title>

    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <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">
    @@ -180,7 +179,7 @@ <h4>Let me help you conjure a new element:</h4>


    var output = [
    tabs()+ '<!--',
    tabs()+ '<\!--',
    tabs()+ '`<'+name+'>`' + description,
    tabs()+ '-->',
    tabs(1)+ '<dom-module id="'+name+'">',
    @@ -328,340 +327,5 @@ <h4>Let me help you conjure a new element:</h4>
    });
    })();
    </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>
  4. @invalid-email-address Anonymous created this gist Aug 31, 2015.
    667 changes: 667 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -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>