Backupppert/boxicons
1
0
Fork 0
mirror of https://github.com/atisawd/boxicons.git synced 2024-11-13 19:04:52 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Support for polyfilled environment (via ShadyCSS)

Browse source
This commit is contained in:
Paul T 2018-06-30 09:57:14 -04:00
parent 5d008d83b2
commit 08252613fa
1 changed files with 61 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
src/box-icon-element.js
View file

@ -4,10 +4,56 @@ import transformationsCss from '../static/css/transformations.css';
//= ====================================================== //= ======================================================
const GLOBAL = window;
const CACHE = {}; // iconName: Promise() const CACHE = {}; // iconName: Promise()
const CSS_CLASS_PREFIX = 'bx-'; const CSS_CLASS_PREFIX = 'bx-';
const CSS_CLASS_PREFIX_ROTATE = `${CSS_CLASS_PREFIX}rotate-`; const CSS_CLASS_PREFIX_ROTATE = `${CSS_CLASS_PREFIX}rotate-`;
const CSS_CLASS_PREFIX_FLIP = `${CSS_CLASS_PREFIX}flip-`; const CSS_CLASS_PREFIX_FLIP = `${CSS_CLASS_PREFIX}flip-`;
const TEMPLATE = document.createElement('template');
const usingShadyCss = () => !!GLOBAL.ShadyCSS;
TEMPLATE.innerHTML = `
<style>
:host {
display: inline-block;
width: 1em;
height: 1em;
}
:host([size=xs]) {
width: 0.8rem;
height: 0.8rem;
}
:host([size=sm]) {
width: 1.55rem;
height: 1.55rem;
}
:host([size=md]) {
width: 2.25rem;
height: 2.25rem;
}
:host([size=lg]) {
width: 3.0rem;
height: 3.0rem;
}
:host([shape=square]) {
padding: .25em;
border: .07em solid rgba(0,0,0,.1);
border-radius: .25em;
}
:host([shape=circle]) {
padding: .25em;
border: .07em solid rgba(0,0,0,.1);
border-radius: 50%;
}
#icon,
svg {
width: 100%;
height: 100%;
}
${animationsCss}
${transformationsCss}
</style>
<div id="icon"></div>`;
/** /**
@ -73,55 +119,20 @@ export class BoxIconElement extends HTMLElement {
* @param {String} [tagName=this.tagName] * @param {String} [tagName=this.tagName]
*/ */
static define(tagName) { static define(tagName) {
customElements.define(tagName || this.tagName, this); tagName = tagName || this.tagName;
if (usingShadyCss()) {
GLOBAL.ShadyCSS.prepareTemplate(TEMPLATE, tagName);
}
customElements.define(tagName, this);
} }
constructor() { constructor() {
super(); super();
this.$ui = this.attachShadow({ mode: 'open' }); this.$ui = this.attachShadow({ mode: 'open' });
this.$ui.innerHTML = ` this.$ui.appendChild(this.ownerDocument.importNode(TEMPLATE.content, true));
<style> if (usingShadyCss()) {
:host { GLOBAL.ShadyCSS.styleElement(this);
display: inline-block;
width: 1em;
height: 1em;
} }
:host([size=xs]) {
width: 0.8rem;
height: 0.8rem;
}
:host([size=sm]) {
width: 1.55rem;
height: 1.55rem;
}
:host([size=md]) {
width: 2.25rem;
height: 2.25rem;
}
:host([size=lg]) {
width: 3.0rem;
height: 3.0rem;
}
:host([shape=square]) {
padding: .25em;
border: .07em solid rgba(0,0,0,.1);
border-radius: .25em;
}
:host([shape=circle]) {
padding: .25em;
border: .07em solid rgba(0,0,0,.1);
border-radius: 50%;
}
#icon,
svg {
width: 100%;
height: 100%;
}
${animationsCss}
${transformationsCss}
</style>
<div id="icon"></div>`;
this._state = { this._state = {
$iconHolder: this.$ui.getElementById('icon'), $iconHolder: this.$ui.getElementById('icon'),
}; };
@ -166,6 +177,12 @@ ${transformationsCss}
break; break;
} }
} }
connectedCallback() {
if (usingShadyCss()) {
GLOBAL.ShadyCSS.styleElement(this);
}
}
} }
function handleNameChange(inst, oldVal, newVal) { function handleNameChange(inst, oldVal, newVal) {