fontastic 0.1.7 → 1.0.0

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

@@ -1,132 +0,0 @@
-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

@@ -1,9 +0,0 @@
-<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

@@ -1,37 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-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

@@ -1,3 +0,0 @@
-<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

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

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

@@ -1,22 +0,0 @@
-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

@@ -1,41 +0,0 @@
-<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

@@ -1,68 +0,0 @@
-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

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

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

@@ -1,15 +0,0 @@
-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

@@ -1,40 +0,0 @@
-<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

@@ -1,71 +0,0 @@
-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

@@ -1,40 +0,0 @@
-<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

@@ -1 +0,0 @@
-