fontastic 0.1.3

package/src/app/core/services/presentation/presentation.service.ts

@@ -0,0 +1,341 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { ConfigService } from '../config/config.service';
+import { MessageService } from '../message/message.service';
+import { ElectronService } from '@app/core/services/electron/electron.service';
+import { AppThemes, ThemeColors } from '@main/config/themes';
+import { SystemTheme, LayoutPanelType, LayoutPreviewType, LayoutThemeType } from '@main/types';
+import { StorageType } from '@main/enums';
+
+export class ScrollToOptions {
+  id: string;
+  type: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PresentationService {
+
+  quickText: any[] = [{
+    title: 'default',
+    text: 'The quick brown fox jumped over the lazy dog.'
+  }, {
+    title: 'All Caps',
+    text: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+  }, {
+    title: 'Alternating Caps',
+    text: 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz'
+  }];
+
+  // Defaults.
+  defaultText = 'The quick brown fox jumped over the lazy dog.';
+  defaultFontSize = 48;
+  defaultFontColor = '#3e4245';
+  defaultBackgroundColor = '#ffffff';
+
+  defaultFillColor = '#808080';
+  defaultStrokeColor = '#000000';
+  defaultLineColor = '#00a0be';
+
+  defaultWordSpacing = 0;
+  defaultLetterSpacing = 0;
+
+  _gridEnabled: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  _toolbarEnabled: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  _previewEnabled: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  _inspectEnabled: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  _inspectComponent: BehaviorSubject<string> = new BehaviorSubject('glyph-list');
+  _navigationEnabled: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  _asideEnabled: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  _asideComponent = new BehaviorSubject<string>('names');
+  _asideTableTabs = new BehaviorSubject<any[]>([]);
+
+  _statsCollapsed: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  _foldersCollapsed: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  _optionsCollapsed: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  _systemLoading: BehaviorSubject<boolean> = new BehaviorSubject(true);
+  _loadingScreen: BehaviorSubject<boolean> = new BehaviorSubject(false);
+  _loadingSpinner: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  _scrollToItem: BehaviorSubject<ScrollToOptions> = new BehaviorSubject(null);
+
+  _glyphIndex: BehaviorSubject<number> = new BehaviorSubject(0);
+  watchGlyphIndex$ = this._glyphIndex.asObservable();
+
+  _fontSize = new BehaviorSubject<number>(this.defaultFontSize);
+  watchFontSize$ = this._fontSize.asObservable();
+
+  _fontColor = new BehaviorSubject<string>(this.defaultFontColor);
+  watchFontColor$ = this._fontColor.asObservable();
+
+  _displayText = new BehaviorSubject<string>(this.defaultText);
+  watchDisplayText$ = this._displayText.asObservable();
+
+  _backgroundColor = new BehaviorSubject<string>(this.defaultBackgroundColor);
+  watchBackgroundColor$ = this._backgroundColor.asObservable();
+
+  _wordSpacing = new BehaviorSubject<number>(this.defaultWordSpacing);
+  watchWordSpacing$ = this._wordSpacing.asObservable();
+
+  _letterSpacing = new BehaviorSubject<number>(this.defaultLetterSpacing);
+  watchLetterSpacing$ = this._letterSpacing.asObservable();
+
+  _defaultTheme: BehaviorSubject<string> = new BehaviorSubject('default');
+  watchDefaultTheme$ = this._defaultTheme.asObservable();
+
+  _displayNews: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  constructor(
+    private configService: ConfigService,
+    private messageService: MessageService,
+    private electronService: ElectronService
+  ) {
+    if (this.electronService.isElectron) {
+      if (this.configService.has(StorageType.LayoutPanel)) {
+        this.loadLayoutSettings();
+      }
+      if (this.configService.has(StorageType.LayoutPreview)) {
+        this.loadPreviewSettings();
+      }
+      if (this.configService.has(StorageType.LayoutTheme)) {
+        this.loadThemeSettings();
+      }
+      this.setThemeVars(this._defaultTheme.getValue());
+    }
+  }
+
+  getQuickText(): any {
+    return this.quickText;
+  }
+
+  setNavigationEnabled(status: any): void {
+    this._navigationEnabled.next(status);
+    this.saveLayoutSettings();
+  }
+
+  setAsideEnabled(status: any): void {
+    this._asideEnabled.next(status);
+    this.saveLayoutSettings();
+  }
+
+  setAsideComponent(name: any): void {
+    this._asideComponent.next(name);
+    this.saveLayoutSettings();
+  }
+
+  setAsideTableTabs(tabs: any[]): void {
+    this._asideTableTabs.next(tabs);
+    this.saveLayoutSettings();
+  }
+
+  setGridEnabled(status: any): void {
+    this._gridEnabled.next(status);
+    this.saveLayoutSettings();
+  }
+
+  setToolbarEnabled(status: any): void {
+    this._toolbarEnabled.next(status);
+    this.saveLayoutSettings();
+  }
+
+  setPreviewEnabled(status: any): void {
+    this._previewEnabled.next(status);
+    this.saveLayoutSettings();
+  }
+
+  setInspectEnabled(status: any): void {
+    this._inspectEnabled.next(status);
+    this.saveLayoutSettings();
+  }
+
+  setInspectComponent(name: any): void {
+    this._inspectComponent.next(name);
+    this.saveLayoutSettings();
+  }
+
+  setStatsCollapsed(toggle: any): void {
+    this._statsCollapsed.next(toggle);
+    this.saveLayoutSettings();
+  }
+
+  setFoldersCollapsed(toggle: any): void {
+    this._foldersCollapsed.next(toggle);
+    this.saveLayoutSettings();
+  }
+
+  setOptionsCollapsed(toggle: any): void {
+    this._optionsCollapsed.next(toggle);
+    this.saveLayoutSettings();
+  }
+
+  saveLayoutSettings(): void {
+    const settings: LayoutPanelType = {
+      _gridEnabled: this._gridEnabled.getValue(),
+      _asideEnabled: this._asideEnabled.getValue(),
+      _asideComponent: this._asideComponent.getValue(),
+      _asideTableTabs: this._asideTableTabs.getValue(),
+      _navigationEnabled: this._navigationEnabled.getValue(),
+      _toolbarEnabled: this._toolbarEnabled.getValue(),
+      _previewEnabled: this._previewEnabled.getValue(),
+      _inspectEnabled: this._inspectEnabled.getValue(),
+      _inspectComponent: this._inspectComponent.getValue(),
+      _statsCollapsed: this._statsCollapsed.getValue(),
+      _foldersCollapsed: this._foldersCollapsed.getValue(),
+      _optionsCollapsed: this._optionsCollapsed.getValue()
+    };
+    this.messageService.set(StorageType.LayoutPanel, settings);
+  }
+
+  loadLayoutSettings(): void {
+    const settings: LayoutPanelType = this.configService.get(StorageType.LayoutPanel);
+    if (Object.keys(settings).length) {
+      for (const [key, value] of Object.entries(settings)) {
+        if (this[key]) {
+          this[key].next(value);
+        }
+      }
+    }
+  }
+
+  savePreviewSettings(): void {
+    const settings: LayoutPreviewType = {
+      _fontSize: this._fontSize.getValue(),
+      _fontColor: this._fontColor.getValue(),
+      _displayText: this._displayText.getValue(),
+      _backgroundColor: this._backgroundColor.getValue(),
+      _wordSpacing: this._wordSpacing.getValue(),
+      _letterSpacing: this._letterSpacing.getValue(),
+      _displayNews: this._displayNews.getValue()
+    };
+    this.messageService.set(StorageType.LayoutPreview, settings);
+  }
+
+  loadPreviewSettings(): void {
+    const settings: LayoutPreviewType = this.configService.get(StorageType.LayoutPreview);
+    if (Object.keys(settings).length) {
+      for (const [key, value] of Object.entries(settings)) {
+        if (this[key]) {
+          this[key].next(value);
+        }
+      }
+    }
+  }
+
+  saveThemeSettings(): void {
+    const settings: LayoutThemeType = {
+      _defaultTheme: this._defaultTheme.getValue()
+    };
+    this.messageService.set(StorageType.LayoutTheme, settings);
+  }
+
+  loadThemeSettings(): void {
+    const settings: LayoutThemeType = this.configService.get(StorageType.LayoutTheme);
+    if (Object.keys(settings).length) {
+      for (const [key, value] of Object.entries(settings)) {
+        if (this[key]) {
+          this[key].next(value);
+        }
+      }
+    }
+  }
+
+  setSystemLoading(value: boolean): void {
+    this._systemLoading.next(value);
+  }
+
+  setLoadingScreen(value: boolean): void {
+    this._loadingScreen.next(value);
+  }
+
+  setLoadingSpinner(value: boolean): void {
+    this._loadingSpinner.next(value);
+  }
+
+  setGlyphIndex(value: number): void {
+    this._glyphIndex.next(value);
+  }
+
+  setFontSize(value: number): void {
+    this._fontSize.next(value);
+    this.savePreviewSettings();
+  }
+
+  setFontColor(value: string): void {
+    this._fontColor.next(value);
+    this.savePreviewSettings();
+  }
+
+  setDisplayText(value: string): void {
+    this._displayText.next(value);
+    this.savePreviewSettings();
+  }
+
+  setBackgroundColor(value: string): void {
+    this._backgroundColor.next(value);
+    this.savePreviewSettings();
+  }
+
+  setWordSpacing(value: number): void {
+    this._wordSpacing.next(value);
+    this.savePreviewSettings();
+  }
+
+  setLetterSpacing(value: number): void {
+    this._letterSpacing.next(value);
+    this.savePreviewSettings();
+  }
+
+  setTheme(value: string): void {
+    this._defaultTheme.next(value);
+    this.saveThemeSettings();
+  }
+
+  getTheme(): string {
+    return this._defaultTheme.getValue();
+  }
+
+  getThemes(): SystemTheme[] {
+    return AppThemes;
+  }
+
+  resetPreview() {
+    const settings: LayoutPreviewType = {
+      _fontSize: this.defaultFontSize,
+      _fontColor: this.defaultFontColor,
+      _displayText: this._displayText.getValue(),
+      _backgroundColor: this.defaultBackgroundColor,
+      _wordSpacing: this.defaultWordSpacing,
+      _letterSpacing: this.defaultLetterSpacing
+    };
+    for (const [key, value] of Object.entries(settings)) {
+      if (this[key]) {
+        this[key].next(value);
+      }
+    }
+    this.messageService.set(StorageType.LayoutPreview, settings);
+  }
+
+  setThemeVars(name: string): void {
+    const config = ThemeColors.has(name) ? ThemeColors.get(name) : ThemeColors.get('default');
+
+    const root = document.documentElement;
+    root.style.setProperty('--font-color', config.color);
+    root.style.setProperty('--background-color', config.background);
+    root.style.setProperty('--border-color', config.border);
+    root.style.setProperty('--fill-color', config.fill);
+    root.style.setProperty('--stroke-color', config.stroke);
+
+    this.setFontColor(config.color);
+    this.setBackgroundColor(config.background);
+  }
+
+  getDisplayNews(): boolean {
+    return this._displayNews.getValue();
+  }
+
+  setDisplayNews(toggle: boolean): void {
+    this._displayNews.next(toggle);
+  }
+}

package/src/app/core/services/utils/utils.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UtilsService } from './utils.service';
+
+describe('UtilsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: UtilsService = TestBed.inject(UtilsService);
+    expect(service).toBeTruthy();
+  });
+});

