index.html

<!--
Copyright 2012 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html>
<html>
<head>
  <title>Web Animations Demos</title>
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
  <meta name="theme-color" content="#0092f3" />
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Inconsolata" rel="stylesheet" type="text/css" />
  <script src="components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="components/core-ajax/core-ajax.html" />
  <link rel="import" href="components/core-menu/core-menu.html" />
  <link rel="import" href="components/core-icon/core-icon.html" />
  <link rel="import" href="components/core-item/core-item.html" />
  <link rel="import" href="components/core-scaffold/core-scaffold.html" />
  <link rel="import" href="components/core-header-panel/core-header-panel.html" />
  <link rel="import" href="components/paper-button/paper-button.html" />
  <style>
body {
  font-family: Roboto, Helvetica, Arial, Sans-Serif;
  font-size: 16px;
  font-weight: 300;
  overflow-y: hidden;  /* disables pull-to-refresh */
}
  </style>
</head>
<body>

<polymer-element name="web-animations-demo-card" attributes="demo href">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
      width: 300px;
      height: 230px;
      flex-grow: 1;
    }
    #card {
      width: 100%;
      height: 100%;
      position: relative;
      background-position: center;
      background-repeat: no-repeat;
      background-size: auto 100%;
      cursor: pointer;

      /** force layer */
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      will-change: transform;

      /** fade out card unless hovered */
      -webkit-filter: grayscale(1) contrast(0.75);
      -webkit-filter: grayscale(100%) contrast(75%);
      -moz-filter: grayscale(100%) contrast(75%);
      filter: gray;
      filter: grayscale(100%) contrast(75%);
    }
    #card h3 {
      visibility: hidden;
      position: absolute;
      margin: 0;
      bottom: 12px;
      left: 16px;
      font-weight: 500;
      color: #111;
      -webkit-user-select: none;
      user-select: none;
    }
    #card.dark h3 {
      color: #eee;
    }
    #card:hover {
      -webkit-filter: none;
      -moz-filter: none;
      filter: none;
    }
    #card:hover h3 {
      visibility: visible;
    }

    a#all {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    /**
     * For devices without hover (i.e., phones or tablets), just show all cards
     * as active.
     */

    @media (hover: none) {
      #card {
        -webkit-filter: none;
        -moz-filter: none;
        filter: none;
      }
      #card h3 {
        visibility: visible;
      }
    }
    @media (hover: on-demand) {
      #card {
        -webkit-filter: none;
        -moz-filter: none;
        filter: none;
      }
      #card h3 {
        visibility: visible;
      }
    }

    </style>
    <div id="card">
      <h3>{{demo.name}}</h3>
      <a id="all" hidden?="{{!href}}" href="{{href}}"></a>
    </div>
  </template>
  <script>
Polymer('web-animations-demo-card', {
  demo: null,
  href: null,

  updateShade: function() {
    var card = this.$.card;
    if (this.demo) {
      card.style.backgroundColor = this.demo.shade;
      card.style.backgroundImage = this.demo.preview ? 'url(' + this.demo.preview + ')' : null;
      card.classList.toggle('dark', this.demo.darkTheme);
    }
  },

  ready: function() {
    // TODO: This element refreshes itself initially, but it should instead
    // observe the 'demo' attribute.
    this.updateShade();
  }
});
  </script>
</polymer-element>

