designer

designer.html

<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.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-menu/core-submenu.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../core-pages/core-pages.html">

<polymer-element name="my-element">

  <template>
    <style>
  body {
    font-family: "Roboto";
    font-weight: 300;
  }
  core-pages {
    width: 75%;
    height: 75%;
    border: none;
    -webkit-user-select: none;
    border-radius: 5px;
    transform: translateZ(0);
  }

  core-pages > div {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: inherit;
    opacity: 0;
    -webkit-transform: translate3d(0, 50px, 0) scale(0.9);
    transform: translate3d(0, 50px, 0) scale(0.9);
    transform-origin: 50% 50%;
    transition: all 300ms cubic-bezier(.03,.56,.7,.98);
    font-size: 50px;
    background-color: white;
  }


  core-pages .core-selected {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }


  body /deep/ core-header-panel {
    fill: #fff;
  }

  body /deep/ core-toolbar {
    background-color: rgb(15, 167, 88);
  }

  core-toolbar {
    color: #fff;
    fill: currentcolor;
  }
  core-menu {
    fill: currentcolor;
  }

  @media all and (max-width: 480px) {
    .paper-shadow  {
      display: none;
    }
    core-pages {
      width: 100%;
      height: 100%;
    }
    core-pages > div {
      transition: none;
    }
  }
		</style>
		<flatiron-director route autohash on-director-route="{{ routeChanged }}"></flatiron-director>
    <core-scaffold fit>
      <core-header-panel mode="seamed" navigation flex>
        <core-toolbar>Citation Scanner</core-toolbar>
        <core-menu>
          <template repeat="{{page, i in pages}}"></template>
        </core-menu>
      </core-header-panel>
      <core-toolbar tool flex>
        <div flex></div>
        <paper-icon-button icon="refresh" id="paper_icon_button"></paper-icon-button>
        <paper-icon-button icon="add"></paper-icon-button>
      </core-toolbar>
      <div layout horizontal center center-justified fit>
        <core-pages selected="{{ route }}" valueattr="hash" notap>
          <template repeat="{{page, i in pages}}"></template>
        </core-pages>
      </div>
    </core-scaffold>
  </template>

  <script>
    Polymer({
      
    });

  </script>
  <script>

    var template = document.querySelector('template');
var pages = null;

template.pages = [
  {name: 'Single', hash: 'one'},
  {name: 'page', hash: 'two'},
  {name: 'app', hash: 'three'},
  {name: 'using', hash: 'four'},
  {name: 'Polymer', hash: 'five'},
];

template.addEventListener('template-bound', function() {

  pages = document.querySelector('core-pages');
  pages.addEventListener('click', function(e) {
    var idx = (this.selectedIndex + 1) % this.items.length;
    template.route = this.items[idx].getAttribute('hash');
  });

  this.route = this.route || 'one';
});

document.addEventListener('keydown', function(e) {
  var direction = null;

  switch (e.keyCode) {
    case 37: // left arrow
      direction = -1;
      if (pages.selectedIndex <= 0) {
        return;
      }
      break;
    case 39: // right arrow
      direction = 1;
      if (pages.selectedIndex >= pages.items.length - 1) {
        return;
      }
      break;
  }

  template.route = pages.items[pages.selectedIndex + direction].getAttribute('hash');
});
    Polymer({
      
    });

  </script>

</polymer-element>