polymer-core-rails 0.1.0 → 0.2.0

data/app/assets/components/core-animated-pages/{core-animated-pages.html.erb → core-animated-pages.html}

@@ -1,6 +1,16 @@
-<%= html_import_tag "core-selector/core-selector" %>
-<%= html_import_tag "core-animated-pages/transitions/hero-transition" %>
-<%= html_import_tag "core-animated-pages/transitions/cross-fade" %>
+<!--
+    @license
+    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
+-->
+<link href="../core-selector/core-selector.html" rel="import">
+
+<link href="transitions/hero-transition.html" rel="import">
+<link href="transitions/cross-fade.html" rel="import">
 
 <!--
 
@@ -70,8 +80,8 @@ In general, a transition is applied to elements marked with a certain attribute.
 Among the transitions included with `core-animated-pages`, script-based transitions such as
 `hero-transition` generally look for elements up to one level of shadowRoot from the
 `core-animated-pages` element, and CSS-based transitions such as `cross-fade` look for elements
-within any shadowRoot within the `core-animated-pages` element. This means you can use
-custom elements as pages and mark elements in their shadowRoots as heroes, or mark
+within any shadowRoot within the `core-animated-pages` element. This means you can use 
+custom elements as pages and mark elements in their shadowRoots as heroes, or mark 
 elements in deeper shadowRoots with other transitions.
 
 Example:
@@ -162,7 +172,7 @@ Dynamically setting up transitions
 ----------------------------------
 
 An easy way to dynamically set up transitions dynamically is to use property binding on
-the transition attributes.
+the transition attributes. 
 
 Example:
 
@@ -207,10 +217,18 @@ Example:
     </core-animated-pages>
 
 @element core-animated-pages
+@extends core-selector
 @status beta
 @homepage github.io
 -->
 <!--
+Fired before a page transition occurs. Both pages involved in the transition are visible when
+this event fires. This is useful if there is something the client needs to do when a page becomes
+visible.
+
+@event core-animated-pages-transition-prepare
+-->
+<!--
 Fired when a page transition completes.
 
 @event core-animated-pages-transition-end
@@ -219,7 +237,7 @@ Fired when a page transition completes.
 
 <template>
 
-  <%= stylesheet_link_tag "core-animated-pages/core-animated-pages" %>
+  <link href="core-animated-pages.css" rel="stylesheet">
 
   <shadow></shadow>
 
@@ -308,7 +326,7 @@ Fired when a page transition completes.
       if (this.transitioning.indexOf(dst) === -1) {
         this.transitioning.push(dst);
       }
-      // force src, dst to display
+      // force src, dst to display 
       src.setAttribute('animate', '');
       dst.setAttribute('animate', '');
       //
@@ -317,6 +335,11 @@ Fired when a page transition completes.
         dst: dst,
         easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
       }
