EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2729 icon: Fix core-icon not removed from view

main
Dani Palou 2018-11-15 10:00:59 +01:00
parent 4ce2183bf2
commit 31ffc50c01
1 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/icon/icon.ts
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Component, Input, OnInit, ElementRef } from '@angular/core'; import { Component, Input, OnInit, OnDestroy, ElementRef } from '@angular/core';
/** /**
* Core Icon is a component that enabled a posibility to add fontawesome icon to the html. It's recommended if both fontawesome * Core Icon is a component that enabled a posibility to add fontawesome icon to the html. It's recommended if both fontawesome
@ -24,7 +24,7 @@ import { Component, Input, OnInit, ElementRef } from '@angular/core';
selector: 'core-icon', selector: 'core-icon',
templateUrl: 'core-icon.html', templateUrl: 'core-icon.html',
}) })
export class CoreIconComponent implements OnInit { export class CoreIconComponent implements OnInit, OnDestroy {
// Common params. // Common params.
@Input() name: string; @Input() name: string;
@Input('color') color?: string; @Input('color') color?: string;
@ -36,7 +36,9 @@ export class CoreIconComponent implements OnInit {
// FontAwesome params. // FontAwesome params.
@Input('fixed-width') fixedWidth: string; @Input('fixed-width') fixedWidth: string;
element: HTMLElement;
protected element: HTMLElement;
protected newElement: HTMLElement;
constructor(el: ElementRef) { constructor(el: ElementRef) {
this.element = el.nativeElement; this.element = el.nativeElement;
@ -46,22 +48,20 @@ export class CoreIconComponent implements OnInit {
* Component being initialized. * Component being initialized.
*/ */
ngOnInit(): void { ngOnInit(): void {
let newElement;
if (this.name.startsWith('fa-')) { if (this.name.startsWith('fa-')) {
// Use a new created element to avoid ion-icon working. // Use a new created element to avoid ion-icon working.
newElement = document.createElement('ion-icon'); this.newElement = document.createElement('ion-icon');
newElement.classList.add('icon'); this.newElement.classList.add('icon');
newElement.classList.add('fa'); this.newElement.classList.add('fa');
newElement.classList.add(this.name); this.newElement.classList.add(this.name);
if (this.isTrueProperty(this.fixedWidth)) { if (this.isTrueProperty(this.fixedWidth)) {
newElement.classList.add('fa-fw'); this.newElement.classList.add('fa-fw');
} }
if (this.color) { if (this.color) {
newElement.classList.add('fa-' + this.color); this.newElement.classList.add('fa-' + this.color);
} }
} else { } else {
newElement = this.element.firstElementChild; this.newElement = <HTMLElement> this.element.firstElementChild;
} }
const attrs = this.element.attributes; const attrs = this.element.attributes;
@ -72,17 +72,17 @@ export class CoreIconComponent implements OnInit {
const classes = attrs[i].value.split(' '); const classes = attrs[i].value.split(' ');
for (let j = 0; j < classes.length; j++) { for (let j = 0; j < classes.length; j++) {
if (classes[j]) { if (classes[j]) {
newElement.classList.add(classes[j]); this.newElement.classList.add(classes[j]);
} }
} }
} }
} else { } else {
newElement.setAttribute(attrs[i].name, attrs[i].value); this.newElement.setAttribute(attrs[i].name, attrs[i].value);
} }
} }
this.element.parentElement.replaceChild(newElement, this.element); this.element.parentElement.replaceChild(this.newElement, this.element);
} }
/** /**
@ -100,4 +100,13 @@ export class CoreIconComponent implements OnInit {
return !!val; return !!val;
} }
/**
* Component destroyed.
*/
ngOnDestroy(): void {
if (this.newElement) {
this.newElement.remove();
}
}
} }