From c72a24b67a53183519c83df231d0814ad23715a0 Mon Sep 17 00:00:00 2001 From: Paolo Ferretti Date: Tue, 8 Aug 2017 14:25:39 +0200 Subject: [PATCH] fix: fixed broken behaviour for style attribute (#40) --- dist/ikonograph.js | 2 +- src/ikonograph.js | 43 +++++++++++++++++++------------------------ 2 files changed, 20 insertions(+), 25 deletions(-) diff --git a/dist/ikonograph.js b/dist/ikonograph.js index 0bd4b0c..9a63dc7 100644 --- a/dist/ikonograph.js +++ b/dist/ikonograph.js @@ -1 +1 @@ -const ICONS_SVG={"agenda-full":'agenda-full',agenda:'agenda',analytics:'analytics',"angle-down":'angle-down',"angle-left":'angle-left',"angle-right":'angle-right',"angle-top":'angle-top',"arrow-down":'arrow-down',"arrow-left":'arrow-left',"arrow-right":'arrow-right',"arrow-top":'arrow-top',attachment:'attachment',"backward-full":'backward-full',backward:'backward',"bell-full":'bell-full',bell:'bell',"bulb-full":'bulb-full',bulb:'bulb',"calendar-full":'calendar-full',calendar:'calendar',"cards-full":'cards-full',cards:'cards',"chart-area-full":'chart-area-full',"chart-area":'chart-area',"chart-bars-full":'chart-bars-full',"chart-bars":'chart-bars',"chart-pie-full":'chart-pie-full',"chart-pie":'chart-pie',"chat-full":'chat-full',chat:'chat',check:'check',"clock-full":'clock-full',clock:'clock',"close-circle-full":'close-circle-full',"close-circle":'close-circle',"close-sircle":'',close:'close',code:'code',"copy-full":'copy-full',copy:'copy',"dashboard-full":'dashboard-full',dashboard:'dashboard',dashborad:'',"desktop-full":'desktop-full',desktop:'desktop',dev:'dev',"devices-full":'devices-full',devices:'devices',"diamond-full":'diamond-full',diamond:'diamond',"documentation-full":'documentation-full',documentation:'documentation',"dots-full":'dots-full',dots:'dots',"double-arrow-left":'double-arrow-left',"double-arrow-right":'double-arrow-right',"download-full":'download-full',download:'download',drag:'drag',"ecommerce-full":'ecommerce-full',ecommerce:'ecommerce',"edit-full":'edit-full',edit:'edit',"email-full":'email-full',email:'email',"equal-circle-full":'equal-circle-full',"equal-circle":'equal-circle',equal:'equal',"erase-full":'erase-full',erase:'erase',"expand-full":'expand-full',expand:'expand',"eye-full":'eye-full',"eye-hide-full":'eye-hide-full',"eye-hide":'eye-hide',eye:'eye',facebook:'facebook',"faq-full":'faq-full',faq:'faq',"fast-backward-full":'fast-backward-full',"fast-backward":'fast-backward',"fast-forward-full":'fast-forward-full',"fast-forward":'fast-forward',"file-code":'file-code',"file-csv-full":'file-csv-full',"file-csv":'file-csv',"file-doc-full":'file-doc-full',"file-doc":'file-doc',"file-full":'file-full',"file-log-full":'file-log-full',"file-log":'file-log',"file-pdf-full":'file-pdf-full',"file-pdf":'file-pdf',"file-ppt-full":'file-ppt-full',"file-ppt":'file-ppt',"file-xls-full":'file-xls-full',"file-xls":'file-xls',"file-zip-full":'file-zip-full',"file-zip":'file-zip',file:'file',"filter-full":'filter-full',filter:'filter',"folder-full":'folder-full',folder:'folder',"forward-full":'forward-full',forward:'forward',"gear-full":'gear-full',gear:'gear',gender:'gender',"gift-full":'gift-full',gift:'gift',github:'github',"google-plus":'google-plus',"hamburger-menu":'hamburger-menu',"heart-full":'heart-full',heart:'heart',"image-full":'image-full',image:'image',"info-full":'info-full',info:'info',instagram:'instagram',"laptop-full":'laptop-full',laptop:'laptop',link:'link',linkedin:'linkedin',"list-full":'list-full',list:'list',"lock-full":'lock-full',"lock-open-full":'lock-open-full',"lock-open":'lock-open',lock:'lock',"logo-github":'logo-github',"logo-pinterest":'logo-pinterest',"logo-youtube":'logo-youtube',"minus-circle-full":'minus-circle-full',"minus-circle":'minus-circle',minus:'minus',"news-full":'news-full',news:'news',order:'order',"pause-full":'pause-full',pause:'pause',"phone-full":'phone-full',phone:'phone',"pin-full":'pin-full',pin:'pin',pinterest:'pinterest',"play-full":'play-full',play:'play',"plus-circle-full":'plus-circle-full',"plus-circle":'plus-circle',plus:'plus',power:'power',refresh:'refresh',resize:'resize',"retail-full":'retail-full',retail:'retail',"save-full":'save-full',save:'save',"search-full":'search-full',search:'search',"segment-full":'segment-full',segment:'segment',"send-full":'send-full',send:'send',"settings-full":'settings-full',settings:'settings',"smartphone-full":'smartphone-full',smartphone:'smartphone',"smartwatch-full":'smartwatch-full',smartwatch:'smartwatch',"smile-full":'smile-full',smile:'smile',"stop-full":'stop-full',stop:'stop',"support-full":'support-full',support:'support',"system-full":'system-full',system:'system',"tablet-full":'tablet-full',tablet:'tablet',"tag-full":'tag-full',tag:'tag',"trash-full":'trash-full',trash:'trash',twitter:'twitter',unlink:'unlink',"upload-full":'upload-full',upload:'upload',"user-full":'user-full',user:'user',"users-full":'users-full',users:'users',"wand-full":'wand-full',wand:'wand',"warning-full":'warning-full',warning:'warning',youtube:'youtube'},MIME_TYPE="image/svg+xml",ICON_ATTR="icon",SIZE_ATTR="size",COLOR_ATTR="color",ATTRIBUTES=[ICON_ATTR,SIZE_ATTR,COLOR_ATTR],DEFAULT_SIZE="100%",DEFAULT_HOST_SIZE="24px",DEFAULT_COLOR="currentColor";class IkonographIcon extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.attributeChangeManager={},this.attributeChangeManager[ICON_ATTR]=(t=>this._setIcon(t)),this.attributeChangeManager[SIZE_ATTR]=(t=>this._setSize(t)),this.attributeChangeManager[COLOR_ATTR]=(t=>this._setColor(t))}static get observedAttributes(){return ATTRIBUTES}connectedCallback(){const t=this.getAttribute(ICON_ATTR),h=this.getAttribute(SIZE_ATTR),v=this.getAttribute(COLOR_ATTR);this._setIcon(t),this._addStyleChild(h,v)}attributeChangedCallback(t,h,v,s){this.attributeChangeManager[t](v)}_svgStyleString(t,h,v){const s=v?":host":"ikn-icon";return t=t||DEFAULT_HOST_SIZE,h=h||DEFAULT_COLOR,`\n ${s} {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n contain: content;\n pointer-events: auto;\n width: ${t};\n height: ${t};\n }\n\n svg {\n display: block;\n width: ${DEFAULT_SIZE};\n height: ${DEFAULT_SIZE};\n stroke-width: 0;\n stroke: ${h};\n fill: ${h};\n pointer-events: none;\n }\n `}_setIcon(t){this._removeChild("svg");this._addSVGChild(t)}_setSize(t){const h=this.getAttribute(COLOR_ATTR);this._addStyleChild(t,h)}_setColor(t){const h=this.getAttribute(SIZE_ATTR);this._addStyleChild(h,t)}_removeChild(t){const h=this.shadow.querySelector(t);return!!h&&(this.shadow.removeChild(h),!0)}_addSVGChild(t){if(!ICONS_SVG[t])throw new Error("The specified icon does not exist");const h=(new DOMParser).parseFromString(ICONS_SVG[t],MIME_TYPE);h.documentElement.removeAttribute("width"),h.documentElement.removeAttribute("height"),this.shadow.appendChild(h.documentElement)}_addStyleChild(t,h){this._removeChild("style");const v=document.createElement("style");this.shadow.appendChild(v),v.innerHTML=this._svgStyleString(t,h,!0),this._isStyleApplied(t)||(v.innerHTML=this._svgStyleString(t,h,!1))}_isStyleApplied(t){window.getComputedStyle(this).width;return window.getComputedStyle(this).width===t}}customElements.define("ikn-icon",IkonographIcon); \ No newline at end of file +const ICONS_SVG={"agenda-full":'agenda-full',agenda:'agenda',analytics:'analytics',"angle-down":'angle-down',"angle-left":'angle-left',"angle-right":'angle-right',"angle-top":'angle-top',"arrow-down":'arrow-down',"arrow-left":'arrow-left',"arrow-right":'arrow-right',"arrow-top":'arrow-top',attachment:'attachment',"backward-full":'backward-full',backward:'backward',"bell-full":'bell-full',bell:'bell',"bulb-full":'bulb-full',bulb:'bulb',"calendar-full":'calendar-full',calendar:'calendar',"cards-full":'cards-full',cards:'cards',"chart-area-full":'chart-area-full',"chart-area":'chart-area',"chart-bars-full":'chart-bars-full',"chart-bars":'chart-bars',"chart-pie-full":'chart-pie-full',"chart-pie":'chart-pie',"chat-full":'chat-full',chat:'chat',check:'check',"clock-full":'clock-full',clock:'clock',"close-circle-full":'close-circle-full',"close-circle":'close-circle',"close-sircle":'',close:'close',code:'code',"copy-full":'copy-full',copy:'copy',"dashboard-full":'dashboard-full',dashboard:'dashboard',dashborad:'',"desktop-full":'desktop-full',desktop:'desktop',dev:'dev',"devices-full":'devices-full',devices:'devices',"diamond-full":'diamond-full',diamond:'diamond',"documentation-full":'documentation-full',documentation:'documentation',"dots-full":'dots-full',dots:'dots',"double-arrow-left":'double-arrow-left',"double-arrow-right":'double-arrow-right',"download-full":'download-full',download:'download',drag:'drag',"ecommerce-full":'ecommerce-full',ecommerce:'ecommerce',"edit-full":'edit-full',edit:'edit',"email-full":'email-full',email:'email',"equal-circle-full":'equal-circle-full',"equal-circle":'equal-circle',equal:'equal',"erase-full":'erase-full',erase:'erase',"expand-full":'expand-full',expand:'expand',"eye-full":'eye-full',"eye-hide-full":'eye-hide-full',"eye-hide":'eye-hide',eye:'eye',facebook:'facebook',"faq-full":'faq-full',faq:'faq',"fast-backward-full":'fast-backward-full',"fast-backward":'fast-backward',"fast-forward-full":'fast-forward-full',"fast-forward":'fast-forward',"file-code":'file-code',"file-csv-full":'file-csv-full',"file-csv":'file-csv',"file-doc-full":'file-doc-full',"file-doc":'file-doc',"file-full":'file-full',"file-log-full":'file-log-full',"file-log":'file-log',"file-pdf-full":'file-pdf-full',"file-pdf":'file-pdf',"file-ppt-full":'file-ppt-full',"file-ppt":'file-ppt',"file-xls-full":'file-xls-full',"file-xls":'file-xls',"file-zip-full":'file-zip-full',"file-zip":'file-zip',file:'file',"filter-full":'filter-full',filter:'filter',"folder-full":'folder-full',folder:'folder',"forward-full":'forward-full',forward:'forward',"gear-full":'gear-full',gear:'gear',gender:'gender',"gift-full":'gift-full',gift:'gift',github:'github',"google-plus":'google-plus',"hamburger-menu":'hamburger-menu',"heart-full":'heart-full',heart:'heart',"image-full":'image-full',image:'image',"info-full":'info-full',info:'info',instagram:'instagram',"laptop-full":'laptop-full',laptop:'laptop',link:'link',linkedin:'linkedin',"list-full":'list-full',list:'list',"lock-full":'lock-full',"lock-open-full":'lock-open-full',"lock-open":'lock-open',lock:'lock',"logo-github":'logo-github',"logo-pinterest":'logo-pinterest',"logo-youtube":'logo-youtube',"minus-circle-full":'minus-circle-full',"minus-circle":'minus-circle',minus:'minus',"news-full":'news-full',news:'news',order:'order',"pause-full":'pause-full',pause:'pause',"phone-full":'phone-full',phone:'phone',"pin-full":'pin-full',pin:'pin',pinterest:'pinterest',"play-full":'play-full',play:'play',"plus-circle-full":'plus-circle-full',"plus-circle":'plus-circle',plus:'plus',power:'power',refresh:'refresh',resize:'resize',"retail-full":'retail-full',retail:'retail',"save-full":'save-full',save:'save',"search-full":'search-full',search:'search',"segment-full":'segment-full',segment:'segment',"send-full":'send-full',send:'send',"settings-full":'settings-full',settings:'settings',"smartphone-full":'smartphone-full',smartphone:'smartphone',"smartwatch-full":'smartwatch-full',smartwatch:'smartwatch',"smile-full":'smile-full',smile:'smile',"stop-full":'stop-full',stop:'stop',"support-full":'support-full',support:'support',"system-full":'system-full',system:'system',"tablet-full":'tablet-full',tablet:'tablet',"tag-full":'tag-full',tag:'tag',"trash-full":'trash-full',trash:'trash',twitter:'twitter',unlink:'unlink',"upload-full":'upload-full',upload:'upload',"user-full":'user-full',user:'user',"users-full":'users-full',users:'users',"wand-full":'wand-full',wand:'wand',"warning-full":'warning-full',warning:'warning',youtube:'youtube'},MIME_TYPE="image/svg+xml",ICON_ATTR="icon",SIZE_ATTR="size",COLOR_ATTR="color",ATTRIBUTES=[ICON_ATTR,SIZE_ATTR,COLOR_ATTR],DEFAULT_SIZE="100%",DEFAULT_HOST_SIZE="24px",DEFAULT_COLOR="currentColor";class IkonographIcon extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.attributeChangeManager={},this.attributeChangeManager[ICON_ATTR]=(t=>this._setIcon(t)),this.attributeChangeManager[SIZE_ATTR]=(t=>this._setSize(t)),this.attributeChangeManager[COLOR_ATTR]=(t=>this._setColor(t))}static get observedAttributes(){return ATTRIBUTES}connectedCallback(){const t=this.getAttribute(ICON_ATTR),h=this.getAttribute(SIZE_ATTR),v=this.getAttribute(COLOR_ATTR);this._setIcon(t),this._addStyleChild(h,v)}attributeChangedCallback(t,h,v,s){this.attributeChangeManager[t](v)}_svgStyleString(t,h){const v=`\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n contain: content;\n pointer-events: auto;\n width: ${t=t||DEFAULT_HOST_SIZE};\n height: ${t};\n `;return`\n :host {\n ${v}\n }\n\n ikn-icon {\n ${v}\n }\n\n svg {\n display: block;\n width: ${DEFAULT_SIZE};\n height: ${DEFAULT_SIZE};\n stroke-width: 0;\n stroke: ${h=h||DEFAULT_COLOR};\n fill: ${h};\n pointer-events: none;\n }\n `}_setIcon(t){this._removeChild("svg");this._addSVGChild(t)}_setSize(t){const h=this.getAttribute(COLOR_ATTR);this._addStyleChild(t,h)}_setColor(t){const h=this.getAttribute(SIZE_ATTR);this._addStyleChild(h,t)}_removeChild(t){const h=this.shadow.querySelector(t);return!!h&&(this.shadow.removeChild(h),!0)}_addSVGChild(t){if(!ICONS_SVG[t])throw new Error("The specified icon does not exist");const h=(new DOMParser).parseFromString(ICONS_SVG[t],MIME_TYPE);h.documentElement.removeAttribute("width"),h.documentElement.removeAttribute("height"),this.shadow.appendChild(h.documentElement)}_addStyleChild(t,h){this._removeChild("style");const v=document.createElement("style");this.shadow.appendChild(v),v.innerHTML=this._svgStyleString(t,h)}}customElements.define("ikn-icon",IkonographIcon); \ No newline at end of file diff --git a/src/ikonograph.js b/src/ikonograph.js index 6a35e5c..9a54651 100644 --- a/src/ikonograph.js +++ b/src/ikonograph.js @@ -45,20 +45,27 @@ class IkonographIcon extends HTMLElement { this.attributeChangeManager[attributeName](newValue); } - _svgStyleString(size, color, hasShadowDOM) { - // we need to know if there's support for :host or not - const host = hasShadowDOM ? ':host' : 'ikn-icon'; + _svgStyleString(size, color) { size = size || DEFAULT_HOST_SIZE; color = color || DEFAULT_COLOR; + + const commonStyle = ` + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + contain: content; + pointer-events: auto; + width: ${size}; + height: ${size}; + `; + return ` - ${host} { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - contain: content; - pointer-events: auto; - width: ${size}; - height: ${size}; + :host { + ${commonStyle} + } + + ikn-icon { + ${commonStyle} } svg { @@ -118,21 +125,9 @@ class IkonographIcon extends HTMLElement { this._removeChild('style'); const styleElement = document.createElement('style'); this.shadow.appendChild(styleElement); - styleElement.innerHTML = this._svgStyleString(size, color, true); - - // right next the style apply, we need to check if the style is really - // applied to our element. This is a sort of feature detection - // to check if a browser support :host - const styleApplied = this._isStyleApplied(size); - if (!styleApplied) { - styleElement.innerHTML = this._svgStyleString(size, color, false); - } + styleElement.innerHTML = this._svgStyleString(size, color); } - _isStyleApplied(size) { - const computedStyle = window.getComputedStyle(this).width || DEFAULT_HOST_SIZE - return window.getComputedStyle(this).width === size; - } } customElements.define('ikn-icon', IkonographIcon);