RubyGems - polymer-paper-rails - Versions diffs - 0.1.0 → 0.2.0 - Mend

polymer-paper-rails 0.1.0 → 0.2.0

Files changed (558) hide show

data/app/assets/components/core-animation/demo.html ADDED Viewed

@@ -0,0 +1,149 @@
+<!--
+    @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-animation</title>
+    <script src="../platform/platform.js"></script>
+    <link rel="import" href="core-animation.html">
+    <link rel="import" href="core-animation-group.html">
+<!--     <link rel="import" href="polymer-blink.html">
+    <link rel="import" href="polymer-bounce.html">
+    <link rel="import" href="polymer-fadein.html">
+    <link rel="import" href="polymer-fadeout.html">
+    <link rel="import" href="polymer-flip.html">
+    <link rel="import" href="polymer-shake.html">
+ -->
+    <style>
+      body {
+        text-align: center;
+        font-family: Helvetica, sans-serif;
+      }
+      div#target {
+        display: inline-block;
+        background-color: dimgrey;
+        border-radius: 5px;
+        padding: 5px 10px;
+        margin: 50px;
+        font-size: 30px;
+        color: white;
+      }
+      div.animations > * {
+        display: inline-block;
+        background-color: darkgrey;
+        border-radius: 5px;
+        padding: 5px 10px;
+        margin: 5px;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target">animated!</div>
+    <div class="animations">
+      <core-animation id="raw" duration="1000">
+        raw
+        <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.3">
+          </core-animation-prop>
+        </core-animation-keyframe>
+        <core-animation-keyframe>
+          <core-animation-prop name="opacity" value="1">
+          </core-animation-prop>
+        </core-animation-keyframe>
+      </core-animation>
+      <core-animation-group type="seq">
+        raw group
+        <core-animation duration="300">
+          <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.3">
+            </core-animation-prop>
+          </core-animation-keyframe>
+          <core-animation-keyframe>
+            <core-animation-prop name="opacity" value="1">
+            </core-animation-prop>
+          </core-animation-keyframe>
+        </core-animation>
+        <core-animation duration="300">
+          <core-animation-keyframe>
+            <core-animation-prop name="transform" value="scale(1)">
+            </core-animation-prop>
+          </core-animation-keyframe>
+          <core-animation-keyframe>
+            <core-animation-prop name="transform" value="scale(1.2)">
+            </core-animation-prop>
+          </core-animation-keyframe>
+          <core-animation-keyframe>
+            <core-animation-prop name="transform" value="scale(1)">
+            </core-animation-prop>
+          </core-animation-keyframe>
+        </core-animation>
+      </core-animation-group>
+      <core-animation id="custom-animation" duration="500">custom</core-animation>
+      <core-animation duration="1000" iterations="Infinity" direction="alternate">
+        infinite
+        <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.3">
+          </core-animation-prop>
+        </core-animation-keyframe>
+      </core-animation>
+<!--       <polymer-bounce duration="1000">bounce</polymer-bounce>
+      <polymer-shake>shake</polymer-shake>
+      <polymer-flip>flip X</polymer-flip>
+      <polymer-flip axis="y">flip Y</polymer-flip>
+      <polymer-blink>blink</polymer-blink>
+      <polymer-fadein>fade in</polymer-fadein>
+ -->    </div>
+    <script>
+      var customAnimationFn = function(timeFraction, target) {
+        if (timeFraction < 1) {
+          target.textContent = timeFraction;
+        } else {
+          target.textContent = 'animated!';
+        }
+      };
+      document.addEventListener('polymer-ready', function() {
+        document.querySelector('.animations').addEventListener('click',
+          function(e) {
+            var animation = e.target;
+            if (animation.id === 'custom-animation') {
+              animation.customEffect = customAnimationFn;
+            }
+            animation.target = target;
+            animation.play();
+          });
+          document.getElementById('raw').addEventListener(
+            'core-animation-finish', function(e) {
+              console.log('finish!');
+            });
+      });
+    </script>
+  </body>
+</html>

data/app/assets/components/core-animation/index.html ADDED Viewed

@@ -0,0 +1,22 @@
+<!doctype html>
+<!--
+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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="../core-component-page/core-component-page.html">
+</head>
+<body unresolved>
+  <core-component-page sources='["core-animation.html", "core-animation-group.html"]'></core-component-page>
+</body>
+</html>

data/app/assets/components/core-animation/web-animations.html ADDED Viewed

@@ -0,0 +1,10 @@
+<!--
+    @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
+-->
+<script src="../web-animations-js/web-animations.js"></script>

data/app/assets/components/core-collapse/README.md ADDED Viewed

@@ -0,0 +1,4 @@
+core-collapse
+=============
+See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-collapse) for more information.

data/app/assets/components/core-collapse/bower.json ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "name": "core-collapse",
+  "private": true,
+  "dependencies": {
+    "polymer": "Polymer/polymer#>=0.4.0 <1.0.0"
+  }
+}

data/app/assets/components/core-collapse/core-collapse.css ADDED Viewed

