101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
|
// (C) Copyright 2015 Moodle Pty Ltd.
|
||
|
|
//
|
||
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
||
|
|
// you may not use this file except in compliance with the License.
|
||
|
|
// You may obtain a copy of the License at
|
||
|
|
//
|
||
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
//
|
||
|
|
// Unless required by applicable law or agreed to in writing, software
|
||
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
||
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
|
|
// See the License for the specific language governing permissions and
|
||
|
|
// limitations under the License.
|
||
|
|
|
||
|
|
import { Directive, ElementRef, Input, OnChanges, SimpleChange } from '@angular/core';
|
||
|
|
import { CoreLogger } from '@singletons/logger';
|
||
|
|
import { Http } from '@singletons/core.singletons';
|
||
|
import { CoreConstants } from '@/core/constants';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Directive to enable font-awesome 5 as ionicons.
|
||
|
|
* Check available icons at https://fontawesome.com/icons?d=gallery&m=free
|
||
|
|
*
|
||
|
|
* Example usage:
|
||
|
|
*
|
||
|
|
* <ion-icon name="fa-icon">
|
||
|
|
*/
|
||
|
|
@Directive({
|
||
|
|
selector: 'ion-icon[name]',
|
||
|
|
})
|
||
|
|
export class CoreFaIconDirective implements OnChanges {
|
||
|
|
|
||
|
|
@Input() name = '';
|
||
|
|
|
||
|
|
protected element: HTMLElement;
|
||
|
|
|
||
|
|
protected logger: CoreLogger;
|
||
|
|
|
||
|
|
constructor(el: ElementRef) {
|
||
|
|
this.element = el.nativeElement;
|
||
|
|
this.logger = CoreLogger.getInstance('CoreFaIconDirective');
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Detect icon name and use svg.
|
||
|
|
*/
|
||
|
|
async setIcon(): Promise<void> {
|
||
|
|
let library = 'ionic';
|
||
|
|
let iconName = this.name;
|
||
|
|
const parts = iconName.split('-', 2);
|
||
|
|
if (parts.length == 2) {
|
||
|
|
switch (parts[0]) {
|
||
|
|
case 'far':
|
||
|
|
library = 'regular';
|
||
|
|
iconName = iconName.substr(4);
|
||
|
|
break;
|
||
|
|
case 'fa':
|
||
|
|
case 'fas':
|
||
|
|
library = 'solid';
|
||
|
|
iconName = iconName.substr(parts[0].length + 1);
|
||
|
|
break;
|
||
|
|
case 'fab':
|
||
|
|
library = 'brands';
|
||
|
|
iconName = iconName.substr(4);
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (library != 'ionic') {
|
||
|
|
const src = `assets/fonts/font-awesome/${library}/${iconName}.svg`;
|
||
|
|
this.element.setAttribute('src', src);
|
||
|
|
|
||
|
|
if (CoreConstants.BUILD.isDevelopment || CoreConstants.BUILD.isTesting) {
|
||
|
|
try {
|
||
|
|
await Http.instance.get(src, { responseType: 'text' }).toPromise();
|
||
|
|
} catch (error) {
|
||
|
|
this.logger.error(`Icon ${this.name} not found`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
this.element.removeAttribute('src');
|
||
|
|
}
|
||
|
|
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Detect changes on input properties.
|
||
|
|
*/
|
||
|
|
ngOnChanges(changes: { [name: string]: SimpleChange }): void {
|
||
|
|
if (!changes.name || !this.name) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.setIcon();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|