polymer-core-rails 0.2.5 → 0.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0d53a57bb41b3734b6c966d5521a9c106919db1b
-  data.tar.gz: 2b31752e1e041b56bafaa576706c5e366b8544aa
+  metadata.gz: 80eb88f81605dfe42e0e76b446b8848438cd05e7
+  data.tar.gz: f6e38a05a9b9f9c92e0bb451865966ddab5f444e
 SHA512:
-  metadata.gz: 298b871833a9ef30478380cbb39fb4aa6b0c9fe3ef602a5fd67fa3528561c3ae8348f4d4c74644804b73502b91e378ac34a4c4a6290f4de4c2e72797a531922c
-  data.tar.gz: f3a31a30f710a3090ff7bcb961a6441abe6c427b1691a506719c22b7ab7ce8d3e5602cbbba477687148759d379c4872c3270f24c8dd42655f2b7b53c52c0f9a8
+  metadata.gz: 8b24e51139bec23c59d8056274068efb520264fe4f815a8f1b1988eec0ffee5e6d0312f861b884976ac4f301b05f7ec5b163b29c0cd7521e2c625117c6c2802a
+  data.tar.gz: 4b4062d5202ea41e66017751e408487effec158e3e1149a1e40f26c8dfd10a4f47ca74adc3dc2f3035054ff42b026b6405e4798574af8082f142213e18688394

data/README.md

@@ -24,7 +24,7 @@ Or install it yourself as:
 ## Getting started
 
 In order to use Polymer core elements you need to have
