This commit is contained in:
atisawd 2018-07-07 09:40:23 +05:30
parent 2a18efb31d
commit 0474a3fddd
9 changed files with 40 additions and 29 deletions

View file

@ -8,7 +8,7 @@ _High Quality web friendly icons_
'Boxicons' is a carefully designed open source iconset with 700+ icons. It's crafted to look enrich your website/app experience.
_Announcing Boxicons v1.5.2!_
_Announcing Boxicons v1.5.3!_
Load the icons as web component , load only the icons you need .

2
dist/boxicons.js vendored

File diff suppressed because one or more lines are too long

View file

@ -75,6 +75,6 @@
</head>
<body>
<div id="app"></div>
<script src="static/dist/bundle.js?v=3" async></script>
<script src="static/dist/bundle.js?v=4" async></script>
</body>
</html>

View file

@ -91,10 +91,10 @@ export class BoxIconElement extends HTMLElement {
static get observedAttributes() {
return [
'type',
'name',
'color',
'size',
'type',
'rotate',
'flip',
'animation',
@ -113,7 +113,6 @@ export class BoxIconElement extends HTMLElement {
*/
static getIconSvg(iconName,type) {
var iconUrl = `${this.cdnUrl}/regular/bx-${iconName}.svg`;
console.log(type);
if(type==='solid'){
iconUrl = `${this.cdnUrl}/solid/bxs-${iconName}.svg`;
}
@ -169,6 +168,10 @@ export class BoxIconElement extends HTMLElement {
const $iconHolder = this._state.$iconHolder;
switch (attr) {
case 'type':
handleTypeChange(this, oldVal, newVal);
break;
case 'name':
handleNameChange(this, oldVal, newVal);
break;
@ -178,9 +181,6 @@ export class BoxIconElement extends HTMLElement {
case 'size':
handleSizeChange(this, oldVal, newVal);
break;
case 'type':
handleTypeChange(this, oldVal, newVal);
break;
case 'rotate':
if (oldVal) {
$iconHolder.classList.remove(`${CSS_CLASS_PREFIX_ROTATE}${oldVal}`);
@ -214,27 +214,9 @@ export class BoxIconElement extends HTMLElement {
}
}
}
function handleNameChange(inst, oldVal, newVal) {
const state = inst._state;
state.currentName = newVal;
state.$iconHolder.textContent = '';
if (newVal) {
inst.constructor.getIconSvg(newVal,state.type)
.then((iconData) => {
if (state.currentName === newVal) {
state.$iconHolder.innerHTML = iconData;
}
})
.catch((error) => {
console.error(`Failed to load icon: ${newVal + "\n"}${error}`); //eslint-disable-line
});
}
}
function handleTypeChange(inst, oldVal, newVal) {
const state = inst._state;
state.$iconHolder.textContent = '';
if (state.type) {
state.type = null;
}
@ -245,7 +227,36 @@ function handleTypeChange(inst, oldVal, newVal) {
else{
state.type = 'regular';
}
if(state.currentName!== undefined){
inst.constructor.getIconSvg(state.currentName,state.type)
.then((iconData) => {
if (state.type === newVal) {
state.$iconHolder.innerHTML = iconData;
}
})
.catch((error) => {
console.error(`Failed to load icon: ${state.currentName + "\n"}${error}`); //eslint-disable-line
});}
}
function handleNameChange(inst, oldVal, newVal) {
const state = inst._state;
state.currentName = newVal;
state.$iconHolder.textContent = '';
if (newVal) {
if(state.type!== undefined){
inst.constructor.getIconSvg(newVal,state.type)
.then((iconData) => {
if (state.currentName === newVal) {
state.$iconHolder.innerHTML = iconData;
}
})
.catch((error) => {
console.error(`Failed to load icon: ${newVal + "\n"}${error}`); //eslint-disable-line
});}
}
}
function handleSizeChange(inst, oldVal, newVal) {
const state = inst._state;

File diff suppressed because one or more lines are too long

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.