fontastic 0.1.3

package/src/app/shared/components/settings/theme/theme.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { PresentationService } from '@app/core/services';
+import { CustomThemeModel } from '@app/core/model';
+
+@Component({
+  selector: 'app-settings-theme',
+  templateUrl: './theme.component.html',
+  styleUrls: ['./theme.component.scss']
+})
+export class ThemeComponent implements OnInit {
+
+  themes: any[];
+  theme: CustomThemeModel;
+
+  constructor(
+    private presentationService: PresentationService,
+  ) {
+    this.themes = presentationService.getThemes();
+
+    this.presentationService._defaultTheme.subscribe((x) => {
+      const idx = this.themes.map(item => item.key).indexOf(x);
+      if (this.themes[idx]) {
+        const theme = this.themes[idx];
+        this.theme = new CustomThemeModel(theme.key, theme.title, theme.description);
+      }
+    });
+  }
+
+  ngOnInit(): void {
+    const body = document.querySelector('body');
+    const attr = body.getAttribute('data-theme');
+    const idx = this.themes.map(item => item.key).indexOf(attr);
+    if (this.themes[idx]) {
+      const theme = this.themes[idx];
+      this.theme = new CustomThemeModel(theme.key, theme.title, theme.description);
+    }
+  }
+
+  onChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const theme: string = target.value;
+    this.presentationService.setTheme(theme);
+    this.presentationService.setThemeVars(theme);
+  }
+
+  onSubmit(form: NgForm): void {
+    if (form.valid) { }
+  }
+}

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

