designer

blacktip-scaffold.html

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

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

  <template>
    <style>    
      #drawerPanel, [drawer] {
        background-color: rgb(238, 238, 238);
      }
      [drawer] {
        -webkit-transform: translateZ(0px);
        transform: translateZ(0px);
      }
      [main] {
        height: 100%;
      }
      core-toolbar {
        color: rgb(255, 255, 255);
        font-size: 20px;
        font-weight: 400;
        background-color: rgb(82, 100, 174);
      }
      core-toolbar.medium-tall {
        height: 144px;
      }
      core-toolbar::shadow #bottomBar {
        height: 80px;
      }
      .main-label {
        padding: 0px 0px 20px 60px;
      }
      core-menu#menu {
        padding: 8px 0px;
        margin: 0px;
      }
      polyfill-next-selector {
        content: 'core-menu#menu core-item';
      }
      ::content core-item, ::content core-submenu::shadow core-item {
        height: 56px;
        padding-left: 60px;
        font-size: 15px;
        color: rgb(68, 68, 68);
        font-weight: normal !important;
      }
      polyfill-next-selector {
        content: 'core-menu#menu core-item.core-selected';
      }
      ::content core-item.core-selected {
        background-color: rgb(222, 222, 222);
      }
      #card {
        display: block;
        margin: 64px 120px 60px 0px;
        box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px 0px;
        border-radius: 2px;
        overflow: hidden;
        background-color: rgb(255, 255, 255);
      }
      #card[hidden] {
        display: none;
      }
      #card.move-up {
        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
      }
      polyfill-next-selector {
        content: '.sourceButton';
      }
      ::content .sourceButton {
        position: absolute;
        z-index: 1;
      }
      polyfill-next-selector {
        content: '.sourceButton:not(.fallback)';
      }
      ::content .sourceButton:not(.fallback) {
        color: rgb(102, 100, 100);
        bottom: -28px;
        right: 24px;
        background-color: rgb(252, 252, 252);
      }
      polyfill-next-selector {
        content: '.sourceButton.fallback';
      }
      ::content .sourceButton.fallback {
        right: 24px;
        top: 13px;
      }
      polyfill-next-selector {
        content: '#drawerPanel[narrow] .sourceButton:not(.fallback)';
      }
      #drawerPanel[narrow] ::content .sourceButton:not(.fallback) {
        right: 8px;
      }
      polyfill-next-selector {
        content: '#drawerPanel:not([narrow]) .menuButton';
      }
      #drawerPanel:not([narrow]) ::content .menuButton {
        display: none;
      }
      .element-label {
        height: 80px;
        line-height: 80px;
        padding-left: 24px;
        letter-spacing: 0.05em;
        font-size: 24px;
        font-weight: 400;
        color: rgb(82, 101, 162);
        background-color: rgb(255, 255, 255);
      }
      #frame {
        display: block;
        width: 100%;
        min-height: 600px;
        border: none;
      }
      #drawerPanel[narrow] [main] {
        background-color: rgb(255, 255, 255);
      }
      #drawerPanel[narrow] #card {
        margin: 0px;
        box-shadow: none;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
      }
      #drawerPanel[narrow] #frame {
        position: absolute;
        min-height: 100%;
      }
      #drawerPanel[narrow] #frameContainer {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        overflow: auto;
      }
    </style>
    <core-drawer-panel transition drawerwidth="320px" responsivewidth="{{ responsiveWidth }}" selected="main" narrow="{{ narrow }}" id="drawerPanel" touch-action="pan-y">
      <core-header-panel mode="waterfall" shadow id="mainHeaderPanel" main>
        <core-toolbar id="core_toolbar">
          <content id="content" select=".menuButton" on-tap="{{ togglePanel }}">
            <core-icon-button icon="menu" id="core_icon_button" class="menuButton fallback"></core-icon-button>
          </content>
          <div>{{ item.label }}</div>
          <content select=".sourceButton" on-tap="{{ viewSourceAction }}">
            <core-icon-button icon="launch" id="core_icon_button1" class="sourceButton fallback"></core-icon-button>
          </content>
        </core-toolbar>
        <div id="card" on-transitionend="{{ cardTransitionDone }}" hidden>
          <div class="element-label" hidden>{{ item.label }}</div>
          <div id="frameContainer">
            <iframe id="frame" on-load="{{ frameLoaded }}"></iframe>
          </div>
        </div>
      </core-header-panel>
      <core-header-panel drawer>
        <core-toolbar>
          <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({
      responsiveWidth: '860px',
      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);
    },
      narrow: true
    });

  </script>

</polymer-element>