new-cloud-tag.html

<link rel="import"
      href="/components/polymer/polymer.html">

<link rel="import" 
      href="/public/vendor/core-firebase/core-firebase.html">

<polymer-element name="new-cloud-tag">
  <template>
    
    <link href='./new-cloud-tag.css' rel='stylesheet' type='text/css'>

      <div class="container">
        <ul class="tags">
          <li><a href="1">Interface <span>4</span></a></li>
          <li><a href="2">Icon <span>8</span></a></li>
          <li><a href="3">Typography <span>15</span></a></li>
          <li><a href="4">Color <span>16</span></a></li>
        </ul>

        <ul class="tags green">
          <li><a href="5">Design <span>23</span></a></li>
          <li><a href="6">Illustration <span>42</span></a></li>
          <li><a href="7">Component <span>108</span></a></li>
          <li><a href="8">Misc <span>12</span></a></li>
        </ul>

        <ul class="tags blue">
          <li><a href="9">Infrastructure <span>31</span></a></li>
          <li><a href="10">Application <span>33</span></a></li>
          <li><a href="11">Mobile <span>65</span></a></li>
          <li><a href="12">Desktop <span>160</span></a></li>
        </ul>
      </div>


  <core-firebase  location="https://tag-machine.firebaseio.com/" 
            list="{{tagData}}" 
            on-items-added={{update}}
            on-items-removed={{update}}
            on-items-changed={{update}}
            id="firebase">
  </core-firebase>

  <pre id="display"></pre> 
  </template>
  <script>
    Polymer('new-cloud-tag', {
      ready: function (){
        this.writeToFirebase();

        console.log(this.tagData);
      },

      writeToFirebase: function () {
        this.numb = Object.keys(this.tagData).length; // get the amount of tags stored already
        this.tag = this.$.tag.value;                  // get values entered into inout fields
        this.url = this.$.url.value;
        
        this.check = 0;
        this.tagPos = undefined;
        this.itemNumb = 0;
        for (var i = 0; i < this.numb; i++) {         // iterate over the tags that are there already...
            for(var k in this.tagData[i]) {
                if (k == this.tag) {
                  this.check = this.check + 1;        // ... and íf the tag exists already store which and where.
                  var array = this.tagData[i][k];
                  this.itemNumb = array.length;
                  this.tagPos = i;
                  this.tName = k;
                  };
                };
            };
          },

    update: function update(){
      this.$.display.innerHTML = JSON.stringify(this.tagData);
    }

    });
  </script>
</new-cloud-tag>