package/src/app/core/services/utils/utils.service.ts

@@ -0,0 +1,144 @@
+import { Injectable } from '@angular/core';
+import { gsap, Power3 } from 'gsap';
+
+@Injectable({ providedIn: 'root' })
+export class UtilsService {
+
+  delay = (time: number) => (result: any) => new Promise(resolve => setTimeout(() => resolve(result), time));
+
+  clone = (items: any) => items.map((item: any) => Array.isArray(item) ? this.clone(item) : item);
+
+  listToTree(arr: any[] = [], parentId: number = 0) {
+    const tree = [];
+    for (const i in arr) {
+      if (arr[i].parent_id === parentId) {
+        const children = this.listToTree(arr, arr[i].id);
+        arr[i].children = (children.length) ? children : [];
+        tree.push(arr[i]);
+      }
+    }
+    return tree;
+  }
+
+  randomString(length: number): string {
+    let result = '';
+    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+    const charactersLength = characters.length;
+    for (let i = 0; i < length; i++) {
+      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+    }
+    return result;
+  }
+
+  /**
+   * Revert camlecase back to normal string. Used in aside component.
+   * https://stackoverflow.com/questions/4149276/how-to-convert-camelcase-to-camel-case
+   * 
+   * @param str 
+   */
+  normalizeCamelCase(str: string): string {
+    return str.replace(/([a-z])([A-Z])/g, '$1 $2');
+  }
+
+  capitalize(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  escapeHtml(unsafe: string): string {
+    return unsafe
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/\u0022/g, '&quot;')
+      .replace(/\u0027/g, '&#039;');
+  }
+
+  compare(a: any, b: any): any {
+    if (a.order < b.order) {
+      return -1;
+    }
+    if (a.order > b.order) {
+      return 1;
+    }
+    return 0;
+  }
+
+  sortKeys(dict: any) {
+    const keys = [];
+    for (const key in dict) {
+      if (dict.hasOwnProperty(key)) {
+        keys.push(key);
+      }
+    }
+    keys.sort();
+    return keys;
+  }
+
+  isEmptyObject(obj: any): boolean {
+    return (
+      Object.getPrototypeOf(obj) === Object.prototype &&
+      Object.getOwnPropertyNames(obj).length === 0 &&
+      Object.getOwnPropertySymbols(obj).length === 0
+    );
+  }
+
+  scrollTo(element: Element, offset: number = 0) {
+    gsap.to(element, {
+      scrollTo: {
+        y: offset,
+        autoKill: true,
+      },
+      duration: 1,
+      ease: Power3.easeOut
+    });
+  }
+
+  appendStyles(css: string, id: string = 'inline') {
+    const head = document.getElementsByTagName('head')[0];
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.setAttribute('id', id);
+    style.appendChild(document.createTextNode(css));
+    head.appendChild(style);
+  }
+
+  removeStyles(id: string) {
+    return new Promise((resolve, reject) => {
+      const el = document.getElementById(id);
+      if (el) {
+        resolve(el.remove());
+      } else {
+        reject(true);
+      }
+    });
+  }
+
+  createFontStyles(data: any[], next: any) {
+    let css = ``;
+    
+    data.forEach((item: any) => {
+      try {
+
+        // Fix font styles not working when name begins with number.
+        if (Number.isInteger(parseInt(item.file_name.charAt(0), 10))) {
+          item.file_name = this.randomString(5);
+        }
+
+        const fontFamily = (item.file_name?.length) ? item.file_name.replace(/\.[^/.]+$/, '') : item.file_name;
+        const filePath = (item.file_path.length) ? item.file_path.replace(/\\/g, '/') : item.file_path;
+
+        css += `
+          @font-face {
+            font-family: ${fontFamily};
+            src: url("file://${filePath}");
+          }
+        `;
+
+      } catch (error) {
+        console.warn('create-font-styles-error:', error as Error);
+      }
+    });
+
+    next(css);
+  }
+}

