fontastic 0.1.7 → 1.0.0

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

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

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

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

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

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

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

@@ -1,29 +0,0 @@
-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/pipes/installable.pipe.ts

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

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

@@ -1,10 +0,0 @@
-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);
-  }
-}