fontastic 0.1.3

package/src/app/pages/main/toolbar/toolbar.component.ts

@@ -0,0 +1,132 @@
+import { Component, OnInit } from '@angular/core';
+import { PresentationService } from '@app/core/services';
+
+@Component({
+  selector: 'app-toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss']
+})
+export class ToolbarComponent implements OnInit {
+
+  fontColor = '#ac1fad';
+  fontSize = 72;
+  displayText: string;
+
+  quickTextIndex = 0;
+  backgroundColor = '#ffffff';
+
+  // text_format
+  buttonType = 0;
+  buttonTypes: any[] = [{
+    type: 0,
+    icon: 'format_size',
+    title: 'Font Size',
+  }, {
+    type: 1,
+    icon: 'format_textdirection_l_to_r',
+    title: 'Word Spacing',
+  }, {
+    type: 2,
+    icon: 'format_textdirection_r_to_l',
+    title: 'Letter Spacing',
+  }];
+
+  constructor(
+    private presentationService: PresentationService,
+  ) { }
+
+  ngOnInit() {
+
+    this.presentationService.watchFontColor$.subscribe((value) => this.fontColor = value);
+
+    this.presentationService.watchFontSize$.subscribe((value) => this.fontSize = value);
+
+    this.presentationService.watchBackgroundColor$.subscribe((value) => this.backgroundColor = value);
+
+    this.presentationService.watchDisplayText$.subscribe((value) => this.displayText = value);
+  }
+
+  onFontColor(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.presentationService.setFontColor(target.value);
+    this.presentationService.savePreviewSettings();
+  }
+
+  onBackgroundColor(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.presentationService.setBackgroundColor(target.value);
+    this.presentationService.savePreviewSettings();
+  }
+
+  onFontSize(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.presentationService.setFontSize(Number(target.value));
+    this.presentationService.savePreviewSettings();
+  }
+
+  onWordSpacing(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.presentationService.setWordSpacing(Number(target.value));
+    this.presentationService.savePreviewSettings();
+  }
+
+  onLetterSpacing(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.presentationService.setLetterSpacing(Number(target.value));
+    this.presentationService.savePreviewSettings();
+  }
+
+  handleDisplayInput(event: any): void {
+    const el = event.srcElement;
+    const target = event.target;
+    const value = target.value;
+    if (event.keyCode === 13) {
+      this.toggleTextClass(target.parentNode);
+      el.blur();
+    }
+    this.presentationService.setDisplayText(value);
+    this.presentationService.savePreviewSettings();
+  }
+
+  handleDisplayButton(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.toggleTextClass(target.parentNode.parentNode as HTMLElement);
+  }
+
+  handleQuickText(event: Event): void {
+    const text = this.presentationService.getQuickText();
+    this.quickTextIndex = (this.quickTextIndex >= text.length - 1) ? 0 : this.quickTextIndex + 1;
+    this.presentationService.setDisplayText(text[this.quickTextIndex].text);
+    this.presentationService.setDisplayNews((text[this.quickTextIndex].title === 'Latest News') ? true : false);
+    this.presentationService.savePreviewSettings();
+  }
+
+  toggleTextClass(el: HTMLElement): void {
+    if (el.classList.contains('open')) {
+      el.classList.remove('open');
+    } else {
+      el.classList.add('open');
+    }
+  }
+
+  handleSpacingButton(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const parent = target.parentNode as HTMLElement;
+    const buttonType = Number(parent.dataset.type);
+    
+    if (buttonType >= this.buttonTypes.length - 1) {
+      this.buttonType = 0;
+    } else {
+      this.buttonType++;
+    }
+
+    target.innerHTML = this.buttonTypes[this.buttonType].icon;
+
+    parent.setAttribute('type', String(this.buttonType));
+    parent.setAttribute('title', this.buttonTypes[this.buttonType].title);
+  }
+
+  handleResetButton(event: Event): void {
+    this.presentationService.resetPreview();
+  }
+}

package/src/app/shared/components/alert/alert.component.html

@@ -0,0 +1,9 @@
+<div class="controls app-alert flex justify-start items-start border-bottom" [class]="alert.class" [class.app-alert-enabled]="alertEnabled">
+  <div class="controls__item flex justify-start items-center">
+    <span class="material-icons">arrow_right</span>
+    <p class="whitespace-nowrap">{{alert.message}}</p>
+  </div>
+  <div class="controls__item flex justify-end items-center mr-2">
+    <i class="material-icons cursor-pointer" (click)="handleIconClick($event)" title="Close Message">{{alert.icon}}</i>
+  </div>
+</div>

