meme-container.html

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

<polymer-element name="meme-container" attributes="y" >
  <template>
    <style>
      :host {
        display: block;
        position: relative;
        margin: .6em;
        padding: .7em;
        background-color: #f0f0f0;
        box-shadow: 0 .4em .5em 0 rgba(0, 0, 0, 0.24);
      }
      #image {
        width: 100%;
        position: relative;
        text-align: center;
      }
      #title {
        font-size: 1em;
      }
      #top {
        top: 0;
        position: absolute;
        padding: 0;
        margin: 0;
        width: 100%;
        color: white;
        font-family: Impact, Charcoal, sans-serif;
        /* make a text stroke .. */
        text-shadow: 0 0 0.15em #000;
        font-size: 1.5em;
        line-height: 1;
      }
      #bottom {
        bottom: 5px;
        position: absolute;
        padding: 0;
        margin: 0;
        width: 100%;
        color: white;
        font-family: Impact, Charcoal, sans-serif;
        /* make a text stroke .. */
        text-shadow: 0 0 0.15em #000;
        font-size: 1.17em;
        line-height: 1;
      }
      #image img {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
      }
      .delete_btn {
        background-color: gray;
        position: absolute;
        right: -20px;
        top: -20px;
      }
    </style>
    <paper-fab class="delete_btn" icon="delete" mini on-tap="{{deleteHandler}}"></paper-fab>
    <h1 id="title" contentEditable spellCheck=false></h1>
    <div id="image">
      <h2 id="top" contentEditable spellCheck=false ></h2>
      <h3 id="bottom" contentEditable spellCheck=false></h3>
      <img src="{{img}}" />
    </div>
  </template>
  <script>
  Polymer("meme-container",{
    ready: function(){
      if(this.y != null){
        var that = this;
        var bind = function(){
          var e = that.y.val();
          that.img = e.img;
          if(e.title != null){
            e.title.bind(that.$.title, that.shadowRoot)
          }
          if(e.top != null){
            e.top.bind(that.$.top, that.shadowRoot)
          }
          if(e.bottom != null){
            e.bottom.bind(that.$.bottom, that.shadowRoot)
          }
        }
        bind();
        this.y.observe(bind);
      }
    },
    yChanged: function(){
      var that = this;
      var bind = function(){
        var e = that.y.val();
        that.img = e.img;
        if(e.title != null){
          e.title.bind(that.$.title,that.shadowRoot)
        }
        if(e.top != null){
          e.top.bind(that.$.top, that.shadowRoot)
        }
        if(e.bottom != null){
          e.bottom.bind(that.$.bottom, that.shadowRoot)
        }
      }
      bind();
      this.y.observe(bind);
    },
    deleteHandler: function(){
      var cs = this.parentElement.children
      for(var i = 0; i< cs.length; i++){
        if(cs[i] === this){
          num = i;
          break;
        }
      }
      this.feed.delete(i,1)
    }
  })
  </script>
</polymer-element>