polymer-paper-rails 0.2.6 → 1.0.0.pre.rc.1

data/app/assets/components/core-toolbar/core-toolbar.html

@@ -1,155 +0,0 @@
-<!--
-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-toolbar` is a horizontal bar containing items that can be used for
-label, navigation, search and actions.  The items place inside the 
-`core-toolbar` are projected into a `horizontal center layout` container inside of 
-`core-toolbar`'s Shadow DOM.  You can use flex attributes to control the items'
-sizing.
-
-Example:
-
-    <core-toolbar>
-      <core-icon-button icon="menu" on-tap="{{menuAction}}"></core-icon-button>
-      <div flex>Title</div>
-      <core-icon-button icon="more" on-tap="{{moreAction}}"></core-icon-button>
-    </core-toolbar>
-
-`core-toolbar` has a standard height, but can made be taller by setting `tall`
-class on the `core-toolbar`.  This will make the toolbar 3x the normal height.
-
-    <core-toolbar class="tall">
-      <core-icon-button icon="menu"></core-icon-button>
-    </core-toolbar>
-
-Apply `medium-tall` class to make the toolbar medium tall.  This will make the
-toolbar 2x the normal height.
-
-    <core-toolbar class="medium-tall">
-      <core-icon-button icon="menu"></core-icon-button>
-    </core-toolbar>
-
-When `tall`, items can pin to either the top (default), middle or bottom.  Use
-`middle` class for middle content and `bottom` class for bottom content.
-
-    <core-toolbar class="tall">
-      <core-icon-button icon="menu"></core-icon-button>
-      <div class="middle indent">Middle Title</div>
-      <div class="bottom indent">Bottom Title</div>
-    </core-toolbar>
-    
-For `medium-tall` toolbar, the middle and bottom contents overlap and are
-pinned to the bottom.  But `middleJustify` and `bottomJustify` attributes are 
-still honored separately.
-    
-To make an element completely fit at the bottom of the toolbar, use `fit` along
-with `bottom`.
-
-    <core-toolbar class="tall">
-      <div id="progressBar" class="bottom fit"></div>
-    </core-toolbar>
-
-`core-toolbar` adapts to mobile/narrow layout when there is a `core-narrow` class set
-on itself or any of its ancestors.
-
-@group Polymer Core Elements
-@element core-toolbar
-@homepage github.io
--->
-
-<link rel="import" href="../polymer/polymer.html">
-
-<polymer-element name="core-toolbar" attributes="justify middleJustify bottomJustify">
-<template>
-
-  <link rel="stylesheet" href="core-toolbar.css">
-
-  <div id="bottomBar" class="toolbar-tools" center horizontal layout>
-    <content select=".bottom"></content>
-  </div>
-
-  <div id="middleBar" class="toolbar-tools" center horizontal layout>
-    <content select=".middle"></content>
-  </div>
-
-  <div id="topBar" class="toolbar-tools" center horizontal layout>
-    <content></content>
-  </div>
-
-</template>
-<script>
-
-(function() {
-
-  Polymer('core-toolbar', {
-    
-    /**
-     * Controls how the items are aligned horizontally.
-     * Options are `start`, `center`, `end`, `between` and `around`.
-     *
-     * @attribute justify
-     * @type string
-     * @default ''
-     */
-    justify: '',
-    
-    /**
-     * Controls how the items are aligned horizontally when they are placed
-     * in the middle.
-     * Options are `start`, `center`, `end`, `between` and `around`.
-     *
-     * @attribute middleJustify
-     * @type string
-     * @default ''
-     */
-    middleJustify: '',
-    
-    /**
-     * Controls how the items are aligned horizontally when they are placed
-     * at the bottom.
-     * Options are `start`, `center`, `end`, `between` and `around`.
-     *
-     * @attribute bottomJustify
-     * @type string
-     * @default ''
-     */
-    bottomJustify: '',
-    
-    justifyChanged: function(old) {
-      this.updateBarJustify(this.$.topBar, this.justify, old);
-    },
-    
-    middleJustifyChanged: function(old) {
-      this.updateBarJustify(this.$.middleBar, this.middleJustify, old);
-    },
-    
-    bottomJustifyChanged: function(old) {
-      this.updateBarJustify(this.$.bottomBar, this.bottomJustify, old);
-    },
-    
-    updateBarJustify: function(bar, justify, old) {
-      if (old) {
-        bar.removeAttribute(this.toLayoutAttrName(old));
-      }
-      if (justify) {
-        bar.setAttribute(this.toLayoutAttrName(justify), '');
-      }
-    },
-    
-    toLayoutAttrName: function(value) {
-      return value === 'between' ? 'justified' : value + '-justified';
-    }
-    
-  });
-
-})();
-
-</script>
-</polymer-element>

data/app/assets/components/core-toolbar/metadata.html

@@ -1,28 +0,0 @@
-<!--
-    @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
--->
-<x-meta id="core-toolbar" label="Toolbar" group="Core" isContainer>
-
-  <template>
-  
-    <core-toolbar style="right: 0px; left: 0px; background-color: #4F7DC9; color: #fff; fill: #fff;">
-      <core-icon-button icon="menu"></core-icon-button>
-      <div flex>Toolbar</div>
-    </core-toolbar>
-    
-  </template>
-
-  <template id="imports">
-  
-    <link rel="import" href="../core-icon-button/core-icon-button.html">
-    <link rel="import" href="core-toolbar.html">
-    
-  </template>
-
-</x-meta>

data/app/assets/components/core-transition/core-transition-css.html

@@ -1,220 +0,0 @@
-<!--
-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-transition-css>` implements CSS transitions as `<core-transition>` objects so they can be
-reused in a pluggable transition system such as in `<core-overlay>`. Currently this class has
-some specific support to animate an element from and to the viewport such as a dialog, but you
-can override it for different effects.
-
-Example:
-
-my-css-transition.html:
-
-    <polymer-element name="my-css-transition" extends="core-transition-css">
-    <template>
-        <style>
-            :host(.my-transition) {
-                opacity: 0;
-                transition: transform 1s ease-out, opacity 1s ease-out;
-            }
-            :host(.my-transition.my-opened) {
-                opacity: 1;
-                transform: none;
-            }
-            :host(.my-transition-top) {
-                transform: translateY(-100vh);
-            }
-            :host(.my-transition-bottom) {
-                transform: translateY(100vh);
-            }
-        </style>
-    </template>
-    <script>
-      Polymer({
-        baseClass: 'my-transition',
-        openedClass: 'my-opened'
-      });
-    </script>
-    </polymer-element>
-
-    <my-css-transition id="my-transition-top" transitionType="top"></my-css-transition>
-    <my-css-transition id="my-transition-bottom" transitionType="bottom"></my-css-transition>
-
-my-css-transition-demo.html
-
-    <link href="components/core-meta/core-meta.html" rel="import">
-    <link href="my-css-transition.html">
-
-    <div id="animate-me"></div>
-
-    <script>
-        // Get the core-transition
-        var meta = document.createElement('core-meta');
-        meta.type = 'transition';
-        var transition1 = meta.byId('my-transition-top');
-
-        // Set up the animation
-        var animated = document.getElementById('animate-me');
-        transition1.setup(animated);
-        transition1.go(animated, {opened: true});
-    </script>
-
-The first element in the template of a `<core-transition-css>` object should be a stylesheet. It
-will be injected to the scope of the animated node in the `setup` function. The node is initially
-invisible with `opacity: 0`, and you can transition it to an "opened" state by passing
-`{opened: true}` to the `go` function.
-
-All nodes being animated will get the class `my-transition` added in the `setup` function.
-Additionally, the class `my-transition-<transitionType>` will be applied. You can use the
-`transitionType` attribute to implement several different behaviors with the same
-`<core-transition-css>` object. In the above example, `<my-css-transition>` implements both
-sliding the node from the top of the viewport and from the bottom of the viewport.
-
-Available transitions
----------------------
-
-`<core-transition-css>` includes several commonly used transitions.
-
-`core-transition-fade`: Animates from `opacity: 0` to `opacity: 1` when it opens.
-
-`core-transition-center`: Zooms the node into the final size.
-
-`core-transition-top`: Slides the node into the final position from the top.
-
-`core-transition-bottom`: Slides the node into the final position from the bottom.
-
-`core-transition-left`: Slides the node into the final position from the left.
-
-`core-transition-right`: Slides the node into the final position from the right.
-
-@group Polymer Core Elements
-@element core-transition-css
-@extends core-transition
-@status beta
-@homepage github.io
--->
-
-<link rel="import" href="core-transition.html">
-
-<polymer-element name="core-transition-css" extends="core-transition" attributes="transitionType">
-<template>
-  <link no-shim rel="stylesheet" href="core-transition-overlay.css">
-</template>
-<script>
-
-  Polymer('core-transition-css', {
-
-    /**
-     * The class that will be applied to all animated nodes.
-     *
-     * @attribute baseClass
-     * @type string
-     * @default "core-transition"
-     */
-    baseClass: 'core-transition',
-
-    /**
-     * The class that will be applied to nodes in the opened state.
-     *
-     * @attribute openedClass
-     * @type string
-     * @default "core-opened"
-     */
-    openedClass: 'core-opened',
-
-    /**
-     * The class that will be applied to nodes in the closed state.
-     *
-     * @attribute closedClass
-     * @type string
-     * @default "core-closed"
-     */
-    closedClass: 'core-closed',
-
-    /**
-     * Event to listen to for animation completion.
-     *
-     * @attribute completeEventName
-     * @type string
-     * @default "transitionEnd"
-     */
-    completeEventName: 'transitionend',
-
-    publish: {
-      /**
-       * A secondary configuration attribute for the animation. The class
-       * `<baseClass>-<transitionType` is applied to the animated node during
-       * `setup`.
-       *
-       * @attribute transitionType
-       * @type string
-       */
-      transitionType: null
-    },
-
-    registerCallback: function(element) {
-      this.transitionStyle = element.templateContent().firstElementChild;
-    },
-
-    // template is just for loading styles, we don't need a shadowRoot
-    fetchTemplate: function() {
-      return null;
-    },
-
-    go: function(node, state) {
-      if (state.opened !== undefined) {
-        this.transitionOpened(node, state.opened);
-      }
-    },
-
-    setup: function(node) {
-      if (!node._hasTransitionStyle) {
-        if (!node.shadowRoot) {
-          node.createShadowRoot().innerHTML = '<content></content>';
-        }
-        this.installScopeStyle(this.transitionStyle, 'transition',
-            node.shadowRoot);
-        node._hasTransitionStyle = true;
-      }
-      node.classList.add(this.baseClass);
-      if (this.transitionType) {
-        node.classList.add(this.baseClass + '-' + this.transitionType);
-      }
-    },
-
-    teardown: function(node) {
-      node.classList.remove(this.baseClass);
-      if (this.transitionType) {
-        node.classList.remove(this.baseClass + '-' + this.transitionType);
-      }
-    },
-
-    transitionOpened: function(node, opened) {
-      this.listenOnce(node, this.completeEventName, function() {
-        if (!opened) {
-          node.classList.remove(this.closedClass);
-        }
-        this.complete(node);
-      });
-      node.classList.toggle(this.openedClass, opened);
-      node.classList.toggle(this.closedClass, !opened);
-    }
-
-  });
-</script>
-</polymer-element>
-
-<core-transition-css id="core-transition-fade"></core-transition-css>
-<core-transition-css id="core-transition-center" transitionType="center"></core-transition-css>
-<core-transition-css id="core-transition-top" transitionType="top"></core-transition-css>
-<core-transition-css id="core-transition-bottom" transitionType="bottom"></core-transition-css>
-<core-transition-css id="core-transition-left" transitionType="left"></core-transition-css>
-<core-transition-css id="core-transition-right" transitionType="right"></core-transition-css>

