Theme manager TS
This commit is contained in:
Mo Bitar
@@ -1,163 +0,0 @@
|
|||||||
import _ from 'lodash';
|
|
||||||
import {
|
|
||||||
ApplicationEvent,
|
|
||||||
StorageValueModes,
|
|
||||||
EncryptionIntent,
|
|
||||||
ApplicationService,
|
|
||||||
} from 'snjs';
|
|
||||||
import { AppStateEvent } from '@/services/state';
|
|
||||||
|
|
||||||
const CACHED_THEMES_KEY = 'cachedThemes';
|
|
||||||
|
|
||||||
export class ThemeManager extends ApplicationService {
|
|
||||||
constructor(application) {
|
|
||||||
super(application);
|
|
||||||
this.activeThemes = [];
|
|
||||||
setImmediate(() => {
|
|
||||||
this.unsubState = this.application.getAppState().addObserver((eventName, data) => {
|
|
||||||
if (eventName === AppStateEvent.DesktopExtsReady) {
|
|
||||||
this.activateCachedThemes();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
deinit() {
|
|
||||||
this.unsubState();
|
|
||||||
this.unsubState = null;
|
|
||||||
this.activeThemes.length = 0;
|
|
||||||
this.unregisterDesktop();
|
|
||||||
this.unregisterComponent();
|
|
||||||
this.unregisterDesktop = null;
|
|
||||||
this.unregisterComponent = null;
|
|
||||||
super.deinit();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @override */
|
|
||||||
onAppStart() {
|
|
||||||
super.onAppStart();
|
|
||||||
this.registerObservers();
|
|
||||||
if (!this.application.getDesktopService().isDesktop) {
|
|
||||||
this.activateCachedThemes();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @access private */
|
|
||||||
async activateCachedThemes() {
|
|
||||||
const cachedThemes = await this.getCachedThemes();
|
|
||||||
const writeToCache = false;
|
|
||||||
for (const theme of cachedThemes) {
|
|
||||||
this.activateTheme(theme, writeToCache);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @access private */
|
|
||||||
registerObservers() {
|
|
||||||
this.unregisterDesktop = this.application.getDesktopService().registerUpdateObserver((component) => {
|
|
||||||
if (component.active && component.isTheme()) {
|
|
||||||
this.deactivateTheme(component);
|
|
||||||
setTimeout(() => {
|
|
||||||
this.activateTheme(component);
|
|
||||||
}, 10);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
this.unregisterComponent = this.application.componentManager.registerHandler({
|
|
||||||
identifier: 'themeManager',
|
|
||||||
areas: ['themes'],
|
|
||||||
activationHandler: (component) => {
|
|
||||||
if (component.active) {
|
|
||||||
this.activateTheme(component);
|
|
||||||
} else {
|
|
||||||
this.deactivateTheme(component);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @access public */
|
|
||||||
deactivateAllThemes() {
|
|
||||||
const activeThemes = this.application.componentManager.getActiveThemes();
|
|
||||||
for (const theme of activeThemes) {
|
|
||||||
if (theme) {
|
|
||||||
this.application.componentManager.deregisterComponent(theme);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.activeThemes = [];
|
|
||||||
this.decacheThemes();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @access private */
|
|
||||||
activateTheme(theme, writeToCache = true) {
|
|
||||||
if (this.activeThemes.find((t) => t.uuid === theme.uuid)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.activeThemes.push(theme);
|
|
||||||
const url = this.application.componentManager.urlForComponent(theme);
|
|
||||||
const link = document.createElement('link');
|
|
||||||
link.href = url;
|
|
||||||
link.type = 'text/css';
|
|
||||||
link.rel = 'stylesheet';
|
|
||||||
link.media = 'screen,print';
|
|
||||||
link.id = theme.uuid;
|
|
||||||
document.getElementsByTagName('head')[0].appendChild(link);
|
|
||||||
if (writeToCache) {
|
|
||||||
this.cacheThemes();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @access private */
|
|
||||||
deactivateTheme(theme) {
|
|
||||||
const element = document.getElementById(theme.uuid);
|
|
||||||
if (element) {
|
|
||||||
element.disabled = true;
|
|
||||||
element.parentNode.removeChild(element);
|
|
||||||
}
|
|
||||||
_.remove(this.activeThemes, { uuid: theme.uuid });
|
|
||||||
this.cacheThemes();
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @access private */
|
|
||||||
async cacheThemes() {
|
|
||||||
const mapped = await Promise.all(this.activeThemes.map(async (theme) => {
|
|
||||||
const payload = theme.payloadRepresentation();
|
|
||||||
const processedPayload = await this.application.protocolService.payloadByEncryptingPayload({
|
|
||||||
payload: payload,
|
|
||||||
intent: EncryptionIntent.LocalStorageDecrypted
|
|
||||||
});
|
|
||||||
return processedPayload;
|
|
||||||
}));
|
|
||||||
return this.application.setValue(
|
|
||||||
CACHED_THEMES_KEY,
|
|
||||||
mapped,
|
|
||||||
StorageValueModes.Nonwrapped
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @access private */
|
|
||||||
async decacheThemes() {
|
|
||||||
return this.application.removeValue(
|
|
||||||
CACHED_THEMES_KEY,
|
|
||||||
StorageValueModes.Nonwrapped
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @access private */
|
|
||||||
async getCachedThemes() {
|
|
||||||
const cachedThemes = await this.application.getValue(
|
|
||||||
CACHED_THEMES_KEY,
|
|
||||||
StorageValueModes.Nonwrapped
|
|
||||||
);
|
|
||||||
if (cachedThemes) {
|
|
||||||
const themes = [];
|
|
||||||
for (const cachedTheme of cachedThemes) {
|
|
||||||
const payload = this.application.createPayloadFromObject(cachedTheme);
|
|
||||||
const theme = this.application.createItemFromPayload(payload);
|
|
||||||
themes.push(theme);
|
|
||||||
}
|
|
||||||
return themes;
|
|
||||||
} else {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
170
app/assets/javascripts/services/themeManager.ts
Normal file
170
app/assets/javascripts/services/themeManager.ts
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
import { WebApplication } from '@/application';
|
||||||
|
import _ from 'lodash';
|
||||||
|
import {
|
||||||
|
StorageValueModes,
|
||||||
|
EncryptionIntent,
|
||||||
|
ApplicationService,
|
||||||
|
SNTheme,
|
||||||
|
ComponentArea,
|
||||||
|
} from 'snjs';
|
||||||
|
import { AppStateEvent } from '@/services/state';
|
||||||
|
|
||||||
|
const CACHED_THEMES_KEY = 'cachedThemes';
|
||||||
|
|
||||||
|
export class ThemeManager extends ApplicationService {
|
||||||
|
|
||||||
|
private activeThemes: SNTheme[]
|
||||||
|
private unsubState!: () => void
|
||||||
|
private unregisterDesktop!: () => void
|
||||||
|
private unregisterComponent!: () => void
|
||||||
|
|
||||||
|
constructor(application: WebApplication) {
|
||||||
|
super(application);
|
||||||
|
this.activeThemes = [];
|
||||||
|
setImmediate(() => {
|
||||||
|
this.unsubState = this.webApplication.getAppState().addObserver(
|
||||||
|
async (eventName) => {
|
||||||
|
if (eventName === AppStateEvent.DesktopExtsReady) {
|
||||||
|
this.activateCachedThemes();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
get webApplication() {
|
||||||
|
return this.application as WebApplication;
|
||||||
|
}
|
||||||
|
|
||||||
|
deinit() {
|
||||||
|
this.unsubState();
|
||||||
|
(this.unsubState as any) = undefined;
|
||||||
|
this.activeThemes.length = 0;
|
||||||
|
this.unregisterDesktop();
|
||||||
|
this.unregisterComponent();
|
||||||
|
(this.unregisterDesktop as any) = undefined;
|
||||||
|
(this.unregisterComponent as any) = undefined;
|
||||||
|
super.deinit();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @override */
|
||||||
|
async onAppStart() {
|
||||||
|
super.onAppStart();
|
||||||
|
this.registerObservers();
|
||||||
|
if (!this.webApplication.getDesktopService().isDesktop) {
|
||||||
|
this.activateCachedThemes();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async activateCachedThemes() {
|
||||||
|
const cachedThemes = await this.getCachedThemes();
|
||||||
|
const writeToCache = false;
|
||||||
|
for (const theme of cachedThemes) {
|
||||||
|
this.activateTheme(theme, writeToCache);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private registerObservers() {
|
||||||
|
this.unregisterDesktop = this.webApplication.getDesktopService()
|
||||||
|
.registerUpdateObserver((component) => {
|
||||||
|
if (component.active && component.isTheme()) {
|
||||||
|
this.deactivateTheme(component as SNTheme);
|
||||||
|
setTimeout(() => {
|
||||||
|
this.activateTheme(component as SNTheme);
|
||||||
|
}, 10);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.unregisterComponent = this.application!.componentManager!.registerHandler({
|
||||||
|
identifier: 'themeManager',
|
||||||
|
areas: [ComponentArea.Themes],
|
||||||
|
activationHandler: (component) => {
|
||||||
|
if (component.active) {
|
||||||
|
this.activateTheme(component as SNTheme);
|
||||||
|
} else {
|
||||||
|
this.deactivateTheme(component as SNTheme);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
public deactivateAllThemes() {
|
||||||
|
const activeThemes = this.application!.componentManager!.getActiveThemes();
|
||||||
|
for (const theme of activeThemes) {
|
||||||
|
if (theme) {
|
||||||
|
this.application!.componentManager!.deregisterComponent(theme);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.activeThemes = [];
|
||||||
|
this.decacheThemes();
|
||||||
|
}
|
||||||
|
|
||||||
|
private activateTheme(theme: SNTheme, writeToCache = true) {
|
||||||
|
if (this.activeThemes.find((t) => t.uuid === theme.uuid)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.activeThemes.push(theme);
|
||||||
|
const url = this.application!.componentManager!.urlForComponent(theme)!;
|
||||||
|
const link = document.createElement('link');
|
||||||
|
link.href = url;
|
||||||
|
link.type = 'text/css';
|
||||||
|
link.rel = 'stylesheet';
|
||||||
|
link.media = 'screen,print';
|
||||||
|
link.id = theme.uuid;
|
||||||
|
document.getElementsByTagName('head')[0].appendChild(link);
|
||||||
|
if (writeToCache) {
|
||||||
|
this.cacheThemes();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private deactivateTheme(theme: SNTheme) {
|
||||||
|
const element = document.getElementById(theme.uuid) as HTMLLinkElement;
|
||||||
|
if (element) {
|
||||||
|
element.disabled = true;
|
||||||
|
element.parentNode!.removeChild(element);
|
||||||
|
}
|
||||||
|
_.remove(this.activeThemes, { uuid: theme.uuid });
|
||||||
|
this.cacheThemes();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async cacheThemes() {
|
||||||
|
const mapped = await Promise.all(this.activeThemes.map(async (theme) => {
|
||||||
|
const payload = theme.payloadRepresentation();
|
||||||
|
const processedPayload = await this.application!.protocolService!.payloadByEncryptingPayload(
|
||||||
|
payload,
|
||||||
|
EncryptionIntent.LocalStorageDecrypted
|
||||||
|
);
|
||||||
|
return processedPayload;
|
||||||
|
}));
|
||||||
|
return this.application!.setValue(
|
||||||
|
CACHED_THEMES_KEY,
|
||||||
|
mapped,
|
||||||
|
StorageValueModes.Nonwrapped
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async decacheThemes() {
|
||||||
|
return this.application!.removeValue(
|
||||||
|
CACHED_THEMES_KEY,
|
||||||
|
StorageValueModes.Nonwrapped
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async getCachedThemes() {
|
||||||
|
const cachedThemes = await this.application!.getValue(
|
||||||
|
CACHED_THEMES_KEY,
|
||||||
|
StorageValueModes.Nonwrapped
|
||||||
|
);
|
||||||
|
if (cachedThemes) {
|
||||||
|
const themes = [];
|
||||||
|
for (const cachedTheme of cachedThemes) {
|
||||||
|
const payload = this.application!.createPayloadFromObject(cachedTheme);
|
||||||
|
const theme = this.application!.createItemFromPayload(payload) as SNTheme;
|
||||||
|
themes.push(theme);
|
||||||
|
}
|
||||||
|
return themes;
|
||||||
|
} else {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user