polymer-reddit.html

<!-- Polymer reddit element using its JSONP api -->

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

<!-- Core elements -->
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/core-collapse/core-collapse.html">
<link rel="import" href="../bower_components/core-icon-button/core-icon-button.html">

<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog/paper-action-dialog.html">

<!-- Sub elements -->
<link rel="import" href="subreddit-list.html">
<link rel="import" href="post-list.html">


<!-- polymer-reddit -->
<polymer-element name="polymer-reddit">
  <template>
    <style>
     :host {
       display: block;
       font-family: Lato;
       color: #565A5C;
     }
     core-toolbar {
       background-color: #111111;
     }
     core-toolbar.logo {
       background-color: #FF5A5F;
     }
     core-scroll-header-panel {
       background-color: #EDEFED;
     }
     core-header-panel {
       background-color: white;
     }
     #title {
       color: white;
     }
    </style>
    <core-drawer-panel id="panel" responsiveWidth="900px" selected="main">
      <core-header-panel mode="seamed"" drawer>
        <core-toolbar class="tall logo">
          <h3 id="title" class="bottom">Reddit Polymer</h1>
        </core-toolbar>
        <subreddit-list subreddits="{{subreddits}}"
                        on-subreddit-selected="{{subredditSelected}}"
                        on-frontpage-selected="{{frontpageSelected}}">
        </subreddit-list>
      </core-header-panel>
      <core-scroll-header-panel main condenses keepCondensedHeader >
        <core-toolbar class="tall">
          <paper-icon-button class="bottom" on-click="{{toggleDrawer}}" icon="menu" id="drawer_toggle"></paper-icon-button>
        </core-toolbar>
        <div class="content""> 
          <post-list posts="{{listing}}"></post-list>
        </div>
      </core-scroll-header-panel>
    </core-drawer-panel>
  </template>
  <script>
   /* Reddit Api
      ==========
      /subreddits.json : res['data']['children'][n]['data'] (Map of an actual subreddit)
      /r/sub.json : res['data']['children'][n]['data'] (Map of an actual post)
    */
   Polymer({
     created: function() {
       this.listing = [];
       this.subreddits = [];
     },
     ready: function() {
       // Wraps cross-domain requests for Frontpage and subreddit list in script tags
       var redditElement = this;
       var subCallback = "subredditcb";
       var subReq = document.createElement('script');
       subReq.src = "http://reddit.com/subreddits.json?jsonp=" + subCallback;
       
       // JSONP callbacks
       window[subCallback] = function(res) {
         redditElement.subreddits = res.data.children
                                       .map(function(n) { return n.data });
         console.log(res);
         delete window[subCallback];
       };
       
       // Loads the scripts
       document.head.appendChild(subReq);
       
       this.frontpageSelected(null, null);
     },
     frontpageSelected: function(event, detail) {
       var redditElement = this;
       var frontCallback = "frontpagecb";
       var frontReq = document.createElement('script');
       frontReq.src = "http://reddit.com/.json?jsonp=" + frontCallback;

       window[frontCallback] = function(res) {
         redditElement.listing = res.data.children
                                    .map(function(n) { return n.data });
         console.log(res);
         delete window[frontCallback];
       };
       document.head.appendChild(frontReq);

     },
     subredditSelected: function(event, detail) {
       redditElement = this;
       var listingCallback = "listingcb";
       var listingReq = document.createElement('script');
       listingReq.src = "http://reddit.com/r/" + detail.subreddit.display_name + ".json?sort=hot&jsonp=" + listingCallback;

       //JSONP
       window[listingCallback] = function(res) {
         redditElement.listing = res.data.children
                                    .map(function(n) { return n.data });
         console.log(res);
         delete window[listingCallback];
       };

       // Loads the script
       document.head.appendChild(listingReq);
       console.log('test');
     },
     toggleDrawer: function(event, detail) {
       console.log("button clicking");
       console.log(this.$.panel);
       var panel = this.$.panel;
       if (panel.clientWidth > parseInt(panel.responsiveWidth, 10)) {
         panel.narrow = !panel.narrow;
         panel.toggleDrawer();
       } else {
         panel.narrow = true;
         panel.togglePanel();
       }
     }
   });
  </script>
</polymer-element>