RubyGems - polymer-paper-rails - Versions diffs - 0.2.6 → 1.0.0.pre.rc.1 - Mend

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

Files changed (634) hide show

data/app/assets/components/core-header-panel/core-header-panel.html DELETED Viewed

@@ -1,277 +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-header-panel` contains a header section and a content panel section.
-__Important:__ The `core-header-panel` will not display if its parent does not have a height.
-Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-attrs.html), you can easily make the `core-header-panel` fill the screen
-    <body fullbleed layout vertical>
-      <core-header-panel flex>
-        <core-toolbar>
-          <div>Hello World!</div>
-        </core-toolbar>
-      </core-header-panel>
-    </body>
-or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-header-panel` a height of 100%:
-    html, body {
-      height: 100%;
-      margin: 0;
-    }
-    core-header-panel {
-      height: 100%;
-    }
-Special support is provided for scrolling modes when one uses a core-toolbar or equivalent
-for the header section.
-Example:
-    <core-header-panel>
-      <core-toolbar>Header</core-toolbar>
-      <div>Content goes here...</div>
-    </core-header-panel>
-If you want to use other than `core-toolbar` for the header, add
-`core-header` class to that element.
-Example:
-    <core-header-panel>
-      <div class="core-header">Header</div>
-      <div>Content goes here...</div>
-    </core-header-panel>
-To have the content fits to the main area, use `fit` attribute.
-    <core-header-panel>
-      <div class="core-header">standard</div>
-      <div class="content" fit>content fits 100% below the header</div>
-    </core-header-panel>
-Use `mode` to control the header and scrolling behavior.
-@group Polymer Core Elements
-@element core-header-panel
-@homepage github.io
--->
-<link rel="import" href="../polymer/polymer.html">
-<polymer-element name="core-header-panel">
-<template>
-  <link rel="stylesheet" href="core-header-panel.css">
-  <div id="outerContainer" vertical layout>
-    <content id="headerContent" select="core-toolbar, .core-header"></content>
-    <div id="mainPanel" flex vertical layout>
-      <div id="mainContainer" flex?="{{mode !== 'cover'}}">
-        <content id="mainContent" select="*"></content>
-      </div>
-      <div id="dropShadow"></div>
-    </div>
-  </div>
-</template>
-<script>
-  Polymer({
-    /**
-     * Fired when the content has been scrolled.  `event.detail.target` returns
-     * the scrollable element which you can use to access scroll info such as
-     * `scrollTop`.
-     *
-     *     <core-header-panel on-scroll="{{scrollHandler}}">
-     *       ...
-     *     </core-header-panel>
-     *
-     *
-     *     scrollHandler: function(event) {
-     *       var scroller = event.detail.target;
-     *       console.log(scroller.scrollTop);
-     *     }
-     *
-     * @event scroll
-     */
-    publish: {
-      /**
-       * Controls header and scrolling behavior. Options are
-       * `standard`, `seamed`, `waterfall`, `waterfall-tall`, `scroll` and
-       * `cover`. Default is `standard`.
-       *
-       * `standard`: The header is a step above the panel. The header will consume the
-       * panel at the point of entry, preventing it from passing through to the
-       * opposite side.
-       *
-       * `seamed`: The header is presented as seamed with the panel.
-       *
-       * `waterfall`: Similar to standard mode, but header is initially presented as
-       * seamed with panel, but then separates to form the step.
-       *
-       * `waterfall-tall`: The header is initially taller (`tall` class is added to
-       * the header).  As the user scrolls, the header separates (forming an edge)
-       * while condensing (`tall` class is removed from the header).
-       *
-       * `scroll`: The header keeps its seam with the panel, and is pushed off screen.
-       *
-       * `cover`: The panel covers the whole `core-header-panel` including the
-       * header. This allows user to style the panel in such a way that the panel is
-       * partially covering the header.
-       *
-       *     <style>
-       *       core-header-panel[mode=cover]::shadow #mainContainer {
-       *         left: 80px;
-       *       }
-       *       .content {
-       *         margin: 60px 60px 60px 0;
-       *       }
-       *     </style>
-       *
-       *     <core-header-panel mode="cover">
-       *       <core-toolbar class="tall">
-       *         <core-icon-button icon="menu"></core-icon-button>
-       *       </core-toolbar>
-       *       <div class="content"></div>
-       *     </core-header-panel>
-       *
-       * @attribute mode
-       * @type string
-       * @default ''
-       */
-      mode: {value: '', reflect: true},
-      /**
-       * The class used in waterfall-tall mode.  Change this if the header
-       * accepts a different class for toggling height, e.g. "medium-tall"
-       *
-       * @attribute tallClass
-       * @type string
-       * @default 'tall'
-       */
-      tallClass: 'tall',
-      /**
-       * If true, the drop-shadow is always shown no matter what mode is set to.
-       *
-       * @attribute shadow
-       * @type boolean
-       * @default false
-       */
-      shadow: false
-    },
-    animateDuration: 200,
-    modeConfigs: {
-      shadowMode: {'waterfall': 1, 'waterfall-tall': 1},
-      noShadow: {'seamed': 1, 'cover': 1, 'scroll': 1},
-      tallMode: {'waterfall-tall': 1},
-      outerScroll: {'scroll': 1}
-    },
-    ready: function() {
-      this.scrollHandler = this.scroll.bind(this);
-      this.addListener();
-    },
-    detached: function() {
-      this.removeListener(this.mode);
-    },
-    addListener: function() {
-      this.scroller.addEventListener('scroll', this.scrollHandler);
-    },
-    removeListener: function(mode) {
-      var s = this.getScrollerForMode(mode);
-      s.removeEventListener('scroll', this.scrollHandler);
-    },
-    domReady: function() {
-      this.async('scroll');
-    },
-    modeChanged: function(old) {
-      var configs = this.modeConfigs;
-      var header = this.header;
-      if (header) {
-        // in tallMode it may add tallClass to the header; so do the cleanup
-        // when mode is changed from tallMode to not tallMode
-        if (configs.tallMode[old] && !configs.tallMode[this.mode]) {
-          header.classList.remove(this.tallClass);
-          this.async(function() {
-            header.classList.remove('animate');
-          }, null, this.animateDuration);
-        } else {
-          header.classList.toggle('animate', configs.tallMode[this.mode]);
-        }
-      }
-      if (configs && (configs.outerScroll[this.mode] || configs.outerScroll[old])) {
-        this.removeListener(old);
-        this.addListener();
-      }
-      this.scroll();
-    },
-    get header() {
-      return this.$.headerContent.getDistributedNodes()[0];
-    },
-    getScrollerForMode: function(mode) {
-      return this.modeConfigs.outerScroll[mode] ?
-          this.$.outerContainer : this.$.mainContainer;
-    },
-    /**
-     * Returns the scrollable element.
-     *
-     * @property scroller
-     * @type Object
-     */
-    get scroller() {
-      return this.getScrollerForMode(this.mode);
-    },
-    scroll: function() {
-      var configs = this.modeConfigs;
-      var main = this.$.mainContainer;
-      var header = this.header;
-      var sTop = main.scrollTop;
-      var atTop = sTop === 0;
-      this.$.dropShadow.classList.toggle('hidden', !this.shadow &&
-          (atTop && configs.shadowMode[this.mode] || configs.noShadow[this.mode]));
-      if (header && configs.tallMode[this.mode]) {
-        header.classList.toggle(this.tallClass, atTop ||
-            header.classList.contains(this.tallClass) &&
-            main.scrollHeight < this.$.outerContainer.offsetHeight);
-      }
-      this.fire('scroll', {target: this.scroller}, this, false);
-    }
-  });
-</script>
-</polymer-element>