@@ -0,0 +1,16 @@
+/*
+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 /deep/ core-collapse {
+  display: block;
+}
+html /deep/ .core-collapse-closed {
+  display: none;
+}

data/app/assets/components/core-collapse/core-collapse.html ADDED Viewed

@@ -0,0 +1,262 @@
+<!--
+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
+-->
+<!--
+`core-collapse` creates a collapsible block of content.  By default, the content
+will be collapsed.  Use `opened` to show/hide the content.
+    <button on-click="{{toggle}}">toggle collapse</button>
+    <core-collapse id="collapse">
+      ...
+    </core-collapse>
+    ...
+    toggle: function() {
+      this.$.collapse.toggle();
+    }
+@group Polymer Core Elements
+@element core-collapse
+-->
+<link rel="import" href="../polymer/polymer.html">
+<link rel="stylesheet" href="core-collapse.css" shim-shadowdom>
+<polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize">
+<template>
+  <content></content>
+</template>
+<script>
+  Polymer('core-collapse', {
+    /**
+     * Fired when the `core-collapse`'s `opened` property changes.
+     *
+     * @event core-collapse-open
+     */
+    /**
+     * Fired when the target element has been resized as a result of the opened
+     * state changing.
+     *
+     * @event core-resize
+     */
+    /**
+     * The target element.
+     *
+     * @attribute target
+     * @type object
+     * @default null
+     */
+    target: null,
+    /**
+     * If true, the orientation is horizontal; otherwise is vertical.
+     *
+     * @attribute horizontal
+     * @type boolean
+     * @default false
+     */
+    horizontal: false,
+    /**
+     * Set opened to true to show the collapse element and to false to hide it.
+     *
+     * @attribute opened
+     * @type boolean
+     * @default false
+     */
+    opened: false,
+    /**
+     * Collapsing/expanding animation duration in second.
+     *
+     * @attribute duration
+     * @type number
+     * @default 0.33
+     */
+    duration: 0.33,
+    /**
+     * If true, the size of the target element is fixed and is set
+     * on the element.  Otherwise it will try to
+     * use auto to determine the natural size to use
+     * for collapsing/expanding.
+     *
+     * @attribute fixedSize
+     * @type boolean
+     * @default false
+     */
+    fixedSize: false,
+    created: function() {
+      this.transitionEndListener = this.transitionEnd.bind(this);
+    },
+    ready: function() {
+      this.target = this.target || this;
+    },
+    domReady: function() {
+      this.async(function() {
+        this.afterInitialUpdate = true;
+      });
+    },
+    detached: function() {
+      if (this.target) {
+        this.removeListeners(this.target);
+      }
+    },
+    targetChanged: function(old) {
+      if (old) {
+        this.removeListeners(old);
+      }
+      if (!this.target) {
+        return;
+      }
+      this.isTargetReady = !!this.target;
+      this.classList.toggle('core-collapse-closed', this.target !== this);
+      this.target.style.overflow = 'hidden';
+      this.horizontalChanged();
+      this.addListeners(this.target);
+      // set core-collapse-closed class initially to hide the target
+      this.toggleClosedClass(true);
+      this.update();
+    },
+    addListeners: function(node) {
+      node.addEventListener('transitionend', this.transitionEndListener);
+    },
+    removeListeners: function(node) {
+      node.removeEventListener('transitionend', this.transitionEndListener);
+    },
+    horizontalChanged: function() {
+      this.dimension = this.horizontal ? 'width' : 'height';
+    },
+    openedChanged: function() {
+      this.update();
+      this.fire('core-collapse-open', this.opened);
+    },
+    /**
+     * Toggle the opened state.
+     *
+     * @method toggle
+     */
+    toggle: function() {
+      this.opened = !this.opened;
+    },
+    setTransitionDuration: function(duration) {
+      var s = this.target.style;
+      s.transition = duration ? (this.dimension + ' ' + duration + 's') : null;
+      if (duration === 0) {
+        this.async('transitionEnd');
+      }
+    },
+    transitionEnd: function() {
+      if (this.opened && !this.fixedSize) {
+        this.updateSize('auto', null);
+      }
+      this.setTransitionDuration(null);
+      this.toggleClosedClass(!this.opened);
+      this.asyncFire('core-resize', null, this.target);
+    },
+    toggleClosedClass: function(closed) {
+      this.hasClosedClass = closed;
+      this.target.classList.toggle('core-collapse-closed', closed);
+    },
+    updateSize: function(size, duration, forceEnd) {
+      this.setTransitionDuration(duration);
+      this.calcSize();
+      var s = this.target.style;
+      var nochange = s[this.dimension] === size;
+      s[this.dimension] = size;
+      // transitonEnd will not be called if the size has not changed
+      if (forceEnd && nochange) {
+        this.transitionEnd();
+      }
+    },
+    update: function() {
+      if (!this.target) {
+        return;
+      }
+      if (!this.isTargetReady) {
+        this.targetChanged();
+      }
+      this.horizontalChanged();
+      this[this.opened ? 'show' : 'hide']();
+    },
+    calcSize: function() {
+      return this.target.getBoundingClientRect()[this.dimension] + 'px';
+    },
+    getComputedSize: function() {
+      return getComputedStyle(this.target)[this.dimension];
+    },
+    show: function() {
+      this.toggleClosedClass(false);
+      // for initial update, skip the expanding animation to optimize
+      // performance e.g. skip calcSize
+      if (!this.afterInitialUpdate) {
+        this.transitionEnd();
+        return;
+      }
+      if (!this.fixedSize) {
+        this.updateSize('auto', null);
+        var s = this.calcSize();
+        if (s == '0px') {
+          this.transitionEnd();
+          return;
+        }
+        this.updateSize(0, null);
+      }
+      this.async(function() {
+        this.updateSize(this.size || s, this.duration, true);
+      });
+    },
+    hide: function() {
+      // don't need to do anything if it's already hidden
+      if (this.hasClosedClass && !this.fixedSize) {
+        return;
+      }
+      if (this.fixedSize) {
+        // save the size before hiding it
+        this.size = this.getComputedSize();
+      } else {
+        this.updateSize(this.calcSize(), null);
+      }
+      this.async(function() {
+        this.updateSize(0, this.duration);
+      });
+    }
+  });
+</script>
+</polymer-element>