polymer-core-rails 0.2.0 → 0.2.5

data/app/assets/components/core-style/my-theme.html

@@ -70,4 +70,4 @@
     color: {{g.theme.colorTwo | cycle(100)}}
   }
 
-</core-style>
+</core-style>

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

@@ -42,19 +42,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 }
 
 /* narrow layout */
-:host(.narrow) {
+:host(.core-narrow),
+:host-context(.core-narrow) {
   height: 56px;
 }
 
-:host(.narrow.medium-tall) {
+polyfill-next-selector { content: ':host.core-narrow.medium-tall, .core-narrow :host.medium-tall'; }
+:host(.core-narrow.medium-tall),
+:host-context(.core-narrow):host(.medium-tall) {
   height: 112px;
 }
 
-:host(.narrow.tall) {
+polyfill-next-selector { content: ':host.core-narrow.tall, .core-narrow :host.tall'; }
+:host(.core-narrow.tall),
+:host-context(.core-narrow):host(.tall) {
   height: 168px;
 }
 
-:host(.narrow) .toolbar-tools {
+polyfill-next-selector { content: ':host.core-narrow .toolbar-tools, .core-narrow :host .toolbar-tools'; }
+:host(.core-narrow) .toolbar-tools,
+:host-context(.core-narrow) .toolbar-tools {
   height: 56px;
   padding: 0;
 }
@@ -81,15 +88,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 }
 
 /* make elements (e.g. buttons) respond to mouse/touch events */
-polyfill-next-selector { content: '.toolbar-tools > *'; }
-::content > * {
+polyfill-next-selector { content: '.toolbar-tools > *:not([disabled])'; }
+::content > *:not([disabled]) {
   pointer-events: auto;
 }
 
 /* elements spacing */
 polyfill-next-selector { content: '.toolbar-tools > *'; }
 ::content > * {
-  margin: 0px 8px;
+  margin: 0 8px;
 }
 
 /* misc helpers */

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

@@ -8,8 +8,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <!--
-`core-toolbar` is a horizontal bar containing elements that can be used for
-label, navigation, search and actions.
+`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>
@@ -23,15 +28,16 @@ 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">
       <core-icon-button icon="menu"></core-icon-button>
     </core-toolbar>
 
-When taller, elements can pin to either the top (default), middle or bottom.
+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>
@@ -39,6 +45,10 @@ When taller, elements can pin to either the top (default), middle or bottom.
       <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`.
 
@@ -46,6 +56,9 @@ with `bottom`.
       <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
@@ -53,7 +66,7 @@ with `bottom`.
 
 <link rel="import" href="../polymer/polymer.html">
 
-<polymer-element name="core-toolbar" noscript>
+<polymer-element name="core-toolbar" attributes="justify middleJustify bottomJustify">
 <template>
 
   <link rel="stylesheet" href="core-toolbar.css">
@@ -61,7 +74,7 @@ with `bottom`.
   <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>
@@ -71,4 +84,72 @@ with `bottom`.
   </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 (this.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

@@ -25,4 +25,4 @@
     
   </template>
 
-</x-meta>
+</x-meta>

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

@@ -9,21 +9,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   box-sizing: border-box;
   position: relative;
   display: inline-block;
+  outline: none;
 }
 
-:host(:hover) .polymer-tooltip {
+:host(:hover:not([disabled])) .core-tooltip {
   visibility: visible !important;
 }
 
-:host(:focus) .polymer-tooltip {
+:host([focused]) .core-tooltip {
   visibility: visible !important;
 }
 
-.polymer-tooltip:not(.show) {
+.core-tooltip:not(.show) {
   visibility: hidden;
 }
 
-.polymer-tooltip {
+.core-tooltip {
   position: absolute;
   font-size: 10px;
   font-family: sans-serif;
@@ -39,17 +40,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   user-select: none;
 }
 
-:host([large]) .polymer-tooltip {
+:host([large]) .core-tooltip {
   line-height: 14px;
   font-size: 14px;
   padding: 16px;
 }
 
-.polymer-tooltip.noarrow::after {
+.core-tooltip.noarrow::after {
   display: none;
 }
 
-.polymer-tooltip::after {
+.core-tooltip::after {
   position: absolute;
   border: solid transparent;
   content: '';
@@ -78,25 +79,25 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   right: 100%;
 }
 
-.polymer-tooltip.bottom::after {
+.core-tooltip.bottom::after {
   bottom: 100%;
   left: calc(50% - 4px);
   border-bottom-color: rgba(0,0,0,0.8);
 }
 
-.polymer-tooltip.left::after {
+.core-tooltip.left::after {
   left: 100%;
   top: calc(50% - 4px);
   border-left-color: rgba(0,0,0,0.8);
 }
 
-.polymer-tooltip.top::after {
+.core-tooltip.top::after {
   top: 100%;
   left: calc(50% - 4px);
   border-top-color: rgba(0,0,0,0.8);
 }
 
-.polymer-tooltip.right::after {
+.core-tooltip.right::after {
   right: 100%;
   top: calc(50% - 4px);
   border-right-color: rgba(0,0,0,0.8);

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

@@ -24,7 +24,7 @@ content.
 <b>Example</b> - positioning the tooltip to the right:
 
     <core-tooltip label="I'm a tooltip to the right" position="right">
-      <polymer-ui-icon-button icon="drawer"></polymer-ui-icon-button>
+      <core-icon-button icon="drawer"></core-icon-button>
     </core-tooltip>
 
 <b>Example</b> - no arrow and showing by default:
@@ -33,6 +33,12 @@ content.
       <img src="image.jpg">
     </core-tooltip>
 
+<b>Example</b> - disable the tooltip.
+
+    <core-tooltip label="Disabled label never shows" disabled>
+      ...
+    </core-tooltip>
+
 <b>Example</b> - rich tooltip using the `tip` attribute:
 
     <core-tooltip>
@@ -42,12 +48,25 @@ content.
       </div>
     </core-tooltip>
 
+By default, the `tip` attribute specifies the HTML content for a rich tooltip.
+You can customize this attribute with the `tipAttribute` attribute:
+
+    <core-tooltip tipAttribute="htmltooltip">
+      <div>Example of a rich information tooltip</div>
+      <div htmltooltip>
+        ...
+      </div>
+    </core-tooltip>
+
 @group Polymer Core Elements
 @element core-tooltip
-@homepage http://polymer.github.io/core-tooltip
+@extends core-focusable
+@mixins Polymer.CoreFocusable
+@homepage http://www.polymer-project.org/components/core-tooltip/index.html
 -->
 
 <link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../core-focusable/core-focusable.html">
 
 <!-- TODO: would be nice to inherit from label to get .htmlFor, and .control,
            but the latter is readonly. -->
@@ -55,90 +74,133 @@ content.
 <!-- TODO: detect mobile and apply the .large class, instead of manual
            control. -->
 <!-- TODO: possibly reuse core-overlay. -->
-<polymer-element name="core-tooltip" attributes="noarrow position label show" tabindex="0">
+<polymer-element name="core-tooltip" attributes="noarrow position label show tipAttribute" role="tooltip" tabindex="0">
 <template>
 
   <link rel="stylesheet" href="core-tooltip.css">
-
-  <div id="tooltip" class="polymer-tooltip {{position}} {{ {noarrow: noarrow, show: show} | tokenList}}" layout horizontal center>
-    <content select="[tip]">{{label}}</content>
+  <div id="tooltip" hidden?="{{!hasTooltipContent}}"
+       class="core-tooltip {{position}} {{ {noarrow: noarrow, show: show && !disabled} | tokenList}}">
+    <content id="c" select="[{{tipAttribute}}]">{{label}}</content>
   </div>
 
   <content></content>
 
 </template>
 <script>
-
-  Polymer('core-tooltip', {
-
-    /**
-     * A simple string label for the tooltip to display. To display a rich
-     * that includes HTML, use the `tip` attribute on the content.
-     *
-     * @attribute label
-     * @type string
-     * @default null
-     */
-    label: null,
-
-    /**
-     * If true, the tooltip an arrow pointing towards the content.
-     *
-     * @attribute noarrow
-     * @type boolean
-     * @default false
-     */
-    noarrow: false,
-
-    /**
-     * If true, the tooltip displays by default.
-     *
-     * @attribute show
-     * @type boolean
-     * @default false
-     */
-    show: false,
-
-    /**
-     * Positions the tooltip to the top, right, bottom, left of its content.
-     *
-     * @attribute position
-     * @type string
-     * @default 'bottom'
-     */
-    position: 'bottom',
-
-    attached: function() {
-      this.setPosition();
-    },
-
-    labelChanged: function(oldVal, newVal) {
-      // Run if we're not after attached().
-      if (oldVal) {
-        this.setPosition();
+(function() {
+
+  var proto = {
+
+      /**
+       * A simple string label for the tooltip to display. To display a rich
+       * HTML tooltip instead, omit `label` and include the `tip` attribute
+       * on a child node of `core-tooltip`.
+       *
+       * @attribute label
+       * @type string
+       * @default null
+       */
+      label: null,
+
+      computed: {
+        // Indicates whether the tooltip has a set label propety or
+        // an element with the `tip` attribute.
+        hasTooltipContent: 'label || !!tipElement'
+      },
+
+      publish: {
+        /**
+         * Forces the tooltip to display. If `disabled` is set, this property is ignored.
+         *
+         * @attribute show
+         * @type boolean
+         * @default false
+         */
+        show: {value: false, reflect: true},
+
+        /**
+         * Positions the tooltip to the top, right, bottom, left of its content.
+         *
+         * @attribute position
+         * @type string
+         * @default 'bottom'
+         */
+        position: {value: 'bottom', reflect: true},
+
+        /**
+         * If true, the tooltip an arrow pointing towards the content.
+         *
+         * @attribute noarrow
+         * @type boolean
+         * @default false
+         */
+        noarrow: {value: false, reflect: true}
+      },
+
+      /**
+       * Customizes the attribute used to specify which content
+       * is the rich HTML tooltip.
+       *
+       * @attribute tipAttribute
+       * @type string
+       * @default 'tip'
+       */
+      tipAttribute: 'tip',
+
+      attached: function() {
+        this.updatedChildren();
+      },
+
+      updatedChildren: function () {
+        this.tipElement = null;
+
+        for (var i = 0, el; el = this.$.c.getDistributedNodes()[i]; ++i) {
+          if (el.hasAttribute && el.hasAttribute('tip')) {
+            this.tipElement = el;
+            break;
+          }
+        }
+
+        // Job ensures we're not double calling setPosition() on DOM attach.
+        this.job('positionJob', this.setPosition);
+
+        // Monitor children to re-position tooltip when light dom changes.
+        this.onMutation(this, this.updatedChildren);
+      },
+
+      labelChanged: function(oldVal, newVal) {
+        this.job('positionJob', this.setPosition);
+      },
+
+      positionChanged: function(oldVal, newVal) {
+        this.job('positionJob', this.setPosition);
+      },
+
+      setPosition: function() {
+        var controlWidth = this.clientWidth;
+        var controlHeight = this.clientHeight;
+        var toolTipWidth = this.$.tooltip.clientWidth;
+        var toolTipHeight = this.$.tooltip.clientHeight;
+
+        switch (this.position) {
+          case 'top':
+          case 'bottom':
+            this.$.tooltip.style.left = (controlWidth - toolTipWidth) / 2 + 'px';
+            this.$.tooltip.style.top = null;
+            break;
+          case 'left':
+          case 'right':
+            this.$.tooltip.style.left = null;
+            this.$.tooltip.style.top = (controlHeight - toolTipHeight) / 2 + 'px';
+            break;
+        }
       }
-    },
-
-    setPosition: function() {
-      var controlWidth = this.clientWidth;
-      var controlHeight = this.clientHeight;
-
-      var styles = getComputedStyle(this.$.tooltip);
-      var toolTipWidth = parseFloat(styles.width);
-      var toolTipHeight = parseFloat(styles.height);
-
-      switch (this.position) {
-        case 'top':
-        case 'bottom':
-          this.$.tooltip.style.left = (controlWidth - toolTipWidth) / 2 + 'px';
-          break;
-        case 'left':
-        case 'right':
-          this.$.tooltip.style.top = (controlHeight - toolTipHeight) / 2 + 'px';
-          break;
-      }
-    }
-  });
+
+    };
+
+    Polymer.mixin2(proto, Polymer.CoreFocusable);
+    Polymer(proto);
+  })();
 
 </script>
 </polymer-element>