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 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
Show stats 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 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',
'rotate',
'flip',
'border',
'animation',
'border',
];
}
@ -115,16 +118,42 @@ ${transformationsCss}
}
attributeChangedCallback(attr, oldVal, newVal) {
const $iconHolder = this._state.$iconHolder;
switch (attr) {
case 'name':
handleNameChange(this, oldVal, newVal);
break;
case 'color':
this._state.$iconHolder.style.fill = newVal || "";
$iconHolder.style.fill = newVal || "";
break;
case 'size':
handleSizeChange(this, oldVal, newVal);
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;
}
}
}