-`polymer` installed in your project. Use [polymer-rails](https://github.com/alchapone/polymer-core-rails) gem for adding `polymer` to your Rails application.
+`polymer` installed in your project. Use [polymer-rails](https://github.com/alchapone/polymer-rails) gem for adding `polymer` to your Rails application.
 
 ```ruby
 gem 'polymer-rails'
@@ -35,7 +35,7 @@ After runnign `bundle install` require needed core elements into your `applicati
 
     //= require polymer/polymer
     //= require core-ajax/core-ajax
-    //= require core-input/core-intut
+    //= require core-input/core-input
     .....
     //= require core-tooltip/core-tooltip
 
@@ -44,6 +44,7 @@ to explicitly require any of dependencies, otherwise it will raise exception.
 
 ## Available elements
 
+* [core-a11y-keys](http://www.polymer-project.org/docs/elements/core-elements.html#core-a11y-keys)
 * [core-ajax](http://www.polymer-project.org/docs/elements/core-elements.html#core-ajax)
 * [core-animated-pages](http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages)
 * [core-animation](http://www.polymer-project.org/docs/elements/core-elements.html#core-animation)
@@ -71,7 +72,7 @@ to explicitly require any of dependencies, otherwise it will raise exception.
 * [core-style](http://www.polymer-project.org/docs/elements/core-elements.html#core-style)
 * [core-toolbar](http://www.polymer-project.org/docs/elements/core-elements.html#core-toolbar)
 * [core-tooltip](http://www.polymer-project.org/docs/elements/core-elements.html#core-tooltip)
-
+* [core-transition](http://www.polymer-project.org/docs/elements/core-elements.html#core-transition)
 
 ## Contributing
 

data/app/assets/components/context-free-parser/context-free-parser.js

@@ -1,4 +1,4 @@
-/*
+/**
  * @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
@@ -60,7 +60,7 @@
               };
               entities.push(current);
               break;
-            
+
             // an entity may have these describable sub-features
             case 'attribute':
             case 'property':
@@ -94,7 +94,30 @@
               }
 
               break;
-  
+
+            case 'extends':
+            case 'mixins':
+              var parts = content.split(' ');
+              var subObj = {
+                name: parts[0],
+                url: parts[1] || null
+              };
+              makePragma(current, pragma, subObj);
+              break;
+
+            case 'return':
+              var returnRe = /\{(.+)\}\s+(.*)$/;
+
+              var returnReResult = content.match(returnRe);
+              if (returnReResult) {
+                var subReturnObj = {
+                  type: returnReResult[1],
+                  description: returnReResult[2]
+                };
+                subCurrent[pragma] = subReturnObj;
+              }
+              break;
+
             // everything else
             default:
               current[pragma] = content;
@@ -127,4 +150,4 @@
     scope.ContextFreeParser = ContextFreeParser;
   }
   
-})(this);
+})(this);

data/app/assets/components/core-a11y-keys/core-a11y-keys.html

@@ -222,8 +222,8 @@ Keys Syntax Grammar:
     }
 
     function keyboardEventToKey(ev) {
-      // fall back from .key, to .keyIdentifier, and then to .keyCode
-      var normalizedKey = transformKey(ev.key) || transformKeyIdentifier(ev.keyIdentifier) || transformKeyCode(ev.keyCode) || '';
+      // fall back from .key, to .keyIdentifier, to .keyCode, and then to .detail.key to support artificial keyboard events
+      var normalizedKey = transformKey(ev.key) || transformKeyIdentifier(ev.keyIdentifier) || transformKeyCode(ev.keyCode) || transformKey(ev.detail.key) || '';
       return {
         shift: ev.shiftKey,
         ctrl: ev.ctrlKey,
@@ -303,10 +303,10 @@ Keys Syntax Grammar:
       },
       publish: {
         /**
-         * The set of key combinations to listen for.
+         * The set of key combinations that will be matched (in keys syntax).
          *
          * @attribute keys
-         * @type string (keys syntax)
+         * @type string
          * @default ''
          */
         keys: '',

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

@@ -100,7 +100,7 @@ element.
      * Parameters to send to the specified URL, as JSON.
      *
      * @attribute params
-     * @type string (JSON)
+     * @type string
      * @default ''
      */
     params: '',
@@ -236,7 +236,7 @@ element.
 
     isSuccess: function(xhr) {
       var status = xhr.status || 0;
-      return !status || (status >= 200 && status < 300);
+      return (status >= 200 && status < 300);
     },
 
     processResponse: function(xhr) {
@@ -248,11 +248,15 @@ element.
     },
 
     processError: function(xhr) {
-      var response = xhr.status + ': ' + xhr.responseText;
+      var response = this.evalResponse(xhr);
+      var error = {
+        statusCode: xhr.status,
+        response: response
+      };
       if (xhr === this.activeRequest) {
-        this.error = response;
+        this.error = error;
       }
-      this.fire('core-error', {response: response, xhr: xhr});
+      this.fire('core-error', {response: error, xhr: xhr});
     },
 
     processProgress: function(progress, xhr) {
@@ -347,6 +351,14 @@ element.
       }
     },
 
+    getParams: function(params) {
+      params = this.params || params;
+      if (params && typeof(params) == 'string') {
+        params = JSON.parse(params);
+      }
+      return params;
+    },
+
     /**
      * Performs an Ajax request to the specified URL.
      *
@@ -356,10 +368,7 @@ element.
       var args = this.xhrArgs || {};
       // TODO(sjmiles): we may want XHR to default to POST if body is set
       args.body = this.body || args.body;
-      args.params = this.params || args.params;
-      if (args.params && typeof(args.params) == 'string') {
-        args.params = JSON.parse(args.params);
-      }
+      args.params = this.getParams(args.params);
       args.headers = this.headers || args.headers || {};
       if (args.headers && typeof(args.headers) == 'string') {
         args.headers = JSON.parse(args.headers);
@@ -367,7 +376,12 @@ element.
       var hasContentType = Object.keys(args.headers).some(function (header) {
         return header.toLowerCase() === 'content-type';
       });
-      if (!hasContentType && this.contentType) {
+      // No Content-Type should be specified if sending `FormData`.  
+      // The UA must set the Content-Type w/ a calculated  multipart boundary ID.
+      if (args.body instanceof FormData) {
+        delete args.headers['Content-Type'];
+      } 
+      else if (!hasContentType && this.contentType) {
         args.headers['Content-Type'] = this.contentType;
       }
       if (this.handleAs === 'arraybuffer' || this.handleAs === 'blob' ||
@@ -398,6 +412,20 @@ element.
         }
       }
       return this.activeRequest;
+    },
+
+    /**
+     * Aborts the current active request if there is one and resets internal
+     * state appropriately.
+     *
+     * @method abort
+     */
+    abort: function() {
+      if (!this.activeRequest) return;
+      this.activeRequest.abort();
+      this.activeRequest = null;
+      this.progress = {};
+      this.loading = false;
     }
 
   });

data/app/assets/components/core-ajax/core-xhr.html

@@ -51,7 +51,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         var async = !options.sync;
         //
         var params = this.toQueryString(options.params);
-        if (params && method == 'GET') {
+        if (params && method.toUpperCase() == 'GET') {
           url += (url.indexOf('?') > 0 ? '&' : '?') + params;
         }
         var xhrParams = this.isBodyMethod(method) ? (options.body || params) : null;

data/app/assets/components/core-animated-pages/core-animated-pages.html

@@ -8,6 +8,7 @@
     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link href="../core-selector/core-selector.html" rel="import">
+<link href="../core-resizable/core-resizable.html" rel="import">
 
 <link href="transitions/hero-transition.html" rel="import">
 <link href="transitions/cross-fade.html" rel="import">
@@ -218,6 +219,7 @@ Example:
 
 @element core-animated-pages
 @extends core-selector
+@mixins Polymer.CoreResizer https://github.com/polymer/core-resizable
 @status beta
 @homepage github.io
 -->
@@ -245,7 +247,7 @@ Fired when a page transition completes.
 
 <script>
 
-  Polymer({
+  Polymer(Polymer.mixin({
 
     eventDelegates: {
       'core-transitionend': 'transitionEnd'
@@ -283,6 +285,14 @@ Fired when a page transition completes.
       this.transitioning = [];
     },
 
+    attached: function() {
+      this.resizerAttachedHandler();
+    },
+
+    detached: function() {
+      this.resizerDetachedHandler();
+    },
+
     transitionsChanged: function() {
       this._transitions = this.transitions.split(' ');
     },
@@ -410,12 +420,14 @@ Fired when a page transition completes.
 
       if (!oldItem) {
         this.applySelection(this.selectedItem, true);
+        this.async(this.notifyResize);
         return;
       }
 
       if (this.hasAttribute('no-transition') || !this._transitionElements || !this._transitionElements.length) {
         this.applySelection(oldItem, false);
         this.applySelection(this.selectedItem, true);
+        this.notifyResize();
         return;
       }
 
@@ -425,11 +437,22 @@ Fired when a page transition completes.
         Polymer.flush();
         Polymer.endOfMicrotask(function() {
           self.applyTransition(oldItem, self.selectedItem);
+          self.notifyResize();
         });
       }
+    },
+
+    resizerShouldNotify: function(el) {
+      // Only notify descendents of selected item
+      while (el && (el != this)) {
+        if (el == this.selectedItem) {
+          return true;
+        }
+        el = el.parentElement || (el.parentNode && el.parentNode.host);
+      }
     }
 
-  });
+  }, Polymer.CoreResizer));
 
 </script>
 

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

@@ -7,4 +7,4 @@
     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="../web-animations-next/web-animations.html">
+<script src="../web-animations-js/web-animations-next-lite.min.js"></script>

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

@@ -76,7 +76,7 @@ and instead put a div inside and style that.
      * opened. If unspecified, the `core-collapse` itself is the target.
      *
      * @attribute target
-     * @type object
+     * @type Object
      * @default null
      */
     target: null,

data/app/assets/components/core-doc-viewer/elements/core-doc-page.css

@@ -10,6 +10,7 @@
 
 :host {
   display: block;
+  font-family: Roboto;
 }
 
 #info > * {
@@ -34,7 +35,11 @@ h1 {
   color: #E91E63;
   font-size: 52px;
   line-height: 60px;
-  font-weight: inherit;
+  font-weight: 300;
+}
+
+h3 {
+  font-weight: 500;
 }
 
 .box {
@@ -68,6 +73,26 @@ h1 {
   font-weight: 500;
 }
 
+.inheritance {
+  border-bottom: 1px solid #eee;
+  border-top: 1px solid #eee;
+  padding: 16px 0;
+}
+
+.inheritance h3 {
+  margin: 0 10px 0 0;
+}
+
+.inheritance .top > * {
+  margin-right: 7px;
+}
+
+.top b,
+.top strong {
+  text-transform: uppercase;
+  font-size: 14px;
+}
+
 .top pre {
   background-color: rgb(250, 250, 250);
   padding: 16px;

data/app/assets/components/core-doc-viewer/elements/core-doc-page.html

@@ -15,6 +15,8 @@
 <link rel="import" href="../../prettify-element/prettify-import.html">
 <link rel="import" href="../../context-free-parser/context-free-parser.html">
 
+<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700|Source+Code+Pro' rel='stylesheet' type='text/css'>
+
 <!--
 
 Displays formatted source documentation scraped from input urls.
@@ -43,10 +45,38 @@ Displays formatted source documentation scraped from input urls.
           <span layout horizontal center hidden?="{{!data.version}}"><core-icon icon="info-outline"></core-icon>Version: {{data.version}}</span>
         </p>
 
-        <template if="{{data.extends}}">
-          <section class="top">
-            <h3 id="{{data.name}}.extends">Extends: <a href="#{{data.extends}}">{{data.extends}}</a></h3>
-          </section>
+        <template bind="{{data as data}}" if="{{data.extends || data.mixins}}">
+          <div class="inheritance">
+            <template if="{{data.extends}}">
+              <section class="top extends" layout horizontal center>
+                <h3 id="{{data.name}}.extends">Extends:</h3>
+                <template repeat="{{e, i in data.extends}}">
+                  <div>
+                    <template if="{{e.url}}">
+                      <a href="{{e.url}}">{{e.name}}</a>
+                    </template>
+                    <template if="{{!e.url}}"><a href="#{{e.name}}">{{e.name}}</a></template>
+                    <span hidden?="{{i == data.extends.length - 1}}">,</span>
+                  </div>
+                </template>
+              </section>
+            </template>
+
+            <template if="{{data.mixins}}">
+              <section class="top mixins" layout horizontal center>
+                <h3 id="{{data.name}}.mixins">Mixins:</h3>
+                <template repeat="{{e, i in data.mixins}}">
+                  <div>
+                    <template if="{{e.url}}">
+                      <a href="{{e.url ? e.url : e.name}}">{{e.name}}</a>
+                    </template>
+                    <template if="{{!e.url}}"><span>{{e.name}}</span></template>
+                    <span hidden?="{{i == data.mixins.length - 1}}">,</span>
+                  </div>
+                </template>
+              </section>
+            </template>
+          </div>
         </template>
 
         <template if="{{data.description}}">
@@ -177,6 +207,11 @@ Displays formatted source documentation scraped from input urls.
           if (elementToFocus) {
             elementToFocus.scrollIntoView();
           }
+          else {
+            var viewer = this.$.panel.scroller;
+            viewer.scrollTop = 0;
+            viewer.scrollLeft = 0;
+          }
         });
       }
 

data/app/assets/components/core-doc-viewer/elements/core-doc-toc.css

@@ -19,9 +19,9 @@ core-header-panel {
   top: 0;
   left: 0;
   height: 100%;
-  width: 100%;
+  width: 100%;
 }
 
-core-toolbar {
-  background-color: #eeeeee;
+core-toolbar {
+  background-color: #eeeeee;
 }

data/app/assets/components/core-drawer-panel/core-drawer-panel.css

@@ -24,7 +24,7 @@ core-selector > #drawer {
   height: 100%;
   will-change: transform;
   box-sizing: border-box;
-  -mox-box-sizing: border-box;
+  -moz-box-sizing: border-box;
 }
 
 .transition > #drawer {
@@ -40,11 +40,6 @@ right-drawer: make drawer on the right side
   right: 0;
 }
 
-.right-drawer.transition > #drawer {
-  transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
-  transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
-}
-
 polyfill-next-selector { content: ':host [drawer]'; }
 ::content[select="[drawer]"] > * {
   position: absolute;
@@ -92,6 +87,19 @@ polyfill-next-selector { content: '#main > [main]'; }
   transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
 }
 
+#edgeSwipeOverlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 20px;
+}
+
+.right-drawer > #main > #edgeSwipeOverlay {
+  right: 0;
+  left: auto;
+}
+
 /*
 narrow layout
 */

