pair-production.html

<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../paper-swatch-picker/paper-swatch-picker.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-localstorage/iron-localstorage.html">
<link rel="import" href="../iron-media-query/iron-media-query.html">
<link rel="import" href="../prism-element/prism-highlighter.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../paper-material/paper-material.html">
<link rel="import" href="../iron-location/iron-location.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-stepper/paper-stepper.html">
<link rel="import" href="../paper-stepper/paper-step.html">
<link rel="import" href="../zip-download/zip-download.html">
<link rel="import" href="../iron-icons/hardware-icons.html">
<link rel="import" href="../icon-icons/social-icons.html"> 
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../toggle-icon/toggle-icon.html">
<link rel="import" href="../clone-data/clone-data.html">
<link rel="import" href="../icon-icons/iron-icons.html">
<link rel="import" href="../paper-tabs/paper-tabs.html">
<link rel="import" href="../paper-tabs/paper-tab.html">
<link rel="import" href="../iron-pages/iron-pages.html">
<link rel="import" href="../lazy-pages/lazy-pages.html">
<link rel="import" href="../iron-ajax/iron-ajax.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../url-data/url-data.html">
<link rel="import" href="function-list-input.html">
<link rel="import" href="load-element-list.html">
<link rel="import" href="paged-production.html">
<link rel="import" href="variables-input.html">
<link rel="import" href="input-save.html">
<!--
 `<pair-production>` I'm hoping this will be a good way to think about the way your code a element and then give you:
 * Template editor ✔
  
 * auto add dependencies (if in open-elements.org or in 'localstorage') needs work
  
 * Markdown editor for documentation ✔
 
 * a working demo ✔
 
 * a test ✏'for each input and output
 * test ```location```
   * input ```location```: london
  
   * output ```hash``` = gcpvj0dup40s
    
  * test ```hash```
    * input ```location```: tr18
    
    * output ```hash``` = gbuj1g4pw5b4
    
 * download zip file of element ✔ maybe bug in bower.json
 
