update to use ui-iconset

bower.json

@@ -3,6 +3,7 @@
   "private": true,
   "dependencies": {
     "polymer": "Polymer/polymer#master",
-    "polymer-ui-theme-aware": "Polymer/polymer-ui-theme-aware#master"
+    "polymer-ui-theme-aware": "Polymer/polymer-ui-theme-aware#master",
+    "polymer-ui-iconset": "Polymer/polymer-ui-iconset#master"
   }
 }

metadata.html

@@ -3,9 +3,6 @@
   <template>
     <polymer-ui-icon icon="search" theme="polymer-ui-light-theme"></polymer-ui-icon>
   </template>
-  <property name="bx" hidden="true"></property>
-  <property name="by" hidden="true"></property>
-  <property name="index" hidden="true"></property>
   <template id="imports">
     <link rel="import" href="polymer-ui-icon.html">
   </template>

polymer-ui-icon.css

@@ -10,15 +10,3 @@ license that can be found in the LICENSE file.
   cursor: pointer;
   background-repeat: no-repeat;
 }
-
-:host(.polymer-ui-dark-icon:host, .polymer-ui-light-theme:host) {
-  background-position: -24px 0;
-}
-
-:host(.polymer-ui-light-icon:host, .polymer-ui-dark-theme:host) {
-  background-position: -72px 0;
-}
-
-:host(.polymer-ui-icons:host) {
-  background-image: url(action-icons.png);
-}

polymer-ui-icon.html

@@ -28,141 +28,87 @@
  *
  *     <polymer-ui-icon icon="menu"></polymer-ui-icon>
  *
+ * See <a href="polymer-ui-iconset.html">polymer-ui-iconset</a> on how to use
+ * your own icon set.
+ *
  * @class polymer-ui-icon
  */
 -->
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">
+<link rel="import" href="../polymer-ui-iconset/polymer-ui-iconset.html">
+<link rel="import" href="polymer-ui-icons.html">
 
 <polymer-element name="polymer-ui-icon" extends="polymer-ui-theme-aware" attributes="src size index icon">
   <template>
     <link rel="stylesheet" href="polymer-ui-icon.css">
+    <polymer-ui-iconset id="meta"></polymer-ui-iconset>
     <content></content>
   </template>
   <script>
