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/paper-toolbar/demo/index.html ADDED Viewed

@@ -0,0 +1,81 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 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>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>paper-toolbar demo</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-styles/paper-styles.html">
+  <link rel="import" href="../paper-toolbar.html">
+  <style>
+    paper-toolbar + paper-toolbar {
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body>
+  <paper-toolbar>
+    <paper-icon-button icon="menu"></paper-icon-button>
+    <span class="title">Toolbar</span>
+    <paper-icon-button icon="refresh"></paper-icon-button>
+    <paper-icon-button icon="add">+</paper-icon-button>
+  </paper-toolbar>
+  <paper-toolbar class="tall">
+    <paper-icon-button icon="menu"></paper-icon-button>
+    <span class="title">Toolbar: tall</span>
+    <paper-icon-button icon="refresh"></paper-icon-button>
+    <paper-icon-button icon="add">+</paper-icon-button>
+  </paper-toolbar>
+  <paper-toolbar class="tall">
+    <paper-icon-button icon="menu" class="bottom"></paper-icon-button>
+    <span class="bottom title">Toolbar: tall with elements pin to the bottom</span>
+    <paper-icon-button icon="refresh" class="bottom"></paper-icon-button>
+    <paper-icon-button icon="add" class="bottom">+</paper-icon-button>
+  </paper-toolbar>
+  <paper-toolbar class="medium-tall">
+    <paper-icon-button icon="menu"></paper-icon-button>
+    <span class="flex"></span>
+    <paper-icon-button icon="refresh"></paper-icon-button>
+    <paper-icon-button icon="add">+</paper-icon-button>
+    <span class="bottom title">Toolbar: medium-tall with label aligns to the bottom</span>
+  </paper-toolbar>
+  <paper-toolbar class="tall">
+    <paper-icon-button icon="menu"></paper-icon-button>
+    <div class="flex"></div>
+    <paper-icon-button icon="refresh"></paper-icon-button>
+    <paper-icon-button icon="add">+</paper-icon-button>
+    <div class="middle title">label aligns to the middle</div>
+    <div class="bottom title">some stuffs align to the bottom</div>
+  </paper-toolbar>
+  <paper-toolbar class="tall">
+    <paper-icon-button icon="menu"></paper-icon-button>
+    <div class="flex"></div>
+    <paper-icon-button icon="refresh"></paper-icon-button>
+    <paper-icon-button icon="add">+</paper-icon-button>
+    <div class="middle title">element (e.g. progress) fits at the bottom of the toolbar</div>
+    <div class="bottom flex" style="height: 20px; background-color: #0f9d58;"></div>
+  </paper-toolbar>
+</body>
+</html>

data/app/assets/components/paper-toolbar/index.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!doctype html>
+<!--
+  @license
+  Copyright (c) 2015 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>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>paper-toolbar</title>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../polymer/polymer.html">
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+  <style>
+    body {
+      margin: 16px;
+    }
+  </style>
+</head>
+<body>
+  <iron-component-page></iron-component-page>
+</body>
+</html>

data/app/assets/components/paper-toolbar/paper-toolbar.html ADDED Viewed

@@ -0,0 +1,375 @@
+<!--
+Copyright (c) 2015 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 rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/paper-styles.html">
+<!--
+`paper-toolbar` is a horizontal bar containing items that can be used for
+label, navigation, search and actions.  The items place inside the
+`paper-toolbar` are projected into a `class="horizontal center layout"` container inside of
+`paper-toolbar`'s Shadow DOM.  You can use flex attributes to control the items'
+sizing.
+Example:
+    <paper-toolbar>
+      <paper-icon-button icon="menu" on-tap="menuAction"></paper-icon-button>
+      <div class="title">Title</div>
+      <paper-icon-button icon="more-vert" on-tap="moreAction"></paper-icon-button>
+    </paper-toolbar>
+`paper-toolbar` has a standard height, but can made be taller by setting `tall`
+class on the `paper-toolbar`.  This will make the toolbar 3x the normal height.
+    <paper-toolbar class="tall">
+      <paper-icon-button icon="menu"></paper-icon-button>
+    </paper-toolbar>
+Apply `medium-tall` class to make the toolbar medium tall.  This will make the
+toolbar 2x the normal height.
+    <paper-toolbar class="medium-tall">
+      <paper-icon-button icon="menu"></paper-icon-button>
+    </paper-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.
+    <paper-toolbar class="tall">
+      <paper-icon-button icon="menu"></paper-icon-button>
+      <div class="middle title">Middle Title</div>
+      <div class="bottom title">Bottom Title</div>
+    </paper-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.
+### Styling
+The following custom properties and mixins are available for styling:
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-toolbar-background` | Toolbar background color     | `--default-primary-color`
+`--paper-toolbar-color`      | Toolbar foreground color     | `--text-primary-color`
+`--paper-toolbar`            | Mixin applied to the toolbar | `{}`
+### Accessibility
+`<paper-toolbar>` has `role="toolbar"` by default. Any elements with the class `title` will
+be used as the label of the toolbar via `aria-labelledby`.
+@demo demo/index.html
+-->
+<dom-module id="paper-toolbar">
+  <style>
+    :host {
+      /* technical */
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      /* size */
+      height: 64px;
+      background: var(--paper-toolbar-background, --default-primary-color);
+      color: var(--paper-toolbar-color, --text-primary-color);
+      @apply(--paper-toolbar);
+    }
+    :host(.animate) {
+      /* transition */
+      transition: height 0.18s ease-in;
+    }
+    :host(.medium-tall) {
+      height: 128px;
+    }
+    :host(.tall) {
+      height: 192px;
+    }
+    .toolbar-tools {
+      position: relative;
+      height: 64px;
+      padding: 0 16px;
+      pointer-events: none;
+    }
+    /*
+     * TODO: Where should media query breakpoints live so they can be shared between elements?
+     */
+    @media (max-width: 639px) {
+      :host {
+        height: 56px;
+      }
+      :host(.medium-tall) {
+        height: 112px;
+      }
+      :host(.tall) {
+        height: 168px;
+      }
+      .toolbar-tools {
+        height: 56px;
+      }
+    }
+    #topBar {
+      position: relative;
+      z-index: 1;
+    }
+    /* middle bar */
+    #middleBar {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: 2;
+    }
+    :host(.tall) #middleBar,
+    :host(.medium-tall) #middleBar {
+      -webkit-transform: translateY(100%);
+      transform: translateY(100%);
+    }
+    /* bottom bar */
+    #bottomBar {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+    }
+    /*
+     * make elements (e.g. buttons) respond to mouse/touch events
+     *
+     * `.toolbar-tools` disables touch events so multiple toolbars can stack and not
+     * absorb events. All children must have pointer events re-enabled to work as
+     * expected.
+     */
+    .toolbar-tools > ::content > *:not([disabled]) {
+      pointer-events: auto;
+    }
+    .toolbar-tools > ::content .title {
+      @apply(--paper-font-title);
+      @apply(--layout-flex);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      /*
+       * Polymer/polymer/issues/1525
+       * --paper-font-title defines a `font-weight`
+       * let's override its value, but we need `important!`
+       * because all mixins are resolved in rule's selector that has higher precedence
+       * than the current selector.
+       */
+      font-weight: 400 !important;
+    }
+    /**
+     * TODO: Refactor these selectors
+     * Work in progress.
+     */
+    .toolbar-tools > ::content paper-icon-button[icon=menu] {
+      margin-left: -8px;
+      margin-right: 24px;
+    }
+    .toolbar-tools > ::content paper-icon-button + paper-icon-button {
+      margin-right: -8px;
+    }
+    .toolbar-tools > ::content > .title,
+    .toolbar-tools > ::content[select=".middle"] > .title,
+    .toolbar-tools > ::content[select=".bottom"] > .title {
+      margin-left: 56px;
+    }
+    .toolbar-tools > ::content > paper-icon-button + .title,
+    .toolbar-tools > ::content[select=".middle"] paper-icon-button + .title,
+    .toolbar-tools > ::content[select=".bottom"] paper-icon-button + .title {
+      margin-left: 0;
+    }
+  </style>
+  <template>
+    <div id="topBar" class$="[[_computeBarClassName(justify)]]">
+      <content select=":not(.middle):not(.bottom)"></content>
+    </div>
+    <div id="middleBar" class$="[[_computeBarClassName(middleJustify)]]">
+      <content select=".middle"></content>
+    </div>
+    <div id="bottomBar" class$="[[_computeBarClassName(bottomJustify)]]">
+      <content select=".bottom"></content>
+    </div>
+  </template>
+</dom-module>
+<script>
+  (function() {
+    'use strict';
+    function classNames(obj) {
+      var classNames = [];
+      for (var key in obj) {
+        if (obj.hasOwnProperty(key) && obj[key]) {
+          classNames.push(key);
+        }
+      }
+      return classNames.join(' ');
+    }
+    Polymer({
+      is: 'paper-toolbar',
+      hostAttributes: {
+        'role': 'toolbar'
+      },
+      properties: {
+        /**
+         * Controls how the items are aligned horizontally when they are placed
+         * at the bottom.
+         * Options are `start`, `center`, `end`, `justified` and `around`.
+         *
+         * @attribute bottomJustify
+         * @type string
+         * @default ''
+         */
+        bottomJustify: {
+          type: String,
+          value: ''
+        },
+        /**
+         * Controls how the items are aligned horizontally.
+         * Options are `start`, `center`, `end`, `justified` and `around`.
+         *
+         * @attribute justify
+         * @type string
+         * @default ''
+         */
+        justify: {
+          type: String,
+          value: ''
+        },
+        /**
+         * Controls how the items are aligned horizontally when they are placed
+         * in the middle.
+         * Options are `start`, `center`, `end`, `justified` and `around`.
+         *
+         * @attribute middleJustify
+         * @type string
+         * @default ''
+         */
+        middleJustify: {
+          type: String,
+          value: ''
+        }
+      },
+      attached: function() {
+        this._observer = this._observe(this);
+        this._updateAriaLabelledBy();
+      },
+      detached: function() {
+        if (this._observer) {
+          this._observer.disconnect();
+        }
+      },
+      _observe: function(node) {
+        var observer = new MutationObserver(function() {
+          this._updateAriaLabelledBy();
+        }.bind(this));
+        observer.observe(node, {
+          childList: true,
+          subtree: true
+        });
+        return observer;
+      },
+      _updateAriaLabelledBy: function() {
+        var labelledBy = [];
+        var contents = Polymer.dom(this.root).querySelectorAll('content');
+        for (var content, index = 0; content = contents[index]; index++) {
+          var nodes = Polymer.dom(content).getDistributedNodes();
+          for (var node, jndex = 0; node = nodes[jndex]; jndex++) {
+            if (node.classList && node.classList.contains('title')) {
+              if (node.id) {
+                labelledBy.push(node.id);
+              } else {
+                var id = 'paper-toolbar-label-' + Math.floor(Math.random() * 10000);
+                node.id = id;
+                labelledBy.push(id);
+              }
+            }
+          }
+        }
+        if (labelledBy.length > 0) {
+          this.setAttribute('aria-labelledby', labelledBy.join(' '));
+        }
+      },
+      _computeBarClassName: function(barJustify) {
+        var classObj = {
+          center: true,
+          horizontal: true,
+          layout: true,
+          'toolbar-tools': true
+        };
+        // If a blank string or any falsy value is given, no other class name is
+        // added.
+        if (barJustify) {
+          var justifyClassName = (barJustify === 'justified') ?
+              barJustify :
+              barJustify + '-justified';
+          classObj[justifyClassName] = true;
+        }
+        return classNames(classObj);
+      }
+    });
+  }());
+</script>

data/app/assets/components/paper-toolbar/test/index.html ADDED Viewed

@@ -0,0 +1,24 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 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>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>paper-toolbar tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'paper-toolbar.html'
+    ]);
+  </script>
+</body>
+</html>

data/app/assets/components/paper-toolbar/test/paper-toolbar.html ADDED Viewed

@@ -0,0 +1,147 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 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>
+<head>
+  <meta charset="UTF-8">
+  <title>paper-toolbar basic tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../paper-toolbar.html">
+</head>
+<body>
+  <test-fixture id="basic">
+    <template>
+      <paper-toolbar></paper-toolbar>
+    </template>
+  </test-fixture>
+  <test-fixture id="title">
+    <template>
+      <paper-toolbar>
+        <span class="title">Title</span>
+      </paper-toolbar>
+    </template>
+  </test-fixture>
+  <test-fixture id="title-with-id">
+    <template>
+      <paper-toolbar>
+        <span class="title" id="title">Title</span>
+      </paper-toolbar>
+    </template>
+  </test-fixture>
+  <test-fixture id="multiple-titles">
+    <template>
+      <paper-toolbar>
+        <span class="title">Title 1</span>
+        <span class="title">Title 2</span>
+      </paper-toolbar>
+    </template>
+  </test-fixture>
+  <script>
+    'use strict';
+    suite('basic', function() {
+      var toolbar;
+      setup(function() {
+        toolbar = fixture('basic');
+      });
+      test('has expected medium-tall height', function() {
+        var old = toolbar.offsetHeight;
+        toolbar.classList.add('medium-tall');
+        expect(toolbar.offsetHeight).to.be.eql(old * 2);
+      });
+      test('has expected tall height', function() {
+        var old = toolbar.offsetHeight;
+        toolbar.classList.add('tall');
+        expect(toolbar.offsetHeight).to.be.eql(old * 3);
+      });
+      test('distributes nodes to topBar by default', function() {
+        var item = document.createElement('div');
+        Polymer.dom(toolbar).appendChild(item);
+        Polymer.dom.flush();
+        var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
+        expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.topBar);
+      });
+      test('distributes nodes with "middle" class to middleBar', function() {
+        var item = document.createElement('div');
+        item.classList.add('middle');
+        Polymer.dom(toolbar).appendChild(item);
+        Polymer.dom.flush();
+        var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
+        expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.middleBar);
+      });
+      test('distributes nodes with "bottom" class to bottombar', function() {
+        var item = document.createElement('div');
+        item.classList.add('bottom');
+        Polymer.dom(toolbar).appendChild(item);
+        Polymer.dom.flush();
+        var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
+        expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.bottomBar);
+      });
+    });
+    suite('a11y', function() {
+      test('has role="toolbar"', function() {
+        var toolbar = fixture('basic');
+        assert.equal(toolbar.getAttribute('role'), 'toolbar', 'has role="toolbar"');
+      });
+      test('children with .title becomes the label', function() {
+        var toolbar = fixture('title');
+        assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
+        assert.equal(toolbar.getAttribute('aria-labelledby'), Polymer.dom(toolbar).querySelector('.title').id, 'aria-labelledby has the id of the .title element');
+      });
+      test('existing ids on titles are preserved', function() {
+        var toolbar = fixture('title-with-id');
+        assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
+        assert.equal(Polymer.dom(toolbar).querySelector('.title').id, 'title', 'id is preserved');
+      });
+      test('multiple children with .title becomes the label', function() {
+        var toolbar = fixture('multiple-titles');
+        assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
+        var ids = [];
+        var titles = Polymer.dom(toolbar).querySelectorAll('.title');
+        for (var title, index = 0; title = titles[index]; index++) {
+          ids.push(title.id);
+        }
+        assert.equal(toolbar.getAttribute('aria-labelledby'), ids.join(' '), 'aria-labelledby has the id of all .title elements');
+      });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/polymer/LICENSE.txt ADDED Viewed

@@ -0,0 +1,27 @@
+// Copyright (c) 2014 The Polymer Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.