data/app/assets/components/core-header-panel/metadata.html DELETED Viewed

@@ -1,37 +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-header-panel" label="Header Panel" isContainer group="Core">
-  <property name="mode" kind="select" options="standard, waterfall, waterfall-tall, scroll, cover"></property>
-  <template>
-    <core-header-panel mode="standard" style="width: 300px; height: 400px;">
-      <core-toolbar style="background-color: #4F7DC9; color: #FFF;">
-        <core-icon-button icon="menu"></core-icon-button>
-        <div>Header</div>
-      </core-toolbar>
-      <section style="height: 1000px; background: linear-gradient(rgb(214, 227, 231), lightblue);"></section>
-    </core-header-panel>
-  </template>
-  <template id="imports">
-    <link rel="import" href="../core-icon-button/core-icon-button.html">
-    <link rel="import" href="../core-toolbar/core-toolbar.html">
-    <link rel="import" href="core-header-panel.html">
-  </template>
-</x-meta>

data/app/assets/components/core-icon/core-icon.css DELETED Viewed

@@ -1,16 +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 */
-html /deep/ core-icon {
-  display: inline-block;
-  vertical-align: middle;
-  background-repeat: no-repeat;
-  fill: currentcolor;
-  position: relative;
-  height: 24px;
-  width: 24px;
-}