package/src/app/shared/components/alert/alert.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { AlertService } from '@app/core/services';
+import { AppAlert } from '@main/types';
+import { AlertProps } from '@main/config/alert';
+
+@Component({
+  selector: 'app-alert',
+  templateUrl: './alert.component.html',
+  styleUrls: ['./alert.component.scss']
+})
+export class AlertComponent implements OnInit {
+
+  alert: AppAlert = AlertProps;
+  alertEnabled = false;
+
+  constructor(
+    private alertService: AlertService,
+  ) { }
+
+  ngOnInit(): void {
+    this.alertService.getObservable().subscribe((result: AppAlert) => {
+      if (result?.message) {
+        this.alert = result;
+        this.alertEnabled = true;
+      } else if (this.alertEnabled) {
+        this.alertEnabled = false;
+        this.alert = AlertProps;
+        this.alertService.clear();
+      }
+    });
+  }
+
+  handleIconClick($event: MouseEvent) {
+    this.alertService.clear();
+    this.alertEnabled = false;
+  }
+}

package/src/app/shared/components/breadcrumbs/breadcrumbs.component.html

@@ -0,0 +1,14 @@
+<div class="controls flex justify-start items-start border-bottom breadcrumbs">
+  <div class="controls__item flex justify-start items-center">
+    <ng-container *ngFor="let item of breadCrumbs">
+      <ng-template [ngIf]="item.link" [ngIfElse]="other">
+        <span class="material-icons">arrow_right</span>
+        <a [routerLink]="[item.link]" class="cursor-pointer" title={{item.title}} [attr.data-link]="item.link"><span class="text-uppercase">{{ item.title }}</span></a>
+      </ng-template>
+      <ng-template #other>
+        <span class="material-icons">arrow_right</span>
+        <span class="text-uppercase" title="{{item.title}}">{{ item.title }}</span>
+      </ng-template>
+    </ng-container>
+  </div>
+</div>

package/src/app/shared/components/breadcrumbs/breadcrumbs.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { BreadcrumbService, FontService } from '@app/core/services';
+import { Breadcrumb } from '@main/types';
+import { delay } from 'rxjs';
+
+@Component({
+  selector: 'app-breadcrumbs',
+  templateUrl: './breadcrumbs.component.html',
+  styleUrls: ['./breadcrumbs.component.scss']
+})
+export class BreadcrumbsComponent implements OnInit {
+
+  public breadCrumbs: Breadcrumb[] = [];
+
+  constructor(
+    private breadcrumbService: BreadcrumbService,
+    private fontService: FontService
+  ) { }
+
+  ngOnInit(): void {
+    this.breadcrumbService.getObservable().subscribe((result: Breadcrumb[]) => this.breadCrumbs = result);
+
+    this.fontService.watchFontObject$.pipe(delay(1e3 / 2)).subscribe((result) => {
+      if (result?.names?.fontFamily?.en) {
+        if (this.breadCrumbs.length) {
+          this.breadCrumbs = this.breadCrumbs.filter((item: Breadcrumb) => item.type === 'collection');
+          this.breadCrumbs.push({
+            title: result.names.fontFamily.en,
+            link: '',
+            type: 'name'
+          });
+        }
+      }
+    });
+  }
+}

package/src/app/shared/components/button/button.component.html

@@ -0,0 +1,3 @@
+<button type="{{type}}" class="app-button" [ngClass]="ngClass" title="{{text}}" (click)="onButtonClick($event)" [attr.disabled]="disabled">
+  <ng-content></ng-content>
+</button>

package/src/app/shared/components/button/button.component.scss

@@ -0,0 +1,2 @@
+
+

package/src/app/shared/components/button/button.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss']
+})
+export class ButtonComponent {
+
+  @Input() type: string;
+  @Input() text: string;
+  @Input() ngClass: string;
+  @Input() disabled: null;
+
+  @Output() handleButtonClick = new EventEmitter<any>();
+
+  constructor() { }
+
+  onButtonClick(event: MouseEvent): void {
+    this.handleButtonClick.emit(event);
+  }
+}

package/src/app/shared/components/collection/create-collection/create-collection.component.html