package/src/app/layout/aside/aside.component.html

@@ -0,0 +1,9 @@
+<ng-container [ngSwitch]="componentName">
+  <aside class="component border-left">
+    <div class="component__panel">
+      <app-tables *ngSwitchCase="'tables'"></app-tables>
+      <app-search *ngSwitchCase="'search'"></app-search>
+      <app-store *ngSwitchCase="'store'"></app-store>
+    </div>
+  </aside>
+</ng-container>

package/src/app/layout/aside/aside.component.scss

@@ -0,0 +1 @@
+

package/src/app/layout/aside/aside.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { PresentationService } from '@app/core/services';
+
+@Component({
+  selector: 'app-aside',
+  templateUrl: './aside.component.html',
+  styleUrls: ['./aside.component.scss']
+})
+export class AsideComponent implements OnInit {
+
+  componentName = 'tables';
+  componentList = ['tables', 'search', 'store'];
+
+  constructor(
+    private presentationService: PresentationService,
+  ) { }
+
+  ngOnInit() {
+    this.presentationService._asideComponent.subscribe((value: string) => this.componentName = this.componentList.includes(value) ? value : this.componentName);
+  }
+
+  onComponentSwitch(): void {
+    this.componentName = (this.componentName === 'tables') ? 'store' : 'tables';
+    this.presentationService.setAsideComponent(this.componentName);
+  }
+}

