polymer-core-rails 0.1.0

data/app/assets/components/core-animated-pages/transitions/scale-up.html

@@ -0,0 +1,37 @@
+<!--
+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-transition-pages.html" rel="import">
+
+<core-style id="scale-up">
+  polyfill-next-selector { content: ':host > * [scale-up]'; }
+  ::content > * /deep/ [scale-up] {
+    -webkit-transition: -webkit-transform {{g.transitions.scaleDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1) {{g.transitions.scaleDelay || g.transitions.delay}} !important;
+    transition: transform {{g.transitions.scaleDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1) {{g.transitions.scaleDelay || g.transitions.delay}} !important;
+  }
+
+  polyfill-next-selector { content: ':host > .core-selected [scale-up]'; }
+  ::content > .core-selected /deep/ [scale-up]  {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [scale-up]'; }
+  ::content > [animate]:not(.core-selected) /deep/ [scale-up] {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+
+  polyfill-next-selector { content: ':host > .core-selected[animate] [scale-up]'; }
+  ::content > .core-selected[animate] /deep/ [scale-up]  {
+    z-index: 1000;
+  }
+</core-style>
+
+<core-transition-pages id="scale-up"></core-transition-pages>

data/app/assets/components/core-animated-pages/transitions/slide-down.html

@@ -0,0 +1,55 @@
+<!--
+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-transition-pages.html" rel="import">
+
+<core-style id="slide-down">
+  polyfill-next-selector { content: ':host.slide-down > * [slide-down]'; }
+  :host(.slide-down) ::content > * /deep/ [slide-down] {
+    -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  polyfill-next-selector { content: ':host > .core-selected [slide-down]'; }
+  ::content > .core-selected /deep/ [slide-down] {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-down]'; }
+  ::content > [animate]:not(.core-selected) /deep/ [slide-down] {
+    -webkit-transform: translateY(-100%);
+    transform: translateY(-100%);
+  }
+</core-style>
+
+<!--
+
+`slide-down` slides an element in the outgoing page from the top of the window and
+slides in an element in the incoming page from the top of the window during a page
+transition. You can configure the duration of the transition with the global variable
+`CoreStyle.g.transitions.slideDuration`.
+
+Example:
+
+    <core-animated-pages transition="slide-down">
+      <section>
+        <div id="div1" slide-down></div>
+      </section>
+      <section></section>
+    </core-animated-pages>
+
+@class slide-down
+@extends core-transition-pages
+@status beta
+@homepage github.io
+
+-->
+
+<core-transition-pages id="slide-down" activeClass="slide-down"></core-transition-pages>

data/app/assets/components/core-animated-pages/transitions/slide-from-bottom.html

@@ -0,0 +1,31 @@
+<!--
+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-transition-pages.html" rel="import">
+
+<core-style id="slide-from-bottom">
+  :host(.slide-from-bottom) ::content > * {
+    -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :host(.slide-from-bottom) ::content > .core-selected ~ [animate]:not(.core-selected) {
+    -webkit-transform: translateY(100%);
+  }
+
+  :host(.slide-from-bottom) ::content > [animate]:not(.core-selected) {
+    -webkit-transform: translateY(-100%);
+  }
+
+  :host(.slide-from-bottom) ::content > .core-selected {
+    -webkit-transform: none;
+  }
+</core-style>
+
+<core-transition-pages id="slide-from-bottom" scopeClass="slide-from-bottom"></core-transition-pages>

data/app/assets/components/core-animated-pages/transitions/slide-from-right.html

@@ -0,0 +1,35 @@
+<!--
+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-transition-pages.html" rel="import">
+
+<core-style id="slide-from-right">
+  polyfill-next-selector { content: ':host(.slide-from-right) > *'; }
+  :host(.slide-from-right) ::content > * {
+    -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  polyfill-next-selector { content: ':host(.slide-from-right) > .core-selected ~ [animate]:not(.core-selected)'; }
+  :host(.slide-from-right) ::content > .core-selected ~ [animate]:not(.core-selected) {
+    -webkit-transform: translateX(100%);
+  }
+
+  polyfill-next-selector { content: ':host(.slide-from-right) > [animate]:not(.core-selected)'; }
+  :host(.slide-from-right) ::content > [animate]:not(.core-selected) {
+    -webkit-transform: translateX(-100%);
+  }
+
+  polyfill-next-selector { content: ':host(.slide-from-right) > .core-selected'; }
+  :host(.slide-from-right) ::content > .core-selected {
+    -webkit-transform: none;
+  }
+</core-style>
+
+<core-transition-pages id="slide-from-right" scopeClass="slide-from-right"></core-transition-pages>

data/app/assets/components/core-animated-pages/transitions/slide-up.html

@@ -0,0 +1,82 @@
+<!--
+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-transition-pages.html" rel="import">
+
+<core-style id="slide-up">
+  polyfill-next-selector { content: ':host.slide-up > * [slide-up]'; }
+  :host(.slide-up) ::content > * /deep/ [slide-up] {
+    -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  polyfill-next-selector { content: ':host > .core-selected [slide-up]'; }
+  ::content > .core-selected /deep/ [slide-up] {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up]'; }
+  ::content > [animate]:not(.core-selected) /deep/ [slide-up] {
+    -webkit-transform: translateY(150%);
+    transform: translateY(150%);
+  }
+</core-style>
+
+<core-style id="slide-up-offscreen">
+  polyfill-next-selector { content: ':host.slide-up-offscreen > * [slide-up-offscreen]'; }
+  :host(.slide-up-offscreen) ::content > * /deep/ [slide-up-offscreen] {
+    -webkit-transition: -webkit-transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform {{g.transitions.slideDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  polyfill-next-selector { content: ':host > .core-selected [slide-up-offscreen]'; }
+  ::content > .core-selected /deep/ [slide-up-offscreen] {
+    -webkit-transform: none;
+    transform: none;
+  }
+
+  polyfill-next-selector { content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]'; }
+  ::content > [animate]:not(.core-selected) /deep/ [slide-up-offscreen] {
+    -webkit-transform: translateY(100vh);
+    transform: translateY(100vh);
+    z-index: -1;
+  }
+
+  polyfill-rule {
+    content: ':host > [animate]:not(.core-selected) [slide-up-offscreen]';
+    -webkit-transform: translateY(1000px);
+  }
+</core-style>
+
+<!--
+
+`slide-up` slides an element in the outgoing page from the bottom of the window
+and slides in an element in the incoming page from the bottom of the window during
+a page transition. You can configure the duration of the transition with the global
+variable `CoreStyle.g.transitions.slideDuration`.
+
+Example:
+
+    <core-animated-pages transition="slide-up">
+      <section>
+        <div id="div1" slide-up></div>
+      </section>
+      <section></section>
+    </core-animated-pages>
+
+@class slide-up
+@extends core-transition-pages
+@status beta
+@homepage github.io
+
+-->
+
+<core-transition-pages id="slide-up" activeClass="slide-up"></core-transition-pages>
+<core-transition-pages id="slide-up-offscreen" activeClass="slide-up-offscreen"></core-transition-pages>

data/app/assets/components/core-animated-pages/transitions/tile-cascade.html

@@ -0,0 +1,101 @@
+<!--
+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-transition-pages.html" rel="import">
+
+<core-style id="tile-cascade">
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div {
+    -webkit-transition: -webkit-transform {{g.transitions.cascadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascadeFadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform {{g.transitions.cascadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1), opacity {{g.transitions.cascadeFadeDuration || g.transitions.duration}} cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(2)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(2) {
+    -webkit-transition-delay: 0.05s;
+    transition-delay: 0.05s;
+  }
+
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(3)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(3) {
+    -webkit-transition-delay: 0.1s;
+    transition-delay: 0.1s;
+  }
+  
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(4)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(4) {
+    -webkit-transition-delay: 0.15s;
+    transition-delay: 0.15s;
+  }
+  
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(5)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(5) {
+    -webkit-transition-delay: 0.2s;
+    transition-delay: 0.2s;
+  }
+  
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(6)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(6) {
+    -webkit-transition-delay: 0.25s;
+    transition-delay: 0.25s;
+  }
+  
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(7)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(7) {
+    -webkit-transition-delay: 0.3s;
+    transition-delay: 0.3s;
+  }
+  
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(8)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(8) {
+    -webkit-transition-delay: 0.35s;
+    transition-delay: 0.35s;
+  }
+  
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(9)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(9) {
+    -webkit-transition-delay: 0.4s;
+    transition-delay: 0.4s;
+  }
+  
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(10)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(10) {
+    -webkit-transition-delay: 0.45s;
+    transition-delay: 0.45s;
+  }
+  
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(11)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(11) {
+    -webkit-transition-delay: 0.5s;
+    transition-delay: 0.5s;
+  }
+  
+  polyfill-next-selector { content: ':host(.tile-cascade) > * [tile-cascade] > div:nth-of-type(12)'; }
+  :host(.tile-cascade) ::content > * /deep/ [tile-cascade] > div:nth-of-type(12) {
+    -webkit-transition-delay: 0.55s;
+    transition-delay: 0.55s;
+  }
+  
+  polyfill-next-selector { content: '.core-selected [tile-cascade] > div'; }
+  ::content > .core-selected /deep/ [tile-cascade] > div {
+  }
+
+  polyfill-next-selector { content: '[animate]:not(.core-selected) [tile-cascade] > div'; }
+  ::content > [animate]:not(.core-selected) /deep/ [tile-cascade] > div {
+    -webkit-transform: translateY(100%);
+    transform: translateY(100%);
+  }
+
+  polyfill-next-selector { content: '[animate]:not(.core-selected) [tile-cascade][fade] > div'; }
+  ::content > [animate]:not(.core-selected) /deep/ [tile-cascade][fade] > div {
+    opacity: 0;
+  }
+</core-style>
+
+<core-transition-pages id="tile-cascade" activeClass="tile-cascade" transitionProperty="transform"></core-transition-pages>

data/app/assets/components/core-animation/core-animation-group.html.erb

@@ -0,0 +1,168 @@
+<!--
+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
+-->
+
+<%= html_import_tag "core-animation/core-animation" %>
+
+<!--
+@group Polymer Core Elements
+
+`core-animation-group` combines `core-animation` or `core-animation-group` elements to
+create a grouped web animation. The group may be parallel (type is `par`) or sequential
+(type is `seq`). Parallel groups play all the children elements simultaneously, and
+sequential groups play the children one after another.
+
+Example of an animation group to rotate and then fade an element:
+
+    <core-animation-group type="seq">
+      <core-animation id="fadeout" duration="500">
+        <core-animation-keyframe>
+          <core-animation-prop name="transform" value="rotate(0deg)"></core-animation-prop>
+          <core-animation-prop name="transform" value="rotate(45deg)"></core-animation-prop>
+        </core-animation-keyframe>
+      </core-animation>
+      <core-animation id="fadeout" duration="500">
+        <core-animation-keyframe>
+          <core-animation-prop name="opacity" value="1"></core-animation-prop>
+        </core-animation-keyframe>
+        <core-animation-keyframe>
+          <core-animation-prop name="opacity" value="0"></core-animation-prop>
+        </core-animation-keyframe>
+      </core-animation>
+    </core-animation-group>
+
+@element core-animation-group
+@status beta
+@homepage github.io
+-->
+<polymer-element name="core-animation-group" constructor="CoreAnimationGroup" extends="core-animation" attributes="type">
+  <script>
+    (function() {
+
+      var ANIMATION_GROUPS = {
+        'par': AnimationGroup,
+        'seq': AnimationSequence
+      };
+
+      Polymer({
+
+        publish: {
+          /**
+           * If target is set, any children without a target will be assigned the group's
+           * target when this property is set.
+           *
+           * @property target
+           * @type HTMLElement|Node|Array|Array<HTMLElement|Node>
+           */
+
+          /**
+           * For a `core-animation-group`, a duration of "auto" means the duration should
+           * be the specified duration of its children. If set to anything other than
+           * "auto", any children without a set duration will be assigned the group's duration.
+           *
+           * @property duration
+           * @type number
+           * @default "auto"
+           */
+          duration: {value: 'auto', reflect: true},
+
+          /**
+           * The type of the animation group. 'par' creates a parallel group and 'seq' creates
+           * a sequential group.
+           *
+           * @property type
+           * @type String
+           * @default 'par'
+           */
+          type: {value: 'par', reflect: true}
+        },
+
+        typeChanged: function() {
+          this.apply();
+        },
+
+        targetChanged: function() {
+          // Only propagate target to children animations if it's defined.
+          if (this.target) {
+            this.doOnChildren(function(c) {
+              c.target = this.target;
+            }.bind(this));
+          }
+        },
+
+        durationChanged: function() {
+          if (this.duration && this.duration !== 'auto') {
+            this.doOnChildren(function(c) {
+              // Propagate to children that is not a group and has no
+              // duration specified.
+              if (!c.type && (!c.duration || c.duration === 'auto')) {
+                c.duration = this.duration;
+              }
+            }.bind(this));
+          }
+        },
+
+        doOnChildren: function(inFn) {
+          var children = this.children;
+          if (!children.length) {
+            children = this.shadowRoot ? this.shadowRoot.childNodes : [];
+          }
+          Array.prototype.forEach.call(children, function(c) {
+            // TODO <template> in the way
+            c.apply && inFn(c);
+          }, this);
+        },
+
+        makeAnimation: function() {
+          return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps);
+        },
+
+        hasTarget: function() {
+          var ht = this.target !== null;
+          if (!ht) {
+            this.doOnChildren(function(c) {
+              ht = ht || c.hasTarget();
+            }.bind(this));
+          }
+          return ht;
+        },
+
+        apply: function() {
+          // Propagate target and duration to child animations first.
+          this.durationChanged();
+          this.targetChanged();
+          this.doOnChildren(function(c) {
+            c.apply();
+          });
+          return this.super();
+        },
+
+        get childAnimationElements() {
+          var list = [];
+          this.doOnChildren(function(c) {
+            if (c.makeAnimation) {
+              list.push(c);
+            }
+          });
+          return list;
+        },
+
+        get childAnimations() {
+          var list = [];
+          this.doOnChildren(function(c) {
+            if (c.animation) {
+              list.push(c.animation);
+            }
+          });
+          return list;
+        }
+      });
+
+    })();
+  </script>
+</polymer-element>