data/app/assets/components/core-drawer-panel/core-drawer-panel.html

@@ -9,14 +9,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 <!--
 `core-drawer-panel` contains a drawer panel and a main panel.  The drawer
-and the main panel are side-by-side with drawer on the left.  When browser
+and the main panel are side-by-side with drawer on the left.  When the browser
 window size is smaller than the `responsiveWidth`, `core-drawer-panel`
 changes to narrow layout.  In narrow layout, the drawer will be stacked on top
-of the main panel.  The drawer will be slided in/out to hide/reveal the main
+of the main panel.  The drawer will slide in/out to hide/reveal the main
 panel.
 
-Use the attribute `drawer` to indicate the element is a drawer panel and
-`main` to indicate is a main panel.
+Use the attribute `drawer` to indicate that the element is the drawer panel and
+`main` to indicate that the element is the main panel.
 
 Example:
 
@@ -90,6 +90,7 @@ To position the drawer to the right, add `rightDrawer` attribute.
     <div id="main" _style="left: {{ narrow || rightDrawer ? '0' : drawerWidth }}; right: {{ rightDrawer ? (narrow ? '' : drawerWidth) : '' }};">
       <content select="[main]"></content>
       <div id="scrim" on-tap="{{togglePanel}}"></div>
+      <div id="edgeSwipeOverlay" hidden?="{{!narrow || disableEdgeSwipe}}"></div>
     </div>
 
     <div id="drawer" _style="width: {{ drawerWidth }}">
