93 lines
2.7 KiB
TypeScript
93 lines
2.7 KiB
TypeScript
import {Component} from '@angular/core';
|
|
import {Subscription} from "rxjs";
|
|
import {ListsService} from "@app/_services";
|
|
|
|
@Component({
|
|
selector: 'setting-site',
|
|
templateUrl: 'setting-site.component.html',
|
|
styleUrls: ['setting-site.component.scss']
|
|
})
|
|
export class SettingSiteComponent {
|
|
resultsSubscription?: Subscription;
|
|
|
|
public isShow: boolean = false;
|
|
|
|
public classes: any = [{class: 'style-color'}, {class: 'style-brown'}, {class: 'style-white-black'}, {class: 'style-black-white'}];
|
|
public nameId = 'class';
|
|
public params = {fontSize: 16, brightRange: 100, contrastRange: 100, class: 'style-color', showImages: true};
|
|
|
|
constructor(
|
|
private listsService: ListsService,
|
|
) {
|
|
}
|
|
ngOnInit() {
|
|
this.resultsSubscription = this.listsService.result('showSettingSite').subscribe(val => {
|
|
this.isShow = val;
|
|
});
|
|
this.setMainClass();
|
|
}
|
|
ngOnDestroy() {
|
|
this.resultsSubscription?.unsubscribe();
|
|
}
|
|
|
|
|
|
get activeClass(): string {
|
|
let res = this.params.class;
|
|
if (!this.params.showImages) res += ' image-hidden';
|
|
return res;
|
|
}
|
|
|
|
|
|
setClass(type: string) {
|
|
this.params.class = type;
|
|
this.setMainClass();
|
|
}
|
|
setMainClass() {
|
|
this.listsService.result(this.nameId).next(this.activeClass);
|
|
}
|
|
setImages(isShow: boolean) {
|
|
this.params.showImages = isShow;
|
|
this.setMainClass();
|
|
}
|
|
setDefaultParams() {
|
|
this.params = {fontSize: 16, brightRange: 100, contrastRange: 100, class: 'style-color', showImages: true};
|
|
this.listsService.result(this.nameId).next(this.activeClass);
|
|
this.applyParams();
|
|
}
|
|
setParam(type: string, value: any) {
|
|
switch (type) {
|
|
case 'font':
|
|
switch (value) {
|
|
case true: ++this.params.fontSize; break;
|
|
case false: --this.params.fontSize; break;
|
|
case null: this.params.fontSize = 16; break;
|
|
}
|
|
break;
|
|
case 'bright':
|
|
switch (value) {
|
|
case true: this.params.brightRange += 5; break;
|
|
case false: this.params.brightRange -= 5; break;
|
|
case null: this.params.brightRange = 100; break;
|
|
}
|
|
break;
|
|
case 'contrast':
|
|
switch (value) {
|
|
case true: this.params.contrastRange += 10; break;
|
|
case false: this.params.contrastRange -= 10; break;
|
|
case null: this.params.contrastRange = 100; break;
|
|
}
|
|
break;
|
|
}
|
|
this.applyParams();
|
|
}
|
|
applyParams(){
|
|
let style = document.getElementById('html').style;
|
|
style.fontSize = this.params.fontSize + 'px';
|
|
style.filter = 'brightness(' + this.params.brightRange + '%) contrast(' + this.params.contrastRange + '%)';
|
|
}
|
|
close() {
|
|
this.listsService.result('showSettingSite').next(false);
|
|
localStorage.setItem('showSettingSite', 'no');
|
|
}
|
|
}
|