Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 31, 2015 20:20
Show Gist options
  • Save anonymous/0fda989f1c3ad876577d to your computer and use it in GitHub Desktop.
Save anonymous/0fda989f1c3ad876577d to your computer and use it in GitHub Desktop.
Download ZIP
pair-production demo // source http://jsbin.com/xuzute
Raw
index.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>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment