mirror/boxicons
1
0
Fork 0
mirror of https://github.com/atisawd/boxicons.git synced 2025-09-02 12:13:00 +02:00
Code Issues Releases Wiki Activity

Support for rotate, flip and animation

Browse Source
This commit is contained in:
Paul T
2018-06-29 23:33:14 -04:00
parent f5a6addf83
commit 6d3fe85ab1
1 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/box-icon-element.js
View File

@@ -6,6 +6,9 @@ import transformationsCss from '../static/css/transformations.css';
//= ====================================================== //= ======================================================
const CACHE = {}; // iconName: Promise() const CACHE = {}; // iconName: Promise()
const CSS_CLASS_PREFIX = "bx-";
const CSS_CLASS_PREFIX_ROTATE = `${CSS_CLASS_PREFIX}rotate-`;
const CSS_CLASS_PREFIX_FLIP = `${CSS_CLASS_PREFIX}flip-`;
/** /**
@@ -30,8 +33,8 @@ export class BoxIconElement extends HTMLElement {
'size', 'size',
'rotate', 'rotate',
'flip', 'flip',
'border',
'animation', 'animation',
'border',
]; ];
} }
@@ -115,16 +118,42 @@ ${transformationsCss}
} }
attributeChangedCallback(attr, oldVal, newVal) { attributeChangedCallback(attr, oldVal, newVal) {
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':
this._state.$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':
if (oldVal) {
$iconHolder.classList.remove(`${CSS_CLASS_PREFIX_ROTATE}${oldVal}`);
}
if (newVal) {
$iconHolder.classList.add(`${CSS_CLASS_PREFIX_ROTATE}${newVal}`);
}
break;
case 'flip':
if (oldVal) {
$iconHolder.classList.remove(`${CSS_CLASS_PREFIX_FLIP}${oldVal}`);
}
if (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;
} }
} }
} }