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

Refactor of getIconSvg() method

Browse source
This commit is contained in:
Paul T 2018-06-30 08:43:14 -04:00
parent 9f521ed7f4
commit 5d008d83b2
2 changed files with 43 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,11 @@
/* global BUILD */ /* global BUILD */
//
import animationsCss from '../static/css/animations.css'; import animationsCss from '../static/css/animations.css';
import transformationsCss from '../static/css/transformations.css'; import transformationsCss from '../static/css/transformations.css';
//= ====================================================== //= ======================================================
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-`;
@ -41,12 +40,13 @@ export class BoxIconElement extends HTMLElement {
/** /**
* Returns a promise that should resolve with a string - the svg source. * Returns a promise that should resolve with a string - the svg source.
* *
* @param {String} iconUrl * @param {String} iconName
* The url to the icon that should be loaded. * The icon name (file name) to the icon that should be loaded.
* *
* @return {Promise<String, Error>} * @return {Promise<String, Error>}
*/ */
static getIconSvg(iconUrl) { static getIconSvg(iconName) {
const iconUrl = `${this.cdnUrl}/${iconName}.svg`;
if (iconUrl && CACHE[iconUrl]) { if (iconUrl && CACHE[iconUrl]) {
return CACHE[iconUrl]; return CACHE[iconUrl];
} }
@ -128,42 +128,42 @@ ${transformationsCss}
} }
attributeChangedCallback(attr, oldVal, newVal) { attributeChangedCallback(attr, oldVal, newVal) {
const $iconHolder = this._state.$iconHolder; const $iconHolder = this._state.$iconHolder;
switch (attr) { switch (attr) {
case 'name': case 'name':
handleNameChange(this, oldVal, newVal); handleNameChange(this, oldVal, newVal);
break; break;
case 'color': case 'color':
$iconHolder.style.fill = newVal || ""; $iconHolder.style.fill = newVal || '';
break; break;
case 'size': case 'size':
handleSizeChange(this, oldVal, newVal); handleSizeChange(this, oldVal, newVal);
break; break;
case 'rotate': case 'rotate':
if (oldVal) { if (oldVal) {
$iconHolder.classList.remove(`${CSS_CLASS_PREFIX_ROTATE}${oldVal}`); $iconHolder.classList.remove(`${CSS_CLASS_PREFIX_ROTATE}${oldVal}`);
} }
if (newVal) { if (newVal) {
$iconHolder.classList.add(`${CSS_CLASS_PREFIX_ROTATE}${newVal}`); $iconHolder.classList.add(`${CSS_CLASS_PREFIX_ROTATE}${newVal}`);
} }
break; break;
case 'flip': case 'flip':
if (oldVal) { if (oldVal) {
$iconHolder.classList.remove(`${CSS_CLASS_PREFIX_FLIP}${oldVal}`); $iconHolder.classList.remove(`${CSS_CLASS_PREFIX_FLIP}${oldVal}`);
} }
if (newVal) { if (newVal) {
$iconHolder.classList.add(`${CSS_CLASS_PREFIX_FLIP}${newVal}`); $iconHolder.classList.add(`${CSS_CLASS_PREFIX_FLIP}${newVal}`);
} }
break;
case 'animation':
if (oldVal) {
$iconHolder.classList.remove(`${CSS_CLASS_PREFIX}${oldVal}`);
}
if (newVal) {
$iconHolder.classList.add(`${CSS_CLASS_PREFIX}${newVal}`);
}
break; break;
case 'animation':
if (oldVal) {
$iconHolder.classList.remove(`${CSS_CLASS_PREFIX}${oldVal}`);
}
if (newVal) {
$iconHolder.classList.add(`${CSS_CLASS_PREFIX}${newVal}`);
}
break;
} }
} }
} }
@ -174,31 +174,32 @@ function handleNameChange(inst, oldVal, newVal) {
state.$iconHolder.textContent = ''; state.$iconHolder.textContent = '';
if (newVal) { if (newVal) {
const iconUrl = `${inst.constructor.cdnUrl}/${newVal}.svg`; inst.constructor.getIconSvg(newVal)
inst.constructor.getIconSvg(iconUrl)
.then((iconData) => { .then((iconData) => {
if (state.currentName === newVal) { if (state.currentName === newVal) {
state.$iconHolder.innerHTML = iconData; state.$iconHolder.innerHTML = iconData;
} }
}) })
.catch((error) => { .catch((error) => {
console.error(`Failed to load icon: ${iconUrl + "\n"}${error}`); //eslint-disable-line console.error(`Failed to load icon: ${newVal + "\n"}${error}`); //eslint-disable-line
}); });
} }
} }
function handleSizeChange(inst, oldVal, newVal) { function handleSizeChange(inst, oldVal, newVal) {
const state = inst._state; const state = inst._state;
if (state.size) { if (state.size) {
state.$iconHolder.style.width = state.$iconHolder.style.height = ""; state.$iconHolder.style.width = state.$iconHolder.style.height = '';
state.size = state.sizeType = null; state.size = state.sizeType = null;
} }
// If the size is not one of the short-hand ones, then it must be a // If the size is not one of the short-hand ones, then it must be a
// css size unit - add it directly to the icon holder. // css size unit - add it directly to the icon holder.
if (newVal && !/^(xs|sm|md|lg)$/.test(state.size)) { if (newVal && !/^(xs|sm|md|lg)$/.test(state.size)) {
state.size = newVal.trim(); state.size = newVal.trim();
state.$iconHolder.style.width = state.$iconHolder.style.height = state.size; state.$iconHolder.style.width = state.$iconHolder.style.height = state.size;
} }
} }
export default BoxIconElement;

3
src/index.js
View file

@ -1,5 +1,6 @@
import { BoxIconElement } from './box-icon-element'; import { BoxIconElement } from './box-icon-element';
export { BoxIconElement } from './box-icon-element'; export { BoxIconElement };
export default BoxIconElement;
BoxIconElement.define(); BoxIconElement.define();