83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
import { Injectable } from '@angular/core';
|
|
|
|
import { ConfigService } from './config.service';
|
|
|
|
/**
|
|
* Enables the usage of the FontFace constructor
|
|
*/
|
|
declare let FontFace: any;
|
|
|
|
/**
|
|
* The linter refuses to allow Document['fonts'].
|
|
* Since Document.fonts is working draft since 2016, typescript
|
|
* dies not yet support it natively (even though it exists in normal browsers)
|
|
*/
|
|
interface FontDocument extends Document {
|
|
fonts: any;
|
|
}
|
|
|
|
/**
|
|
* Service to dynamically load and sets custom loaded fonts
|
|
* using FontFace.
|
|
* Browser support might not be perfect yet.
|
|
*/
|
|
@Injectable({
|
|
providedIn: 'root'
|
|
})
|
|
export class LoadFontService {
|
|
/**
|
|
* The prefix to load custom fonts from
|
|
*/
|
|
private urlPrefix = window.location.origin;
|
|
|
|
/**
|
|
* Constructor
|
|
*
|
|
* @param configService To observe the config variables
|
|
*/
|
|
public constructor(private configService: ConfigService) {
|
|
this.loadCustomFont();
|
|
}
|
|
|
|
/**
|
|
* Observes and loads custom fonts for the projector.
|
|
* Currently, normal and regular fonts can be considered, since
|
|
* italic fonts can easily be calculated by the browser.
|
|
* Falls back to the normal OSFont when no custom font was set.
|
|
*/
|
|
private loadCustomFont(): void {
|
|
this.configService.get<any>('font_regular').subscribe(regular => {
|
|
if (regular) {
|
|
this.setCustomProjectorFont(regular, 400);
|
|
}
|
|
});
|
|
|
|
this.configService.get<any>('font_bold').subscribe(bold => {
|
|
if (bold) {
|
|
this.setCustomProjectorFont(bold, 500);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Sets a new font for the custom projector. Weight is required to
|
|
* differentiate between bold and normal fonts
|
|
*
|
|
* @param font the font object from the config service
|
|
* @param weight the desired weight of the font
|
|
*/
|
|
private setCustomProjectorFont(font: any, weight: number): void {
|
|
const path = font.path ? font.path : font.default;
|
|
const url = font.path ? `${this.urlPrefix}${path}` : path;
|
|
const fontFace = new FontFace('customProjectorFont', `url(${url})`, { weight: weight });
|
|
fontFace
|
|
.load()
|
|
.then(res => {
|
|
(document as FontDocument).fonts.add(res);
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
}
|
|
}
|