meme-together-raw.html

<script src="../yjs/y.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-ripple/paper-ripple.html">
<link rel="import" href="./meme-container.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../yjs/y-object.html">
<link rel="import" href="../y-xmpp/y-xmpp.html">
<script src="../y-text/y-text.js"></script>
<script src="../y-list/y-list.js"></script>

<polymer-element name="meme-together" attributes="y connector syncMethod room">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        max-width: 500px;
      }
      @media (min-width: 500px) {
        :host {
          font-size: 25px;
        }
      }
      @media (max-width: 500px) {
        :host {
          font-size: 5vw;
        }
      }
      meme-container {
      }
      .create-new {
        display: block;
        margin: .6em;
        padding: .7em;
        background-color: #f0f0f0;
        box-shadow: 0 .4em .5em 0 rgba(0, 0, 0, 0.24);
        position: relative;
      }
      .create-new paper-fab {
        position: absolute;
        right: -20px;
        top: -20px;
      }
    </style>
    <div>
        <div class="create-new" on-tap="{{createMemeHandler}}">
          <h2 style="margin: 0">Meme Together!</h2>
          <paper-fab icon="add" mini></paper-fab>
        </div>
        <paper-dialog id="meme_list" heading="Choose your Meme" transition="core-transition-top">
          <style>
            #galleryImages img {
              height: 70px;
              transition: all 200ms ease-in;
            }
            #galleryImages img:hover {
              transform: scale(1.2);
              transform-origin: 0 0;
            }
          </style>
          <div id="galleryImages" horizontal layout wrap>
            <template repeat="{{meme in memes.data.memes}}">
              <img src="{{meme.url}}" on-click={{addMeme}} style="height:70px;">
            </template>
          </div>
        </paper-dialog>
        <y-xmpp id="y_xmpp" debug=true connector="{{connector}}" room="{{room}}" syncMethod="{{syncMethod}}"></y-xmpp>
        <y-object val={{y}} connector={{connector}}>
        </y-object>
        <div id="meme_containers">
        </div>
    </div>
  </template>
  <script>
  Polymer("meme-together",{
    ready: function(){
      // nice for debugging
      window.meme_together = this;
      if(this.room === undefined){
        // by default, meme-together will join a room that is named after the host. E.g. "dadamonad.github.io"
        this.room = "memetogether" // window.location.host
      }
      if(this.syncMethod == null){
        this.syncMethod = "syncAll"
      }
    },
    yChanged: function(){
      var that = this;
      var bind = (function(){
        var y = that.y;
        if(y.val("feed") != null) {
          // that.feed is a mutable array type of memes
          that.feed = y.val("feed");
          var feed_list = that.feed.val();
          // add each meme to the dom
          for(var i in feed_list){
            var m = document.createElement("meme-container");
            m.y = feed_list[i];
            that.$.meme_containers.appendChild(m);
          }
          // insert/delete a meme, when the feed object changes
          that.feed.observe(function(events){
            for(var i in events){
              if(events[i].type === "insert"){
                var new_meme = document.createElement("meme-container");
                new_meme.y = events[i].value;
                new_meme.feed = events[i].object
                var b = that.$.meme_containers.children[events[i].position];
                if(b != null){
                  that.$.meme_containers.insertBefore(new_meme,b)
                } else {
                  that.$.meme_containers.appendChild(new_meme)
                }
              } else {
                var c = that.$.meme_containers.children[events[i].position];
                that.$.meme_containers.removeChild(c);
              }
            }
          });
        that.y.unobserve(bind)
        }
      });
      // start the binding as soon as anything changes on y
      that.y.observe(bind);
    },
    addMeme: function(event, n, img){
      this.$.meme_list.toggle();
      if(this.y.val("feed") == null){
        this.y.val("feed", new Y.List())
      }
      this.feed.insert(0, new Y.Object());
      var e = this.feed.val(0);
      e.val("img",img.src)
      e.val("title", new Y.Text("..."));
      e.val("top",new Y.Text("This is"));
      e.val("bottom",new Y.Text("Just right"))
    },
    getMemesHandler: function(){
      console.log("dtrn")
    },
    createMemeHandler: function(){
      this.$.meme_list.toggle();
    },
    // I got all these memes from imgflip. I didn't know how to process everything: so here is just a big ugly list of memes
    memes: {"success":true,"data":{"memes":[{"id":"61579","name":"One Does Not Simply","url":"https://i.imgflip.com/1bij.jpg","width":568,"height":335},{"id":"438680","name":"Batman Slapping Robin","url":"https://i.imgflip.com/9ehk.jpg","width":400,"height":387},{"id":"61532","name":"The Most Interesting Man In The World","url":"https://i.imgflip.com/1bh8.jpg","width":550,"height":690},{"id":"101470","name":"Ancient Aliens","url":"https://i.imgflip.com/26am.jpg","width":500,"height":437},{"id":"16464531","name":"But Thats None Of My Business","url":"https://i.imgflip.com/9sw43.jpg","width":600,"height":600},{"id":"347390","name":"X, X Everywhere","url":"https://i.imgflip.com/7g1q.jpg","width":500,"height":381},{"id":"61539","name":"First World Problems","url":"https://i.imgflip.com/1bhf.jpg","width":552,"height":367},{"id":"61520","name":"Futurama Fry","url":"https://i.imgflip.com/1bgw.jpg","width":552,"height":414},{"id":"5496396","name":"Leonardo Dicaprio Cheers","url":"https://i.imgflip.com/39t1o.jpg","width":600,"height":400},{"id":"61546","name":"Brace Yourselves X is Coming","url":"https://i.imgflip.com/1bhm.jpg","width":622,"height":477},{"id":"61527","name":"Y U No","url":"https://i.imgflip.com/1bh3.jpg","width":500,"height":500},{"id":"61585","name":"Bad Luck Brian","url":"https://i.imgflip.com/1bip.jpg","width":475,"height":562},{"id":"61582","name":"Creepy Condescending Wonka","url":"https://i.imgflip.com/1bim.jpg","width":550,"height":545},{"id":"101288","name":"Third World Skeptical Kid","url":"https://i.imgflip.com/265k.jpg","width":426,"height":426},{"id":"405658","name":"Grumpy Cat","url":"https://i.imgflip.com/8p0a.jpg","width":500,"height":617},{"id":"563423","name":"That Would Be Great","url":"https://i.imgflip.com/c2qn.jpg","width":526,"height":440},{"id":"8072285","name":"Doge","url":"https://i.imgflip.com/4t0m5.jpg","width":620,"height":620},{"id":"61544","name":"Success Kid","url":"https://i.imgflip.com/1bhk.jpg","width":500,"height":500},{"id":"1509839","name":"Captain Picard Facepalm","url":"https://i.imgflip.com/wczz.jpg","width":500,"height":324},{"id":"100947","name":"Matrix Morpheus","url":"https://i.imgflip.com/25w3.jpg","width":500,"height":303},{"id":"245898","name":"Picard Wtf","url":"https://i.imgflip.com/59qi.jpg","width":500,"height":350},{"id":"61533","name":"X All The Y","url":"https://i.imgflip.com/1bh9.jpg","width":500,"height":355},{"id":"21735","name":"The Rock Driving","url":"https://i.imgflip.com/grr.jpg","width":568,"height":700},{"id":"101287","name":"Third World Success Kid","url":"https://i.imgflip.com/265j.jpg","width":500,"height":500},{"id":"14230520","name":"Black Girl Wat","url":"https://i.imgflip.com/8h0c8.jpg","width":599,"height":626},{"id":"1035805","name":"Boardroom Meeting Suggestion","url":"https://i.imgflip.com/m78d.jpg","width":500,"height":649},{"id":"259680","name":"Am I The Only One Around Here","url":"https://i.imgflip.com/5kdc.jpg","width":500,"height":348},{"id":"61580","name":"Too Damn High","url":"https://i.imgflip.com/1bik.jpg","width":420,"height":316},{"id":"235589","name":"Evil Toddler","url":"https://i.imgflip.com/51s5.jpg","width":500,"height":332},{"id":"6235864","name":"Finding Neverland","url":"https://i.imgflip.com/3pnmg.jpg","width":423,"height":600},{"id":"100955","name":"Confession Bear","url":"https://i.imgflip.com/25wb.jpg","width":460,"height":480},{"id":"101440","name":"10 Guy","url":"https://i.imgflip.com/269s.jpg","width":500,"height":454},{"id":"124212","name":"Say That Again I Dare You","url":"https://i.imgflip.com/2nuc.jpg","width":393,"height":330},{"id":"442575","name":"Aint Nobody Got Time For That","url":"https://i.imgflip.com/9hhr.jpg","width":500,"height":281},{"id":"101711","name":"Skeptical Baby","url":"https://i.imgflip.com/26hb.jpg","width":253,"height":260},{"id":"61516","name":"Philosoraptor","url":"https://i.imgflip.com/1bgs.jpg","width":500,"height":500},{"id":"61556","name":"Grandma Finds The Internet","url":"https://i.imgflip.com/1bhw.jpg","width":640,"height":480},{"id":"13757816","name":"Awkward Moment Sealion","url":"https://i.imgflip.com/86vlk.jpg","width":620,"height":397},{"id":"8774527","name":"So I Got That Goin For Me Which Is Nice","url":"https://i.imgflip.com/582gv.jpg","width":620,"height":454},{"id":"109765","name":"Ill Just Wait Here","url":"https://i.imgflip.com/2cp1.jpg","width":491,"height":550},{"id":"101511","name":"Dont You Squidward","url":"https://i.imgflip.com/26br.jpg","width":500,"height":333},{"id":"97984","name":"Disaster Girl","url":"https://i.imgflip.com/23ls.jpg","width":500,"height":375},{"id":"444501","name":"Maury Lie Detector","url":"https://i.imgflip.com/9iz9.jpg","width":381,"height":378},{"id":"195389","name":"Sparta Leonidas","url":"https://i.imgflip.com/46rh.jpg","width":500,"height":264},{"id":"221020","name":"Dr Evil Laser","url":"https://i.imgflip.com/4qjg.jpg","width":250,"height":202},{"id":"1790995","name":"And everybody loses their minds","url":"https://i.imgflip.com/12dxv.jpg","width":620,"height":349},{"id":"766986","name":"Aaaaand Its Gone","url":"https://i.imgflip.com/gft6.jpg","width":500,"height":281},{"id":"1367068","name":"I Should Buy A Boat Cat","url":"https://i.imgflip.com/tau4.jpg","width":500,"height":368},{"id":"718432","name":"Back In My Day","url":"https://i.imgflip.com/fecg.jpg","width":259,"height":310},{"id":"101716","name":"Yo Dawg Heard You","url":"https://i.imgflip.com/26hg.jpg","width":500,"height":323},{"id":"172314","name":"Kill Yourself Guy","url":"https://i.imgflip.com/3oyi.jpg","width":300,"height":300},{"id":"61583","name":"Conspiracy Keanu","url":"https://i.imgflip.com/1bin.jpg","width":551,"height":549},{"id":"922147","name":"Laughing Men In Suits","url":"https://i.imgflip.com/jrj7.jpg","width":500,"height":333},{"id":"12403754","name":"Bad Pun Dog","url":"https://i.imgflip.com/7dusq.jpg","width":575,"height":1200},{"id":"61581","name":"Put It Somewhere Else Patrick","url":"https://i.imgflip.com/1bil.jpg","width":343,"height":604},{"id":"100952","name":"Overly Attached Girlfriend","url":"https://i.imgflip.com/25w8.jpg","width":500,"height":370},{"id":"61522","name":"Scumbag Steve","url":"https://i.imgflip.com/1bgy.jpg","width":500,"height":500},{"id":"673439","name":"Confused Gandalf","url":"https://i.imgflip.com/efmn.jpg","width":500,"height":607},{"id":"100948","name":"Sudden Clarity Clarence","url":"https://i.imgflip.com/25w4.jpg","width":500,"height":272},{"id":"24557067","name":"Afraid To Ask Andy","url":"https://i.imgflip.com/emccr.jpg","width":620,"height":608},{"id":"15878567","name":"You The Real MVP","url":"https://i.imgflip.com/9gbzb.jpg","width":620,"height":341},{"id":"9440985","name":"Face You Make Robert Downey Jr","url":"https://i.imgflip.com/5mcpl.jpg","width":460,"height":523},{"id":"61584","name":"Socially Awesome Awkward Penguin","url":"https://i.imgflip.com/1bio.jpg","width":576,"height":577},{"id":"23909796","name":"Satisfied Seal","url":"https://i.imgflip.com/e8gx0.jpg","width":620,"height":412},{"id":"17699","name":"Buddy Christ","url":"https://i.imgflip.com/dnn.jpg","width":400,"height":400},{"id":"10628640","name":"Archer","url":"https://i.imgflip.com/6bt40.jpg","width":620,"height":567},{"id":"109015","name":"Yao Ming","url":"https://i.imgflip.com/2c47.jpg","width":500,"height":624},{"id":"306319","name":"Pissed Off Obama","url":"https://i.imgflip.com/6kcv.jpg","width":500,"height":500},{"id":"1232104","name":"Pepperidge Farm Remembers","url":"https://i.imgflip.com/qep4.jpg","width":500,"height":500},{"id":"1366993","name":"Spiderman Computer Desk","url":"https://i.imgflip.com/tas1.jpg","width":469,"height":359},{"id":"228024","name":"Liam Neeson Taken","url":"https://i.imgflip.com/4vy0.jpg","width":300,"height":300},{"id":"13424299","name":"Yall Got Any More Of","url":"https://i.imgflip.com/7zq97.jpg","width":306,"height":240},{"id":"412211","name":"Jackie Chan WTF","url":"https://i.imgflip.com/8u2b.jpg","width":500,"height":375},{"id":"146381","name":"Angry Baby","url":"https://i.imgflip.com/34y5.jpg","width":283,"height":320},{"id":"409403","name":"Obi Wan Kenobi","url":"https://i.imgflip.com/8rwb.jpg","width":454,"height":330},{"id":"389834","name":"Ryan Gosling","url":"https://i.imgflip.com/8csq.jpg","width":214,"height":314},{"id":"10672255","name":"I Guarantee It","url":"https://i.imgflip.com/6cqrj.jpg","width":620,"height":367},{"id":"163573","name":"Imagination Spongebob","url":"https://i.imgflip.com/3i7p.jpg","width":500,"height":366},{"id":"356615","name":"Peter Griffin News","url":"https://i.imgflip.com/7n5z.jpg","width":500,"height":379},{"id":"1202623","name":"Keep Calm And Carry On Red","url":"https://i.imgflip.com/pry7.jpg","width":500,"height":704},{"id":"17496002","name":"Leonardo Dicaprio Wolf Of Wall Street","url":"https://i.imgflip.com/af002.jpg","width":500,"height":589},{"id":"6531067","name":"See Nobody Cares","url":"https://i.imgflip.com/3vzej.jpg","width":620,"height":676},{"id":"646581","name":"I Too Like To Live Dangerously","url":"https://i.imgflip.com/duwl.jpg","width":480,"height":320},{"id":"681831","name":"Gollum","url":"https://i.imgflip.com/em3r.jpg","width":395,"height":394},{"id":"7761261","name":"Unpopular Opinion Puffin","url":"https://i.imgflip.com/4mcml.jpg","width":620,"height":465},{"id":"2005809","name":"DJ Pauly D","url":"https://i.imgflip.com/16zox.jpg","width":620,"height":578},{"id":"100951","name":"Super Cool Ski Instructor","url":"https://i.imgflip.com/25w7.jpg","width":500,"height":338},{"id":"71851","name":"First Day On The Internet Kid","url":"https://i.imgflip.com/1jfv.jpg","width":400,"height":526},{"id":"107773","name":"Spiderman Peter Parker","url":"https://i.imgflip.com/2b5p.jpg","width":461,"height":352},{"id":"61521","name":"Good Guy Greg","url":"https://i.imgflip.com/1bgx.jpg","width":500,"height":500},{"id":"265789","name":"Kevin Hart The Hell","url":"https://i.imgflip.com/5p31.jpg","width":271,"height":186},{"id":"1232147","name":"Ron Burgundy","url":"https://i.imgflip.com/qeqb.jpg","width":500,"height":333},{"id":"138874","name":"Unicorn MAN","url":"https://i.imgflip.com/2z5m.jpg","width":380,"height":381},{"id":"146821","name":"Ugly Twins","url":"https://i.imgflip.com/35ad.jpg","width":500,"height":358},{"id":"371382","name":"Simba Shadowy Place","url":"https://i.imgflip.com/7yk6.jpg","width":363,"height":720},{"id":"15336167","name":"You The Real MVP 2","url":"https://i.imgflip.com/94pgn.jpg","width":620,"height":413},{"id":"1356640","name":"Actual Advice Mallard","url":"https://i.imgflip.com/t2sg.jpg","width":537,"height":390},{"id":"100944","name":"Drunk Baby","url":"https://i.imgflip.com/25w0.jpg","width":500,"height":332},{"id":"61518","name":"Insanity Wolf","url":"https://i.imgflip.com/1bgu.jpg","width":500,"height":500},{"id":"206153","name":"Lion King","url":"https://i.imgflip.com/4f2h.jpg","width":500,"height":375}]}}
  })
  </script>
</polymer-element>