@pictogrammers/components 0.3.1

package/pg/search/search.ts

@@ -0,0 +1,252 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+import { Icon } from '../shared/models/icon';
+import { iconFilter, sanitizeTerm } from '../shared/iconFilter';
+import { filter } from '../shared/filter';
+
+import template from './search.html';
+import style from './search.css';
+
+interface Item {
+  name: string,
+  type: string,
+  aliases?: string[],
+  icon?: string,
+  url: string
+}
+
+const KEY = {
+  ArrowUp: 'ArrowUp',
+  ArrowRight: 'ArrowRight',
+  ArrowDown: 'ArrowDown',
+  ArrowLeft: 'ArrowLeft'
+};
+
+@Component({
+  selector: 'pg-search',
+  style,
+  template
+})
+export default class PgSearch extends HTMLElement {
+  @Prop() items: Item[] = [];
+  @Prop() icons: Icon[] = [];
+
+  @Part() $grid: HTMLDivElement;
+  @Part() $menu: HTMLDivElement;
+  @Part() $input: HTMLInputElement;
+  @Part() $list: HTMLUListElement;
+  @Part() $empty: HTMLDivElement;
+  @Part() $reqIcon: HTMLAnchorElement;
+  @Part() $reqDoc: HTMLAnchorElement;
+
+  isOpen: boolean = false;
+  isOver: boolean = false;
+  term: string = '';
+  keyIndex = -1;
+  anchors: HTMLAnchorElement[] = [];
+
+  connectedCallback() {
+    this.$input.addEventListener('input', this.handleInput.bind(this));
+    this.$input.addEventListener('focus', this.handleFocus.bind(this));
+    this.$input.addEventListener('blur', this.handleBlur.bind(this));
+    this.addEventListener('keydown', this.keydown.bind(this));
+    this.$list.addEventListener('mouseenter', this.handleListEnter.bind(this));
+    this.$list.addEventListener('mouseleave', this.handleListLeave.bind(this));
+  }
+
+  handleInput(e) {
+    const target = e.target as HTMLInputElement;
+    const { value } = target;
+    this.term = value;
+    this.updateList();
+  }
+
+  handleFocus() {
+    this.keyIndex = -1;
+    this.updateList();
+    this.isOpen = true;
+    this.$menu.style.display = 'block';
+    this.$grid.classList.add('active');
+  }
+
+  handleBlur() {
+    if (!this.isOver) {
+      this.isOpen = false;
+      this.$menu.style.display = 'none';
+      this.$grid.classList.remove('active');
+      this.keyIndex -= 1;
+    }
+  }
+
+  keydown(e: KeyboardEvent) {
+    switch(e.key) {
+      case KEY.ArrowDown:
+        this.keyIndex += 1;
+        this.setActive();
+        e.preventDefault();
+        e.stopPropagation();
+      break;
+      case KEY.ArrowUp:
+        this.keyIndex -= 1;
+        this.setActive();
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+    }
+  }
+
+  setActive() {
+    if (this.keyIndex === -2) {
+      this.keyIndex = this.anchors.length - 1;
+    }
+    if (this.keyIndex === this.anchors.length) {
+      this.keyIndex = -1;
+    }
+    if (this.keyIndex === -1) {
+      this.$input.focus();
+      this.isOver = false;
+    } else {
+      this.isOver = true;
+      this.anchors[this.keyIndex].focus();
+    }
+  }
+
+  handleListEnter() {
+    this.isOver = true;
+  }
+
+  handleListLeave() {
+    this.isOver = false;
+  }
+
+  highlight(text: string) {
+    var i = 0;
+    var normalized = text;
+    const span = document.createElement('span');
+    const term = sanitizeTerm(this.term);
+    if (this.term === '') {
+      span.innerText = text;
+      return span;
+    }
+    while (normalized) {
+      var index = normalized.toLowerCase().indexOf(term);
+      if (index === -1) {
+        const end = document.createElement('span');
+        end.innerText = normalized.substr(0, normalized.length);
+        span.appendChild(end);
+        normalized = '';
+      } else {
+        if (index > 0) {
+          const start = document.createElement('span');
+          start.innerText = normalized.substr(0, index);
+          span.appendChild(start);
+        }
+        const strong = document.createElement('strong');
+        strong.innerText = normalized.substr(index, term.length);
+        span.appendChild(strong);
+        normalized = normalized.substr(index + term.length, normalized.length);
+      }
+    }
+    return span;
+  }
+
+  clearList() {
+    while(this.$list.firstChild){
+      this.$list.removeChild(this.$list.firstChild);
+    }
+    this.anchors = [];
+  }
+
+  updateList() {
+    this.clearList();
+    let empty = false;
+    const termRegex = new RegExp(this.term, 'i');
+    const filtered = Array.from(
+      filter(
+        this.items,
+        (item: any) => {
+          return item.name.match(termRegex)
+        },
+        5
+      )
+    );
+    filtered.forEach((item, i) => {
+      var li = document.createElement('li');
+      li.classList.add('item');
+      li.classList.toggle('first', i === 0);
+      li.classList.toggle('last', i === filtered.length - 1);
+      var a = document.createElement('a');
+      a.href = item.url;
+      var text = this.highlight(item.name);
+      a.appendChild(text);
+      var type = document.createElement('span');
+      type.innerText = item.type;
+      type.classList.add('type');
+      a.appendChild(type);
+      li.appendChild(a);
+      this.$list.appendChild(li);
+      this.anchors.push(a);
+      empty = true;
+    });
+    if (this.term !== '') {
+      const icons = iconFilter(this.icons, this.term, 5);
+      if (icons.length) {
+        var li = document.createElement('li');
+        li.innerText = 'Icons';
+        li.classList.add('section');
+        this.$list.appendChild(li);
+      }
+      icons.forEach((icon, i) => {
+        var li = document.createElement('li');
+        li.classList.add('icon');
+        li.classList.toggle('first', i === 0);
+        li.classList.toggle('last', i === icons.length - 1);
+        var a = document.createElement('a');
+        a.href = `/icon/${icon.name}`;
+        var additional = icon.aliases.reduce<string[]>((arr, icon) => {
+          if (icon.match) {
+            arr.push(icon.name || '');
+          }
+          return arr;
+        }, []);
+        var aliasText = '';
+        if (additional.length) {
+          aliasText = ` (${additional.join(', ')})`;
+        }
+        const text = this.highlight(`${icon.name}${aliasText}`);
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('viewBox', '0 0 24 24');
+        svg.setAttribute('fill', 'currentColor');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', icon.data as string);
+        svg.appendChild(path);
+        a.appendChild(svg);
+        a.appendChild(text);
+        li.appendChild(a);
+        this.anchors.push(a);
+        this.$list.appendChild(li);
+      });
+      if (icons.length === 5) {
+        var li = document.createElement('li');
+        li.classList.add('all');
+        var a = document.createElement('a');
+        a.href = `/icons?search=${this.term}`;
+        a.appendChild(document.createTextNode('All results for "'));
+        var strong = document.createElement('strong');
+        strong.innerText = this.term;
+        a.appendChild(strong)
+        a.appendChild(document.createTextNode('"'));
+        li.appendChild(a);
+        this.anchors.push(a);
+        this.$list.appendChild(li);
+      }
+      if (icons.length > 0) {
+        empty = true;
+      }
+    }
+    if (!empty) {
+      this.anchors.push(this.$reqIcon);
+      this.anchors.push(this.$reqDoc);
+    }
+    this.$empty.classList.toggle('hide', empty);
+  }
+}

