session-list.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">
<link rel="import" href="data-service.html">
<link rel="import" href="session-card.html">
<link rel="import" href="session-detail.html">

<polymer-element name="session-list">
  <template>
    <style>
      :host {
        display: block;
        width: 100%;
        height: 100%;
      }
      core-scroll-header-panel {
        height: 100%;
      }
      paper-tab {
        font-size: 18px;
      }
      core-icon[icon="android"] {
        color: #0a8f08;
      }
      
      core-icon[icon="polymer"] {
        color: #0033FF;
      }
      core-icon[icon="drive-keep"] {
        color: #ffea00;
      }
      paper-tabs {
        display: block;
        width: 100%;
        margin-bottom: 2px;
        background-color: #00bcd4;
        color: #fff;
        box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
      }
      
      paper-tabs[noink][nobar] paper-tab.core-selected {
        color: #ffff8d;
      }
      
      paper-tabs.transparent-teal {
        background-color: transparent;
        color: #00bcd4;
        box-shadow: none;
      }
      
      paper-tabs.transparent-teal::shadow #selectionBar {
        background-color: #00bcd4;
      }
      
      paper-tabs.transparent-teal paper-tab::shadow #ink {
        color: #00bcd4;
      }    
    </style>

    <post-service id="service" sessions="{{sessions}}"></post-service>
    
    <core-scroll-header-panel id="scroll_panel" fixed >
      <paper-tabs id="tabs" selected="0" class="core-header">
        <paper-tab><core-icon icon="android"></core-icon> Android</paper-tab>
        <paper-tab><core-icon icon="polymer"></core-icon> Web</paper-tab>
        <paper-tab><core-icon icon="drive-keep"></core-icon> Codelab</paper-tab>
      </paper-tabs>
  
      <core-animated-pages transitions="cross-fade" selected="{{ $.tabs.selected }}"
        on-core-animated-pages-transition-prepare="{{ resetScroll }}" content >
        <template repeat="{{ sessionType, index in [sessions.android, sessions.web, sessions.codelab] }}">
        <section>
          <div layout horizontal wrap >
            <template repeat="{{session in sessionType}}">
              <session-card cross-fade
                sessionid="{{ session.id }}"
                on-tap="{{ showDetail }}"
                _style="background-color: {{ session.bgcolor }} " 
                on-favorite-tap="{{handleFavorite}}" >
                <img src="{{session.avatar}}">
                <p>{{session.name}}</p>
                <div class="title">{{session.title}}</div>
              </session-card>
            </template>
          </div>
        </section>        
        </template>    
      </core-animated-pages>
    </core-scroll-header-panel>
    
    <session-detail id="detail">
      <h2 _style="background-color: {{ detailSession.bgcolor }} " class="title">{{ detailSession.title }}</h2>
      <p>{{ detailSession.desc_content }}</p>
      <img src="{{ detailSession.avatar}} ">
      <span class="speaker">{{ detailSession.name }}</span>
      <span class="speakerdesc">{{ detailSession.desc_speaker }}</span>
    </session-detail>
    
  </template>

  <script>
  Polymer({
    handleFavorite: function(event, detail, sender) {
      var session = sender.templateInstance.model.session;
      this.$.service.setFavorite(session.id, session.favorite);
      event.stopPropagation();
    },
    resetScroll: function(){ 
      // fix scroll at top when switch tabs
      this.$.scroll_panel.scroller.scrollTop = 0;
    },
    detailSession: null,
    showDetail: function(event, detail, sender){
      this.detailSession = sender.templateInstance.model.session;
      this.$.detail.toggle();
    }
  });
  </script>
</polymer-element>