-    (function() {
-      var icons = [
-       'drawer',
-       'menu',
-       'search',
-       'dropdown',
-       'close',
-       'add',
-       'trash',
-       'refresh',
-       'settings',
-       'dialoga',
-       'left',
-       'right',
-       'down',
-       'up',
-       'grid',
-       'contact',
-       'account',
-       'plus',
-       'time',
-       'marker',
-       'briefcase',
-       'array',
-       'columns',
-       'list',
-       'modules',
-       'quilt',
-       'stream',
-       'maximize',
-       'shrink',
-       'sort',
-       'shortcut',
-       'dialog',
-       'twitter',
-       'facebook',
-       'favorite',
-       'gplus',
-       'filter',
-       'tag',
-       'plusone',
-       'dots'
-      ];
-      var map = {};
-      icons.forEach(function(name, i) {
-        map[name] = i;
-      });
-      icons = map;
-
-      Polymer('polymer-ui-icon', {
-        /**
-         * The URL of an image for the icon.
-         *
-         * @attribute src
-         * @type string
-         * @default ''
-         */
-        src: '',
-        /**
-         * Specifies the size of the icon.
-         *
-         * @attribute size
-         * @type string
-         * @default 24
-         */
-        size: 24,
-        /**
-         * Specifies the icon from the Polymer icon set.
-         *
-         * @attribute icon
-         * @type string
-         * @default ''
-         */
-        icon: '',
-        bx: 0,
-        by: 0,
-        icons: icons,
-        ready: function() {
-          this.sizeChanged();
-        },
-        sizeChanged: function() {
-          this.style.width = this.style.height = this.size + 'px';
-        },
-        iconChanged: function() {
-          this.index = this.icon in icons ? icons[this.icon] : -1;
-        },
-        indexChanged: function() {
-          this.classList.add('polymer-ui-icons');
-          this.by = -this.size * this.index;
-          this.updateIcon();
-        },
-        srcChanged: function() {
-          this.classList.remove('polymer-ui-icons');
-          this.style.backgroundImage = 'url(' + this.src + ')';
-          this.updateIcon();
-        },
-        activeThemeChanged: function(old) {
-          this.super(arguments);
-          this.style.backgroundPosition = '';
-          this.bx = calcThemeOffset(this.activeTheme, this);
-          this.updateIcon();
-        },
-        updateIcon: function() {
-          if (this.src) {
-            this.style.backgroundPosition = 'center';
-            this.style.backgroundSize = this.size + 'px ' + this.size + 'px';
-          } else {
-            this.style.backgroundPosition = (this.bx + 'px') + ' ' + (this.by + 'px');
-          }
+    Polymer('polymer-ui-icon', {
+      /**
+       * The URL of an image for the icon.
+       *
+       * @attribute src
+       * @type string
+       * @default ''
+       */
+      src: '',
+      /**
+       * Specifies the size of the icon.
+       *
+       * @attribute size
+       * @type string
+       * @default 24
+       */
+      size: 24,
+      /**
+       * Specifies the icon from the icon set.
+       *
+       * @attribute icon
+       * @type string
+       * @default ''
+       */
+      icon: '',
+      defaultIconset: 'polymer-ui-icons',
+      observe: {
+        icon: 'updateIcon',
+        activeTheme: 'updateIcon'
+      },
+      ready: function() {
+        this.sizeChanged();
+      },
+      sizeChanged: function() {
+        this.style.width = this.style.height = this.size + 'px';
+      },
+      srcChanged: function() {
+        this.style.backgroundImage = 'url(' + this.src + ')';
+        this.style.backgroundPosition = 'center';
+        this.style.backgroundSize = this.size + 'px ' + this.size + 'px';
+      },
+      getIconset: function(name) {
+        return this.$.meta.byId(name || this.defaultIconset);
+      },
+      updateIcon: function() {
+        if (!this.icon) {
+          return;
         }
-      });
-      // memoize offset because getComputedStyle is expensive
-      var themes = {};
-      function calcThemeOffset(theme, node) {
-        if (themes[theme] === undefined) {
-          var bp = getComputedStyle(node).backgroundPosition.split(' ');
-          // support 4 value syntax (https://code.google.com/p/chromium/issues/detail?id=310977)
-          var l = bp.length === 4 ? bp[1] : bp[0];
-          var offset = parseFloat(l);
-          themes[theme] = offset;
+        var a = this.icon.split(':');
+        var icon = a.pop();
+        var n = a.pop();
+        var s = this.getIconset(n);
+        if (s) {
+          var o = s.getOffset(icon, this.activeTheme);
+          if (o) {
+            var r = this.size / s.iconsize;
+            this.style.backgroundImage = 'url(' + s.src + ')';
+            this.style.backgroundPosition = 
+                (-o.offsetx * r + 'px') + ' ' + (-o.offsety * r + 'px');
+            this.style.backgroundSize = r === 1 ? 'auto' : s.width * r + 'px';
+          }
         }
-        return themes[theme]; 
       }
-    })();
+    });
   </script>
 </polymer-element>

polymer-ui-icons.html

@@ -0,0 +1,15 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+
+<polymer-ui-iconset id="polymer-ui-icons" src="action-icons.png" width="24" iconsize="24"
+    icons="drawer menu search dropdown close add trash refresh settings dialoga 
+           left right down up grid contact account plus time marker 
+           briefcase array columns list modules quilt stream maximize shrink sort 
+           shortcut dialog twitter facebook favorite gplus filter tag plusone dots">
+
+  <property theme="polymer-ui-light-theme" offsetx="24"></property>
+  <property theme="polymer-ui-dark-theme" offsetx="72"></property>
+</polymer-ui-iconset>

smoke.html

@@ -29,9 +29,10 @@
         </span>
       </template>
     </div>
+    <polymer-ui-icon id="meta"></polymer-ui-icon>
     <script>
       addEventListener('WebComponentsReady', function() {
-        var icons = Object.keys(document.createElement('polymer-ui-icon').icons);
+        var icons = Object.keys(document.querySelector('#meta').getIconset().iconMap);
         var plates = document.querySelectorAll('template');
         for (var i = 0, p; p=plates[i]; i++) {
           p.model = icons;