+
+      // fire an event so clients have a chance to do something when the
+      // new page becomes visible but before it draws.
+      this.fire('core-animated-pages-transition-prepare');
+
       //
       // prepare transition
       this._transitionElements.forEach(function(transition) {
@@ -360,7 +383,7 @@ Fired when a page transition completes.
 
       this.fire('core-animated-pages-transition-end');
     },
-
+    
     transitionEnd: function(e) {
       if (this.transitioning.length) {
         var completed = true;

data/app/assets/components/core-animated-pages/demo.html

@@ -0,0 +1,23 @@
+<!--
+    @license
+    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
+-->
+<a href="demos/simple.html">pluggable transitions</a>
+<br>
+<a href="demos/news.html">icon to top bar</a>
+<br>
+<a href="demos/music.html">chip to card</a>
+<br>
+<a href="demos/list.html">list reorder</a>
+<br>
+<a href="demos/grid.html">grid to full screen</a>
+<br>
+<a href="demos/nested.html">nested core-animated-pages</a>
+<br>
+<a href="demos/quiz1.html">quiz: category to splash to question</a>
+<br>

data/app/assets/components/core-animated-pages/demos/grid.html

@@ -0,0 +1,113 @@
+<!--
+    @license
+    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
+-->
+<!doctype html>
+<html>
+<head>
+
+  <script src="../../platform/platform.js"></script>
+
+  <link href="../../core-icons/core-icons.html" rel="import">
+  <link href="../../core-icon-button/core-icon-button.html" rel="import">
+  <link href="../../core-toolbar/core-toolbar.html" rel="import"> 
+  <link href="../core-animated-pages.html" rel="import">
+
+  <style>
+    body {
+      font-family: sans-serif;
+    }
+
+    .toolbar {
+      background-color: steelblue;
+    }
+
+    #container {
+      overflow: auto;
+    }
+
+    .card {
+      position: relative;
+      height: 150px;
+      width: 150px;
+      font-size: 50px;
+      margin: 8px;
+      background-color: tomato;
+      border-radius: 4px;
+      cursor: default;
+    }
+
+    .view {
+      font-size: 250px;
+      background-color: tomato;
+    }
+
+  </style>
+
+</head>
+<body unresolved fullbleed vertical layout>
+  <template is="auto-binding">
+    <core-toolbar class="toolbar">
+      <core-icon-button icon="{{$.pages.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{back}}"></core-icon-button>
+      <div flex>Stuff</div>
+      <core-icon-button icon="more-vert"></core-icon-button>
+    </core-toolbar>
+    <core-animated-pages id="pages" flex selected="0" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all hero-transition">
+
+      <section vertical layout>
+
+        <div id="container" flex horizontal wrap around-justified layout hero-p>
+          <template repeat="{{item in items}}">
+            <div class="card" vertical center center-justified layout hero-id="item-{{item}}" hero?="{{$.pages.selected === item + 1 || lastSelected === item + 1}}" on-tap="{{selectView}}"><span cross-fade>{{item}}</span></div>
+          </template>
+        </div>
+
+      </section>
+
+      <template repeat="{{item in items}}">
+        <section vertical layout>
+          <div class="view" flex vertical center center-justified layout hero-id="item-{{item}}" hero?="{{$.pages.selected === item + 1 || $.pages.selected === 0}}"><span cross-fade>{{item}}</span></div>
+        </section>
+      </template>
+
+    </core-animated-pages>
+  </template>
+
+  <script>
+
+    addEventListener('template-bound', function(e) {
+      var scope = e.target;
+      var items = [], count=50;
+      for (var i=0; i < count; i++) {
+        items.push(i);
+      }
+
+      scope.items = items;
+
+      scope.selectView = function(e) {
+        var i = e.target.templateInstance.model.item;
+        this.$.pages.selected = i+1;
+      }
+
+      scope.back = function() {
+        this.lastSelected = this.$.pages.selected;
+        console.log(this.lastSelected);
+        this.$.pages.selected = 0;
+      }
+
+      scope.transitionend = function() {
+        if (this.lastSelected) {
+          this.lastSelected = null;
+        }
+      }
+    })
+
+  </script>
+
+</body>
+</html>

data/app/assets/components/core-animated-pages/demos/list.html

@@ -0,0 +1,126 @@
+<!--
+    @license
+    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
+-->
+<!doctype html>
+<html>
+<head>
+
+  <script src="../../platform/platform.js"></script>
+  <link href="../core-animated-pages.html" rel="import">
+
+  <style>
+    body {
+      font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      margin: 0;
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <polymer-element name="list-demo">
+  <template>
+
+    <style>
+      p {
+        margin: 8px;
+      }
+
+      .item {
+        background: #e7e7e7;
+        padding: 16px;
+        margin: 8px;
+        border-radius: 3px;
+        box-sizing: border-box;
+        position: relative;
+      }
+    </style>
+
+    <p>Tap to move to top</p>
+
+    <core-animated-pages id="pages" on-tap="{{reorder}}" selected="{{selected}}" on-core-animated-pages-transition-end="{{done}}" transitions="hero-transition">
+
+      <section>
+        <template repeat="{{items}}">
+          <div hero-id="{{h}}" hero class="item">{{v}}</div>
+        </template>
+      </section>
+
+      <section>
+        <template repeat="{{items2}}">
+          <div hero-id="{{h}}" hero class="item">{{v}}</div>
+        </template>
+      </section>
+
+    </core-animated-pages>
+
+  </template>
+
+  <script>
+
+    Polymer('list-demo', {
+
+      selected: 0,
+
+      items: [
+        {h: 'matt', v: 'Matt McNulty'},
+        {h: 'scott', v: 'Scott Miles'},
+        {h: 'steve', v: 'Steve Orvell'},
+        {h: 'frankie', v: 'Frankie Fu'},
+        {h: 'daniel', v: 'Daniel Freedman'},
+        {h: 'yvonne', v: 'Yvonne Yip'},
+      ],
+
+      items2: [
+        {h: 'matt', v: 'Matt McNulty'},
+        {h: 'scott', v: 'Scott Miles'},
+        {h: 'steve', v: 'Steve Orvell'},
+        {h: 'frankie', v: 'Frankie Fu'},
+        {h: 'daniel', v: 'Daniel Freedman'},
+        {h: 'yvonne', v: 'Yvonne Yip'},
+      ],
+
+      reorder: function(e) {
+        if (this.$.pages.transitioning.length) {
+          return;
+        }
+
+        this.lastMoved = e.target;
+        this.lastMoved.style.zIndex = 10005;
+        var item = e.target.templateInstance.model;
+        var items = this.selected ? this.items : this.items2;
+        var i = this.selected ? this.items2.indexOf(item) : this.items.indexOf(item);
+        if (i != 0) {
+          items.splice(0, 0, item);
+          items.splice(i + 1, 1);
+        }
+
+        this.lastIndex = i;
+        this.selected = this.selected ? 0 : 1;
+      },
+
+      done: function() {
+        var i = this.lastIndex;
+        var items = this.selected ? this.items : this.items2;
+        var item = items[i];
+        items.splice(0, 0, item);
+        items.splice(i + 1, 1);
+        this.lastMoved.style.zIndex = null;
+      }
+    });
+
+  </script>
+
+  </polymer-element>
+
+  <list-demo></list-demo>
+
+</body>
+</html>

data/app/assets/components/core-animated-pages/demos/music.html

@@ -0,0 +1,182 @@
+<!--
+    @license
+    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
+-->
+<!doctype html>
+<html>
+<head>
+  <title>core-animated-pages</title>
+
+  <script src="../../platform/platform.js"></script>
+  <link href="../core-animated-pages.html" rel="import">
+
+  <style>
+    body {
+      font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      margin: 0;
+      background: #f1f1f1;
+    }
+
+    .green {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      height: 350px;
+      background: #70c26f;
+    }
+  </style>
+</head>
+<body>
+
+  <polymer-element name="music-demo">
+  <template>
+
+    <style>
+      .chip-container {
+        position: absolute;
+        top: 275px;
+        right: 0;
+        left: 0;
+        text-align: center;
+      }
+
+      .chip {
+        display: inline-block;
+        position: relative;
+        border-radius: 3px;
+        margin: 4px;
+        overflow: hidden;
+        text-align: start;
+        background-color: #fff;
+        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
+      }
+
+      .chip-top {
+        width: 200px;
+        height: 200px;
+      }
+
+      .chip-bottom {
+        padding: 8px;
+        line-height: 1.5;
+      }
+
+      .chip-album-title {
+        font-weight: bold;
+      }
+
+      #details {
+        padding: 200px 10% 0;
+      }
+
+      .card {
+        height: 400px;
+        border-radius: 3px;
+        text-align: start;
+        overflow: hidden;
+        background: #fff;
+        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+      }
+
+      .card-left {
+        width: 400px;
+      }
+
+      .card-right {
+        padding: 24px;
+      }
+
+      .card-icon {
+        border-radius: 50%;
+        width: 60px;
+        height: 60px;
+        margin-right: 16px;
+      }
+
+      .card-album-title {
+        font-size: 2em;
+      }
+    </style>
+
+    <core-animated-pages selected="{{page}}" transitions="hero-transition" on-core-animated-pages-transition-end="{{complete}}">
+
+      <section>
+
+        <div class="chip-container" hero-p on-tap="{{transition}}">
+
+          <template repeat="{{items as item}}">
+
+            <div class="chip" hero-id="{{item.artist}}-{{item.album}}" hero?="{{selectedAlbum === item }}">
+              <div class="chip-top" style="background:{{item.color}};" hero-id="{{item.artist}}-{{item.album}}-art" hero?="{{selectedAlbum === item}}"></div>
+              <div class="chip-bottom">
+                <div class="chip-album-title">{{item.album}}</div>
+                <div class="chip-artist">{{item.artist}}</div>
+              </div>
+            </div>
+
+          </template>
+
+        </div>
+      </section>
+
+      <section id="details">
+
+        <div class="card" layout horizontal hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}" hero on-tap="{{transition}}">
+          <div class="card-left" style="background:{{selectedAlbum.color}};" hero-id="{{selectedAlbum.artist}}-{{selectedAlbum.album}}-art" hero></div>
+          <div class="card-right" flex>
+            <div layout horizontal center>
+              <div>
+                <div class="card-icon" style="background:{{selectedAlbum.color}};"></div>
+              </div>
+              <div flex>
+                <div class="card-album-title">{{selectedAlbum.album}}</div>
+                <div class="card-album-artist">{{selectedAlbum.artist}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </section>
+
+    </core-animated-pages>
+
+  </template>
+  <script>
+
+    Polymer('music-demo', {
+
+      page: 0,
+
+      items: [
+        { artist: 'Tycho', album: 'Fragments', color: '#f4db33' },
+        { artist: 'Tycho', album: 'Past Prologue', color: '#972ff8' },
+        { artist: 'Tycho', album: 'Spectre', color: '#7dd6fe' },
+        { artist: 'Tycho', album: 'Awake', color: '#dc3c84' }
+      ],
+
+      selectedAlbum: null,
+
+      transition: function(e) {
+        if (this.page === 0 && e.target.templateInstance.model.item) {
+          this.selectedAlbum = e.target.templateInstance.model.item;
+          this.page = 1;
+        } else {
+          this.page = 0;
+        }
+      }
+    });
+
+  </script>
+  </polymer-element>
+
+  <div class="green"></div>
+
+  <music-demo></music-demo>
+</body>
+</html>

data/app/assets/components/core-animated-pages/demos/nested-animated-pages.html

@@ -0,0 +1,113 @@
+<!--
+    @license
+    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
+-->
+<link href="../../core-icons/core-icons.html" rel="import">
+<link href="../../core-icon-button/core-icon-button.html" rel="import">
+<link href="../core-animated-pages.html" rel="import">
+
+<polymer-element name="nested-animated-pages">
+<template>
+  <style>
+    :host {
+      display: block;
+      position: relative;
+    }
+
+    core-animated-pages {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    .tall-toolbar {
+      box-sizing: border-box;
+      height: 240px;
+    }
+
+    .tall-toolbar.colored {
+      fill: #fff;
+      color: #fff;
+    }
+
+    .tall-toolbar [flex] {
+      font-size: 1.5em;
+    }
+
+    core-icon-button {
+      margin: 16px;
+    }
+
+    .body {
+      background-color: #f1f1f1;
+    }
+
+    .square {
+      position: absolute;
+      width: 150px;
+      height: 150px;
+      left: 16px;
+      top: 175px;
+    }
+
+  </style>
+  <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedItem}}" transitions="hero-transition" no-transition?="{{noTransition}}">
+
+    <section id="page1" cross-fade>
+      <div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 || !noTransition}}">
+        <div layout horizontal center>
+          <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
+          <div flex>One</div>
+          <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
+        </div>
+        <div flex></div>
+      </div>
+      <div flex class="body"></div>
+    </section>
+
+    <section layout vertical id="page2" cross-fade>
+      <div class="tall-toolbar" layout vertical>
+        <div layout horizontal center>
+          <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>
+          <div flex>Two</div>
+          <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core-icon-button>
+        </div>
+        <div flex></div>
+      </div>
+      <div flex class="body"></div>
+      <div class="square" style="background-color:orange;" hero-id="thing" hero?="{{page === 1 || !noTransition}}"></div>
+    </section>
+
+  </core-animated-pages>
+</template>
+<script>
+
+  Polymer({
+
+    publish: {
+      page: {value: 0}
+    },
+
+    selectedItem: null,
+    noTransition: true,
+
+    back: function() {
+      this.noTransition = true;
+      this.fire('nested-back');
+    },
+
+    transition: function() {
+      this.noTransition = false;
+      this.page = this.page === 0 ? 1 : 0;
+    }
+
+  });
+</script>
+</polymer-element>