package/pg/search/utils.ts

@@ -0,0 +1,12 @@
+export const debounce = <F extends (...args: any[]) => any>(func: F, waitFor: number) => {
+  let timeout
+
+  return (...args: Parameters<F>): Promise<ReturnType<F>> =>
+    new Promise(resolve => {
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+
+      timeout = setTimeout(() => resolve(func(...args)), waitFor)
+    })
+}

package/pg/shared/README.md

@@ -0,0 +1,28 @@
+# Shared
+
+The shared directory is where all the utilities, models, and data services live.
+
+## Database Service
+
+```ts
+import { DatabaseService } from '../shared/databaseService';
+
+const db = new DatabaseService();
+
+await db.sync();
+```
+
+| Method | Description |
+| -------| ----------- |
+| `db.synced` | `true` if database has been synced. |
+| `db.sync()` | Calling multiple times do nothing. |
+| `db.resync()` | Ignores `synced` and verifies local cache |
+| `db.delete()` | Delete all local cache |
+| `db.getIconByName(fontId, name)` | Get single icon data |
+| `db.geticons(fontId[, term])` | Get all icons in a font with search term |
+
+> Note: All data is parsed into models. This can take a second, so data needs to be cached once pulled from the database.
+
+## Toast
+
+Reference the toast documentation.

