@operato/font 1.0.0-beta.9 → 1.0.0

package/src/{graphql-client.js → font-graphql-client.ts}

@@ -1,17 +1,13 @@
-import { client } from "@operato/graphql";
-import gql from "graphql-tag";
+import { client } from '@operato/graphql'
+import gql from 'graphql-tag'
 
 /**
  * @param {Object} listParam {filters, pagination, sortings}
  */
-export async function fetchFontList(listParam) {
+export async function fetchFontList(listParam?: { sortings?: any; filters?: any; pagination?: any }) {
   const response = await client.query({
     query: gql`
-      query (
-        $filters: [Filter!]
-        $pagination: Pagination
-        $sortings: [Sorting!]
-      ) {
+      query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
         fonts(filters: $filters, pagination: $pagination, sortings: $sortings) {
           items {
             id
@@ -20,6 +16,10 @@ export async function fetchFontList(listParam) {
             uri
             path
             active
+            files {
+              name
+              fullpath
+            }
             createdAt
             updatedAt
           }
@@ -27,16 +27,16 @@ export async function fetchFontList(listParam) {
         }
       }
     `,
-    variables: listParam,
-  });
+    variables: listParam
+  })
 
-  return response.data && response.data.fonts;
+  return response.data && response.data.fonts
 }
 
 /**
  * @param {Object} font Font patch
  */
-export async function createFont(font) {
+export async function createFont(font: any) {
   const response = await client.mutate({
     mutation: gql`
       mutation CreateFont($font: NewFont!) {
@@ -52,18 +52,21 @@ export async function createFont(font) {
       }
     `,
     variables: {
-      font: { active: false, ...font },
+      font: { active: false, ...font }
     },
-  });
+    context: {
+      hasUpload: true
+    }
+  })
 
-  return response.data;
+  return response.data
 }
 
 /**
  * @param {Object} font Font patch
  */
-export async function updateFont(font) {
-  var { id, ...patch } = font;
+export async function updateFont(font: any) {
+  var { id, ...patch } = font
 
   const response = await client.mutate({
     mutation: gql`
@@ -72,7 +75,10 @@ export async function updateFont(font) {
           id
           name
           provider
-          uri
+          files {
+            name
+            fullpath
+          }
           path
           active
           createdAt
@@ -82,17 +88,20 @@ export async function updateFont(font) {
     `,
     variables: {
       id,
-      patch,
+      patch
     },
-  });
+    context: {
+      hasUpload: true
+    }
+  })
 
-  return response.data;
+  return response.data
 }
 
 /**
  * @param {String} id Font id
  */
-export async function deleteFont(id) {
+export async function deleteFont(id: string) {
   const response = await client.mutate({
     mutation: gql`
       mutation ($id: String!) {
@@ -100,9 +109,9 @@ export async function deleteFont(id) {
       }
     `,
     variables: {
-      id,
-    },
-  });
+      id
+    }
+  })
 
-  return response.data;
+  return response.data
 }

package/src/font-selector.ts

