From 97d91b3cda7ad46fed7e174283cd92c009604b68 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Thu, 10 Oct 2013 14:51:55 -0700
Subject: [PATCH] polymer-ui-animated-pages: polymer-ui-pages with transitions

---
 polymer-ui-animated-pages/index.html          | 180 ++++++++++++++++++
 polymer-ui-animated-pages/metadata.html       |  15 ++
 .../polymer-ui-animated-pages.html            | 114 +++++++++++
 3 files changed, 309 insertions(+)
 create mode 100644 polymer-ui-animated-pages/index.html
 create mode 100644 polymer-ui-animated-pages/metadata.html
 create mode 100644 polymer-ui-animated-pages/polymer-ui-animated-pages.html
diff --git a/polymer-ui-animated-pages/index.html b/polymer-ui-animated-pages/index.html
new file mode 100644
index 0000000..84936f2
--- /dev/null
+++ b/polymer-ui-animated-pages/index.html
@@ -0,0 +1,180 @@
+<!doctype html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html class="polymer-ui-full-bleed">
+  <head>
+    <title>polymer-ui-animated-pages</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <!-- load toolkit -->
+    <script src="../../polymer/polymer.js"></script>
+    <!-- import elements-->
+    <link rel="import" href="../../polymer-elements/polymer-animation/polymer-animation.html">
+    <link rel="import" href="../polymer-ui-toolbar/polymer-ui-toolbar.html">
+    <link rel="import" href="polymer-ui-animated-pages.html">
+    <!-- -->
+    <link rel="stylesheet" href="../basic.css">
+    <style>
+      polymer-ui-animated-pages-demo {
+        display: block;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body class="polymer-ui-body-text polymer-ui-full-bleed polymer-ui-light-bg">
+    <polymer-element name="polymer-ui-animated-pages-demo" attributes="page directional transitionInIndex transitionIn transitionOutIndex transitionOut">
+      <template>
+        <style>
+          polymer-ui-toolbar {
+            padding: 10px;
+          }
+          polymer-ui-toolbar label {
+            font-size: 12px;
+          }
+          polymer-ui-toolbar .spacer {
+            display: inline-block;
+            width: 5px;
+          }
+          polymer-ui-animated-pages {
+            display: block;
+            height: 100%;
+          }
+          polymer-ui-animated-pages > div {
+            display: -webkit-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 100px;
+            color: white;
+          }
+          .grid {
+            background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQIW2NkQAX/GZH4/4FsRpgAmAOSBBFwDkgAAIKuBATRTAAZAAAAAElFTkSuQmCC) repeat;
+          }
+          .brick {
+            background: green url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQIW2NkwAT/GdHE/gP5jMiCYAGQIpggTACuEq4CatR/ABtJBwTL3L3TAAAAAElFTkSuQmCC) repeat;
+          }
+          .wave {
+            background: orange url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPklEQVQYV2NkwAT/gUKM6MLoAjBFGIqRFaJLovBhCrFaB7QeLg5SiEsRzJlgeQxHY/EcSOg/sQoxgwGHiQwA+f4KCL3Y/AQAAAAASUVORK5CYII=) repeat;
+          }
+          .dots {
+            background: purple url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
+          }
+          .diamonds {
+            background: blue url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAUElEQVQYV2NkYGAwBuKzQAwDID4IoIgxIikAMZE1oRiArBDdZBSNMIXoJiFbDZYDKcSmCOYimDuNSVKIzRNYrUYOFuQgweoZbIoxgoeoAAcAEckW11HVTfcAAAAASUVORK5CYII=) repeat;
+          }
+        </style>
+        <polymer-ui-toolbar>
+          <button on-tap="rewindAction">&laquo;</button>
+          <button on-tap="forwardAction">&raquo;</button>
+          <span class="spacer"></span>
+          <button>+</button>
+          <span class="spacer"></span>
+          <label>
+            Directional:
+            <input type="checkbox" checked="{{directional}}">
+          </label>
+          <label>
+            TransIn:
+            <select id="transitionInSelect" selectedIndex="{{transitionInIndex}}">
+              <option>none</option>
+              <option>fade-in</option>
+              <option>hslide-in</option>
+            </select>
+          </label>
+          <span class="spacer"></span>
+          <label>
+            TransOut:
+            <select id="transitionOutSelect" selectedIndex="{{transitionOutIndex}}">
+              <option>none</option>
+              <option>fade-out</option>
+              <option>hslide-out</option>
+              <option>scale-out</option>
+            </select>
+          </label>
+        </polymer-ui-toolbar>
+        <polymer-ui-animated-pages selected="{{page}}" directional?="{{directional}}" transitionIn="{{transitionIn}}" transitionOut="{{transitionOut}}">
+          <div class="grid">One</div>
+          <div class="brick">Two</div>
+          <div class="wave">Three</div>
+          <div class="dots">Four</div>
+          <div class="diamonds">Five</div>
+        </polymer-ui-animated-pages>
+        <polymer-animation id="fade-in" duration="0.5">
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="opacity" value="0"></polymer-animation-prop>
+          </polymer-animation-keyframe>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="opacity" value="1"></polymer-animation-prop>
+          </polymer-animation-keyframe>
+        </polymer-animation>
+        <polymer-animation id="fade-out" duration="0.5">
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="opacity" value="1"></polymer-animation-prop>
+          </polymer-animation-keyframe>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="opacity" value="0"></polymer-animation-prop>
+          </polymer-animation-keyframe>
+        </polymer-animation>
+        <polymer-animation id="hslide-in" duration="0.5">
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="transform" value="translateX(100%)"></polymer-animation-prop>
+          </polymer-animation-keyframe>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="transform" value="translateX(0)"></polymer-animation-prop>
+          </polymer-animation-keyframe>
+        </polymer-animation>
+        <polymer-animation id="hslide-out" duration="0.5">
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="transform" value="translateX(0)"></polymer-animation-prop>
+          </polymer-animation-keyframe>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="transform" value="translateX(-100%)"></polymer-animation-prop>
+          </polymer-animation-keyframe>
+        </polymer-animation>
+        <polymer-animation id="scale-out" duration="0.5">
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="transform" value="scale(1)"></polymer-animation-prop>
+          </polymer-animation-keyframe>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="transform" value="scale(0.8)"></polymer-animation-prop>
+          </polymer-animation-keyframe>
+        </polymer-animation>
+      </template>
+      <script>
+        Polymer('polymer-ui-animated-pages-demo', {
+          page: 0,
+          directional: true,
+          transitionInIndex: 2,
+          transitionOutIndex: 2,
+          ready: function() {
+            this.transitionInIndexChanged();
+            this.transitionOutIndexChanged();
+          },
+          transitionInIndexChanged: function() {
+            var transitionInId = this.$.transitionInSelect.selectedOptions[0].textContent;
+            this.transitionIn = this.$[transitionInId];
+          },
+          transitionOutIndexChanged: function() {
+            var transitionOutId = this.$.transitionOutSelect.selectedOptions[0].textContent;
+            this.transitionOut = this.$[transitionOutId];
+          },
+          rewindAction: function() {
+            this.page -= 1;
+            if (this.page < 0) {
+              this.page = this.directional ? this.page + 1 : 4;
+            }
+          },
+          forwardAction: function() {
+            this.page += 1;
+            if (this.page > 4) {
+              this.page = this.directional ? this.page - 1 : 0;
+            }
+          }
+        });
+      </script>
+    </polymer-element>
+    <polymer-ui-animated-pages-demo></polymer-ui-animated-pages-demo>
+  </body>
+</html>
diff --git a/polymer-ui-animated-pages/metadata.html b/polymer-ui-animated-pages/metadata.html
new file mode 100644
index 0000000..db2766b
--- /dev/null
+++ b/polymer-ui-animated-pages/metadata.html
@@ -0,0 +1,15 @@
+﻿<x-meta id="polymer-ui-animated-pages" label="Polymer Animated Pages" isContainer>
+  <template>
+    <polymer-ui-animated-pages style="width: 400px; height: 400px;">
+      <section>
+        Page One
+      </section>
+      <section>
+        Page Two
+      </section>
+    </polymer-ui-animated-pages>
+  </template>
+  <template id="imports">
+    <link rel="import" href="polymer-ui-animated-pages.html">
+  </template>
+</x-meta>
\ No newline at end of file
diff --git a/polymer-ui-animated-pages/polymer-ui-animated-pages.html b/polymer-ui-animated-pages/polymer-ui-animated-pages.html
new file mode 100644
index 0000000..4e845e7
--- /dev/null
+++ b/polymer-ui-animated-pages/polymer-ui-animated-pages.html
@@ -0,0 +1,114 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<!--
+/**
+ * @module Polymer UI Elements
+ */
+-->
+<!--
+/**
+ * polymer-ui-animated-pages
+ *
+ * @class polymer-ui-animated-pages
+ * @extends polymer-selector
+ */
+-->
+
+<link rel="import" href="../../polymer-elements/polymer-animation/web-animations.html">
+<link rel="import" href="../polymer-ui-pages/polymer-ui-pages.html">
+
+<polymer-element name="polymer-ui-animated-pages" extends="polymer-ui-pages" selected="0" notap attributes="directional transitionIn transitionOut prevSelectedItem">
+ 	<script>
+ 		Polymer('polymer-ui-animated-pages', {
+      /**
+       * Set this property to true if the direction of the transition
+       * animation depends on the order of the pages that are being
+       * transitioned. For example, sliding right to transition to the next
+       * page and sliding left to transition to the previous page is
+       * directional, while fading between pages is not.
+       *
+       * @attribute directional
+       * @type boolean
+       * @default false
+       */
+      directional: false,
+      /**
+       * An animation for the page it's transitioning to. Set this and
+       * transitionOut to null for no animations.
+       *
+       * @attribute transitionIn
+       * @type polymer-animation
+       */
+      transitionIn: null,
+      /**
+       * An animation for the page it's transitioning from. Set this and
+       * transitionIn to null for no animations.
+       *
+       * @attribute transitionOut
+       * @type polymer-animation
+       */
+      transitionOut: null,
+      prevSelectedItem: null,
+      applySelection: function(item, isSelected, force) {
+        // Do nothing if using a transition.
+        if (force || !this.hasTransition()) {
+          this.super(arguments);
+        }
+      },
+      valueForNode: function(node) {
+        return this.super(arguments) || node;
+      },
+      hasTransition: function() {
+        return this.transitionIn || this.transitionOut;
+      },
+      applyTransition: function() {
+        if (this.prevSelectedItem) {
+          this.animation = this.makeTransitionAnimation();
+          document.timeline.play(this.animation);
+          // Apply the class after the animation starts playing to prevent
+          // a flicker at the end of the animation.
+          this.async(function() {
+            this.applySelection(this.prevSelectedItem, false, true);
+            this.applySelection(this.selectedItem, true, true);
+          });
+        } else {
+          this.applySelection(this.selectedItem, true, true);
+        }
+      },
+      makeTransitionAnimation: function() {
+        var from = this.transitionOut.target = this.prevSelectedItem;
+        var to = this.transitionIn.target = this.selectedItem;
+        var direction = "normal";
+        if (this.directional) {
+          if (this.valueToIndex(from) > this.valueToIndex(to)) {
+            direction = 'reverse';
+            this.transitionOut.target = this.selectedItem;
+            this.transitionIn.target = this.prevSelectedItem;
+          }
+        }
+        var animation = new ParGroup([
+          this.transitionOut.makeAnimation(),
+          this.transitionIn.makeAnimation(),
+          // Both 'from' and 'to' items must be visible and have the default
+          // z-index. Overrides the class styles.
+          new Animation(from, [{'visibility': 'visible', 'z-index': 'auto'}]),
+          new Animation(to, [{'visibility': 'visible', 'z-index': 'auto'}])
+        ], {
+          fill: 'none',
+          direction: direction
+        });
+        return animation;
+      },
+      selectedItemChanged: function(oldItem) {
+        this.super(arguments);
+        this.prevSelectedItem = oldItem;
+        if (this.hasTransition()) {
+          this.applyTransition();
+        }
+      }
+ 		})
+ 	</script>
+</polymer-element>