package/pg/shared/copy.ts

@@ -0,0 +1,25 @@
+export function getCopySvgInline(icon: any) {
+  return `<svg viewBox="0 0 24 24"><path fill="currentColor" d="${icon.data}"/></svg>`;
+}
+
+export function getCopySvgFile(icon: any) {
+  return [
+    `<?xml version="1.0" encoding="utf-8"?>`,
+    `<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">`,
+    `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="24" height="24" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">`,
+    `  <path fill="#000000" fill-opacity="1" stroke-width="0" stroke-linejoin="round" d="${icon.data}"/>`,
+    `</svg>`
+  ].join('');
+}
+
+export const copyText = (text: string) => {
+  var copyFrom = document.createElement('textarea');
+  copyFrom.setAttribute("style", "position:fixed;opacity:0;top:100px;left:100px;");
+  copyFrom.value = text;
+  document.body.appendChild(copyFrom);
+  copyFrom.select();
+  document.execCommand('copy');
+  setTimeout(function () {
+      document.body.removeChild(copyFrom);
+  }, 1500);
+}

package/pg/shared/database.ts

@@ -0,0 +1,35 @@
+import Dexie from 'dexie';
+
+export class Database extends Dexie {
+  hashes: Dexie.Table<HashTable, string>;
+  icons: Dexie.Table<IconTable, string>;
+
+  constructor() {
+    super("IconCache");
+
+    this.version(1).stores({
+      hashes: '&id, hash',
+      icons: '&id, idFull, fontId, name, data, aliases, tags, codepoint'
+    });
+
+    this.hashes = this.table("hashes");
+    this.icons = this.table("icons");
+  }
+}
+
+export interface HashTable {
+  id: string,
+  hash: string
+}
+
+export interface IconTable {
+  id: string,
+  idFull: string,
+  fontId: string,
+  codepoint: string,
+  name: string,
+  data: string,
+  version: string,
+  aliases: any,
+  tags: any
+}

package/pg/shared/databaseService.ts

