119 lines
4.0 KiB
TypeScript
119 lines
4.0 KiB
TypeScript
import {Directive, Input, OnDestroy} from '@angular/core';
|
|
import {Plugin} from "../../../utils/entities/adminTool/plugin";
|
|
import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
|
|
import {EnvProperties} from "../../../utils/properties/env-properties";
|
|
import {properties} from 'src/environments/environment';
|
|
import {Subscriber} from "rxjs";
|
|
import {CustomizationOptions, Layout} from "../../../connect/community/CustomizationOptions";
|
|
import {CustomizationService} from "../../../services/customization.service";
|
|
|
|
export class PluginBaseInfo {
|
|
title: string = "Lorem ipsum";
|
|
|
|
constructor() {
|
|
}
|
|
|
|
compare(oldObject) {
|
|
if (!oldObject) {
|
|
oldObject = Object.assign(this)
|
|
} else {
|
|
for (let attrKey of Object.keys(this)) {
|
|
if (!oldObject[attrKey] && oldObject[attrKey] != false) {
|
|
if (typeof this[attrKey] === "string" || typeof this[attrKey] === "boolean") {
|
|
oldObject[attrKey] = this[attrKey];
|
|
} else {
|
|
oldObject[attrKey] = Object.assign(this[attrKey])
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return oldObject;
|
|
}
|
|
}
|
|
|
|
export class PluginURL {
|
|
url: string;
|
|
linkText: string;
|
|
target: string;
|
|
route: boolean;
|
|
|
|
constructor(url, linkText, target = "_blank", route = false) {
|
|
this.url = url;
|
|
this.linkText = linkText;
|
|
this.target = target;
|
|
this.route = route;
|
|
}
|
|
|
|
}
|
|
|
|
export class PluginInfoCards {
|
|
tag?: string;
|
|
title: string;
|
|
description: string;
|
|
urlsArray: PluginURL[];
|
|
image?: string;
|
|
icon?:string;
|
|
show: boolean;
|
|
}
|
|
|
|
@Directive()
|
|
export abstract class PluginBaseComponent<T extends PluginBaseInfo> implements OnDestroy {
|
|
public properties: EnvProperties = properties;
|
|
@Input() plugin: Plugin;
|
|
@Input() pluginTemplate: PluginTemplate;
|
|
@Input() pluginObject: T;
|
|
@Input() previewInAdmin: boolean = false;
|
|
subscriptions = [];
|
|
|
|
customizationOptions: CustomizationOptions;
|
|
style:string ='';
|
|
fontsDarkMode:boolean = true;
|
|
protected layoutService: CustomizationService
|
|
constructor( ) {
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.subscriptions.forEach(subscription => {
|
|
if (subscription instanceof Subscriber) {
|
|
subscription.unsubscribe()
|
|
} else if (subscription instanceof Function) {
|
|
subscription();
|
|
} else if (typeof IntersectionObserver !== 'undefined' && subscription instanceof IntersectionObserver) {
|
|
subscription.disconnect();
|
|
} else if (typeof ResizeObserver !== 'undefined' && subscription instanceof ResizeObserver) {
|
|
subscription.disconnect();
|
|
}
|
|
});
|
|
}
|
|
|
|
isVisible(field) {
|
|
return (this.plugin && this.pluginObject && this.pluginObject[field] == true) /* plugin is on anyway */
|
|
|| (!this.plugin && this.pluginTemplate && this.pluginObject && this.pluginObject[field] == true) /* template is on */
|
|
}
|
|
|
|
getLayout(communityId) {
|
|
if (this.previewInAdmin) {
|
|
let defaultCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
|
|
this.subscriptions.push(this.layoutService.getLayout(this.properties, communityId).subscribe(layout => {
|
|
layout = (layout ? layout : new Layout(communityId, defaultCustomizationOptions));
|
|
this.customizationOptions = (layout ? CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions, communityId) : Object.assign({}, defaultCustomizationOptions));
|
|
this.setStyle()
|
|
}, error => {
|
|
this.customizationOptions = defaultCustomizationOptions;
|
|
this.setStyle();
|
|
}));
|
|
}
|
|
}
|
|
|
|
setStyle() {
|
|
this.style = `background-color: ` + this.customizationOptions.backgrounds.form.color + `;
|
|
background-image: ` + (this.customizationOptions.backgrounds.form.imageFile ? (Layout.getUrl(properties.utilsService + '/download/' + this.customizationOptions.backgrounds.form.imageFile)) : 'none') + `;
|
|
background-position:` + this.customizationOptions.backgrounds.form.position + `;`
|
|
this.fontsDarkMode = this.customizationOptions.backgrounds.form.fontsDarkMode;
|
|
|
|
}
|
|
}
|