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

polymer-core-rails 0.1.0 → 0.2.0

Files changed (856) hide show

data/app/assets/components/core-tests/tests/core-selector-activate-event.html ADDED Viewed

@@ -0,0 +1,50 @@
+<!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.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>
+  <title>core-selector-activate-event</title>
+  <script src="../../platform/platform.js"></script>
+  <link rel="import" href="../../polymer-test-tools/tools.html">
+  <script src="../../polymer-test-tools/htmltest.js"></script>
+  <link rel="import" href="../../core-selector/core-selector.html">
+  <style>
+    .core-selected {
+      background: #ccc;
+    }
+  </style>
+</head>
+<body>
+  <core-selector id="selector" selected="0">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+  </core-selector>
+  <script>
+    document.addEventListener('polymer-ready', function() {
+      var assert = chai.assert;
+      var s = document.querySelector('#selector');
+      s.addEventListener("core-activate", function(event) {
+        assert.equal(event.detail.item, s.children[1]);
+        assert.equal(s.selected, 1);
+        done();
+      });
+      assert.equal(s.selected, '0');
+      requestAnimationFrame(function() {
+        s.children[1].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+      });
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/core-tests/tests/core-selector-basic.html ADDED Viewed

@@ -0,0 +1,105 @@
+<!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.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>
+  <title>core-selector-basic</title>
+  <script src="../../platform/platform.js"></script>
+  <link rel="import" href="../../polymer-test-tools/tools.html">
+  <script src="../../polymer-test-tools/htmltest.js"></script>
+  <link rel="import" href="../../core-selector/core-selector.html">
+  <style>
+    .core-selected {
+      background: #ccc;
+    }
+    .my-selected {
+      background: red;
+    }
+  </style>
+</head>
+<body>
+  <core-selector id="selector1">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+  </core-selector>
+  <br><br>
+  <core-selector id="selector2" selected="item3" selectedClass="my-selected" valueattr="id">
+    <div id="item1">Item 1</div>
+    <div id="item2">Item 2</div>
+    <div id="item3">Item 3</div>
+    <div id="item4">Item 4</div>
+    <div id="item5">Item 5</div>
+  </core-selector>
+  <script>
+    var async = requestAnimationFrame;
+    function oneMutation(node, options, cb) {
+      var o = new MutationObserver(function() {
+        cb();
+        o.disconnect();
+      });
+      o.observe(node, options);
+    }
+    document.addEventListener('polymer-ready', function() {
+      var assert = chai.assert;
+      // selector1
+      var s = document.querySelector('#selector1');
+      assert.equal(s.selected, null);
+      assert.equal(s.selectedClass, 'core-selected');
+      assert.isFalse(s.multi);
+      assert.equal(s.valueattr, 'name');
+      assert.equal(s.items.length, 5);
+      // selector2
+      s = document.querySelector('#selector2');
+      assert.equal(s.selected, "item3");
+      assert.equal(s.selectedClass, 'my-selected');
+      // setup listener for core-select event
+      var selectEventCounter = 0;
+      s.addEventListener('core-select', function(e) {
+        if (e.detail.isSelected) {
+          selectEventCounter++;
+          // selectedItem and detail.item should be the same
+          assert.equal(e.detail.item, s.selectedItem);
+        }
+      });
+      // set selected
+      s.selected = 'item5';
+      Platform.flush();
+      setTimeout(function() {
+        // check core-select event
+        assert.equal(selectEventCounter, 1);
+        // check selected class
+        assert.isTrue(s.children[4].classList.contains('my-selected'));
+        // check selectedItem
+        assert.equal(s.selectedItem, s.children[4]);
+        // selecting the same value shouldn't fire core-select
+        selectEventCounter = 0;
+        s.selected = 'item5';
+        Platform.flush();
+        // TODO(ffu): would be better to wait for something to happen
+        // instead of not to happen
+        setTimeout(function() {
+          assert.equal(selectEventCounter, 0);
+          done();
+        }, 50);
+      }, 50);
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/core-tests/tests/core-selector-multi.html ADDED Viewed

@@ -0,0 +1,86 @@
+<!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.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>
+  <title>core-selector-multi</title>
+  <script src="../../platform/platform.js"></script>
+  <link rel="import" href="../../polymer-test-tools/tools.html">
+  <script src="../../polymer-test-tools/htmltest.js"></script>
+  <link rel="import" href="../../core-selector/core-selector.html">
+  <style>
+    .core-selected {
+      background: #ccc;
+    }
+  </style>
+</head>
+<body>
+  <core-selector id="selector" multi>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+    <div>Item 4</div>
+    <div>Item 5</div>
+  </core-selector>
+  <script>
+    function oneMutation(node, options, cb) {
+      var o = new MutationObserver(function() {
+        cb();
+        o.disconnect();
+      });
+      o.observe(node, options);
+    }
+    document.addEventListener('polymer-ready', function() {
+      var assert = chai.assert;
+      //
+      var s = document.querySelector('#selector');
+      assert.equal(s.selected, null);
+      assert.equal(s.selectedClass, 'core-selected');
+      assert.isTrue(s.multi);
+      assert.equal(s.valueattr, 'name');
+      assert.equal(s.items.length, 5);
+      // setup listener for core-select event
+      var selectEventCounter = 0;
+      s.addEventListener('core-select', function(e) {
+        if (e.detail.isSelected) {
+          selectEventCounter++;
+        } else {
+          selectEventCounter--;
+        }
+        // check selectedItem in core-select event
+        assert.equal(this.selectedItem.length, selectEventCounter);
+      });
+      // set selected
+      s.selected = [0, 2];
+      Platform.flush();
+      setTimeout(function() {
+        // check core-select event
+        assert.equal(selectEventCounter, 2);
+        // check selected class
+        assert.isTrue(s.children[0].classList.contains('core-selected'));
+        assert.isTrue(s.children[2].classList.contains('core-selected'));
+        // check selectedItem
+        assert.equal(s.selectedItem.length, 2);
+        assert.equal(s.selectedItem[0], s.children[0]);
+        assert.equal(s.selectedItem[1], s.children[2]);
+        // tap on already selected element should unselect it
+        s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+        // check selected
+        assert.equal(s.selected.length, 1);
+        assert.isFalse(s.children[0].classList.contains('core-selected'));
+        done();
+      }, 50);
+    });
+  </script>
+</body>
+</html>

data/app/assets/components/core-tests/tests/core-shared-lib.html ADDED Viewed

@@ -0,0 +1,48 @@
+<!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.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>
+  <title>core-shared-lib</title>
+  <script src="../../platform/platform.js"></script>
+  <link rel="import" href="../../polymer-test-tools/tools.html">
+  <script src="../../polymer-test-tools/htmltest.js"></script>
+  <link rel="import" href="../../core-shared-lib/core-shared-lib.html">
+</head>
+<body>
+  <core-shared-lib url="https://apis.google.com/js/client.js?onload=%%callback%%"></core-shared-lib>
+  <template id="t" bind="{{}}">
+    <core-shared-lib url="https://apis.google.com/js/client.js?onload=%%callback%%"></core-shared-lib>
+  </template>
+  <script>
+    var count = 0;
+    addEventListener("core-shared-lib-load", function(event) {
+      if (++count ===  2) {
+        done();
+      } else {
+        assert.isTrue(count < 2);
+        // request the api again
+        setTimeout(function() {
+          document.querySelector('#t').model = {};
+        }, 100);
+      }
+    });
+  </script>
+</body>
+</html>

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

@@ -0,0 +1,46 @@
+<!--
+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 rel="import" href="../../polymer-test-tools/tools.html">
+<script src="../../polymer-test-tools/mocha-htmltest.js"></script>
+<script>
+  mocha.setup({ui: 'tdd', slow: 1000, timeout: 5000, htmlbase: ''});
+  htmlSuite('core-ajax', function() {
+    htmlTest('tests/core-ajax.html');
+  });
+  htmlSuite('core-collapse', function() {
+    htmlTest('tests/core-collapse.html');
+  });
+  htmlSuite('core-localstorage', function() {
+    htmlTest('tests/core-localstorage.html');
+  });
+  htmlSuite('core-selection', function() {
+    htmlTest('tests/core-selection.html');
+    htmlTest('tests/core-selection-multi.html');
+  });
+  htmlSuite('core-selector', function() {
+    htmlTest('tests/core-selector-basic.html');
+    htmlTest('tests/core-selector-activate-event.html');
+    htmlTest('tests/core-selector-multi.html');
+  });
+  htmlSuite('core-shared-lib', function() {
+    htmlTest('tests/core-shared-lib.html');
+  });
+  mocha.run();
+</script>

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

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

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

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

data/app/assets/components/core-toolbar/core-toolbar.css CHANGED Viewed

@@ -35,6 +35,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 }
 .toolbar-tools {
+  position: relative;
   height: 64px;
   padding: 0 8px;
   pointer-events: none;
@@ -79,23 +80,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   left: 0;
 }
-/* shows bottom bar only when in normal height (!tall && !medium-tall) */
-:host(.animate.no-overlap) > #topBar,
-:host(.animate.no-overlap) > #middleBar {
-  transition: -webkit-transform 0.18s ease-in;
-  transition: transform 0.18s ease-in;
-}
-:host(.no-overlap:not(.medium-tall):not(.tall)) > #topBar {
-  -webkit-transform: translateY(-100%);
-  transform: translateY(-100%);
-}
-:host(.no-overlap:not(.medium-tall):not(.tall)) > #middleBar {
-  -webkit-transform: translateY(-200%);
-  transform: translateY(-200%);
-}
 /* make elements (e.g. buttons) respond to mouse/touch events */
 polyfill-next-selector { content: '.toolbar-tools > *'; }
 ::content > * {

data/app/assets/components/core-toolbar/{core-toolbar.html.erb → core-toolbar.html} RENAMED Viewed

@@ -23,8 +23,8 @@ 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
+Apply `medium-tall` class to make the toolbar medium tall.  This will make the
 toolbar 2x the normal height.
     <core-toolbar class="medium-tall">
@@ -38,7 +38,7 @@ When taller, elements can pin to either the top (default), middle or bottom.
       <div class="middle indent">Middle Title</div>
       <div class="bottom indent">Bottom Title</div>
     </core-toolbar>
 To make an element completely fit at the bottom of the toolbar, use `fit` along
 with `bottom`.
@@ -51,16 +51,17 @@ with `bottom`.
 @homepage github.io
 -->
+<link rel="import" href="../polymer/polymer.html">
 <polymer-element name="core-toolbar" noscript>
 <template>
-  <%= stylesheet_link_tag "core-toolbar/core-toolbar"%>
+  <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>

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

@@ -0,0 +1,107 @@
+<!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.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>
+  <title>core-toolbar</title>
+  <script src="../platform/platform.js"></script>
+  <link rel="import" href="core-toolbar.html">
+  <link rel="import" href="../core-icon-button/core-icon-button.html">
+  <style shim-shadowdom>
+    body {
+      font-family: sans-serif;
+    }
+    core-toolbar {
+      background-color: #CFA0E9;
+    }
+    core-toolbar.dark-theme {
+      background-color: #7D25AC;
+      color: #f1f1f1;
+      fill: #f1f1f1;
+    }
+  </style>
+</head>
+<body unresolved>
+  <core-toolbar>
+    <core-icon-button icon="menu"></core-icon-button>
+    <span flex>Toolbar</span>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="dark-theme">
+    <core-icon-button icon="menu"></core-icon-button>
+    <span flex>Toolbar: dark-theme</span>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="tall">
+    <core-icon-button icon="menu"></core-icon-button>
+    <span flex>Toolbar: tall</span>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="tall">
+    <core-icon-button icon="menu" class="bottom"></core-icon-button>
+    <span flex class="bottom">Toolbar: tall with elements pin to the bottom</span>
+    <core-icon-button icon="refresh" class="bottom"></core-icon-button>
+    <core-icon-button icon="add" class="bottom"></core-icon-button>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="medium-tall">
+    <core-icon-button icon="menu"></core-icon-button>
+    <span flex></span>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+    <span class="bottom indent">Toolbar: medium-tall with label aligns to the bottom</span>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="tall">
+    <core-icon-button icon="menu"></core-icon-button>
+    <div flex></div>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+    <div class="middle indent">label aligns to the middle</div>
+    <div class="bottom indent" style="color: #666; font-size: 18px;">some stuffs align to the bottom</div>
+  </core-toolbar>
+  <br>
+  <core-toolbar class="tall">
+    <core-icon-button icon="menu"></core-icon-button>
+    <div flex></div>
+    <core-icon-button icon="refresh"></core-icon-button>
+    <core-icon-button icon="add"></core-icon-button>
+    <div class="middle indent">element (e.g. progress) fits at the bottom of the toolbar</div>
+    <div class="bottom fit" style="height: 20px; background-color: #0f9d58;"></div>
+  </core-toolbar>
+</body>
+</html>

data/app/assets/components/core-toolbar/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></core-component-page>
+</body>
+</html>

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

@@ -0,0 +1,28 @@
+<!--
+    @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-tooltip/README.md ADDED Viewed

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

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

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

data/app/assets/components/core-tooltip/core-tooltip.css CHANGED Viewed

@@ -24,9 +24,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 }
 .polymer-tooltip {
-   pointer-events: none;
   position: absolute;
-  display: flex;
   font-size: 10px;
   font-family: sans-serif;
   padding: 8px;
@@ -37,6 +35,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   white-space: nowrap;
   line-height: 6px;
   z-index: 1002; /* TODO: this is brittle. */
+  -webkit-user-select: none;
+  user-select: none;
 }
 :host([large]) .polymer-tooltip {

data/app/assets/components/core-tooltip/{core-tooltip.html.erb → core-tooltip.html} RENAMED Viewed

@@ -47,7 +47,7 @@ content.
 @homepage http://polymer.github.io/core-tooltip
 -->
+<link rel="import" href="../polymer/polymer.html">
 <!-- TODO: would be nice to inherit from label to get .htmlFor, and .control,
            but the latter is readonly. -->
@@ -58,9 +58,9 @@ content.
 <polymer-element name="core-tooltip" attributes="noarrow position label show" tabindex="0">
 <template>
-  <%= stylesheet_link_tag "core-tooltip/core-tooltip"%>
+  <link rel="stylesheet" href="core-tooltip.css">
-  <div id="tooltip" class="polymer-tooltip {{position}} {{ {noarrow: noarrow, show: show} | tokenList}}">
+  <div id="tooltip" class="polymer-tooltip {{position}} {{ {noarrow: noarrow, show: show} | tokenList}}" layout horizontal center>
     <content select="[tip]">{{label}}</content>
   </div>