@@ -0,0 +1,41 @@
+<app-modal id="collection-create" title="Create Collection" size="sm" rounded="rounded-md" [showHeader]="false" [showFooter]="false">
+
+  <div class="page">
+
+    <div class="page__header border-bottom">
+      <div class="page__header-title">
+        <h1>Create Collection</h1>
+      </div>
+    </div>
+
+    <form class="form" (ngSubmit)="onSubmit(collectionForm)" #collectionForm="ngForm">
+
+      <div class="page__body">
+        <div class="form-group">
+          <label for="title">Collection title</label>
+          <input type="text" class="form-control" name="title" id="title" [(ngModel)]="result.title" #title="ngModel" placeholder="Folder Title" required>
+          <span class="form-text text-muted" [hidden]="title.errors && (title.dirty || title.touched)">A unique title to identify the folder.</span>
+          <span class="form-text errors" *ngIf="title.invalid && (title.dirty || title.touched)">A folder is required.</span>
+        </div>
+        <div class="form-group" *ngIf="options.length">
+          <label for="parentId">Parent collection</label>
+          <select class="form-control" name="parentId" id="parentId" [(ngModel)]="result.parentId" #parentId="ngModel" required>
+            <option *ngFor="let option of options;" [value]="option.parentId">{{option.name}}</option>
+          </select>
+          <span class="form-text text-muted" [hidden]="parentId.errors && (parentId.dirty || parentId.touched)">A unique title to identify the folder.</span>
+          <span class="form-text errors" *ngIf="parentId.invalid && (parentId.dirty || parentId.touched)">A folder is required.</span>
+        </div>
+      </div>
+
+      <div class="page__footer border-top">
+        <div class="flex items-center justify-end w-full">
+          <button type="button" class="app-button app-button__info app-button__lg mr-2" (click)="modalService.close();">Close</button>
+          <button type="submit" class="app-button app-button__success app-button__xl" [attr.disabled]="collectionForm.valid ? null : true">Submit</button>
+        </div>
+      </div>
+
+    </form>
+
+  </div>
+
+</app-modal>

package/src/app/shared/components/collection/create-collection/create-collection.component.ts

@@ -0,0 +1,68 @@
+import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { DatabaseService, MessageService, ModalService } from '@app/core/services';
+import { Collection } from '@main/database/entity';
+
+export class CollectionModel {
+  constructor(
+    public title: string = '',
+    public parentId?: number
+  ) { }
+}
+
+export interface CollectionOptions {
+  parentId: number;
+  name: string;
+}
+
+@Component({
+  selector: 'app-create-collection',
+  templateUrl: './create-collection.component.html',
+  styleUrls: ['./create-collection.component.scss']
+})
+export class CreateCollectionComponent implements OnInit {
+
+  result: CollectionModel = new CollectionModel('', 0);
+  options: CollectionOptions[] = [];
+
+  constructor(
+    public modalService: ModalService,
+    private messageService: MessageService,
+    private databaseService: DatabaseService,
+  ) { }
+
+  ngOnInit(): void {
+    this.databaseService.watchCollectionResultSet$.subscribe((results: Collection[]) => {
+      if (results) {
+        const options = [{ parentId: 0, name: 'Root Collection' }];
+        results.forEach((result: Collection) => {
+          if (result?.stores?.length) {
+            return;
+          }
+          options.push({
+            parentId: result.id,
+            name: result.title
+          });
+        });
+
+        this.options = options;
+      }
+    });
+  }
+
+  onSubmit(form: NgForm): void {
+    if (!form.valid) {
+      return;
+    }
+
+    const values: CollectionOptions = form.value;
+
+    this.messageService.collectionCreate(values).then((results: Collection[]) => this.databaseService.setCollectionResultSet(results));
+
+    this.result = new CollectionModel('', 0);
+    this.options = [];
+
+    this.modalService.close();
+  }
+
+}

package/src/app/shared/components/collection/form-collection/form-collection.component.html

@@ -0,0 +1 @@
+<p>form-collection works!</p>

package/src/app/shared/components/collection/form-collection/form-collection.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-form-collection',
+  templateUrl: './form-collection.component.html',
+  styleUrls: ['./form-collection.component.scss']
+})
+export class FormCollectionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

package/src/app/shared/components/collection/update-collection/update-collection.component.html

@@ -0,0 +1,40 @@
+<app-modal id="collection-update" title="Update Collection" size="sm" rounded="rounded-md" [showHeader]="false" [showFooter]="false">
+  <div class="page">
+
+    <div class="page__header border-bottom">
+      <div class="page__header-title">
+        <h1>Update Collection</h1>
+      </div>
+      <div class="page__header-tools"></div>
+    </div>
+
+    <form class="form" (ngSubmit)="onSubmit(collectionForm)" #collectionForm="ngForm">
+
+      <div class="page__body">
+        <input type="hidden" name="id" id="id" [(ngModel)]="result.id" #id="ngModel" readonly>
+        <div class="form-group">
+          <label for="title">Collection title</label>
+          <input type="text" class="form-control" name="title" id="title" [(ngModel)]="result.title" #title="ngModel" placeholder="Folder Title" required>
+          <span class="form-text text-muted" [hidden]="title.errors && (title.dirty || title.touched)">A unique title to identify the folder.</span>
+          <span class="form-text errors" *ngIf="title.invalid && (title.dirty || title.touched)">A folder is required.</span>
+        </div>
+      </div>
+
+      <div class="page__footer border-top">
+        <div class="flex items-center justify-between w-full">
+          <div>
+            <ng-container *ngIf="!hasChildren">
+              <button type="button" class="app-button app-button__danger app-button__lg" (click)="handleDelete($event, result.id)">Delete</button>
+            </ng-container>
+          </div>
+          <div>
+            <button type="button" class="app-button app-button__info app-button__lg mr-2" (click)="modalService.close();">Close</button>
+            <button type="submit" class="app-button app-button__success app-button__xl" [attr.disabled]="collectionForm.valid ? null : true">Submit</button>  
+          </div>
+        </div>
+      </div>
+
+    </form>
+
+  </div>
+</app-modal>