data/app/assets/components/core-transition/core-transition-overlay.css

@@ -1,46 +0,0 @@
-/* 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 */
-
-:host(.core-transition) {
-  outline: none;
-  overflow: auto;
-  opacity: 0;
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
-  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
-}
-
-
-:host(.core-transition.core-opened) {
-  opacity: 1;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-}
-
-:host(.core-transition-center) {
-  -webkit-transform: scale(0.5);
-  transform: scale(0.5);
-}
-
-:host(.core-transition-top) {
-  -webkit-transform: translateY(-200%);
-  transform: translateY(-200%);
-}
-
-:host(.core-transition-bottom) {
-  -webkit-transform: translateY(200%);
-  transform: translateY(200%);
-}
-
-:host(.core-transition-left) {
-  -webkit-transform: translateX(-200%);
-  transform: translateX(-200%);
-}
-
-:host(.core-transition-right) {
-  -webkit-transform: translateX(200%);
-  transform: translateX(200%);
-}

data/app/assets/components/core-transition/core-transition.html

@@ -1,140 +0,0 @@
-<!--
-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-transition>` is an abstraction of an animation. It is used to implement pluggable
-transitions, for example in `<core-overlay>`. You can extend this class to create a custom
-animation, instantiate it, and import it where you need the animation.
-
-All instances of `<core-transition>` are stored in a single database with `type=transition`.
-For more about the database, please see the documentation for `<core-meta>`.
-
-Each instance of `<core-transition>` objects are shared across all the clients, so you should
-not store state information specific to the animated element in the transition. Rather, store
-it on the element.
-
-Example:
-
-my-transition.html:
-
-    <polymer-element name="my-transition" extends="core-transition">
-        <script>
-            go: function(node) {
-                node.style.transition = 'opacity 1s ease-out';
-                node.style.opacity = 0;
-            }
-        </script>
-    </polymer-element>
-
-    <my-transition id="my-fade-out"></my-transition>
-
-my-transition-demo.html:
-
-    <link href="components/core-meta/core-meta.html" rel="import">
-    <link href="my-transition.html" rel="import">
-
-    <div id="animate-me"></div>
-
-    <script>
-        // Get the core-transition
-        var meta = document.createElement('core-meta');
-        meta.type = 'transition';
-        var transition = meta.byId('my-fade-out');
-
-        // Run the animation
-        var animated = document.getElementById('animate-me');
-        transition.go(animated);
-    </script>
-
-@group Polymer Core Elements
-@element core-transition
-@extends core-meta
-@status beta
-@homepage github.io
--->
-<!--
-Fired when the animation finishes.
-
-@event core-transitionend
-@param {Object} detail
-@param {Object} detail.node The animated node
--->
-
-<link rel="import" href="../core-meta/core-meta.html">
-
-<polymer-element name="core-transition" extends="core-meta">
-  
-  <script>
-    Polymer('core-transition', {
-      
-      type: 'transition',
-
-      /**
-       * Run the animation.
-       *
-       * @method go
-       * @param {Node} node The node to apply the animation on
-       * @param {Object} state State info
-       */
-      go: function(node, state) {
-        this.complete(node);
-      },
-
-      /**
-       * Set up the animation. This may include injecting a stylesheet,
-       * applying styles, creating a web animations object, etc.. This
-       *
-       * @method setup
-       * @param {Node} node The animated node
-       */
-      setup: function(node) {
-      },
-
-      /**
-       * Tear down the animation.
-       *
-       * @method teardown
-       * @param {Node} node The animated node
-       */
-      teardown: function(node) {
-      },
-
-      /**
-       * Called when the animation completes. This function also fires the
-       * `core-transitionend` event.
-       *
-       * @method complete
-       * @param {Node} node The animated node
-       */
-      complete: function(node) {
-        this.fire('core-transitionend', null, node);
-      },
-
-      /**
-       * Utility function to listen to an event on a node once.
-       *
-       * @method listenOnce
-       * @param {Node} node The animated node
-       * @param {string} event Name of an event
-       * @param {Function} fn Event handler
-       * @param {Array} args Additional arguments to pass to `fn`
-       */
-      listenOnce: function(node, event, fn, args) {
-        var self = this;
-        var listener = function() {
-          fn.apply(self, args);
-          node.removeEventListener(event, listener, false);
-        }
-        node.addEventListener(event, listener, false);
-      }
-
-    });
-  </script>
-</polymer-element>

data/app/assets/components/paper-button/metadata.html

@@ -1,17 +0,0 @@
-<!--
-    @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
--->
-<x-meta id="paper-button" label="Button" group="Paper" isContainer>
-  <template>
-    <paper-button>button</paper-button>
-  </template>
-  <template id="imports">
-    <link rel="import" href="paper-button.html">
-  </template>
-</x-meta>