@@ -110,6 +111,19 @@ To position the drawer to the right, add `rightDrawer` attribute.
      * @param {Object} detail
      * @param {boolean} detail.narrow true if the panel is in narrow layout.
      */
+     
+    /**
+     * Fired when the selected panel changes.
+     * 
+     * Listening for this event is an alternative to observing changes in the `selected` attribute.
+     * This event is fired both when a panel is selected and deselected.
+     * The `isSelected` detail property contains the selection state.
+     * 
+     * @event core-select
+     * @param {Object} detail
+     * @param {boolean} detail.isSelected true for selection and false for deselection
+     * @param {Object} detail.item the panel that the event refers to
+     */
 
     publish: {
 
@@ -186,7 +200,16 @@ To position the drawer to the right, add `rightDrawer` attribute.
        * @type boolean
        * @default false
        */
-      forceNarrow: false
+      forceNarrow: false,
+      
+      /**
+       * If true, swipe from the edge is disable.
+       *
+       * @attribute disableEdgeSwipe
+       * @type boolean
+       * @default false
+       */
+      disableEdgeSwipe: false
     },
 
     eventDelegates: {
@@ -314,9 +337,10 @@ To position the drawer to the right, add `rightDrawer` attribute.
     },
 
     isEdgeTouch: function(e) {
-      return this.swipeAllowed() && (this.rightDrawer ?
-        e.pageX >= this.offsetWidth - this.edgeSwipeSensitivity :
-        e.pageX <= this.edgeSwipeSensitivity);
+      return !this.disableEdgeSwipe && this.swipeAllowed() &&
+        (this.rightDrawer ?
+          e.pageX >= this.offsetWidth - this.edgeSwipeSensitivity :
+          e.pageX <= this.edgeSwipeSensitivity);
     },
 
     trackStart : function(e) {

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

@@ -140,9 +140,11 @@ not scroll with its container.
        * The horizontal alignment of the popup relative to `relatedTarget`. `left`
        * means the left edges are aligned together. `right` means the right edges
        * are aligned together.
+       * 
+       * Accepted values: 'left', 'right'
        *
        * @attribute halign
-       * @type 'left' | 'right'
+       * @type String
        * @default 'left'
        */
       halign: 'left',
@@ -152,8 +154,10 @@ not scroll with its container.
        * the top edges are aligned together. `bottom` means the bottom edges are
        * aligned together.
        *
+       * Accepted values: 'top', 'bottom'
+       *
        * @attribute valign
-       * @type 'top' | 'bottom'
+       * @type String
        * @default 'top'
        */
       valign: 'top',
@@ -191,6 +195,8 @@ not scroll with its container.
         style[dims.position.v] = null;
         dims.position.v_by = null;
       }