@@ -0,0 +1,284 @@
+import './font-creation-card'
+
+import { css, html, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query } from 'lit/decorators.js'
+import { connect } from 'pwa-helpers/connect-mixin.js'
+
+import Headroom from '@operato/headroom'
+import { i18next, localize } from '@operato/i18n'
+import { pulltorefresh } from '@operato/pull-to-refresh'
+import { store } from '@operato/shell'
+import { HeadroomStyles, ScrollbarStyles } from '@operato/styles'
+
+import { createFont, deleteFont, updateFont } from './font-graphql-client'
+import { actionUpdateFontList } from './redux-font-actions'
+
+@customElement('font-selector')
+export class FontSelector extends localize(i18next)(connect(store)(LitElement)) {
+  static styles = [
+    ScrollbarStyles,
+    HeadroomStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background-color: var(--popup-content-background-color);
+
+        position: relative;
+      }
+
+      #main {
+        overflow: auto;
+        padding: var(--popup-content-padding);
+        display: grid;
+        grid-template-columns: var(--card-list-template);
+        grid-auto-rows: var(--card-list-rows-height);
+        grid-gap: 20px;
+        box-sizing: border-box;
+      }
+
+      #main .card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
+        border-radius: var(--card-list-border-radius);
+        border: var(--font-selector-border);
+        background-color: var(--card-list-background-color);
+
+        position: relative;
+      }
+
+      .card .button-container {
+        position: absolute;
+        right: 0;
+        height: 100%;
+        display: flex;
+        direction: rtl;
+        flex-direction: column;
+        flex-wrap: wrap;
+      }
+
+      .card .button-container > mwc-icon {
+        background-color: var(--font-selector-icon-background-color);
+        text-align: center;
+        width: var(--font-selector-icon-size);
+        height: var(--font-selector-icon-size);
+        font: var(--font-selector-icon-font);
+        color: var(--font-selector-icon-color);
+      }
+
+      .card .button-container > mwc-icon:last-child {
+        border-bottom-left-radius: 12px;
+      }
+
+      .card .button-container > mwc-icon:hover,
+      .card .button-container > mwc-icon:active {
+        background-color: var(--primary-color);
+        color: #fff;
+      }
+
+      #main .card.create {
+        overflow: visible;
+        background-color: initial;
+      }
+
+      #main .card:hover {
+        cursor: pointer;
+      }
+
+      [face] {
+        flex: 1;
+      }
+
+      [name] {
+        background-color: var(--board-renderer-name-background-color);
+        opacity: 0.8;
+        margin-top: -35px;
+        width: 100%;
+        color: #fff;
+        font-weight: bolder;
+        font-size: 13px;
+        text-indent: 7px;
+      }
+
+      [provider] {
+        background-color: rgba(0, 0, 0, 0.7);
+        width: 100%;
+        min-height: 15px;
+        font-size: 0.6rem;
+        color: #fff;
+        text-indent: 7px;
+      }
+
+      #filter {
+        padding: var(--popup-content-padding);
+        background-color: var(--font-tools-background-color);
+        box-shadow: var(--box-shadow);
+
+        position: absolute;
+        width: 100%;
+        box-sizing: border-box;
+        z-index: 1;
+      }
+
+      #filter * {
+        font-size: 15px;
+      }
+
+      select {
+        text-transform: capitalize;
+        float: right;
+      }
+    `
+  ]
+
+  @property({ type: Array }) fonts: Array<any> = []
+  @property({ type: Boolean }) creatable: boolean = false
+  @property({ type: String }) provider: string = ''
+
+  @query('#main') main!: HTMLElement
+  @query('#filter') filter!: HTMLElement
+  @query('font-creation-card') creationCard!: { reset: () => {} }
+
+  showGotoTop: boolean = false
+
+  render() {
+    var fonts = this.fonts || []
+
+    return html`
+      <div id="filter">
+        <select
+          @change=${(e: Event) => {
+            this.provider = (e.currentTarget as HTMLInputElement).value
+          }}
+        >
+          <option value="">--${i18next.t('text.please choose a provider')}--</option>
+          ${['google', 'custom'].map(provider => html` <option value=${provider}>${provider}</option> `)}
+        </select>
+      </div>
+
+      <div id="main">
+        ${this.creatable
+          ? html`
+              <font-creation-card
+                class="card create"
+                @create-font=${(e: CustomEvent) => this.onCreateFont(e)}
+              ></font-creation-card>
+            `
+          : html``}
+        ${fonts
+          .filter(font => (this.provider ? font.provider === this.provider : true))
+          .map(
+            font => html`
+              <div class="card" @click=${(e: Event) => this.onClickSelect(font)}>
+                <div face>
+                  <font .face=${font.name}>ABCDEFGHIJKLMN</font>
+                  <font .face=${font.name}>abcdefghijklmn</font>
+                </div>
+                <div name>${font.name}</div>
+                <div provider>${font.provider}</div>
+                <div class="button-container">
+                  <mwc-icon
+                    @click=${(e: Event) => {
+                      e.stopPropagation()
+                      this.toggleActive(font)
+                    }}
+                    >${font.active ? 'check_box' : 'check_box_outline_blank'}</mwc-icon
+                  >
+                  <mwc-icon
+                    @click=${(e: Event) => {
+                      e.stopPropagation()
+                      this.deleteFont(font)
+                    }}
+                    >delete</mwc-icon
+                  >
+                </div>
+              </div>
+            `
+          )}
+      </div>
+    `
+  }
+
+  async firstUpdated() {
+    var list = this.renderRoot.querySelector('#main')
+
+    pulltorefresh({
+      container: this.renderRoot,
+      scrollable: list,
+      refresh: () => {
+        return this.refresh()
+      }
+    })
+
+    /* for headroom */
+    this.main.addEventListener('scroll', e => {
+      const target = e.target as HTMLElement
+      this.showGotoTop = target.scrollTop !== 0
+    })
+
+    await this.requestUpdate()
+
+    var originPaddingTop = parseFloat(getComputedStyle(this.main, null).getPropertyValue('padding-top'))
+    this.main.style.paddingTop = this.filter.clientHeight + originPaddingTop + 'px'
+    var headroom = new Headroom(this.filter, {
+      scroller: this.main
+    })
+    headroom.init()
+  }
+
+  stateChanged(state: any) {
+    this.fonts = state.font
+  }
+
+  updated(changes: PropertyValues<this>) {
+    if (changes.has('fonts')) {
+      this.creationCard.reset()
+    }
+  }
+
+  async refresh() {
+    return store.dispatch(actionUpdateFontList() as any)
+  }
+
+  async toggleActive(font: { id: string; active: boolean }) {
+    try {
+      await updateFont({ id: font.id, active: !font.active })
+      this.refresh()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  async onCreateFont(e: CustomEvent) {
+    try {
+      await createFont(e.detail)
+      this.refresh()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  async deleteFont(font: { id: string }) {
+    try {
+      await deleteFont(font.id)
+      this.refresh()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  onClickSelect(font: any) {
+    this.dispatchEvent(
+      new CustomEvent('font-selected', {
+        composed: true,
+        bubbles: true,
+        detail: {
+          font
+        }
+      })
+    )
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+export * from './font-selector.js'
+export * from './ox-font-selector.js'
+export * from './ox-property-editor-font-selector.js'
+
+export * from './redux-font-actions.js'
+export { default as ReducerFont } from './redux-font-reducers.js'

package/src/ox-file-selector.ts

@@ -0,0 +1,114 @@
+import '@material/mwc-icon'
+import '@material/mwc-icon-button'
+
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('ox-file-selector')
+export class OxFileSelector extends LitElement {
+  static styles = [
+    css`
+      :host {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+      }
+
+      #input-box {
+        display: flex;
+        width: 100%;
+        height: 100%;
+      }
+
+      input[type='file'] {
+        position: absolute;
+        width: 0px;
+        height: 0px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      label {
+        padding: unset;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        color: var(--file-selector-color, #999);
+        font-size: inherit;
+        line-height: normal;
+        vertical-align: middle;
+        background-color: var(--file-selector-bg-color, #fdfdfd);
+        cursor: pointer;
+        border: var(--file-selector-border, 1px solid #ebebeb);
+        border-radius: var(--file-selector-border-radius, 0.25em);
+      }
+
+      /* named upload */
+      .upload-name {
+        flex: 1;
+        padding: 0.5em 0.75em; /* label의 패딩값과 일치 */
+        font-size: inherit;
+        font-family: inherit;
+        line-height: normal;
+        vertical-align: middle;
+        background-color: #f5f5f5;
+        border: 1px solid #ebebeb;
+        border-bottom-color: #e2e2e2;
+        border-radius: 0.25em;
+        -webkit-appearance: none; /* 네이티브 외형 감추기 */
+        -moz-appearance: none;
+        appearance: none;
+      }
+    `
+  ]
+
+  @property({ type: String }) label: string = 'select file'
+  @property({ type: String }) accept?: string
+  @property({ type: Boolean, attribute: 'show-filename' }) showFilename: boolean = false
+  @property({ type: Boolean, attribute: 'multiple' }) multiple: boolean = false
+  @property({ type: Array }) _files: Array<any> = []
+
+  render() {
+    return html`
+      <div id="input-box">
+        ${this.showFilename
+          ? html`
+              <input class="upload-name" value=${this._files.map(f => f.name).join(', ') || this.label} disabled />
+            `
+          : html``}
+        <label for="input-file">${this.label}</label>
+        <input
+          id="input-file"
+          type="file"
+          accept="${this.accept}"
+          class="upload-hidden"
+          ?multiple=${this.multiple}
+          hidden
+          @change=${(e: Event) => {
+            const el = e.currentTarget as HTMLInputElement
+            this.dispatchEvent(
+              new CustomEvent('file-change', {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  files: el.files
+                }
+              })
+            )
+
+            el.value = ''
+          }}
+        />
+      </div>
+    `
+  }
+}

package/src/ox-font-selector.ts

@@ -0,0 +1,94 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@material/mwc-icon'
+import './font-selector'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+import { i18next } from '@operato/i18n'
+import { openPopup } from '@operato/layout'
+
+@customElement('ox-font-selector')
+export default class OxFontSelector extends LitElement {
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+
+      input[type='text'] {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+      }
+
+      mwc-icon {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `
+  ]
+
+  @property({ type: String }) value?: string
+  @property({ type: Object }) properties: any
+
+  popup: any
+
+  render() {
+    return html`
+      <input
+        id="text"
+        type="text"
+        .value=${this.value || ''}
+        @change=${(e: Event) => this._onInputChanged(e)}
+        .placeholder=${this.getAttribute('placeholder') || ''}
+      />
+
+      <mwc-icon @click=${() => this.openSelector()}>font_download</mwc-icon>
+    `
+  }
+
+  _onInputChanged(e: Event) {
+    this.value = (e.target as HTMLInputElement).value
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+  }
+
+  openSelector() {
+    if (this.popup) {
+      delete this.popup
+    }
+
+    /*
+     * 기존 설정된 보드가 선택된 상태가 되게 하기 위해서는 selector에 value를 전달해줄 필요가 있음.
+     * 주의. value는 object일 수도 있고, string일 수도 있다.
+     * string인 경우에는 해당 보드의 id로 해석한다.
+     */
+    var value = this.value || {}
+
+    var template = html`
+      <font-selector
+        .creatable=${true}
+        @font-selected=${async (e: CustomEvent) => {
+          var font = e.detail.font
+          this.value = font.name
+
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+
+          this.popup && this.popup.close()
+        }}
+      ></font-selector>
+    `
+
+    this.popup = openPopup(template, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.select font')
+    })
+  }
+}

