feat(services): v5 color-mode, local-storage, in-memory-storage, script-injector

Author: xidedix

projects/coreui-angular/src/lib/services/color-mode.service.spec.ts

@@ -0,0 +1,25 @@
+import { TestBed } from '@angular/core/testing';
+import { ColorModeService } from './color-mode.service';
+
+describe('ColorModeService', () => {
+
+  let service: ColorModeService;
+
+  beforeEach(() => {
+    service = TestBed.inject(ColorModeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should switch themes', () => {
+    expect(service.colorMode()).toBeUndefined();
+    service.colorMode.set('light');
+    expect(service.colorMode()).toBe('light');
+    service.colorMode.set('dark');
+    expect(service.colorMode()).toBe('dark');
+    service.colorMode.set('auto');
+    expect(service.colorMode()).toBe('auto');
+  });
+});

projects/coreui-angular/src/lib/services/color-mode.service.ts

@@ -0,0 +1,82 @@
+import { DOCUMENT } from '@angular/common';
+import { DestroyRef, effect, inject, Injectable, signal, WritableSignal } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { tap } from 'rxjs/operators';
+import { LocalStorageService } from './local-storage.service';
+
+export type ColorMode = 'light' | 'dark' | 'auto' | string | undefined;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ColorModeService {
+
+  readonly #destroyRef: DestroyRef = inject(DestroyRef);
+  readonly #document: Document = inject(DOCUMENT);
+  readonly #localStorage: LocalStorageService = inject(LocalStorageService);
+
+  readonly eventName = signal('ColorSchemeChange');
+  readonly localStorageItemName: WritableSignal<string | undefined> = signal(undefined);
+  readonly localStorageItemName$ = toObservable(this.localStorageItemName);
+  readonly colorMode: WritableSignal<ColorMode> = signal(undefined);
+
+  readonly colorModeEffect = effect(() => {
+    const colorMode = this.colorMode();
+    if (colorMode) {
+      const localStorageItemName = this.localStorageItemName();
+      localStorageItemName && this.setStoredTheme(localStorageItemName, colorMode);
+      this.#setTheme(colorMode);
+    }
+  });
+
+  constructor() {
+    this.localStorageItemName$
+      .pipe(
+        tap(params => {
+          this.colorMode.set(this.getDefaultScheme(params));
+        }),
+        takeUntilDestroyed(this.#destroyRef)
+      )
+      .subscribe();
+  }
+
+  getStoredTheme(localStorageItemName: string) {
+    return this.#localStorage.getItem(localStorageItemName);
+  }
+
+  setStoredTheme(localStorageItemName: string, colorMode: string) {
+    return this.#localStorage.setItem(localStorageItemName, colorMode);
+  }
+
+  removeStoredTheme(localStorageItemName: string) {
+    this.#localStorage.removeItem(localStorageItemName);
+  }
+
+  getDefaultScheme(localStorageItemName: string | undefined) {
+    if (this.#document.defaultView === undefined) {
+      return this.getDatasetTheme();
+    }
+
+    const storedTheme = localStorageItemName && this.getStoredTheme(localStorageItemName);
+
+    return storedTheme ?? this.getDatasetTheme();
+  };
+
+  getPrefersColorScheme() {
+    return this.#document.defaultView?.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' :
+           this.#document.defaultView?.matchMedia('(prefers-color-scheme: light)').matches ? 'light' :
+           undefined;
+  }
+
+  getDatasetTheme(): ColorMode {
+    return <ColorMode>(this.#document.documentElement.dataset['coreuiTheme']);
+  }
+
+  #setTheme(colorMode: ColorMode) {
+    this.#document.documentElement.dataset['coreuiTheme'] = (colorMode === 'auto' ? this.getPrefersColorScheme() : colorMode);
+
+    const event = new Event(this.eventName());
+    this.#document.documentElement.dispatchEvent(event);
+  };
+
+}

projects/coreui-angular/src/lib/services/in-memory-storage.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { InMemoryStorageService } from './in-memory-storage.service';
+
+describe('InMemoryStorageService', () => {
+  let service: InMemoryStorageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(InMemoryStorageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

projects/coreui-angular/src/lib/services/in-memory-storage.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InMemoryStorageService implements Storage {
+
+  #storage = new Map<string, string>();
+
+  constructor() { }
+
+  public setItem(key: string, data: any): void {
+    this.#storage.set(key, JSON.stringify(data));
+  }
+
+  public getItem(key: string): any {
+    return this.#storage.has(key) ? JSON.parse(this.#storage.get(key) ?? 'null') : undefined;
+  }
+
+  public removeItem(key: string): void {
+    this.#storage.delete(key);
+  }
+
+  public clear() {
+    this.#storage.clear();
+  }
+
+  public get length() {
+    return this.#storage.size;
+  }
+
+  public key(index: number) {
+    return Array.from(this.#storage.keys())[index];
+  }
+}

projects/coreui-angular/src/lib/services/local-storage.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LocalStorageService } from './local-storage.service';
+
+describe('LocalStorageService', () => {
+  let service: LocalStorageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LocalStorageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

projects/coreui-angular/src/lib/services/local-storage.service.ts

@@ -0,0 +1,45 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { InMemoryStorageService } from './in-memory-storage.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LocalStorageService {
+
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: Object,
+    @Inject(DOCUMENT) private document: Document
+  ) {
+    this.#localStorage =
+      isPlatformBrowser(this.platformId) && this.document.defaultView
+      ? this.document.defaultView?.localStorage
+      : new InMemoryStorageService();
+  }
+
+  #localStorage: Storage;
+  readonly #data$ = new BehaviorSubject<{ key: string; data: any } | null>(null);
+  public readonly data$ = this.#data$.asObservable();
+
+  public setItem(key: string, data: any): void {
+    this.#localStorage.setItem(key, JSON.stringify(data));
+    this.#data$.next({ key, data });
+  }
+
+  public getItem(key: string): any {
+    const data = JSON.parse(this.#localStorage.getItem(key) ?? 'null');
+    this.#data$.next({ key, data });
+    return data;
+  }
+
+  public removeItem(key: string): void {
+    this.#localStorage.removeItem(key);
+    this.#data$.next({ key, data: null });
+  }
+
+  public clear() {
+    this.#localStorage.clear();
+    this.#data$.next(null);
+  }
+}

projects/coreui-angular/src/lib/services/public_api.ts

@@ -1,3 +1,6 @@
 export { IntersectionService, IIntersectionObserverInit } from './intersection.service';
 export { ListenersService, IListenersConfig } from './listeners.service';
 export { ClassToggleService } from './class-toggle.service';
+export { LocalStorageService } from './local-storage.service';
+export { InMemoryStorageService } from './in-memory-storage.service';
+export { ColorModeService, ColorMode } from './color-mode.service';

projects/coreui-angular/src/lib/services/script-injector.service.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import { Renderer2 } from '@angular/core';
+
+import { ScriptInjectorService } from './script-injector.service';
+
+describe('ScriptInjectorService', () => {
+  let service: ScriptInjectorService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [Renderer2]
+    });
+    service = TestBed.inject(ScriptInjectorService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

projects/coreui-angular/src/lib/services/script-injector.service.ts

@@ -0,0 +1,69 @@
+import { DOCUMENT } from '@angular/common';
+import { inject, Injectable, Renderer2 } from '@angular/core';
+
+export type ReferrerPolicy =
+  ''
+  | 'no-referrer'
+  | 'no-referrer-when-downgrade'
+  | 'origin'
+  | 'origin-when-cross-origin'
+  | 'same-origin'
+  | 'strict-origin'
+  | 'strict-origin-when-cross-origin'
+  | 'unsafe-url';
+
+export interface IScriptAttributes {
+  async?: boolean;
+  blocking?: 'render';
+  crossorigin?: 'anonymous' | 'use-credentials';
+  defer?: boolean;
+  fetchpriority?: 'auto' | 'high' | 'low';
+  importmap?: string;
+  integrity?: string;
+  nomodule?: boolean;
+  nonce?: string;
+  referrerpolicy?: ReferrerPolicy;
+  src: string;
+  type?: string;
+}
+
+export interface IScriptConfig {
+  attributes?: IScriptAttributes;
+  loaded?: boolean;
+  elementName?: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ScriptInjectorService {
+
+  document: Document = inject(DOCUMENT);
+  renderer: Renderer2 = inject(Renderer2);
+
+  #scriptStore = new Map<string, IScriptConfig>();
+
+  constructor() { }
+
+  public injectScript(src: string, scriptConfig: IScriptConfig = { elementName: 'head' }) {
+    if (this.#scriptStore.has(src) && this.#scriptStore.get(src)?.loaded) {
+      return;
+    }
+    const scriptAttributes: IScriptAttributes = { ...scriptConfig?.attributes, src };
+    this.loadScript(src, scriptConfig = { ...scriptConfig, attributes: scriptAttributes }).then();
+  }
+
+  loadScript(src: string, scriptConfig: IScriptConfig) {
+    return new Promise((resolve, reject) => {
+      const scriptElement = this.renderer.createElement('script');
+      this.renderer.setAttribute(scriptElement, 'type', 'text/javascript');
+      this.renderer.setAttribute(scriptElement, 'src', src);
+      scriptElement.onload = () => {
+        this.#scriptStore.set(src, { ...scriptConfig, loaded: true });
+        resolve({ src: src, loaded: true });
+      };
+      scriptElement.onerror = (error: any) => reject({ src: src, loaded: false, error });
+      this.renderer.appendChild(this.document.querySelector(scriptConfig.elementName ?? 'head'), scriptElement);
+    });
+  }
+}