+      style.width = null;
+      style.height = null;
       this.super();
     },
 

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

@@ -47,6 +47,7 @@ See `bower.json` for the complete list of components.
 <link rel="import" href="../core-range/core-range.html">
 <link rel="import" href="../core-scaffold/core-scaffold.html">
 <link rel="import" href="../core-scroll-header-panel/core-scroll-header-panel.html">
+<link rel="import" href="../core-scroll-threshold/core-scroll-threshold.html">
 <link rel="import" href="../core-selection/core-selection.html">
 <link rel="import" href="../core-selector/core-selector.html">
 <link rel="import" href="../core-shared-lib/core-shared-lib.html">

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

@@ -28,7 +28,6 @@ Example setting size to 32px x 32px:
 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:
 
-    <!-- import default iconset and core-icon -->
     <link rel="import" href="/components/core-icons/core-icons.html">
 
     <core-icon icon="menu"></core-icon>
@@ -36,7 +35,6 @@ To use the default set of icons, import  `core-icons.html` and use the `icon` at
 To use a different built-in set of icons, import  `core-icons/<iconset>-icons.html`, and
 specify the icon as `<iconset>:<icon>`. For example:
 
-    &lt;!-- import communication iconset and core-icon --&gt;
     <link rel="import" href="/components/core-icons/communication-icons.html">
 
     <core-icon icon="communication:email"></core-icon>