package/src/ox-property-editor-font-selector.ts

@@ -0,0 +1,17 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import './ox-font-selector'
+
+import { html } from 'lit'
+
+import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
+
+export class OxPropertyEditorFontSelector extends OxPropertyEditor {
+  editorTemplate(value: any, spec: PropertySpec) {
+    return html` <ox-font-selector id="editor" .value=${value} .properties=${spec.property}></ox-font-selector> `
+  }
+}
+
+customElements.define('ox-property-editor-font-selector', OxPropertyEditorFontSelector)

package/src/redux-font-actions.ts

@@ -0,0 +1,21 @@
+import * as client from './font-graphql-client'
+
+export const UPDATE_FONT_LIST = 'UPDATE_FONT_LIST'
+export const CLEAR_FONT_LIST = 'CLEAR_FONT_LIST'
+
+export const actionUpdateFontList =
+  (listParams?: { sortings?: any; filters?: any; pagination?: any }) => async (dispatch: any) => {
+    try {
+      const fonts = await client.fetchFontList(listParams || { filters: [] })
+
+      dispatch({
+        type: UPDATE_FONT_LIST,
+        list: fonts && fonts.items
+      })
+    } catch (error) {
+      console.error(error)
+      dispatch({
+        type: CLEAR_FONT_LIST
+      })
+    }
+  }