package/src/app/layout/footer/footer.component.html

@@ -0,0 +1,11 @@
+<footer class="component">
+  <div class="left border-top">
+    <app-spinner></app-spinner>
+  </div>
+  <div class="middle border-top"></div>
+  <div class="right border-top">
+    <div class="flex items-center justify-end w-full px-4">
+      <span class="font-medium text-sm uppercase">Angular &mdash; {{ngVersion}} Electron &mdash; {{version.electron}}</span>
+    </div>
+  </div>
+</footer>

package/src/app/layout/footer/footer.component.scss

@@ -0,0 +1,27 @@
+footer {
+  display: grid;
+  grid-template-areas: "left middle right";
+  grid-template-columns: 300px 1fr 300px;
+  grid-template-rows: 30px;
+}
+
+.left { grid-area: left; }
+.middle { grid-area: middle; }
+.right { grid-area: right; }
+
+.middle { 
+  margin: 0px 1px; 
+}
+
+.left,
+.middle,
+.right {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.left {
+  padding: 0px 10px;
+}

package/src/app/layout/footer/footer.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { ConfigService } from '@app/core/services';
+
+export interface AppVersion {
+  system: string;
+  electron: string;
+}
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  version: AppVersion;
+  ngVersion: string;
+  
+  constructor(
+    private configService: ConfigService,
+  ) { }
+
+  ngOnInit() {
+    if (this.configService.has('system.version')) {
+      this.version = this.configService.get('system.version') as AppVersion;
+    }
+    if (this.configService.has('ng-version')) {
+      this.ngVersion = this.configService.get('ng-version');
+    }
+  }
+
+}