@@ -0,0 +1,230 @@
+import { Database, IconTable } from './database';
+import { http } from './http';
+
+import { Icon } from './models/icon';
+import { Font } from './models/font';
+import { Alias } from './models/alias';
+import { Tag } from './models/tag';
+
+interface StringMap {
+  [key: string]: string;
+}
+
+export class DatabaseService {
+
+  private db = new Database();
+
+  /**
+   * Get list of hashes for icons in font
+   *
+   * @param font Font id to lookup hashes for
+   */
+  private async getHashesFromServer(font: Font): Promise<StringMap> {
+    const res = await http.get<StringMap>(`/api/font/${font.id}/hash`);
+    return res;
+  }
+
+  private async getIconsFromServer(font: Font, ids: string[]): Promise<Icon[]> {
+    if (ids.length === 0) {
+      return [];
+    }
+    const res = await http.get<Icon[]>(`/api/font/${font.id}`, {
+      params: {
+        ids: ids.join(',')
+      }
+    });
+    return res.map(icon => new Icon().from(icon));
+  }
+
+  private async getIconsByPage(font: Font, page: number, size: number) {
+    const res = await http.get<Icon[]>(`/api/font/${font.id}`, {
+      params: {
+        page: page.toString(),
+        size: size.toString()
+      }
+    });
+    return res.map(icon => new Icon().from(icon));
+  }
+
+  async asyncThrottledMap<T, U>(maxCount: number, array: T[], f: (x: T) => Promise<U>) {
+    let inFlight = new Set<Promise<U>>();
+    const result: Promise<U>[] = [];
+
+    // Sequentially add a Promise for each operation.
+    for (let elem of array) {
+
+        // Wait for any one of the promises to complete if there are too many running.
+        if (inFlight.size >= maxCount) {
+            await Promise.race(inFlight);
+        }
+
+        // This is the Promise that the user originally passed us back.
+        const origPromise = f(elem);
+        // This is a Promise that adds/removes from the set of in-flight promises.
+        const handledPromise = wrap(origPromise);
+        result.push(handledPromise);
+    }
+
+    return Promise.all(result);
+
+    async function wrap(p: Promise<U>) {
+        inFlight.add(p);
+        const result = await p;
+        inFlight.delete(p);
+        return result;
+    }
+  }
+
+  async exists(fontId: string) {
+    const count = await this.getCount(fontId);
+    return count > 0;
+  }
+
+  async resync(fontId: string) {
+    let modified = false;
+    const font = new Font().from({
+      id: fontId
+    } as Font);
+    const hashes = await this.getHashesFromServer(font);
+    const hashIds = Object.keys(hashes);
+    const localHashObj = await this.db.hashes.toArray();
+    const localHashes = {};
+    localHashObj.forEach((item) => {
+      localHashes[item.id] = item.hash;
+    });
+    const localHashIds = Object.keys(localHashes);
+    const modifiedIds: string[] = [];
+    hashIds.forEach((id) => {
+      if (!(id in localHashes) || localHashes[id] !== hashes[id]) {
+        modifiedIds.push(id);
+      }
+    });
+    const removeIds: string[] = [];
+    localHashIds.forEach((id) => {
+      if (!(id in hashes)) {
+        removeIds.push(id);
+      }
+    });
+    await this.db.icons.bulkDelete(removeIds);
+    if (modifiedIds.length > 0 || removeIds.length > 0) {
+      modified = true;
+    }
+    if (modifiedIds.length < 500) {
+      // Do a partial update patch of data
+      let i, j, chunkIds: any[] = [], chunk = 100;
+      for (i = 0, j = modifiedIds.length; i < j; i += chunk) {
+        chunkIds.push(modifiedIds.slice(i, i + chunk));
+      }
+      const chunkPromises = chunkIds.map((ids) => {
+        return this.getIconsFromServer(font, ids);
+      });
+      const results = await Promise.all(chunkPromises);
+      results.forEach(icons => {
+        this.db.icons.bulkPut(
+          icons.map(icon => ({
+            id: icon.fontIcon.id,
+            idFull: icon.id  as string,
+            fontId: font.id as string,
+            name: icon.name as string,
+            data: icon.data as string as string,
+            version: icon.version as string,
+            codepoint: icon.codepoint as string,
+            aliases: icon.aliases,
+            tags: icon.tags
+          })
+        ));
+      });
+    } else if (modifiedIds.length !== 0) {
+      // Sync every icon into the database
+      let size = 500,
+        pages = Math.ceil(hashIds.length / size),
+        chunkPromises: Promise<Icon[]>[] = [];
+      for (let page = 1; page <= pages; page++) {
+        chunkPromises.push(
+          this.getIconsByPage(font, page, size)
+        );
+      }
+      await this.asyncThrottledMap<Promise<Icon[]>, void>(2, chunkPromises, (p) =>
+        p.then(icons => {
+          this.db.icons.bulkPut(
+            icons.map(icon => ({
+              id: icon.fontIcon.id,
+              idFull: icon.id as string,
+              fontId: font.id as string,
+              name: icon.name as string,
+              data: icon.data as string,
+              version: icon.version as string,
+              codepoint: icon.codepoint as string,
+              aliases: JSON.stringify(icon.aliases.map(alias => ({ name: alias.name }))),
+              tags: JSON.stringify(icon.tags.map(tag => ({ name: tag.name, url: tag.url})))
+            })
+          ));
+        })
+      );
+    }
+    if (modified) {
+      await this.db.hashes.bulkPut(hashIds.map(id => ({ id, hash: hashes[id] })));
+      await this.db.hashes.bulkDelete(removeIds);
+    }
+    return modified;
+  }
+
+  synced = false;
+
+  async sync(fontId: string) {
+    if (!this.synced) {
+      const modified = await this.resync(fontId);
+      this.synced = true;
+      return modified;
+    }
+    return false;
+  }
+
+  convert(local: IconTable) {
+    const icon = new Icon();
+    icon.id = local.idFull;
+    icon.name = local.name;
+    icon.data = local.data;
+    icon.version = local.version;
+    icon.codepoint = local.codepoint;
+    const aliases = local.aliases instanceof Array ? local.aliases : JSON.parse(local.aliases);
+    icon.aliases = aliases.map(alias => new Alias().from(alias));
+    const tags = local.tags instanceof Array ? local.tags : JSON.parse(local.tags);
+    icon.tags = tags.map(tag => new Tag().from(tag));
+    return icon;
+  }
+
+  async getIconByName(name) {
+    const local = await this.db.icons.where('name').equals(name).first();
+    if (!local) {
+      return null;
+    }
+    return this.convert(local);
+  }
+
+  // ToDo, cache into a format that can be parsed quicker for search
+
+  async getIcons(fontId: string, term?: string) {
+    let icons;
+    if (term) {
+      const safeTerm = term.toLowerCase().replace(/[^a-z0-9-]/g, '');
+      const reg = new RegExp(`${safeTerm}`);
+      icons = await this.db.icons.where('fontId').equals(fontId)
+        .filter((icon) => {
+          return icon.name.match(reg) !== null;
+        }).sortBy('name');
+    } else {
+      icons = await this.db.icons.where('fontId').equals(fontId).sortBy('name');
+    }
+    return icons.map(icon => this.convert(icon));
+  }
+
+  async getCount(fontId: string) {
+    return await this.db.icons.where('fontId').equals(fontId).count();
+  }
+
+  async delete() {
+    await this.db.delete();
+  }
+
+}

