@operato/font 1.0.0-beta.9 → 1.0.6

package/src/font-creation-card.ts

@@ -0,0 +1,260 @@
+import './ox-file-selector'
+
+import { LitElement, css, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { i18next, localize } from '@operato/i18n'
+
+@customElement('font-creation-card')
+export class FontCreationCard extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        position: relative;
+
+        padding: 0;
+        margin: 0;
+        height: 100%;
+
+        -webkit-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+        -webkit-transition: all 0.5s ease-in-out;
+        transition: all 0.5s ease-in-out;
+      }
+
+      :host(.flipped) {
+        -webkit-transform: var(--card-list-flip-transform);
+        transform: var(--card-list-flip-transform);
+      }
+
+      [front],
+      [back] {
+        position: absolute;
+
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+
+        border: var(--card-list-create-border);
+        border-radius: var(--card-list-create-border-radius);
+
+        background-color: #fff;
+
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+      }
+
+      [front] {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        text-align: center;
+        font-size: 0.8em;
+        color: var(--card-list-create-color);
+        text-transform: capitalize;
+      }
+
+      [front] mwc-icon {
+        font-size: 3.5em;
+        color: var(--card-list-create-icon-color);
+      }
+
+      [back] {
+        -webkit-transform: var(--card-list-flip-transform);
+        transform: var(--card-list-flip-transform);
+        box-sizing: border-box;
+        display: grid;
+      }
+
+      [back] form {
+        padding: var(--card-list-create-form-padding);
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr auto;
+        justify-content: center;
+        align-items: center;
+      }
+
+      [back] form .props {
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        grid-row-gap: 7px;
+        justify-content: center;
+        align-items: center;
+      }
+
+      [back] form .props label {
+        grid-column: span 4;
+        font: var(--card-list-create-label-font);
+        color: var(--card-list-create-label-color);
+      }
+
+      [back] form .props input,
+      [back] form .props select {
+        grid-column: span 6;
+        background-color: #fff;
+        border: var(--card-list-create-input-border);
+        border-radius: var(--card-list-create-input-border-radius);
+        font: var(--card-list-create-input-font);
+        color: var(--card-list-create-input-color);
+        width: -moz-available;
+      }
+
+      ox-file-selector {
+        grid-column: span 6;
+        font: var(--card-list-create-input-font);
+        border: none;
+        box-sizing: border-box;
+        padding: 0;
+      }
+
+      [back] input[type='submit'] {
+        background-color: var(--button-background-color) !important;
+        font: var(--button-font);
+        color: var(--button-color) !important;
+        border-radius: var(--button-radius);
+        border: var(--button-border);
+        grid-column: span 10;
+        grid-row: auto / -1;
+      }
+
+      .hidden {
+        display: none !important;
+      }
+    `
+  ]
+
+  @property({ type: String }) provider: string = 'google'
+  @property({ type: Array }) googleFonts: Array<string> = []
+  @property({ type: Array }) files?: Array<any>
+
+  providers: Array<{ value: string; display: string }> = [
+    { value: 'google', display: 'Google' },
+    // TODO 구글 외 폰트 서비스 구현
+    // { value: 'typekit', display: 'Typekit' },
+    { value: 'custom', display: 'Custom' }
+  ]
+
+  render() {
+    let isProviderGoogle = this.provider == 'google' && this.googleFonts.length > 0
+    let isFileAttached = this.files && this.files.length > 0 ? true : false
+
+    return html`
+      <div @click=${(e: Event) => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create font</div>
+
+      <div @click=${(e: Event) => this.onClickFlip(e)} back>
+        <form @submit=${(e: Event) => this.onClickSubmit(e)}>
+          <div class="props">
+            <label>${i18next.t('label.provider')}</label>
+            <select
+              name="provider"
+              @change=${(e: Event) => {
+                this.provider = (e.target as HTMLInputElement).value
+                if (this.provider === 'google') {
+                  fetch(`/all-google-fonts`).then(async response => {
+                    if (response.ok) this.googleFonts = await response.json()
+                    else {
+                      console.warn(
+                        `(${response.url}) ${response.status} ${response.statusText}. Could not load Google fonts.`
+                      )
+                    }
+                  })
+                }
+              }}
+            >
+              ${this.providers.map(
+                p => html` <option value=${p.value} ?selected=${this.provider == p.value}>${p.display}</option> `
+              )}
+            </select>
+
+            <label>${i18next.t('label.name')}</label>
+            <input type="text" name="${isProviderGoogle ? '' : 'name'}" ?hidden=${isProviderGoogle} />
+            <select name="${isProviderGoogle ? 'name' : ''}" ?hidden=${!isProviderGoogle}>
+              <option value="">&nbsp;</option>
+              ${isProviderGoogle && this.googleFonts.map(f => html` <option value=${f}>${f}</option> `)}
+            </select>
+
+            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.uri')}</label>
+            <input
+              ?hidden=${this.provider != 'custom'}
+              ?disabled=${isFileAttached}
+              .value=${isFileAttached ? this.files![0].name : ''}
+              type="text"
+              name="uri"
+            />
+            <!-- display when attachment module is imported -->
+            <label ?hidden=${this.provider != 'custom'}>${i18next.t('label.file')}</label>
+            <ox-file-selector
+              class="${this.provider != 'custom' ? 'hidden' : ''}"
+              name="file"
+              label="${i18next.t('label.select file')}"
+              accept=".ttf,.otf,.woff,.woff2,.eot,.svg,.svgz"
+              multiple
+              @file-change=${(e: CustomEvent) => {
+                this.files = Array.from(e.detail.files)
+              }}
+            ></ox-file-selector>
+            <!------------------------------------------------>
+
+            <label for="checkbox-active" @click=${(e: Event) => e.stopPropagation()}>
+              ${i18next.t('label.active')}
+            </label>
+            <input id="checkbox-active" type="checkbox" name="active" checked />
+          </div>
+          <div></div>
+          <input type="submit" value=${i18next.t('button.create')} />
+        </form>
+      </div>
+    `
+  }
+
+  onClickFlip(e: Event) {
+    const target = e.target as HTMLElement
+    const currentTarget = e.currentTarget as HTMLElement
+
+    if (!['INPUT', 'SELECT', 'OPTION'].find(tagName => tagName === target.tagName)) {
+      if (currentTarget.hasAttribute('front')) this.reset() // 입력 폼으로 뒤집기 전에 한 번 리셋
+      this.classList.toggle('flipped')
+    }
+  }
+
+  async onClickSubmit(e: Event) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    var form = e.target as HTMLFormElement
+
+    var detail = {} as any
+
+    detail.name = (form.elements.namedItem('name') as HTMLInputElement).value
+    detail.provider = (form.elements.namedItem('provider') as HTMLInputElement).value
+    detail.active = (form.elements.namedItem('active') as HTMLInputElement).checked
+
+    if (this.provider === 'custom') {
+      detail.uri = (form.elements.namedItem('uri') as HTMLInputElement).value
+      if (this.files && this.files.length > 0) {
+        detail.files = this.files
+      }
+    }
+
+    this.dispatchEvent(new CustomEvent('create-font', { detail }))
+  }
+
+  reset() {
+    var form = this.renderRoot.querySelector('form')
+    if (form) {
+      form.reset()
+    }
+
+    this.files = []
+    this.classList.remove('flipped')
+  }
+}

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'