package/src/app/layout/header/header.component.html

@@ -0,0 +1,35 @@
+<header class="component">
+  <div class="left border-top border-bottom">
+    <div class="header-block flex justify-items-start items-center">
+      <a class="enabled" title="New Collection"><i class="material-icons" (click)="handleCreateCollection($event)">widgets</i> New Collection</a>
+      <ng-container *ngIf="collectionId>0; else elseAddFontsDisabled">
+        <a class="enabled" title="New Collection"><i class="material-icons" (click)="handleAddFonts($event, collectionId)">list_alt</i> Add Fonts</a>
+      </ng-container>
+      <ng-template #elseAddFontsDisabled>
+        <a class="disabled" title="New Collection"><i class="material-icons">list_alt</i> Add Fonts</a>
+      </ng-template>
+    </div>
+  </div>
+  <div class="middle border-top border-bottom">
+    <div class="header-block flex justify-start items-center">
+      <a href="javascript:;" (click)="handleToggleNavigation($event)" [className]="navigationEnabled ? 'enabled' : 'disabled'" title="Toggle Navigation"><i class="material-icons">border_all</i> Navigation</a>
+      <a href="javascript:;" (click)="handleToggleAside($event)" [className]="asideEnabled ? 'enabled' : 'disabled'" title="Toggle Aside"><i class="material-icons">border_all</i> Aside</a>
+      <a href="javascript:;" (click)="handleTogglePreview($event)" [className]="previewEnabled ? 'enabled' : 'disabled'" title="Toggle Preview"><i class="material-icons">border_all</i> Preview</a>
+      <a href="javascript:;" (click)="handleToggleInspect($event)" [className]="inspectEnabled ? 'enabled' : 'disabled'" title="Toggle Inspect"><i class="material-icons">border_all</i> Inspect</a>
+      <a href="javascript:;" (click)="handleToggleToolbar($event)" [className]="toolbarEnabled ? 'enabled' : 'disabled'" title="Toggle Toolbar"><i class="material-icons">border_all</i> Toolbar</a>
+      <a href="javascript:;" (click)="handleToggleGrid($event)" [className]="gridEnabled ? 'enabled' : 'disabled'" title="Toggle Grid"><i class="material-icons">border_all</i> Grid</a>
+    </div>
+  </div>
+  <div class="right border-top border-bottom">
+    <div class="header-block flex justify-end items-center">
+      <a class="enabled" title="Theme" (click)="handleToggleSearch($event)"><i class="material-icons">search</i> Search</a>
+      <a class="enabled" title="Theme" (click)="handleSwitchTheme($event)"><i class="material-icons">burst_mode</i> Theme</a>
+      <ng-container *ngIf="currentUser; else elseif1">
+        <a (click)="handleLoadSettings()" class="gravatar" title="Settings"><img src="{{gravatarUrl}}" alt="{{currentUser.name}}" /></a>
+      </ng-container>
+      <ng-template #elseif1>
+        <a (click)="handleLoadSettings()" title="Settings"><i class="material-icons">exit_to_app</i> Settings</a>
+      </ng-template>
+    </div>
+  </div>
+</header>