From c62121c191dc550a3918834092d3bf247a70b90b Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Mon, 11 Feb 2019 16:16:18 -0500 Subject: [PATCH 1/5] Polymer 3 Conversion --- cli/iconset-builder.js | 17 +- d2l-icon.js | 24 +- d2l-icons.md | 4 +- emoji-icons.js | 49 +- html-editor-icons.js | 341 +++---- icons.scss | 6 + images/tier1/access-special.svg | 3 + package.json | 6 +- tier1-icons.js | 1589 ++++++++++++++++--------------- tier2-icons.js | 1339 +++++++++++++------------- tier3-icons.js | 457 ++++----- 11 files changed, 1924 insertions(+), 1911 deletions(-) create mode 100644 images/tier1/access-special.svg diff --git a/cli/iconset-builder.js b/cli/iconset-builder.js index 32de587..3cc8d11 100644 --- a/cli/iconset-builder.js +++ b/cli/iconset-builder.js @@ -6,6 +6,10 @@ var path = require('path'), fs = require('fs'); var iconsetObjTemplate = { + 'link': [ + {'$': {'rel': 'import', 'href': '../polymer/polymer.html'}}, + {'$': {'rel': 'import', 'href': '../iron-iconset-svg/iron-iconset-svg.html'}} + ], 'iron-iconset-svg': { '$': {'name': '', 'size': '', 'rtl-mirroring': true, 'use-global-rtl-attribute': true}, 'svg': {'defs': {'g': []}} @@ -36,7 +40,7 @@ function buildFileXml(iconsetObj, objs, iconsetPath, file) { if (err) { return deferred.reject(err); } - var id = 'd2l-icon-' + path.basename(file, extension); + var id = path.basename(file, extension); var parser = new xml2js.Parser(); parser.parseString(xml, function(err, result) { if (err) { @@ -104,14 +108,9 @@ module.exports = function(iconsetPath) { var deferred = q.defer(); - var content = `import '@polymer/polymer/polymer-legacy.js'; -import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; -const $_documentContainer = document.createElement('template'); -$_documentContainer.setAttribute('style', 'display: none;'); -$_documentContainer.innerHTML = \`${xml}\`; -document.head.appendChild($_documentContainer.content); -`; - fs.writeFile(path.join(__dirname, '../', name + '-icons.js'), content, function(err) { + xml = xml.substring(7, xml.length - 7); + + fs.writeFile(path.join(__dirname, '../', name + '-icons.html'), xml, function(err) { if (err) { return deferred.reject(err); } diff --git a/d2l-icon.js b/d2l-icon.js index ff8cd53..2e418f4 100644 --- a/d2l-icon.js +++ b/d2l-icon.js @@ -65,7 +65,7 @@ $_documentContainer.innerHTML = ` } - + `; document.head.appendChild($_documentContainer.content); @@ -86,6 +86,8 @@ Polymer({ */ src: String, + theme: String, + _meta: { value: Base.create('iron-meta', {type: 'iconset'}) } @@ -94,23 +96,17 @@ Polymer({ observers: [ '_updateIcon(_meta, isAttached)', + '_updateIcon(theme, isAttached)', '_srcChanged(src, isAttached)', '_iconChanged(icon, isAttached)' ], _DEFAULT_ICONSET: 'icons', - _iconChanged: function(icon, attached) { - if (!attached) return; + _iconChanged: function(icon) { var parts = (icon || '').split(':'); - var iconName = parts.pop(); - var iconSetName = parts.pop() || this._DEFAULT_ICONSET; - if (iconName === this._iconName && iconSetName === this._iconsetName && attached === this.attached) { - return; - } - this._d2lIconName = undefined; - this._iconName = iconName; - this._iconsetName = iconSetName; + this._iconName = parts.pop(); + this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; this._updateIcon(); }, @@ -131,11 +127,7 @@ Polymer({ this._iconset = /** @type {?Polymer.Iconset} */ ( this._meta.byKey(this._iconsetName)); if (this._iconset) { - if (!this._d2lIconName) { - this._d2lIconName = this._iconset.querySelector(`#d2l-icon-${this._iconName}`) ? - (`d2l-icon-${this._iconName}`) : this._iconName; - } - this._iconset.applyIcon(this, this._d2lIconName); + this._iconset.applyIcon(this, this._iconName, this.theme); this.unlisten(window, 'iron-iconset-added', '_updateIcon'); } else { this.listen(window, 'iron-iconset-added', '_updateIcon'); diff --git a/d2l-icons.md b/d2l-icons.md index ea656e6..8ce3695 100644 --- a/d2l-icons.md +++ b/d2l-icons.md @@ -6,7 +6,8 @@ Size: `18px` x `18`px | Icon | Name | | Icon | Name | | Icon | Name | | :---: | :--- | --- | :---: | :--- | --- | :---: | :--- | -| ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/accelerator.svg?sanitize=true) | accelerator | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/event-log.svg?sanitize=true) | event-log | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/plus-default.svg?sanitize=true) | plus-default | +| ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/accelerator.svg?sanitize=true) | accelerator | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/eportfolio.svg?sanitize=true) | eportfolio | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/pin-hollow.svg?sanitize=true) | pin-hollow | +| ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/access-special.svg?sanitize=true) | access-special | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/event-log.svg?sanitize=true) | event-log | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/plus-default.svg?sanitize=true) | plus-default | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/add-file.svg?sanitize=true) | add-file | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/exemption-add.svg?sanitize=true) | exemption-add | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/plus-large-thick.svg?sanitize=true) | plus-large-thick | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/add-message.svg?sanitize=true) | add-message | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/exemption-remove.svg?sanitize=true) | exemption-remove | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/plus-large.svg?sanitize=true) | plus-large | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/add-to-lor.svg?sanitize=true) | add-to-lor | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/export.svg?sanitize=true) | export | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/preview.svg?sanitize=true) | preview | @@ -77,7 +78,6 @@ Size: `18px` x `18`px | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/email.svg?sanitize=true) | email | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/password.svg?sanitize=true) | password | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/wizard.svg?sanitize=true) | wizard | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/enable.svg?sanitize=true) | enable | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/pic.svg?sanitize=true) | pic | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/zoom-in.svg?sanitize=true) | zoom-in | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/enrollment.svg?sanitize=true) | enrollment | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/pin-filled.svg?sanitize=true) | pin-filled | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/zoom-out.svg?sanitize=true) | zoom-out | -| ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/eportfolio.svg?sanitize=true) | eportfolio | | ![](https://raw.githubusercontent.com/BrightspaceUI/icons/master/images/tier1/pin-hollow.svg?sanitize=true) | pin-hollow | |   |   | ## tier2 diff --git a/emoji-icons.js b/emoji-icons.js index 54cc240..59200bc 100644 --- a/emoji-icons.js +++ b/emoji-icons.js @@ -1,29 +1,30 @@ import '@polymer/polymer/polymer-legacy.js'; import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; const $_documentContainer = document.createElement('template'); -$_documentContainer.setAttribute('style', 'display: none;'); + $_documentContainer.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - -`; + + + + + + + + + + + + + + + + + + + + + + + `; + document.head.appendChild($_documentContainer.content); diff --git a/html-editor-icons.js b/html-editor-icons.js index 0d4085a..5a85bed 100644 --- a/html-editor-icons.js +++ b/html-editor-icons.js @@ -1,175 +1,176 @@ import '@polymer/polymer/polymer-legacy.js'; import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; const $_documentContainer = document.createElement('template'); -$_documentContainer.setAttribute('style', 'display: none;'); + $_documentContainer.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + document.head.appendChild($_documentContainer.content); diff --git a/icons.scss b/icons.scss index cdc9ae8..45d7a8d 100644 --- a/icons.scss +++ b/icons.scss @@ -335,6 +335,12 @@ content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2218%22%20width%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M14%208a1.6%201.6%200%200%201-.359.85l-.419.593-5.728%208.1A.929.929%200%200%201%206.73%2018a.9.9%200%200%201-.71-.38%201.038%201.038%200%200%201-.2-.62c.01-.186.056-.369.137-.537l.13-.318C6.158%2015.97%208.19%2011%208.2%2011c-.289%200-3.047.016-3.335%200A.978.978%200%200%201%204%2010.091c.02-.43.198-.836.5-1.142L10.224.863a3.41%203.41%200%200%201%20.539-.681.865.865%200%200%201%201.279.271%201.76%201.76%200%200%201-.18%201.583L9.934%207h2.554a2.247%202.247%200%200%201%201%20.105c.28.15.467.43.5.746.008.05.012.1.012.149z%22%20fill%3D%22%23565a5c%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); } } +@mixin d2l-icon-tier1-access-special() { + @include d2l-icon(); + &:before { + content: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23565a5c%22%20d%3D%22M13%200a5%205%200%200%200-5%205%204.88%204.88%200%200%200%20.35%201.829c-.01.01-.03.02-.04.03L4.3%2010.881%202.707%209.293a1%201%200%200%200-1.414%201.414L2.882%2012.3l-.585.587-.59-.589a1%201%200%201%200-1.414%201.41l.591.59-.29.291a1.974%201.974%200%200%200%200%202.819%201.975%201.975%200%200%200%202.82%200l7.727-7.718c.01-.01.02-.03.03-.04A4.881%204.881%200%200%200%2013%2010a5%205%200%200%200%200-10zm0%207a2%202%200%201%201%202-2%202%202%200%200%201-2%202z%22%2F%3E%3C%2Fsvg%3E"); + } +} @mixin d2l-icon-tier1-add() { @include d2l-icon(); &:before { diff --git a/images/tier1/access-special.svg b/images/tier1/access-special.svg new file mode 100644 index 0000000..4229ea8 --- /dev/null +++ b/images/tier1/access-special.svg @@ -0,0 +1,3 @@ + + + diff --git a/package.json b/package.json index 3cb474e..55d280e 100644 --- a/package.json +++ b/package.json @@ -36,17 +36,17 @@ "@polymer/iron-component-page": "^4.0.0", "@polymer/iron-demo-helpers": "^3.0.0", "@polymer/iron-test-helpers": "^3.0.0", - "@webcomponents/webcomponentsjs": "^2.2.3", + "@webcomponents/webcomponentsjs": "^2.2.7", "babel-eslint": "^10.0.1", "chalk": "^1.1.1", "d2l-typography": "BrightspaceUI/typography#semver:^7", "eslint": "^4.15.0", - "eslint-config-brightspace": "^0.4.1", + "eslint-config-brightspace": "^0.4.0", "eslint-plugin-html": "^4.0.1", "fs": "0.0.2", "imagemin": "^4.0.0", "images-to-variables": "^0.3.0", - "polymer-cli": "^1.9.5", + "polymer-cli": "^1.9.6", "q": "^1.4.1", "through2": "^2.0.1", "vinyl-fs": "^2.3.1", diff --git a/tier1-icons.js b/tier1-icons.js index 8835567..39f5466 100644 --- a/tier1-icons.js +++ b/tier1-icons.js @@ -1,795 +1,804 @@ import '@polymer/polymer/polymer-legacy.js'; import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; const $_documentContainer = document.createElement('template'); -$_documentContainer.setAttribute('style', 'display: none;'); + $_documentContainer.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + document.head.appendChild($_documentContainer.content); diff --git a/tier2-icons.js b/tier2-icons.js index 9eb980e..4eadb2b 100644 --- a/tier2-icons.js +++ b/tier2-icons.js @@ -1,674 +1,675 @@ import '@polymer/polymer/polymer-legacy.js'; import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; const $_documentContainer = document.createElement('template'); -$_documentContainer.setAttribute('style', 'display: none;'); + $_documentContainer.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + document.head.appendChild($_documentContainer.content); diff --git a/tier3-icons.js b/tier3-icons.js index 8ddc4df..bda758e 100644 --- a/tier3-icons.js +++ b/tier3-icons.js @@ -1,233 +1,234 @@ import '@polymer/polymer/polymer-legacy.js'; import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; const $_documentContainer = document.createElement('template'); -$_documentContainer.setAttribute('style', 'display: none;'); + $_documentContainer.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `; + document.head.appendChild($_documentContainer.content); From 0c18ade30fd169ff3d70228e2f9665f96d233a43 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Mon, 11 Feb 2019 16:26:31 -0500 Subject: [PATCH 2/5] Polymer 3 Conversion - apply original patch --- cli/iconset-builder.js | 17 +++++++++-------- d2l-icon.js | 4 +++- package.json | 2 +- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/cli/iconset-builder.js b/cli/iconset-builder.js index 3cc8d11..32de587 100644 --- a/cli/iconset-builder.js +++ b/cli/iconset-builder.js @@ -6,10 +6,6 @@ var path = require('path'), fs = require('fs'); var iconsetObjTemplate = { - 'link': [ - {'$': {'rel': 'import', 'href': '../polymer/polymer.html'}}, - {'$': {'rel': 'import', 'href': '../iron-iconset-svg/iron-iconset-svg.html'}} - ], 'iron-iconset-svg': { '$': {'name': '', 'size': '', 'rtl-mirroring': true, 'use-global-rtl-attribute': true}, 'svg': {'defs': {'g': []}} @@ -40,7 +36,7 @@ function buildFileXml(iconsetObj, objs, iconsetPath, file) { if (err) { return deferred.reject(err); } - var id = path.basename(file, extension); + var id = 'd2l-icon-' + path.basename(file, extension); var parser = new xml2js.Parser(); parser.parseString(xml, function(err, result) { if (err) { @@ -108,9 +104,14 @@ module.exports = function(iconsetPath) { var deferred = q.defer(); - xml = xml.substring(7, xml.length - 7); - - fs.writeFile(path.join(__dirname, '../', name + '-icons.html'), xml, function(err) { + var content = `import '@polymer/polymer/polymer-legacy.js'; +import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; +const $_documentContainer = document.createElement('template'); +$_documentContainer.setAttribute('style', 'display: none;'); +$_documentContainer.innerHTML = \`${xml}\`; +document.head.appendChild($_documentContainer.content); +`; + fs.writeFile(path.join(__dirname, '../', name + '-icons.js'), content, function(err) { if (err) { return deferred.reject(err); } diff --git a/d2l-icon.js b/d2l-icon.js index 2e418f4..d1f14c7 100644 --- a/d2l-icon.js +++ b/d2l-icon.js @@ -127,7 +127,9 @@ Polymer({ this._iconset = /** @type {?Polymer.Iconset} */ ( this._meta.byKey(this._iconsetName)); if (this._iconset) { - this._iconset.applyIcon(this, this._iconName, this.theme); + var d2lIcon = this._iconset.innerHTML.indexOf(`d2l-icon-${this._iconName}`) > -1; + var iconName = d2lIcon ? (`d2l-icon-${this._iconName}`) : this._iconName; + this._iconset.applyIcon(this, iconName, this.theme); this.unlisten(window, 'iron-iconset-added', '_updateIcon'); } else { this.listen(window, 'iron-iconset-added', '_updateIcon'); diff --git a/package.json b/package.json index 55d280e..f6fbe76 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "chalk": "^1.1.1", "d2l-typography": "BrightspaceUI/typography#semver:^7", "eslint": "^4.15.0", - "eslint-config-brightspace": "^0.4.0", + "eslint-config-brightspace": "^0.4.1", "eslint-plugin-html": "^4.0.1", "fs": "0.0.2", "imagemin": "^4.0.0", From 76a56ad6ca58b5325106cf23b9fb1889983678b1 Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Thu, 24 Jan 2019 10:52:24 -0500 Subject: [PATCH 3/5] querySelector is faster than innerHTML --- d2l-icon.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/d2l-icon.js b/d2l-icon.js index d1f14c7..a996670 100644 --- a/d2l-icon.js +++ b/d2l-icon.js @@ -65,7 +65,7 @@ $_documentContainer.innerHTML = ` } - + `; document.head.appendChild($_documentContainer.content); @@ -105,7 +105,11 @@ Polymer({ _iconChanged: function(icon) { var parts = (icon || '').split(':'); - this._iconName = parts.pop(); + var iconName = parts.pop(); + if (iconName !== this._iconName) { + this._d2lIconName = undefined; + } + this._iconName = iconName; this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; this._updateIcon(); }, @@ -127,9 +131,11 @@ Polymer({ this._iconset = /** @type {?Polymer.Iconset} */ ( this._meta.byKey(this._iconsetName)); if (this._iconset) { - var d2lIcon = this._iconset.innerHTML.indexOf(`d2l-icon-${this._iconName}`) > -1; - var iconName = d2lIcon ? (`d2l-icon-${this._iconName}`) : this._iconName; - this._iconset.applyIcon(this, iconName, this.theme); + if (!this._d2lIconName) { + this._d2lIconName = this._iconset.querySelector(`#d2l-icon-${this._iconName}`) ? + (`d2l-icon-${this._iconName}`) : this._iconName; + } + this._iconset.applyIcon(this, this._d2lIconName, this.theme); this.unlisten(window, 'iron-iconset-added', '_updateIcon'); } else { this.listen(window, 'iron-iconset-added', '_updateIcon'); From de1d9f8256f8a313d523c22f73df0eabd5a4772e Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Thu, 24 Jan 2019 14:30:45 -0500 Subject: [PATCH 4/5] Further reduce calls to "_iconChanged" by tracking if anything actually changed --- d2l-icon.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/d2l-icon.js b/d2l-icon.js index a996670..ff8cd53 100644 --- a/d2l-icon.js +++ b/d2l-icon.js @@ -86,8 +86,6 @@ Polymer({ */ src: String, - theme: String, - _meta: { value: Base.create('iron-meta', {type: 'iconset'}) } @@ -96,21 +94,23 @@ Polymer({ observers: [ '_updateIcon(_meta, isAttached)', - '_updateIcon(theme, isAttached)', '_srcChanged(src, isAttached)', '_iconChanged(icon, isAttached)' ], _DEFAULT_ICONSET: 'icons', - _iconChanged: function(icon) { + _iconChanged: function(icon, attached) { + if (!attached) return; var parts = (icon || '').split(':'); var iconName = parts.pop(); - if (iconName !== this._iconName) { - this._d2lIconName = undefined; + var iconSetName = parts.pop() || this._DEFAULT_ICONSET; + if (iconName === this._iconName && iconSetName === this._iconsetName && attached === this.attached) { + return; } + this._d2lIconName = undefined; this._iconName = iconName; - this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; + this._iconsetName = iconSetName; this._updateIcon(); }, @@ -135,7 +135,7 @@ Polymer({ this._d2lIconName = this._iconset.querySelector(`#d2l-icon-${this._iconName}`) ? (`d2l-icon-${this._iconName}`) : this._iconName; } - this._iconset.applyIcon(this, this._d2lIconName, this.theme); + this._iconset.applyIcon(this, this._d2lIconName); this.unlisten(window, 'iron-iconset-added', '_updateIcon'); } else { this.listen(window, 'iron-iconset-added', '_updateIcon'); From 8b75ad1476fab2d33774064442850fe6c2dac2ed Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Mon, 11 Feb 2019 16:36:34 -0500 Subject: [PATCH 5/5] Rebuilt icon-sets using patched updates. --- emoji-icons.js | 49 +- html-editor-icons.js | 341 +++++---- tier1-icons.js | 1592 +++++++++++++++++++++--------------------- tier2-icons.js | 1339 ++++++++++++++++++----------------- tier3-icons.js | 457 ++++++------ 5 files changed, 1884 insertions(+), 1894 deletions(-) diff --git a/emoji-icons.js b/emoji-icons.js index 59200bc..54cc240 100644 --- a/emoji-icons.js +++ b/emoji-icons.js @@ -1,30 +1,29 @@ import '@polymer/polymer/polymer-legacy.js'; import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; const $_documentContainer = document.createElement('template'); - +$_documentContainer.setAttribute('style', 'display: none;'); $_documentContainer.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - `; - + + + + + + + + + + + + + + + + + + + + + + +`; document.head.appendChild($_documentContainer.content); diff --git a/html-editor-icons.js b/html-editor-icons.js index 5a85bed..0d4085a 100644 --- a/html-editor-icons.js +++ b/html-editor-icons.js @@ -1,176 +1,175 @@ import '@polymer/polymer/polymer-legacy.js'; import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; const $_documentContainer = document.createElement('template'); - +$_documentContainer.setAttribute('style', 'display: none;'); $_documentContainer.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `; - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; document.head.appendChild($_documentContainer.content); diff --git a/tier1-icons.js b/tier1-icons.js index 39f5466..d4e79fc 100644 --- a/tier1-icons.js +++ b/tier1-icons.js @@ -1,804 +1,798 @@ import '@polymer/polymer/polymer-legacy.js'; import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; const $_documentContainer = document.createElement('template'); - +$_documentContainer.setAttribute('style', 'display: none;'); $_documentContainer.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `; - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; document.head.appendChild($_documentContainer.content); diff --git a/tier2-icons.js b/tier2-icons.js index 4eadb2b..9eb980e 100644 --- a/tier2-icons.js +++ b/tier2-icons.js @@ -1,675 +1,674 @@ import '@polymer/polymer/polymer-legacy.js'; import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; const $_documentContainer = document.createElement('template'); - +$_documentContainer.setAttribute('style', 'display: none;'); $_documentContainer.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `; - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; document.head.appendChild($_documentContainer.content); diff --git a/tier3-icons.js b/tier3-icons.js index bda758e..8ddc4df 100644 --- a/tier3-icons.js +++ b/tier3-icons.js @@ -1,234 +1,233 @@ import '@polymer/polymer/polymer-legacy.js'; import '@polymer/iron-iconset-svg/iron-iconset-svg.js'; const $_documentContainer = document.createElement('template'); - +$_documentContainer.setAttribute('style', 'display: none;'); $_documentContainer.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - `; - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +`; document.head.appendChild($_documentContainer.content);