package/src/app/shared/components/collection/update-collection/update-collection.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { DatabaseService, MessageService, ModalService } from '@app/core/services';
+import { Collection } from '@main/database/entity';
+
+export class CollectionModel {
+  constructor(
+    public id: number,
+    public title: string
+  ) { }
+}
+
+@Component({
+  selector: 'app-update-collection',
+  templateUrl: './update-collection.component.html',
+  styleUrls: ['./update-collection.component.scss']
+})
+export class UpdateCollectionComponent implements OnInit {
+
+  result: CollectionModel = new CollectionModel(0, '');
+  hasChildren = true;
+
+  constructor(
+    public modalService: ModalService,
+    private messageService: MessageService,
+    private databaseService: DatabaseService,
+  ) { }
+
+  ngOnInit(): void {
+    this.databaseService.watchCollectionResultSet$.subscribe((results: Collection[]) => {
+      if (results) {
+        const collectionId = this.databaseService.getCollectionId();
+        if (collectionId) {
+          const result = results.find((item: Collection) => item.id === collectionId);
+          if (result) {
+            this.result = new CollectionModel(result.id, result.title);
+          }
+          this.findChildren(collectionId, results);
+        }
+      }
+    });
+  }
+
+  findChildren(collectionId: number, results: Collection[]) {
+    const found = results.filter((item: Collection) => item.parent_id === collectionId);
+    this.hasChildren = (found && found.length) ? true : false;
+  }
+
+  handleDelete(event: Event, collectionId: number): void {
+    event.stopPropagation();
+    this.messageService.collectionDelete(collectionId).then((result: Collection[]) => {
+      this.databaseService.setCollectionResultSet(result);
+      this.messageService.log(`Deleted collection id #${collectionId}.`, 1);
+      this.modalService.close();
+    });
+  }
+
+  onSubmit(form: NgForm): void {
+    if (!form.valid) {
+      return;
+    }
+
+    const values = form.value;
+    this.messageService.collectionUpdate(values.id, values).then((results: Collection[]) => this.databaseService.setCollectionResultSet(results));
+
+    this.result = new CollectionModel(0, '');
+
+    this.modalService.close();
+  }
+
+}

package/src/app/shared/components/glyph-list/glyph-list.component.html

@@ -0,0 +1,40 @@
+<div class="component">
+  <div class="component__panel">
+
+    <div class="controls flex justify-between items-center border-top border-bottom">
+      <div class="controls__item flex justify-start items-center">
+        <div>
+          <select class="form-control form-control-reset mr-2" (change)="onChangeSize($event)" [(ngModel)]="cellHeight">
+            <option *ngFor="let item of cellSizeOptions" [value]="item">{{item}}</option>
+          </select>
+          <select class="form-control form-control-reset mr-2" (change)="onChangeCount($event)" [(ngModel)]="cellCount">
+            <ng-container *ngFor="let item of cellCountOptions">
+              <option [value]="item" *ngIf="item < numGlyphs">{{item}}</option>
+            </ng-container>
+          </select>
+          <select class="form-control form-control-reset" (change)="onChangePage($event)">
+            <option *ngFor="let item of paginatorOptions" [value]="item.key">{{item.value}}</option>
+          </select>
+          <span class="mx-5">Page {{page + 1}} of {{numPages}} - {{ numGlyphs }} Total</span>
+        </div>
+      </div>
+      <div class="controls__item flex justify-end items-center material-icons-rounded">
+        <i class="material-icons" (click)="onComponentSwitch();">more_horiz</i>
+      </div>
+    </div>
+
+    <div class="hover-scrollbox-y">
+
+      <div class="glyph-list">
+        <ng-container *ngFor="let item of createRange(cellCount); let i = index">
+          <div class="glyph-list__wrapper">
+            <canvas class="glyph-list__wrapper-item" width="{{cellWidth}}" height="{{cellHeight}}" id="g{{i}}"
+              (mouseenter)="onCellHover($event)" (click)="onCellSelect($event)"></canvas>
+          </div>
+        </ng-container>
+      </div>
+
+    </div>
+
+  </div>
+</div>

package/src/app/shared/components/glyph-list/glyph-list.component.scss

@@ -0,0 +1 @@
+