five-bells-visualization/public/bower_components/sampler-scaffold/sampler-scaffold.html

Tool to visualize Five Bells payments

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
`sampler-scaffold` provides a responsive layout for elements sampler.

Exampler:

    <sampler-scaffold label="HTML Input Elements">

      <core-item label="String" url="demos/string.html"></core-item>
      <core-item label="Checkbox" url="demos/checkbox.html"></core-item>
      <core-item label="Radio" url="demos/radio.html"></core-item>
      <core-item label="Range" url="demos/range.html"></core-item>
      <core-item label="Color" url="demos/color.html"></core-item>
    
    </sampler-scaffold>

Use `label` to set the sampler label and `responsiveWidth` to change the layout 
of the scaffold.

@element sampler-scaffold
@homepage github.io
-->

<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">

<polymer-element name="sampler-scaffold" attributes="label responsiveWidth">
<template>

  <link rel="stylesheet" href="sampler-scaffold.css">

  <core-drawer-panel id="drawerPanel" narrow="{{narrow}}" drawerWidth="320px" responsiveWidth="{{responsiveWidth}}">

    <core-header-panel id="mainHeaderPanel" main mode="{{narrow ? 'waterfall' : 'cover'}}" shadow>

      <core-toolbar class="{{ {'medium-tall' : !narrow} | tokenList }}">
        <content select=".menuButton" on-tap="{{togglePanel}}">
          <core-icon-button class="menuButton fallback" icon="menu"></core-icon-button>
        </content>
        <div hidden?="{{!narrow}}">{{item.label}}</div>
        <content select=".sourceButton" on-tap="{{viewSourceAction}}">
          <core-icon-button class="sourceButton fallback" icon="launch"></core-icon-button>
        </content>

      </core-toolbar>
      
      <div id="card" on-transitionend="{{cardTransitionDone}}" hidden?="{{!item}}">

        <div class="element-label" hidden?="{{narrow}}">{{item.label}}</div>

        <div id="frameContainer">
          <iframe id="frame" on-load="{{frameLoaded}}"></iframe>
        </div>
        
      </div>
      
    </core-header-panel>

    <core-header-panel drawer>

      <core-toolbar class="{{ {'medium-tall' : !narrow} | tokenList }}">
        <div class="bottom main-label fit">{{label}}</div>
      </core-toolbar>
      
      <core-menu id="menu" on-core-select="{{menuSelect}}">
        <content></content>
      </core-menu>

    </core-header-panel>

  </core-drawer-panel>

</template>
<script>

  Polymer('sampler-scaffold', {
    
    /**
     * When the browser window size is smaller than the `responsiveWidth`, 
     * `sampler-scaffold` changes to a narrow layout. In narrow layout, 
     * the drawer will be stacked on top of the main panel.
     *
     * @attribute responsiveWidth
     * @type string
     */
    responsiveWidth: '860px',
    
    /**
     * Sampler label.
     *
     * @attribute label
     * @type string
     */
    
    ready: function() {
      this.boundResizeFrame = this.resizeFrame.bind(this);
      window.addEventListener('resize', this.updateFrameHeight.bind(this));
      window.addEventListener('hashchange', this.parseLocationHash.bind(this));
    },
    
    domReady: function() {
      this.async(function() {
        this.parseLocationHash();
      }, null, 300);
    },
    
    parseLocationHash: function() {
      var route = window.location.hash.slice(1);
      for (var i = 0, item; item = this.$.menu.items[i]; i++) {
        if (item.getAttribute('tag') === route) {
          this.$.menu.selected = i;
          return;
        }
      }
      this.$.menu.selected = this.$.menu.selected || 0;
    },
    
    menuSelect: function(e, detail) {
      if (detail.isSelected) {
        this.item = detail.item;
        if (this.item.children.length) {
          this.item.selected = 0;
        }
        this.item.tag = this.item.getAttribute('tag');
        var url = this.item.getAttribute('url');
        this.$.frame.contentWindow.location.replace(url);
        window.location.hash = this.item.tag;
        if (this.narrow) {
          this.$.drawerPanel.closeDrawer();
        } else {
          this.animateCard();
        }
      }
    },
    
    animateCard: function() {
      this.$.card.classList.remove('move-up');
      this.$.card.style.display = 'none';
      this.async(function() {
        this.$.card.style.display = 'block';
        this.moveCard(this.$.mainHeaderPanel.offsetHeight);
        this.async(function() {
          this.$.card.classList.add('move-up');
          this.moveCard(null);
        }, null, 300);
      });
    },
    
    moveCard: function(y) {
      var s = this.$.card.style;
      s.webkitTransform = s.transform = 
          y ? 'translate3d(0, ' + y + 'px,0)' : '';
    },
    
    cardTransitionDone: function() {
      if (this.$.card.classList.contains('move-up')) {
        this.$.card.classList.remove('move-up');
        this.updateFrameHeight();
      }
    },
    
    togglePanel: function() {
      this.$.drawerPanel.togglePanel();
    },
    
    frameLoaded: function() {
      if (!this.item) {
        return;
      }
      this.$.frame.contentWindow.addEventListener('polymer-ready', function() {
        setTimeout(this.updateFrameHeight.bind(this), 100);
        this.$.frame.contentWindow.addEventListener('core-resize',
          this.boundResizeFrame, false);
      }.bind(this));
    },

    resizeFrame: function() {
      this.job('resizeFrame', function() {
        this.updateFrameHeight();
      });
    },
    
    updateFrameHeight: function() {
      var frame = this.$.frame;
      var doc = frame.contentDocument;
      if (doc) {
        var docElt = doc.documentElement;
        // TODO(ffu); expose scroll info from header-panel
        var pos = this.$.mainHeaderPanel.$.mainContainer.scrollTop;
        frame.style.height = 'auto';
        frame.style.height = docElt.scrollHeight + 'px';
        if (doc.body) {
          var s = doc.body.style;
          s.overflow = 'hidden';
          // to avoid the 'blinking bug'
          // https://code.google.com/p/chromium/issues/detail?id=332024
          s.webkitTransform = s.transform = 'translateZ(0)';
        }
        this.$.mainHeaderPanel.$.mainContainer.scrollTop = pos;
      }
    },
    
    viewSourceAction: function() {
      window.open('view-source:' + this.$.frame.contentWindow.location.href, 
          this.item.tag);
    }
    
  });

</script>
</polymer-element>