@@ -0,0 +1 @@
+<div [className]="isActivated ? 'app-spinner is-animating' : 'app-spinner'"></div>

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

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { PresentationService } from '@app/core/services';
+
+@Component({
+  selector: 'app-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss']
+})
+export class SpinnerComponent implements OnInit {
+
+  isActivated = false;
+
+  constructor(
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit() {
+    this.presentationService._loadingSpinner.subscribe((status: boolean) => {
+      if (status) {
+        this.isActivated = status;
+      } else {
+        setTimeout(() => this.isActivated = status, 1e3/3);
+      }
+    });
+  }
+}

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

@@ -0,0 +1,22 @@
+<figure class="border-bottom" [class.collapsed]="openTabs.includes('store')">
+  <figcaption class="border-bottom">
+    <span class="material-icons">arrow_drop_down</span>
+    <span class="grow whitespace-nowrap">Font Store</span>
+    <span class="flex items-center justify-end material-icons-rounded">
+      <span title="Collapse" class="material-icons" (click)="onComponentSwitch();">more_horiz</span>
+    </span>
+  </figcaption>
+  <div class="hover-scrollbox-y">
+    <div class="table-data flex flex-col justify-start items-start w-full">
+      <ng-container *ngFor="let item of results;">
+        <div
+          class="table-data__item flex flex-col justify-start items-start border-bottom-dashed py-2 px-2 w-full cursor-text">
+          <div class="flex items-center justify-between w-full mb-1">
+            <h2 class="text-sm font-bold uppercase select-auto" [attr.title]="item.name">{{ item.name }}</h2>
+          </div>
+          <p class="mb-1 select-all">{{ item.value }}</p>
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</figure>

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

@@ -0,0 +1,10 @@
+:host {
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow: hidden;
+}

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

@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+import { DatabaseService, PresentationService } from '@app/core/services';
+import { Store } from '@main/database/entity';
+
+@Component({
+  selector: 'app-store',
+  templateUrl: './store.component.html',
+  styleUrls: ['./store.component.scss']
+})
+export class StoreComponent implements OnInit {
+
+  openTabs = ['store'];
+
+  results = [];
+  resultsTemplate = ['file_name', 'full_name', 'file_path', 'file_type', 'file_size', 'file_size_pretty', 'id', 'collection_id', 'activated', 'installable', 'favorite', 'system', 'temporary', 'created', 'updated'];
+
+  uppercase = ['file_type'];
+  optionable = ['activated', 'installable', 'favorite', 'system', 'temporary'];
+
+  constructor(
+    private databaseService: DatabaseService,
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit() {
+    this.databaseService.watchStoreResult$.subscribe((result: Store) => {
+      if (result?.id) {
+        const results = [];
+        this.resultsTemplate.forEach((key: string) => {
+          if (result.hasOwnProperty(key)) {
+            const name = key.replace(/_/g, ' ');
+            const value = (this.uppercase.includes(key)) ? result[key].toUpperCase() : result[key];
+            if (this.optionable.includes(key)) {
+              results.push({ key, name, value: (value) ? 'Yes' : 'No' });
+            } else {
+              results.push({ key, name, value });
+            }
+          }
+        });
+        
+        this.results = results;
+      }
+    });
+  }
+
+  handleToggleCollapse(name: string): void {
+    if (this.openTabs.includes(name)) {
+      this.openTabs.splice(this.openTabs.indexOf(name), 1);
+    } else {
+      this.openTabs.push(name);
+    }
+    //this.presentationService.setAsideTableTabs(this.openTabs);
+  }
+
+  onComponentSwitch() {
+    this.presentationService.setAsideComponent('tables');
+  }
+}

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

@@ -0,0 +1,47 @@
+<figure class="border-bottom">
+  <figcaption>
+    <span class="material-icons" (click)="handleCollapseAll();">arrow_drop_down</span>
+    <span class="grow whitespace-nowrap">Font Tables</span>
+    <span class="flex items-center justify-end material-icons-rounded">
+      <span title="Collapse" class="material-icons" (click)="onComponentSwitch();">more_horiz</span>
+    </span>
+  </figcaption>
+</figure>
+
+<div class="hover-scrollbox-y">
+
+  <ng-container *ngFor="let table of tableData; let i = index;">
+
+    <figure class="border-bottom sub-section" [attr.data-table]="table.name" [class.collapsed]="openTabs.includes(table.name)">
+      <figcaption class="border-bottom cursor-pointer" (click)="handleToggleCollapse(table.name)">
+        <span class="material-icons">
+          <ng-container *ngIf="openTabs.includes(table.name); else elseif1">
+            arrow_drop_down
+          </ng-container>
+          <ng-template #elseif1>
+            arrow_right
+          </ng-template>
+        </span>
+        <span class="grow">{{table.title}}</span>
+        <span class="material-icons" (click)="openTableNameReference(table.url);"
+          title="{{table.title}}">navigate_next</span>
+      </figcaption>
+
+      <div class="table-data flex flex-col justify-start items-start w-full">
+        <ng-container *ngFor="let item of table.value;">
+          <div
+            class="table-data__item flex flex-col justify-start items-start border-bottom-dashed py-2 px-2 w-full cursor-text">
+            <div class="flex items-center justify-between w-full mb-1">
+              <h2 class="text-sm font-bold uppercase select-auto" [attr.title]="item.name">{{ item.name }}</h2>
+              <h2 class="font-semibold select-auto mr-2" [attr.lang]="item.name" *ngIf="item.lang">{{ item.lang }}
+              </h2>
+            </div>
+            <p class="mb-1 select-all">{{ item.value }}</p>
+          </div>
+        </ng-container>
+      </div>
+    </figure>
+
+  </ng-container>
+
+</div>

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

@@ -0,0 +1,10 @@
+:host {
+    position: relative;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    overflow: hidden;
+}

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

@@ -0,0 +1,81 @@
+import { Component, OnInit } from '@angular/core';
+import { FontService, MessageService, PresentationService, UtilsService } from '@app/core/services';
+
+@Component({
+  selector: 'app-tables',
+  templateUrl: './tables.component.html',
+  styleUrls: ['./tables.component.scss']
+})
+export class TablesComponent implements OnInit {
+
+  fontTitle = 'Font Information';
+
+  tableData = [];
+  openTabs = [];
+  omitable = [];
+
+  constructor(
+    private fontService: FontService,
+    private messageService: MessageService,
+    private presentationService: PresentationService,
+    private utilsService: UtilsService
+  ) { }
+
+  ngOnInit() {
+    this.presentationService._asideTableTabs.subscribe((result: any[]) => this.openTabs = result);
+
+    this.fontService.watchFontObject$.subscribe((font: opentype.Font) => {
+      this.fontTitle = font?.names?.fontFamily?.en;
+
+      if (font?.tables) {
+        const tables = font.tables;
+
+        const data = [];
+        for (const name in tables) {
+          if (tables.hasOwnProperty(name)) {
+            const table = tables[name];
+
+            if (this.omitable.includes(name)) {
+              continue;
+            }
+
+            const search = (tableName: string) => this.fontService.fontTableData.find(element => element.name.toLowerCase() === tableName);
+            const found = search(name.toLowerCase());
+            const title = (found) ? found.title : name;
+            const url = (found) ? found.url : '';
+
+            const value = (name === 'name') ? this.fontService.normalizeNameTable(table) : this.fontService.normalizeTable(table);
+            const order = (name === 'name') ? 1 : 2;
+
+            data.push({ name, title, order, value, url });
+          }
+        }
+
+        this.tableData = data.sort(this.utilsService.compare);
+      }
+    });
+  }
+
+  handleToggleCollapse(name: string): void {
+    if (this.openTabs.includes(name)) {
+      this.openTabs.splice(this.openTabs.indexOf(name), 1);
+    } else {
+      this.openTabs.push(name);
+    }
+    this.presentationService.setAsideTableTabs(this.openTabs);
+  }
+
+  handleCollapseAll() {
+    this.openTabs = [];
+  }
+
+  openTableNameReference(url: string) {
+    if (url) {
+      this.messageService.openPath(url);
+    }
+  }
+
+  onComponentSwitch() {
+    this.presentationService.setAsideComponent('store');
+  }
+}

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

@@ -0,0 +1,53 @@
+<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 class="flex justify-start items-center">
+          <input type="text" class="form-control form-control-reset w-[40px] mr-2" [(ngModel)]="fontSize"
+            (change)="onUpdateFontSize($event)">
+          <select class="form-control form-control-reset mr-1" [(ngModel)]="fontScaleSelected"
+            (change)="onfontScaleSelect($event)">
+            <option *ngFor="let item of fontScaleOptions;" [value]="item.size">{{item.label}}</option>
+          </select>
+        </div>
+        
+        <span class="flex items-center justify-end ml-1 material-icons-rounded">
+          <span class="material-icons cursor-pointer" (click)="onHandleScaleSize(true)" title="Add high scale.">arrow_drop_up</span>
+        </span>
+
+        <span class="flex items-center justify-end ml-1 material-icons-rounded">
+          <span class="material-icons cursor-pointer" (click)="onHandleScaleSize(false)" title="Add low scale.">arrow_drop_down</span>
+        </span>
+
+        <span class="flex items-center justify-end ml-1 material-icons-rounded">
+          <span class="material-icons cursor-pointer" (click)="onHandleScaleReset()" title="Reset scale.">settings_backup_restore</span>
+        </span>
+        
+        <ng-container *ngIf="latestNews.length">
+          <span class="flex items-center justify-end ml-1 material-icons-rounded">
+            <span class="material-icons cursor-pointer" (click)="onRandomNewsArticle()" title="Refresh news article.">refresh</span>
+          </span>
+        </ng-container>
+
+      </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 hover-scrollbox-x h-full w-full">
+      <ng-container *ngFor="let item of typeScale; let i = index">
+        <div class="typescale flex items-stretch w-full" [class.active]="item.active">
+          <div class="typescale__label flex items-end min-w-[140px] px-5 py-5 whitespace-nowrap">
+            <span class="typescale__label-text">{{item.label}}</span>
+          </div>
+          <div class="typescale__wrapper relative flex items-center w-full px-5 whitespace-nowrap"
+            [class.active]="item.active">
+            <h1 class="leading-tight" [style.color]="fontColor" [style.font-family]="fontFamily"
+              [style.font-size]="item.size" [innerHtml]="displayText"></h1>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </div>

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

@@ -0,0 +1,168 @@
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { PresentationService } from '@app/core/services';
+import { fontTypeScale } from '@main/config/system';
+
+@Component({
+  selector: 'app-typescale',
+  templateUrl: './typescale.component.html',
+  styleUrls: ['./typescale.component.scss']
+})
+export class TypescaleComponent implements OnChanges, OnInit, OnDestroy {
+  
+  @Input() fontObject: opentype.Font;
+  @Input() fontFamily: string;
+  @Input() latestNews: any[] = [];
+
+  fontColor: string;
+  displayText: string;
+
+  fontSize = 16;
+
+  typeScale = [];
+
+  fontScaleOptions = fontTypeScale;
+  fontScaleSelected = 1.067;
+
+  highScaleLength = 6;
+  lowScaleLength = 3;
+
+  constructor(
+    private presentationService: PresentationService
+  ) { }
+
+  ngOnInit() {
+    this.presentationService.watchFontColor$.subscribe((value: string) => {
+      this.fontColor = value;
+      this.ngOnChanges();
+    });
+
+    this.presentationService.watchDisplayText$.subscribe((value: string) => {
+      if (value === 'News headlines from sources across the web.') {
+        if (this.latestNews?.length) {
+          this.displayText = this.latestNews[Math.floor(Math.random() * this.latestNews.length)].title;
+        } else {
+          this.displayText = this.presentationService.quickText[0];
+        }
+      } else {
+        this.displayText = value;
+      }
+      this.ngOnChanges();
+    });
+    this.ngOnChanges();
+  }
+
+  ngOnDestroy() {
+    this.latestNews = [];
+  }
+
+  ngOnChanges() {
+    if (this.fontObject?.tables) {
+      this.renderFontScale();
+    }
+  }
+
+  getBaseSize(): number {
+    return (this.fontSize === 16) ? 1 : this.fontSize / 16;
+  }
+
+  renderFontScale(): void {
+    const high = this.renderHighScale();
+    const low = this.renderLowScale();
+
+    this.typeScale = [...high.reverse(), ...low];
+  }
+
+  renderHighScale(): any[] {
+    let baseSize = 1;
+    const scaleRatio = this.fontScaleSelected;
+    let result = 1;
+
+    const items = [];
+    for (let i = 0; i < this.highScaleLength; i++) {
+      const em = Math.round(result * 1000) / 1000;
+      const px = ((this.getBaseSize() * 16) * result).toFixed(2);
+      const label = em + 'rem/' + px + 'px';
+      const size = px + 'px';
+      const active = (i === 0) ? true : false;
+
+      items.push({ 
+        em,
+        px,
+        label,
+        size,
+        active 
+      });
+
+      result = baseSize * scaleRatio;
+      baseSize = result;
+    }
+
+    return items;
+  }
+
+  renderLowScale(): any[] {
+    let baseSize = 1;
+    const scaleRatio = this.fontScaleSelected;
+    let result = 1;
+
+    const items = [];
+    for (let i = 0; i < this.lowScaleLength; i++) {
+      result = baseSize/scaleRatio;
+      baseSize = result;
+      
+      const em = Math.round(result * 1000) / 1000;
+      const px = ((this.getBaseSize() * 16) * result).toFixed(2);
+      const label = em + 'rem/' + px + 'px';
+      const size = px + 'px';
+      const active = false;
+
+      items.push({ 
+        em,
+        px,
+        label,
+        size,
+        active 
+      });
+    }
+
+    return items;
+  }
+
+  onUpdateFontSize(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    const baseSize = Number(target.value);
+    this.renderFontScale();
+  }
+
+  onfontScaleSelect(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.fontScaleSelected = Number(target.value);
+    this.renderFontScale();
+  }
+
+  onRandomNewsArticle(): void {
+    if (this.latestNews?.length) {
+      this.displayText = this.latestNews[Math.floor(Math.random() * this.latestNews.length)].title;
+      this.renderFontScale();
+    }
+  }
+
+  onHandleScaleSize(isHighScale: boolean): void {
+    if (isHighScale) {
+      this.highScaleLength++;
+    } else {
+      this.lowScaleLength++;
+    }
+    this.renderFontScale();
+  }
+
+  onHandleScaleReset(): void {
+    this.highScaleLength = 6;
+    this.lowScaleLength = 3;
+    this.renderFontScale();
+  }
+
+  onComponentSwitch(): void {
+    this.presentationService.setInspectComponent('glyph-list');
+  }
+}

package/src/app/shared/directives/gravatar/gravatar.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, ElementRef, Input, OnChanges, OnInit } from '@angular/core';
+import { GravatarService } from '@app/core/services';
+
+@Directive({
+  selector: '[gravatar]'
+})
+export class GravatarDirective implements OnInit, OnChanges {
+
+  @Input() email: string;
+  @Input() size: number;
+  @Input() fallback: string;
+
+  constructor(
+    public elementRef: ElementRef,
+    public gravatarService: GravatarService
+  ) { }
+
+  ngOnInit() {
+    this.setSrcUrl();
+  }
+
+  ngOnChanges() {
+    this.setSrcUrl();
+  }
+
+  setSrcUrl() {
+    this.elementRef.nativeElement.src = this.gravatarService.url(this.email, this.size, this.fallback);
+  }
+}

package/src/app/shared/directives/index.ts

@@ -0,0 +1,2 @@
+export * from './webview/webview.directive';
+export * from './gravatar/gravatar.directive';

package/src/app/shared/directives/webview/webview.directive.ts

@@ -0,0 +1,8 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: 'webview'
+})
+export class WebviewDirective {
+  constructor() {}
+}

package/src/app/shared/pipes/installable.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { installable } from '@main/config/mimes';
+
+@Pipe({ name: 'installable' })
+export class InstallablePipe implements PipeTransform {
+  constructor() { }
+  transform(value: any) {
+    return (installable.includes(value)) ? true : false;
+  }
+}

package/src/app/shared/pipes/prettybytes.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import prettyBytes from 'pretty-bytes';
+
+@Pipe({ name: 'prettyBytes' })
+export class PrettyBytesPipe implements PipeTransform {
+  constructor() { }
+  transform(value: any) {
+    return prettyBytes(value);
+  }
+}

package/src/app/shared/pipes/safehtml.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'safeHtml' })
+export class SafeHtmlPipe implements PipeTransform {
+  constructor(private sanitized: DomSanitizer) { }
+  transform(value: any) {
+    return this.sanitized.bypassSecurityTrustHtml(value);
+  }
+}