<polymer-element name="web-animations-demos" attributes="model">
  <template>
    <style>
    h2 {
      color: #3367d6;
      font-size: 24px;
      font-weight: 300;
    }
    /** TODO: Replace /deep/ alongside Polymer 1.0 update */
    core-scaffold /deep/ core-toolbar {
      display: none;
    }
    core-header-panel {
      z-index: 2;
    }
    core-menu {
      margin: 0;
    }
    core-item {
      padding: 0 20px;
      font-weight: 400;
      color: #666;
      font-size: 16px;
      line-height: 32px;
    }
    core-item paper-ripple {
      color: #666;
    }
    core-item.main {
      font-weight: 500 !important;
      font-size: 24px;
      line-height: 64px;
      color: #333;
    }
    core-item.core-selected {
      color: #0092f3;
      font-weight: initial;
    }
    core-selector {
      display: flex;
      flex-wrap: wrap;
    }
    iframe {
      position: absolute;
      height: 100%;
      width: 100%;
      border: 0;
    }
    iframe.hidden {
      visibility: hidden;  /** don't use display: none: iframe should always have real size */
    }
    paper-button {
      background: rgba(0, 0, 0, 0.1);
      font-weight: 400;
      min-width: 52px;
      color: #222;
      z-index: 1;
    }
    paper-button core-icon {
      height: 19px !important;  /** fit inside button */
    }
    paper-button.dark {
      background: rgba(255, 255, 255, 0.1);
      color: #ccc;
    }
    paper-button#switch {
      position: absolute;
      top: 0;
      right: 0;
      margin: 24px;
      min-width: 100px;
    }
    paper-button#samples {
      position: absolute;
      top: 0;
      left: 0;
      margin: 24px;
      display: none;
    }
    @media (max-width: 600px) {
      /** Only show when sidebar is hidden. */
      paper-button#samples {
        display: block;
      }
    }

    #infobox {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 4px 10px;
      z-index: 100;
      margin: 12px;
      border-radius: 4px;
      background: rgba(0, 146, 243, 0.75);
      color: white;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
      max-width: 600px;
    }
    #infobox p {
      margin: 4px 0;
    }
    #infobox p.header {
      font-weight: 400;
    }
    #infobox a {
      text-decoration: underline;
    }
    @media (max-width: 600px) {
      /** Fit whole screen when sidebar is hidden. */
      #infobox {
        right: 0;
        max-width: none;
      }
    }

    pre {
      margin: 0;
      padding: 16px 24px;
      font-size: 14px;
      font-family: "Inconsolata", monospace;
      white-space: pre-wrap;
    }
    @media (max-width: 800px) {
      pre {
        padding: 8px 12px;
        font-size: 12px;
      }
    }
    @media (max-width: 500px) {
      pre {
        padding: 4px 6px;
        font-size: 10px;
      }
    }
    </style>
    <core-scaffold id="scaffold">
      <core-header-panel navigation flex mode="seamed">
        <core-menu theme="core-light-theme" selected={{selectedHash}} valueattr="data-hash" on-core-select={{selectAction}}>
          <core-item label="Web Animations" data-hash="" class="main">
            <paper-ripple class="menu" fit=""></paper-ripple>
          </core-item>
          <template repeat={{model}}>
            <core-item label={{name}} data-hash="{{hash}}">
              <paper-ripple class="menu" fit=""></paper-ripple>
            </core-item>
          </template>
        </core-menu>
      </core-header-panel>

      <div hidden?="{{showCode}}">
        <div id="infobox" hidden?="{{!selected.description && !selected.header}}">
          <template repeat="{{selected.header}}">
            <p class="header">{{}}</p>
          </template>
          <template repeat="{{selected.description}}">
            <p>{{}}</p>
          </template>
        </div>
      </div>

      <paper-button id="samples" on-tap="{{handleCode}}" class="{{ {dark: selected.darkTheme && !showCode} | tokenList }}">
        <core-icon icon="menu"></core-icon>
      </paper-button>

      <template if="{{selected}}">
        <paper-button id="switch" on-tap="{{handleSwitch}}" class="{{ {dark: selected.darkTheme && !showCode} | tokenList }}">
          <template if="{{showCode}}">
            Demo
          </template>
          <template if="{{!showCode}}">
            Code
          </template>
        </paper-button>
      </template>

      <div fit>
        <template if="{{selected}}">
          <template if="{{showCode}}">
            <core-ajax url="{{selected.path}}" handleAs="text" response="{{sampleCode}}" auto></core-ajax>
            <pre>{{sampleCode}}</pre>
          </template>
          <iframe class="{{ {hidden: showCode} | tokenList }}" src="{{iframeURL}}">></iframe>

        </template>
        <template if="{{!selected}}">
          <core-selector on-core-select={{selectAction}}>
            <web-animations-demo-card demo="{{infoDemo}}" href="https://github.com/web-animations"></web-animations-demo-card>
            <template repeat="{{model}}">
              <web-animations-demo-card data-hash="{{hash}}" demo="{{}}">
              </web-animations-demo-card>
            </template>
          </core-selector>
        </template>
      </div><!-- div fit -->
    </core-scaffold>
  </template>
</polymer-element>

<script>
Polymer('web-animations-demos', {
  /**
   * Whether to show code (as opposed to the demo).
   *
   * @attribute showCode
   * @type boolean
   * @default false
   */
  showCode: false,

  /**
   * The selected sample's HTML.
   *
   * @attribute sampleCode
   * @type String
   * @default null
   */
  sampleCode: null,

  /**
   * Used as the document title prefix.
   */
  defaultTitle_: document.title,

  /**
   * Fake 'demo' for information.
   */
  infoDemo: {
    shade: 'black',
    darkTheme: true,
    preview: 'resources/icons/github.png',
    name: 'Web Animations on GitHub',
  },

  selected: null,
  selectedHash: null,
  iframeURL: '',

  selectAction: function(e, detail) {
    if (detail.isSelected) {
      var hash = detail.item.dataset.hash || '';
      if (!hash && 'pushState' in history) {
        // Use the HTML5 History API to clear the hash symbol itself '#'.
        history.pushState("", document.title, window.location.pathname + window.location.search);
      } else {
        window.location.hash = hash;
      }
      this.hashchange();
    }
    this.$.scaffold.closeDrawer();
  },
  hashchange: function() {
    var hash = window.location.hash;
    var demo = null;
    if (hash) {
      for (var i = 0; i < this.model.length; i++) {
        if (this.model[i].hash == hash) {
          demo = this.model[i];
          break;
        }
      }
    }

    if (this.selected != demo && window.ga) {
      ga('set', 'page', window.location.pathname + window.location.hash);
      ga('send', 'pageview');
    }

    this.selected = demo;
    this.selectedHash = demo ? demo.hash: '';
    this.iframeURL = demo ? demo.path : '';
    this.setTitle(demo);
  },
  setTitle: function(demo) {
    if (demo) {
      document.title = demo.name + ' - ' + this.defaultTitle_;
    } else {
      document.title = this.defaultTitle_;
    }
  },
  ready: function() {
    this.hashchange = this.hashchange.bind(this);
    window.addEventListener('hashchange', this.hashchange);
    window.setTimeout(this.hashchange, 0);
  },
  handleSwitch: function() {
    this.showCode = !this.showCode;
  },
  handleCode: function() {
    this.$.scaffold.togglePanel();
  }
});
</script>

<web-animations-demos></web-animations-demos>
<script src="demos.js"></script>
<script>
function normalizeDemo(demo) {
  if (!demo.path) {
    demo.path = demo.name.toLowerCase();
  }
  demo.hash = '#' + demo.path;
  if (typeof demo.description == 'string') {
    demo.description = [demo.description];
  }
  if (typeof demo.header == 'string') {
    demo.header = [demo.header];
  }

  if (!demo.shade) {
    var hue = Math.random() * 360;
    demo.shade = 'hsl(' + hue + ', 85%, 67%)';
  }
}
demos.forEach(normalizeDemo);

document.querySelector('web-animations-demos').model = demos;
</script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-82759618-1', 'auto');
  ga('send', 'pageview');
</script>
</body>
</html>