package/pg/shared/debounce.ts

@@ -0,0 +1,12 @@
+export const debounce = <F extends (...args: any[]) => any>(func: F, waitFor: number) => {
+  let timeout
+
+  return (...args: Parameters<F>): Promise<ReturnType<F>> =>
+    new Promise(resolve => {
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+
+      timeout = setTimeout(() => resolve(func(...args)), waitFor)
+    })
+}

package/pg/shared/enums/modificationType.ts

@@ -0,0 +1,19 @@
+export enum ModificationType {
+  IconAliasCreated = '691c8829-b1e7-11e7-bf5c-94188269ec50',
+  IconAliasDeleted = 'f1f70a76-b975-11e9-8ca0-94188269ec50',
+  IconCreated = 'AFFE875E-01BC-4A34-9BE3-27625A155B28',
+  IconDeleted = 'B1CE1713-A18A-4E9D-9E26-D0B4E44A1FAC',
+  IconModified = '1506F66B-CC2A-4575-A20A-DC138628977A',
+  IconRenamed = 'F7B6D49B-A86F-49AC-AF92-6B9D0DF6188B',
+  IconTagCreated = 'a185a9e8-c192-11e7-bf5c-94188269ec50',
+  IconTagDeleted = 'ffe6b5f6-b975-11e9-8ca0-94188269ec50',
+  IconDescriptionModified = '3c638179-c4ca-11e8-9f27-94188269ec50',
+  IconAuthorModified = '254591d0-b28e-11e9-8ca0-94188269ec50',
+  WebfontPublished = '66B9FA99-1FAA-4D8F-B87F-B6F3CA444624',
+  News = 'B4DEB3A8-A146-4086-9D7B-B67842A9CCB8',
+  IconDeprecated = 'f92f310f-bfed-11e9-8ca0-94188269ec50',
+  IconWorkInProgress = 'e262be80-bfed-11e9-8ca0-94188269ec50',
+  IconLive = 'f92f2ba6-bfed-11e9-8ca0-94188269ec50',
+  IconPublished = 'e262b92e-bfed-11e9-8ca0-94188269ec50',
+  Date = 'date'
+}

package/pg/shared/filter.ts

@@ -0,0 +1,14 @@
+export function *filter(array, condition, maxSize) {
+  if (!maxSize || maxSize > array.length) {
+    maxSize = array.length;
+  }
+  let count = 0;
+  let i = 0;
+  while ( count< maxSize && i < array.length ) {
+    if (condition(array[i])) {
+      yield array[i];
+      count++;
+    }
+    i++;
+  }
+}