11320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 21320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 31320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci Polymer('core-iconset', { 41320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 51320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 61320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * The URL of the iconset image. 71320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 81320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute src 91320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type string 101320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default '' 111320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 121320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci src: '', 131320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 141320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 151320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * The width of the iconset image. This must only be specified if the 161320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * icons are arranged into separate rows inside the image. 171320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 181320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute width 191320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type number 201320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default 0 211320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 221320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci width: 0, 231320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 241320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 251320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * A space separated list of names corresponding to icons in the iconset 261320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * image file. This list must be ordered the same as the icon images 271320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * in the image file. 281320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 291320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute icons 301320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type string 311320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default '' 321320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 331320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci icons: '', 341320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 351320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 361320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * The size of an individual icon. Note that icons must be square. 371320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 381320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute iconSize 391320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type number 401320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default 24 411320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 421320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci iconSize: 24, 431320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 441320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 451320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * The horizontal offset of the icon images in the inconset src image. 461320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * This is typically used if the image resource contains additional images 471320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * beside those intended for the iconset. 481320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 491320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute offsetX 501320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type number 511320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default 0 521320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 531320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci offsetX: 0, 541320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 551320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * The vertical offset of the icon images in the inconset src image. 561320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * This is typically used if the image resource contains additional images 571320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * beside those intended for the iconset. 581320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 591320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @attribute offsetY 601320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @type number 611320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @default 0 621320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 631320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci offsetY: 0, 641320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci type: 'iconset', 651320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 661320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci created: function() { 671320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.iconMap = {}; 681320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.iconNames = []; 691320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.themes = {}; 701320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 711320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 721320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci ready: function() { 731320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // TODO(sorvell): ensure iconset's src is always relative to the main 741320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // document 751320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (this.src && (this.ownerDocument !== document)) { 761320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.src = this.resolvePath(this.src, this.ownerDocument.baseURI); 771320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 781320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.super(); 791320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.updateThemes(); 801320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 811320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 821320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci iconsChanged: function() { 831320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var ox = this.offsetX; 841320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var oy = this.offsetY; 851320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.icons && this.icons.split(/\s+/g).forEach(function(name, i) { 861320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.iconNames.push(name); 871320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.iconMap[name] = { 881320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci offsetX: ox, 891320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci offsetY: oy 901320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 911320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (ox + this.iconSize < this.width) { 921320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci ox += this.iconSize; 931320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } else { 941320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci ox = this.offsetX; 951320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci oy += this.iconSize; 961320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 971320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, this); 981320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 991320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 1001320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci updateThemes: function() { 1011320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var ts = this.querySelectorAll('property[theme]'); 1021320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci ts && ts.array().forEach(function(t) { 1031320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.themes[t.getAttribute('theme')] = { 1041320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci offsetX: parseInt(t.getAttribute('offsetX')) || 0, 1051320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci offsetY: parseInt(t.getAttribute('offsetY')) || 0 1061320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }; 1071320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, this); 1081320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 1091320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 1101320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci // TODO(ffu): support retrived by index e.g. getOffset(10); 1111320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 1121320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * Returns an object containing `offsetX` and `offsetY` properties which 1131320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * specify the pixel locaion in the iconset's src file for the given 1141320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * `icon` and `theme`. It's uncommon to call this method. It is useful, 1151320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * for example, to manually position a css backgroundImage to the proper 1161320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * offset. It's more common to use the `applyIcon` method. 1171320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 1181320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @method getOffset 1191320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @param {String|Number} icon The name of the icon or the index of the 1201320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * icon within in the icon image. 1211320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @param {String} theme The name of the theme. 1221320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @returns {Object} An object specifying the offset of the given icon 1231320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * within the icon resource file; `offsetX` is the horizontal offset and 1241320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * `offsetY` is the vertical offset. Both values are in pixel units. 1251320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 1261320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci getOffset: function(icon, theme) { 1271320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var i = this.iconMap[icon]; 1281320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (!i) { 1291320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var n = this.iconNames[Number(icon)]; 1301320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci i = this.iconMap[n]; 1311320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 1321320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var t = this.themes[theme]; 1331320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (i && t) { 1341320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci return { 1351320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci offsetX: i.offsetX + t.offsetX, 1361320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci offsetY: i.offsetY + t.offsetY 1371320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 1381320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 1391320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci return i; 1401320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }, 1411320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 1421320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci /** 1431320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * Applies an icon to the given element as a css background image. This 1441320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * method does not size the element, and it's often necessary to set 1451320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * the element's height and width so that the background image is visible. 1461320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * 1471320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @method applyIcon 1481320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @param {Element} element The element to which the background is 1491320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * applied. 1501320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @param {String|Number} icon The name or index of the icon to apply. 1511320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @param {Number} scale (optional, defaults to 1) A scaling factor 1521320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * with which the icon can be magnified. 1531320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci * @return {Element} The icon element. 1541320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci */ 1551320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci applyIcon: function(element, icon, scale) { 1561320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var offset = this.getOffset(icon); 1571320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci scale = scale || 1; 1581320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (element && offset) { 1591320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var icon = element._icon || document.createElement('div'); 1601320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci var style = icon.style; 1611320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci style.backgroundImage = 'url(' + this.src + ')'; 1621320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci style.backgroundPosition = (-offset.offsetX * scale + 'px') + 1631320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci ' ' + (-offset.offsetY * scale + 'px'); 1641320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci style.backgroundSize = scale === 1 ? 'auto' : 1651320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci this.width * scale + 'px'; 1661320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci if (icon.parentNode !== element) { 1671320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci element.appendChild(icon); 1681320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 1691320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci return icon; 1701320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 1711320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci } 1721320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 1731320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci }); 1741320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci 1751320f92c476a1ad9d19dba2a48c72b75566198e9Primiano Tucci