data/app/assets/components/core-icon/core-icon.html DELETED Viewed

@@ -1,201 +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
--->
-<!--
-The `core-icon` element displays an icon. By default an icon renders as a 24px square.
-Example using src:
-    <core-icon src="star.png"></core-icon>
-Example setting size to 32px x 32px:
-    <core-icon class="big" src="big_star.png"></core-icon>
-    <style>
-      .big {
-        height: 32px;
-        width: 32px;
-      }
-    </style>
-The core elements include several sets of icons.
-To use the default set of icons, import  `core-icons.html` and use the `icon` attribute to specify an icon:
-    <link rel="import" href="/components/core-icons/core-icons.html">
-    <core-icon icon="menu"></core-icon>
-To use a different built-in set of icons, import  `core-icons/<iconset>-icons.html`, and
-specify the icon as `<iconset>:<icon>`. For example:
-    <link rel="import" href="/components/core-icons/communication-icons.html">
-    <core-icon icon="communication:email"></core-icon>
-You can also create custom icon sets of bitmap or SVG icons.
-Example of using an icon named `cherry` from a custom iconset with the ID `fruit`:
-    <core-icon icon="fruit:cherry"></core-icon>
-See [core-iconset](#core-iconset) and [core-iconset-svg](#core-iconset-svg) for more information about
-how to create a custom iconset.
-See [core-icons](http://www.polymer-project.org/components/core-icons/demo.html) for the default set of icons.
-@group Polymer Core Elements
-@element core-icon
-@homepage polymer.github.io
--->
-<link rel="import" href="../core-iconset/core-iconset.html">
-<link rel="stylesheet" href="core-icon.css" shim-shadowdom>
-<polymer-element name="core-icon" attributes="src icon alt">
-<script>
-(function() {
-  // mono-state
-  var meta;
-  Polymer('core-icon', {
-    /**
-     * The URL of an image for the icon. If the src property is specified,
-     * the icon property should not be.
-     *
-     * @attribute src
-     * @type string
-     * @default ''
-     */
-    src: '',
-    /**
-     * Specifies the icon name or index in the set of icons available in
-     * the icon's icon set. If the icon property is specified,
-     * the src property should not be.
-     *
-     * @attribute icon
-     * @type string
-     * @default ''
-     */
-    icon: '',
-    /**
-     * Alternative text content for accessibility support.
-     * If alt is present and not empty, it will set the element's role to img and add an aria-label whose content matches alt.
-     * If alt is present and is an empty string, '', it will hide the element from the accessibility layer
-     * If alt is not present, it will set the element's role to img and the element will fallback to using the icon attribute for its aria-label.
-     *
-     * @attribute alt
-     * @type string
-     * @default ''
-     */
-    alt: null,
-    observe: {
-      'icon': 'updateIcon',
-      'alt': 'updateAlt'
-    },
-    defaultIconset: 'icons',
-    ready: function() {
-      if (!meta) {
-        meta = document.createElement('core-iconset');
-      }
-      // Allow user-provided `aria-label` in preference to any other text alternative.
-      if (this.hasAttribute('aria-label')) {
-        // Set `role` if it has not been overridden.
-        if (!this.hasAttribute('role')) {
-          this.setAttribute('role', 'img');
-        }
-        return;
-      }
-      this.updateAlt();
-    },
-    srcChanged: function() {
-      var icon = this._icon || document.createElement('div');
-      icon.textContent = '';
-      icon.setAttribute('fit', '');
-      icon.style.backgroundImage = 'url(' + this.src + ')';
-      icon.style.backgroundPosition = 'center';
-      icon.style.backgroundSize = '100%';
-      if (!icon.parentNode) {
-        this.appendChild(icon);
-      }
-      this._icon = icon;
-    },
-    getIconset: function(name) {
-      return meta.byId(name || this.defaultIconset);
-    },
-    updateIcon: function(oldVal, newVal) {
-      if (!this.icon) {
-        this.updateAlt();
-        return;
-      }
-      var parts = String(this.icon).split(':');
-      var icon = parts.pop();
-      if (icon) {
-        var set = this.getIconset(parts.pop());
-        if (set) {
-          this._icon = set.applyIcon(this, icon);
-          if (this._icon) {
-            this._icon.setAttribute('fit', '');
-          }
-        }
-      }
-      // Check to see if we're using the old icon's name for our a11y fallback
-      if (oldVal) {
-        if (oldVal.split(':').pop() == this.getAttribute('aria-label')) {
-          this.updateAlt();
-        }
-      }
-    },
-    updateAlt: function() {
-      // Respect the user's decision to remove this element from
-      // the a11y tree
-      if (this.getAttribute('aria-hidden')) {
-        return;
-      }
-      // Remove element from a11y tree if `alt` is empty, otherwise
-      // use `alt` as `aria-label`.
-      if (this.alt === '') {
-        this.setAttribute('aria-hidden', 'true');
-        if (this.hasAttribute('role')) {
-          this.removeAttribute('role');
-        }
-        if (this.hasAttribute('aria-label')) {
-          this.removeAttribute('aria-label');
-        }
-      } else {
-        this.setAttribute('aria-label', this.alt ||
-                                        this.icon.split(':').pop());
-        if (!this.hasAttribute('role')) {
-          this.setAttribute('role', 'img');
-        }
-        if (this.hasAttribute('aria-hidden')) {
-          this.removeAttribute('aria-hidden');
-        }
-      }
-    }
-  });
-})();
-</script>
-</polymer-element>

data/app/assets/components/core-icon/metadata.html DELETED Viewed

@@ -1,21 +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-icon" label="Icon" group="Core" hideSubtree>
-  <template>
-    <core-icon icon="search"></core-icon>
-  </template>
-  <template id="imports">
-    <link rel="import" href="../core-icons/core-icons.html">
-    <link rel="import" href="core-icon.html">
-  </template>
-</x-meta>

data/app/assets/components/core-icon-button/core-icon-button.css DELETED Viewed

@@ -1,75 +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
-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
-*/
-:host {
-  display: inline-block;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  border-radius: 2px;
-  padding: 7px;
-  margin: 2px;
-  vertical-align: middle;
-  font-size: 1rem;
-  cursor: pointer;
-}
-:host([disabled]) {
-  opacity: 0.6;
-  pointer-events: none;
-}
-:host(.outline) {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-}
-:host(:hover:not([disabled])) {
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1);
-}
-:host(.selected:not([disabled])) {
-  background-color: rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12);
-}
-:host(:active:not([disabled]), .selected:active:not([disabled])) {
-  background-color: rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.12);
-}
-:host(.core-dark-theme.outline) {
-  background-color: rgba(200, 200, 200, 0.05);
-  box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.1);
-}
-:host(.core-dark-theme:hover) {
-  background-color: rgba(200, 200, 200, 0.05);
-  box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.12), 0 0 0 1px rgba(200, 200, 200, 0.1);
-}
-:host(.core-dark-theme.selected) {
-  background-color: rgba(220, 220, 220, 0.05);
-  box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.05), 0 0 0 1px rgba(200, 200, 200, 0.12);
-}
-:host(.core-dark-theme:active, .core-dark-theme.selected:active) {
-  background-color: rgba(200, 200, 200, 0.05);
-  box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.1), 0 0 0 1px rgba(200, 200, 200, 0.12);
-}
-core-icon {
-  pointer-events: none;
-}
-/* note: this is a polyfill aware selector */
-:host ::content > :not(core-icon) {
-  margin-left: 4px;
-}