demo at [data](https://open-elements.org/bower_components/pair-production/demo.html) to the as
[style-guide](http://polymerelements.github.io/style-guide/)

All help is very much appreciated. I hope this project helps people get started with polymer. And it is also a big thank you to the polymer team for all the help.
@demo demo.html run it 
@next add _domTemplateDependenciesDemo to demo
-->
<dom-module id="pair-production">
  <template>
    <style  is="custom-style">
      :host iframe {
        margin:0;
        width:100%;
        border:none;
      };
      :host {
        height:100%;
        width:100%;
        position:relative;
      };
      :host paper-tabs paper-tab {
        opacity: .5;
      };
      :host paper-tabs paper-tab paper-icon-item span {
        display:none;
      }
      :host paper-tabs paper-tab.iron-selected paper-icon-item span {
        display:inline-block;
      }
      :host paper-tabs paper-tab.iron-selected {
        opacity: 1;
        overflow: inherit;
      };
      iron-pages {
        display: block;
        min-height: 200px;
      };
      paper-toolbar {
        --paper-toolbar-sm-height: 40px;
        --paper-toolbar-height: 40px;
      };
    </style>
    
    <template is="dom-if" if="[[justLoad]]">
      <paper-toolbar style="background:[[elementData.color]];color:[[getFg(elementData.color)]]"><a target="_blank" href="/bower_components/pair-production/demo.html[[link]]"><iron-icon icon="open-in-new"></iron-icon></a><div class="title">[[elementData.title]]</div></paper-toolbar>
      <template is="dom-if" if="[[!thin]]">
        <iframe sandbox="allow-scripts allow-same-origin" height="{{settingsData.demoHeight}}" srcdoc="[[_src]]"  onload="resizeIframe(this)"></iframe>
      </template>
      <template is="dom-if" if="[[thin]]">
        <iframe sandbox="allow-scripts allow-same-origin" height="{{settingsData.demoSmallHeight}}" srcdoc="[[_srcSmall]]" on-tap="makeEditable"  onload="resizeIframe(this)"></iframe>
      </template>
      <template is="dom-if" if="[[editable]]">
        <input-save path="template" small code textarea value="{{elementData.html}}" list-of-elements="{{_listOfElements}}"></input-save>
      </template>
    </template> <!-- justLoad -->
    <template is="dom-if" if="[[!justLoad]]">
      <template is="dom-if" if="[[!elementData.name]]">
        <h2>Let me help you conjure a new element:</h2>
      </template>
      <template is="dom-if" if="[[!invalidName]]">
        <template is="dom-if" if="[[elementData.name]]">
          <template is="dom-if" if="{{!thin}}">
            <iframe sandbox="allow-scripts allow-same-origin" height="{{settingsData.demoHeight}}" srcdoc="[[_src]]" onload="resizeIframe(this)"></iframe>
          </template>
          <template is="dom-if" if="{{thin}}">
            <iframe sandbox="allow-scripts allow-same-origin" height="{{settingsData.demoSmallHeight}}" srcdoc="[[_srcSmall]]" onload="resizeIframe(this)"></iframe>
          </template>
        </template>
      </template>
      <template is="dom-if" if="{{!short}}">
        <template is="dom-if" if="{{!thin}}">
          <paper-tabs selected="{{selectedPage}}" style="background:[[elementData.color]]">
            <paper-tab><paper-icon-item><iron-icon icon="description" item-icon></iron-icon> <span>What does it do?</span></paper-icon-item></paper-tab>
            <paper-tab><paper-icon-item><iron-icon icon="code" item-icon></iron-icon> <span>Name</span></paper-icon-item></paper-tab>
            <template is="dom-if" if="[[!invalidName]]">
              <template is="dom-if" if="[[elementData.name]]">
                <paper-tab><paper-icon-item><iron-icon icon="build" item-icon></iron-icon> <span>The HTML/Docs</span></paper-icon-item></paper-tab>
                <paper-tab><paper-icon-item><iron-icon icon="hardware:memory" item-icon></iron-icon> <span>Properties</span></paper-icon-item></paper-tab>
                <paper-tab><paper-icon-item><pre item-icon>{}</pre> <span>Functions/Methods</span></paper-icon-item></paper-tab>
                <paper-tab><paper-icon-item><iron-icon icon="compare-arrows" item-icon></iron-icon> <span>Imports/Dependencies</span></paper-icon-item></paper-tab>
                <paper-tab><paper-icon-item><iron-icon icon="social:share" item-icon></iron-icon> <span>Download/Share Your element</span></paper-icon-item></paper-tab>
                <paper-tab><paper-icon-item><iron-icon icon="settings" item-icon></iron-icon> <span>Settings</span></paper-icon-item></paper-tab>
              </template>
            </template>
          </paper-tabs>
        </template>
        <template is="dom-if" if="{{thin}}">
          <paper-tabs selected="{{selectedPage}}">
            <paper-tab>&#8889;</paper-tab>
            <paper-tab><pre>&lt;?&gt;</pre></paper-tab>
            <template is="dom-if" if="[[!invalidName]]">
              <template is="dom-if" if="[[elementData.name]]">
                <paper-tab><iron-icon icon="build"></iron-icon></paper-tab>
                <paper-tab><iron-icon icon="hardware:memory"></iron-icon></paper-tab>
                <paper-tab><pre>{}</pre></paper-tab>
                <paper-tab><iron-icon icon="compare-arrows"></iron-icon></paper-tab>
                <paper-tab><iron-icon icon="social:share"></iron-icon></paper-tab>
                <paper-tab><iron-icon icon="settings"></iron-icon></paper-tab>
              </template>
            </template> 
          </paper-tabs>
        </template>
      </template>
      <iron-pages selected="[[selectedPage]]" selectable="paged-production">
        <paged-production label="What does it do?" icon="description" title-it="{{short}}" color="[[elementData.color]]">
          <input-save markdown pattern="^(?!\s*$).+" error-message="Tell me about it!" textarea value="{{elementData.description}}" text-value="{{elementData.desc}}" label="About it (# markdown)"></input-save>
        </paged-production>
        <paged-production label="Name" icon="code" title-it="{{short}}" color="[[elementData.color]]">
          <paper-input label="Name of the element - like pirate-ninja (include the '-')" invalid="{{invalidName}}" value="{{elementData.name}}" pattern="[a-z0-9]+-[a-z0-9\-]*[a-z0-9]+" auto-validate error-message="Need's to have a '-' between lowercase letters">
            <template suffix is="dom-if" if="[[!invalidName]]">
              <paper-button on-tap="makeLocalData" suffix raised > Save </paper-button><paper-button on-tap="deleteLocalData" suffix raised > Delete </paper-button>
            </template>
          </paper-input>
          <template is="dom-if" if="[[_gotName]]">
            <p>this is in the open-elements catalog I'm working on loading it for you (not today)</p> 
          </template>
          <paper-swatch-picker color="{{elementData.color}}"></paper-swatch-picker>
          <load-elements-list style="color: black;" data="{{localData}}" to="{{elementData}}"></load-elements-list>
        </paged-production>
        <template is="dom-if" if="[[!invalidName]]">
          <paged-production label="The HTML/Docs" icon="build" title-it="{{short}}" color="[[elementData.color]]">
            <input-save path="template" code textarea value="{{elementData.html}}" list-of-elements="{{_listOfElements}}" label$="html of <{{elementData.name}} />"></input-save>
            <template is="dom-if" if="{{_dependencylist.length}}">
              <select style="float:right" value="{{docsFor::input}}">
                <option value="">show documentation</option>
                <template is="dom-repeat" items="{{_dependencylist}}" >
                  <option>{{item}}</option>
                </template>
              </select>
              <template is="dom-if" if="{{docsFor}}">
                <iframe sandbox="allow-scripts allow-same-origin" height="300" src="{{_docsSrc(docsFor, _listOfElements)}}" onload="resizeIframe(this)"></iframe>
              </template>
            </template>
            <template is="dom-if" if="[[_hasContent]]">
              <paper-input label="attr1='value1' attr2='value2'  attr3='value3' " value="{{elementData.attrsForDemo}}">
                <div prefix>&lt;{{elementData.name}} &nbsp; </div>
                <div suffix>&gt;</div>
              </paper-input>
              <input-save code textarea value="{{elementData.content}}" list-of-elements="{{_listOfElements}}" label="inner HTML"></input-save>
              <div>&lt;/{{elementData.name}}&gt;</div>
            </template>  
            <template is="dom-if" if="[[!_hasContent]]">
              <paper-input label="attr1='value1' attr2='value2'  attr3='value3' " value="{{elementData.attrsForDemo}}">
                <div prefix>&lt;{{elementData.name}} &nbsp; </div>
                <div suffix> &gt;&lt;/{{elementData.name}}&gt;</div>
              </paper-input>
            </template>
          </paged-production>
          <paged-production label="Properties" icon="hardware:memory" title-it="{{short}}" color="[[elementData.color]]">
            <variables-input functions="{{elementData.functions}}" value="{{elementData.properties}}" name="{{elementData.name}}"></variables-input>
          </paged-production>
          <paged-production label="Functions/Methods" icon="code" color="[[elementData.color]]" title-it="{{short}}">
            <function-list-input name="{{item}}" value="{{elementData.functions}}"></function-list-input>   
          </paged-production>
          <paged-production label="Imports/Dependencies" icon="compare-arrows" title-it="{{short}}" color="[[elementData.color]]">
            <input-save label="what are the elements will your element need" value="{{elementData.dependencies}}" auto-validate error-message="sorry a ',' separated list"></input-save>
            <input-save label="what are the elements will your demo need" value="{{elementData.dependenciesDemo}}" auto-validate error-message="sorry a ',' separated list"></input-save>
            <h4>Auto for Element</h4>
            <p>{{_domTemplateDependencies}}</p>
            <h4>Auto for Demo</h4>
            <p>{{_domTemplateDependenciesDemo}}</p>
            <html-edit list-of-elements="[[_listOfElements]]" label="Add code to demo" value="{{elementData.moreHTML}}"></html-edit>
          </paged-production>
          <paged-production label="Download/Share Your element" icon="social:share" title-it="{{short}}" color="[[elementData.color]]">
            <template is="dom-if" if="[[link]]" ><a href="[[link]]"><paper-icon-button icon="link" ></paper-icon-button></a></template>
            <zip-download name="{{elementData.name}}" files="{{files}}"><paper-icon-button icon="file-download"></paper-icon-button></zip-download> 
            <template is="dom-if" if="[[link]]" >Link to Share <a href="[[link]]">link to {{elementData.name}}</a> <br /></template>
            <zip-download name="{{elementData.name}}" files="{{files}}">Download</zip-download> <br />
            <prism-highlighter></prism-highlighter>
            <marked-element style="color:wheat;background:black;padding:1em;width:100%;display: block;" markdown="{{_markdown}}"></marked-element>
            <!-- Docs are going --> <br /> 
            <a href="https://github.com/new" target="_blank">New Github Repo</a>
          </paged-production>
          <paged-production label="Settings" icon="settings" color="[[elementData.color]]" title-it="{{short}}">
            <input-save type="number" value="{{settingsData.demoHeight}}" label="Height of Demo" ></input-save>
            <input-save type="number" value="{{settingsData.demoSmallHeight}}" label="Height of Small Demo" ></input-save>
            <input-save type="number" value="{{settingsData.smallDemoZoom}}" label="Small Demo Zoom Level" ></input-save>
            <input-save label="base url" pattern="^(?:https?://)?(?:[\w]+\.)(?:\.?[\w]{2,})+$" value="{{settingsData.base}}"></input-save>
          </paged-production>
        </template>
      </iron-pages>
      <paper-stepper back-Label="" next-label="" linear selected="{{selectedPage}}">
        <paper-step editable label="What does it do?" icon="description"></paper-step>
        <paper-step editable label="Name" icon="code"></paper-step>
        <template is="dom-if" if="[[!invalidName]]">
          <template is="dom-if" if="[[elementData.name]]">
            <paper-step editable label="The HTML/Docs" icon="build"></paper-step>
            <paper-step editable label="Properties" icon="hardware:memory"></paper-step>
            <paper-step editable label="Functions/Methods" ></paper-step>
            <paper-step editable label="Imports/Dependencies" icon="compare-arrows"></paper-step>
            <paper-step editable label="Download/Share Your element" icon="social:share"></paper-step>
            <paper-step editable label="Settings" icon="settings"></paper-step>
          </template>
        </template>
      </paper-stepper>
    </template>
    <template is="dom-if" if="[[elementData.name]]" restamp>
      <url-data string-from-data="{{stringFromElementData}}" compress debounce-data="{{elementData}}"></url-data>
    </template>
    <template is="dom-if" if="[[listOfElements]]">
      <clone-data from="[[listOfElements]]" to="{{_listOfElements}}"></clone-data>
    </template>
    <template is="dom-if" if="[[!listOfElements]]">
      <iron-ajax auto url="/list-of-elements" handle-as="text" last-response="{{_listOfElements}}"></iron-ajax>
    </template>
    <template is="dom-if" if="[[gitList]]">
      <clone-data from="[[gitList]]" to="{{_gitList}}"></clone-data>
    </template>
    <template is="dom-if" if="[[!gitList]]">
      <iron-ajax auto url="/gitList" handle-as="text" last-response="{{_gitList}}"></iron-ajax>
    </template>
    <template is="dom-if" if="[[!elementData.name]]">
      <iron-location hash="{{stringifyData}}"></iron-location>
      <url-data string="[[stringifyData]]" data-from-string="{{elementData}}"></url-data>
    </template>
    <iron-localstorage name="saved-elements" value="{{localData}}"></iron-localstorage>
    <url-data></url-data>
  </template>
</dom-module>
<script>
function resizeIframe(obj) {
  obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
;(function () {
  // var dataVectors = ["url","localData","user"]
  
  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) {
    return nl.join('\n')
  }
  var toCamelCase = function (str) {
    if (typeof str === 'string') {
      return str.replace(/ {2}|-|_/g, ' ').replace(/, /g, ',').replace(/ \S/g, function (txt) {
        return txt.toUpperCase()[1]
      })
    } else {
      return false
    }
  }
  function merge (obj1,obj2){
    var obj3 = {}
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname] }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname] }
    return obj3
  }
  function funcIt (functs) {
    var functObj = {akey:"aval"}
    console.log(functs)
    return functObj
  }
  function getfile (dependency, listOfElements) {
    var re = /bower_components/gi
    var elements = listOfElements.split('\n')
    for (var i = 0; i < elements.length; ++i) {
      if (elements[i].indexOf('/' + dependency + '.html') !== -1) {
        return listOfElements.split('\n')[i].replace(re, '..')
      }
    }
    return '../polymer/polymer.html'
  }
  function getfileForIframe (dependency, listOfElements) {
    var re = /bower_components/gi
    var elements = listOfElements.split('\n')
    for (var i = 0; i < elements.length; ++i) {
      if (elements[i].indexOf('/' + dependency + '.html') !== -1) {
        return '/'+listOfElements.split('\n')[i]
      }
    }
    return '../polymer/polymer.html'
  }
  Polymer({
    is: 'pair-production',
    properties: {
      elementData: {
        type: Object,
        value: {
          html: '<style>:host {display:inline-block;color:#666}</style>\n<h2>Demo</h2>',
          dependencies: 'polymer'
        },
      },
      settingsData: {
        value: {
          base: '/bower_components/new/', demoHeight: 200, smallDemoZoom: .7, demoSmallHeight: 70
        }
      },
      _src: {computed: '_getSrc(_codeiframe)'},
      _srcSmall: {computed: '_getSrcSmall(_src, settingsData.smallDemoZoom)'},
      link: {computed: "getLink(stringFromElementData)"},
      files: {computed: "getFiles(_demo, testFiles,_bower,_element, elementData.name)", notify:true},
      _body: {computed: '_getBody(elementData, _hasContent, invalidName, elementData.*)'},
      _demo: {computed: '_getCode(_head,_body)'},
      _head: {computed: '_getHead(elementData.name)'},
      _tests: {computed: '_getTests(elementData.name)'},
      _bower: {computed: '_getBower(elementData.name, elementData.desc, _dependencylist, _listOfElements, _gitList)'},
      _gotName: {computed: 'getGotName(elementData.name, _listOfElements, elementData, justLoad)'},
      _element: {computed: '_getElementCode(elementData,_dependencylist,_listOfElements,elementData.*)'},
      justLoad: {type:Boolean, value: false},
      editable: {type:Boolean, value: false},
      testFiles:{value: {}},
      invalidName: {type:Boolean, value: false},
      short: {type:Boolean, value: false},
      thin: {type:Boolean, value: true},
      _markdown: {computed: '_getMarkdown(_demo,_element,elementData.name,_bower,_tests)'},
      _iframeDemo: {computed: '_getCode(_iframeHead,_body)'},
      _iframeHead: {computed: '_getIframeHead(settingsData.base,elementData.name)'},
      _descriptor: {computed: '_getDescriptor(_element)'},
      _codeiframe: {computed: '_getCodeiframe(_iframeDemo,_element)'},
      _hasContent: {computed: "_getHasContent(elementData.html)"},
      _functionList: {computed: '_getArray(elementData.functions)'},
      _dependencylist: {computed: '_getArray(elementData.dependencies, _domTemplateDependencies)'},
      listOfElements: {type: String,value:""},
      gitList: {type: String,value:""},
      _listOfElementsList:{computed: '_getArray(_listOfElements)'},
      _domTemplateDependencies: {computed: '_getDomTemplateDependencies(elementData.html,elementData.dependencies)'},
      _domTemplateDependenciesDemo: {computed: '_getDomTemplateDependencies(elementData.content,elementData.dependenciesDemo)'},
      __addToElement:{computed:"addToElement(justLoad, elementData)"},
      _fixLink: {computed:"fixLink(link)",},
    },
    fixLink: function(link) {
      if (link === "underfined") {
        this.link = ""
      }
    },
    makeEditable: function(){
      this.editable = true
    },
    getFg: function(bg){
      if (bg > "#8") {
        return "#000"
      } else {
        return "#FFF"
      }
    },
    addToElement: function(justLoad, elementData) {
      if (justLoad) {
        var add = {}
        if (elementData.hasOwnProperty("link")) {
          add = this.$$("url-data").decode(elementData.link.split("#",2)[1], true)
          delete(elementData.link)
        }
        if (!elementData.hasOwnProperty("name")) {
          add.name = "de-mo"
        }
        if (!elementData.hasOwnProperty("dependencies")) {
          add.dependencies = "polymer,iron-icons"
        }
        if (!elementData.hasOwnProperty("description")) {
          add.description = "demo"
        }
        if (Object.keys(add).length) {
          this.elementData = merge(elementData, add)
        }
      }
    },
    behaviors: [ Polymer.IronResizableBehavior ],
    listeners: { "iron-resize": "onSizeChange" },
    onSizeChange: function(n) {
      var w = this.offsetWidth
      if (w > 0) { // n brack loop
        console.log("width is now ", w)
        if (w > 599) {
          this.thin = false
        } else {
          this.thin = true
        }
      } else {
        var that = this
        if (n < 34) {
          setTimeout(that.onSizeChange(n++),500)
        }
      }
    },
    stepperReset: function(e, d){
      this.$$("#stepper").items.map(function(step) {
        step._setSaved(false);
        step._set_previousSaved(false);
      });
    },
    showDemo: function(){
      if (this.elementData.name) {
        this.justLoad = true
      }
    },
    showEdit: function(){
      this.justLoad = false
    },
    _getSrcSmall: function(html, zoom){
      return html.replace("<html>","<html style='zoom:" + zoom + "'>")
    },
    _getHasContent: function(html){
      if (html) {
        return html.indexOf("</content>") !== -1
      }
    },
    getFiles: function(demo, testFiles, bower, element, name) {
      var add = {}
      add[name+"/"+name+".html"] = element 
      add[name+"/bower.json"] = bower 
      add[name+"/"+"demo.html"] = demo
      return merge(testFiles, add)
    },
    getLink: function(link) {
      return '#' + link
    },
    deleteLocalData: function () {
      delete(this.localData[this.elementData.name])
    },
    makeLocalData: function () {
      var name = this.elementData.name
      var data = this.elementData
      var localData = this.localData
      
      if (localData && localData.hasOwnProperty(name)) {
        if (JSON.stringify(localData[name]) !== JSON.stringify(data) ) {
          this.set("localData." + name, data)
        }       
      } else if (localData) {
        this.set("localData." + name, data)
      } else {
        this.localData = {}
        this.set("localData." + name, data)
      }
      return // TODO debounce and check for versions
    },
    initializeDefaultlocal: function () {
      this.set('localData', {})
    }, 
    getGotName: function (name, list, elementData, justLoad) {
      function pickColor(name, description) {
        var colors = {
          app:"ddc9e6",
          iron:"81c784",
          paper:"ffffff",
          google:"64B5F6",
          gold:"ffb74d",
          neon:"a7ffeb",
          platinum:"cfd8dc",
          molecules:"ffab91",
        }
        var group = name.split("-")[0] 
        if (colors.hasOwnProperty(group)) {
          return colors[group]
        } else {
          if (description && description.indexOf("wrapper") > -1) {
            return colors.molecules
          } else {
            return "cccccc"
          }
        }
      }
      if (!elementData.hasOwnProperty("color")) {
        this.elementData.color = "#" + pickColor(name, elementData.description)
      }
      if (performance.now() < 7000) {
        //this.showDemo()
        this.selectedPage = 2 // html edit page
      }
      if (!justLoad) {
        if (-1 !== list.indexOf('bower_components/'+name+'/'+name+'.html')) {
          document.title = "Rewriting " + name
          return true
        } else {
          document.title = "Making " + name
          return false
        }
      }
    },
    _getBower: function (name, description, dependencylist, listOfElements, gitList) { // TODO fix for paper-textarea ...
      var output = {
        name:  name,
        version: "1.0.0",
        description: description,
        main: name + '.html',
        keywords: ["polymer","web-components"],
        dependencies: {},
        devDependencies: {
          "iron-test-helpers": "*",
          "web-component-tester": "^5.0.0"
        },
      }
      for (var n = 0; n < dependencylist.length; ++n) {
        var path = getfile(dependencylist[n], listOfElements)
        if (path.length > 1) {
          var bowerName = path.split("/")[1]
          var re_repo = new RegExp('([^/|:]*/'+bowerName+')(?:\.git)','gi')
          var re_ver =  new RegExp('(?:'+bowerName+'/\.bower\.json:"_release": ")([^"]*)','gi'); 
          var found_repo = re_repo.exec(gitList)
          var found_ver = re_ver.exec(gitList)
          
          if (found_repo && found_ver) {
            if (found_ver[1].length < 7) {
              output.dependencies[bowerName] = found_repo[1] + "#~" +found_ver[1]
            } else {
              output.dependencies[bowerName] = found_repo[1] + "#" +found_ver[1]
            }
          } else {
            output.dependencies[bowerName] = "*"
          }
        }
      }
      return JSON.stringify(output, null, '  ')
    },
    _getArray: function (s, a) {
      if (s && typeof s == "object" && a === undefined) {
        return Object.keys(s) 
      } else if (s && typeof s == "object" && Array.isArray(a) ) {
        return Object.keys(s).concat(a)
      } else if (s && s !== '' && a === undefined) {
        if (s.indexOf('\n')) {
          return s.split('\n')
        } else {
          return s.split(',')
        } 
      } else if (s && s !== '' && Array.isArray(a)){
        return s.split(',').concat(a)
      } else if (Array.isArray(a)) {
        return a
      } else {
        return []
      }
    },
    _getCode: function (head, body) {
      at = 0
      var output = [
        tabs() + '<!doctype html>',
        tabs() + "<meta charset='utf-8'>",
        tabs(1) + '<html>'
      ]
      for (var i = 0; i < head.length; ++i) {
        output.push(tabs() + head[i])
      }
      for (var n = 0; n < body.length; ++n) {
        output.push(tabs() + body[n])
      }
      output.push(tabs(-1) + '</html>')
      return addLine(output)
    },
    _getHead: function (name) {
      if (name) return [
        tabs(1) + '<head>',
        tabs() + '<title>' + name + ' demo</title>',
        tabs() + '<sc' + 'ript src="../webcomponentsjs/webcomponents-lite.js"></sc' + 'ript>',
        tabs() + '<link rel="import" href="' + name + '.html">',
        tabs(-1) + '</head>'
      ]
    },
    _getIframeHead: function (base, name) {
      if (name) return [
        tabs(1) +'<head>',
        tabs() + '<base href="' + base + '" target="_blank">',
        tabs() + '<title>' + name + ' demo</title>',
        tabs() + '<sc'+'ript src="../webcomponentsjs/webcomponents-lite.js"></sc'+'ript>',
        tabs() + '<sc' + "ript>window.onerror = function (errorMsg, url, line) {document.write('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + line)}</sc" + 'ript>',
        tabs(-1)+'</head>'
      ]
    },
    _getTests: function (name) {
      if (name) {
        var testStubIndex = addLine([
          tabs() + '<!doctype html>',
          tabs(1) +'<html>',
          tabs(1) +'<head>',
          tabs() + '<meta charset="utf-8">',
          tabs() + '<scr' + 'ipt src="../../webcomponentsjs/webcomponents-lite.js"></scr' + 'ipt>',
          tabs() + '<scri' + 'pt src="../../web-component-tester/browser.js"></scr' + 'ipt>',
          tabs(-1)+'</head>',
          tabs(1) +'<body>',
          tabs(1) +'<scr' + 'ipt>',
          tabs(1) +'WCT.loadSuites([',
          tabs() + "'" + name + ".html',",
          tabs() + "'" + name + ".html?dom=shadow'",
          tabs(-1)+']);',
          tabs(-1)+'</scr' + 'ipt>',
          tabs(-1)+'</body>',
          tabs(-1)+'</html>'
        ])

        var testStubName = addLine([
          tabs()  + '<!doctype html>',
          tabs(1) + '<html>',
          tabs(1) + '<head>',
          tabs()  + '<title>' + name + '</title>',
          tabs()  + '<sc' + 'ript src="../../webcomponentsjs/webcomponents.js"></scr' + 'ipt>',
          tabs()  + '<scr' + 'ipt src="../../web-component-tester/browser.js"></sc' + 'ript>',
          tabs()  + '<scr' + 'ipt src="../../test-fixture/test-fixture-mocha.js"></scr' + 'ipt>',
          tabs()  + '<scr' + 'ipt src="../../iron-test-helpers/mock-interactions.js"></scr' + 'ipt>',
          tabs()  + '<link rel="import" href="../../polymer/polymer.html">',
          tabs()  + '<link rel="import" href="../../test-fixture/test-fixture.html">',
          tabs()  + '<link rel="import" href="../' + name + '.html">',
          tabs(-1)+ '</head>',
          tabs(1) + '<body>',
          tabs(1) + '<test-fixture id="' + toCamelCase(name) + '">',
          tabs(1) + '<template>',
          tabs()  + '<' + name + '></' + name + '> //TODO add attributes',
          tabs(-1)+ '</template>',
          tabs(-1)+ '</test-fixture>',
          tabs(1) + '<scr' + 'ipt>',
          tabs(1) + "suite('<" + name + ">', function () {",
          tabs()  + 'var ' + toCamelCase(name) + ';',
          tabs(1) + 'setup(function () {',
          tabs()  + toCamelCase(name) + " = fixture('" + toCamelCase(name) + "');",
          tabs(-1)+ '});',
          tabs(1) + 'teardown(function () {',
          tabs()  + '//...',
          tabs(-1)+ '});',
          tabs(1) + 'suite("This test is just to show that tests are running", function () {',
          tabs(1) + 'test("test is running", function(done) {',
          tabs()  + 'done()',
          tabs(-1)+ '})',
          tabs(-1)+ '})',
          tabs(1) + "suite('These test allow you to interact with the element', function () {",
          tabs(1) + "test('can be triggered with space', function(done) {",
          tabs(1) + toCamelCase(name) + ".addEventListener('keydown', function() {",
          tabs()  + 'done()',
          tabs(-1)+ '})',
          tabs()  + 'MockInteractions.pressSpace('+toCamelCase(name)+')',
          tabs(-1)+ '})',
          tabs(1) + "test('can be clicked', function(done) {",
          tabs(1) + toCamelCase(name) + ".addEventListener('click', function() {",
          tabs()  + 'done()',
          tabs(-1)+ '})',
          tabs()  + 'MockInteractions.tap('+toCamelCase(name)+')',
          tabs(-1)+ '})',
          tabs(-1)+ '})',
          tabs(-1)+ '})',
          tabs(-1)+ '</scr' + 'ipt>',
          tabs(-1)+ '</body>',
          tabs(-1)+ '</html>'
        ])
          
        var testStubTravisYml = addLine([
          tabs()  + 'language: node_js',
          tabs() + 'sudo: required',
          tabs() + 'node_js: stable',
          tabs() + 'dist: trusty',
          tabs(1) + 'addons:',
          tabs(1) + 'apt:',
          tabs() + 'sources:',
          tabs() + '- google-chrome',
          tabs() + 'packages:',
          tabs() + '- google-chrome-stable',
          tabs(-2) + 'before_script:',
          tabs() + '- npm install web-component-tester',
          tabs() + '- npm install bower',
          tabs() + '- export PATH=$PWD/node_modules/.bin:$PATH',
          tabs() + '- bower install -s',
          tabs() + 'script:',
          tabs() + '- xvfb-run wct --skip-plugin sauce --quiet'
        ])
        var wctConfJson = JSON.stringify({verbose: true, plugins: {local: { browsers: ["chrome"]}}}, null, '  ')
        this.testFiles = {}
        this.testFiles[name + "/test/index.html"] = testStubIndex
        this.testFiles[name + "/.travis.yml"] = testStubTravisYml
        this.testFiles[name + "/wct.conf.json"] = wctConfJson 
        this.testFiles[name + "/test/" + name + ".html"] = testStubName 
        var mdLS = "\n```\n"
        return mdLS + "test/index.html" + mdLS + testStubIndex + mdLS + "test/" + name + ".html" + mdLS + testStubName + mdLS + ".travis.yml" + mdLS + testStubTravisYml + mdLS + "wct.conf.json" + mdLS + wctConfJson
      }
    },
    _getBody: function (elementData, hasContent, invalidName) {
      if (elementData.name && !invalidName) {
        if (!elementData.attrsForDemo) {
          elementData.attrsForDemo = ""
        }
        var output = [
          tabs(1) +'<body>'
        ]

        if (elementData.content && hasContent) {
          output.push(tabs(1) + '<' + elementData.name + ' ' + elementData.attrsForDemo + '>')
          output = output.concat(elementData.content.split('\n').map(function(line) { return tabs() + line }))
          output.push(tabs(-1) + '</' + elementData.name + '>')
        } else {
          output.push(tabs() + '<' + elementData.name + ' ' + elementData.attrsForDemo + '></' + elementData.name + '>')
        }
        output.push(tabs(-1)+'</body>')
        if (elementData.moreHTML) {
          output = output.concat(elementData.moreHTML.split('\n').map(function(line) { return tabs() + line }))
        }
        return output
      }
    },
    _getElementCode: function (elementData, dependencylist, listOfElements) {
      var output = []

      output.push(tabs(1)+'<!--')
      output.push(tabs()+'`<' + elementData.name + '></'+elementData.name+'>` ' + elementData.description)
      output.push(tabs()+'@demo demo.html')
      output.push(tabs(-1)+'-->')
      output.push(tabs(1)+'<dom-module id="' + elementData.name + '">')
      output.push(tabs(1)+'<template>')
      for (var a = 0; a < elementData.html.split('\n').length; ++a) {
        output.push(tabs() + elementData.html.split('\n')[a])
      }
      output.push(tabs(-1)+'</template>')
      output.push(tabs(-1)+'</dom-module>')
      output.push(tabs(1)+'<sc' + 'ript>')
       
      output.push(tabs(1)+'Polymer({')

      output.push(tabs()+'is: "' + elementData.name + '",')
      if (elementData.properties && Object.keys(elementData.properties).length) {
        output.push(tabs(1)+'properties:{')
        for (index in elementData.properties) {
          // todo type / computed / ...
          console.log(elementData.properties[index])
          if (elementData.properties[index].type && Object.keys(elementData.properties[index]).length == 1) {
            output.push(tabs() + index + ":" + elementData.properties[index].type + ",") 
          } else {
            output.push(tabs(1) + index + ":" + "{") 
            for (prop in elementData.properties[index]) {
              if (elementData.properties[index][prop]) { 
                if (prop == "computed" || prop == "observer") {
                  output.push(tabs() + prop + ":\"" + elementData.properties[index][prop] + "\",")
                } else { 
                  output.push(tabs() + prop + ":" + elementData.properties[index][prop] + ",") 
                }
              }
            }
            output.push(tabs(-1) + "},") 
          }   
        }
        output.push(tabs(-1)+'},')
      }
      for (index in elementData.functions) {
        // todo attr / body / ...
        var attrs = elementData.functions[index].attrs || ""
        
        output.push(tabs(1) + index + ": function(" + elementData.functions[index].attrs + "){")
        if (elementData.functions[index].body) {
          for (var f = 0; f < elementData.functions[index].body.split('\n').length; ++f) {
            output.push(tabs() + elementData.functions[index].body.split('\n')[f])
          }
        }
        output.push(tabs(-1) + "},")
      }
      output.push(tabs(-1)+'})')
      output.push(tabs(-1)+'</sc' + 'ript>')
      for (var x = 0; x < dependencylist.length; ++x) {
        output.unshift('<link rel="import" href="' + getfile(dependencylist[x], listOfElements) + '">')
      }
      return addLine(output)
    },
    _getDescriptor: function (element) {
      //  console.log("_getDescriptor(",element,demo)
      return {
      }
    },
    _getMarkdown: function (demo, element, name, bower, tests) {
      return 'demo.html\n\n ```html \n' + demo + '\n```\n' + name + '.html\n\n```html \n' + element + '\n``` \nbower.json\n ```\n' + bower + tests + '\n```'
    },
    _getCodeiframe: function (iframeDemo, element) {
      return iframeDemo + element
    },
    _getSrc: function (codeiframe) {
      return codeiframe
    },
    _docsSrc: function (docsFor, listOfElements) {
      var path = getfile(docsFor, listOfElements)
      if (path.length > 1) {
        var bowerName = path.split("/")[1]
        return '/bower_components/' + bowerName + '/';
      }
    },
    _getDomTemplateDependencies: function (domTemplate, dependencies) {
      var re = /(?:<\/)([a-z0-9]*[\-a-z0-9]*-[a-z0-9]*)(?:>)/gi
      var output = []
      var m

      while ((m = re.exec(domTemplate)) !== null) {
        if (dependencies.split(',').indexOf(m[1]) === -1) {
          dependencies = dependencies + ',' + m[1]
          output.push(m[1])
        }
      }
      if (output.length > 0) {
        return output
      } else {
        return ["polymer"]
      }
    },
    ready: function () {
      this.onSizeChange()
    }
  })
})()
</script>