@operato/font 1.0.0-beta.17 → 1.0.0-beta.18

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 './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/{graphql-client.js → graphql-client.ts}

@@ -1,11 +1,10 @@
-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!]) {
@@ -37,7 +36,7 @@ export async function fetchFontList(listParam) {
 /**
  * @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!) {
@@ -66,7 +65,7 @@ export async function createFont(font) {
 /**
  * @param {Object} font Font patch
  */
-export async function updateFont(font) {
+export async function updateFont(font: any) {
   var { id, ...patch } = font
 
   const response = await client.mutate({
@@ -102,7 +101,7 @@ export async function updateFont(font) {
 /**
  * @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!) {

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.js → ox-font-selector.ts}

@@ -6,41 +6,39 @@ 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 get properties() {
-    return {
-      value: String,
-      properties: Object
-    }
-  }
+  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;
+      }
+    `
+  ]
 
-  static get styles() {
-    return [
-      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`
@@ -48,16 +46,16 @@ export default class OxFontSelector extends LitElement {
         id="text"
         type="text"
         .value=${this.value || ''}
-        @change=${e => this._onInputChanged(e)}
+        @change=${(e: Event) => this._onInputChanged(e)}
         .placeholder=${this.getAttribute('placeholder') || ''}
       />
 
-      <mwc-icon @click=${e => this.openSelector(e)}>font_download</mwc-icon>
+      <mwc-icon @click=${() => this.openSelector()}>font_download</mwc-icon>
     `
   }
 
-  _onInputChanged(e) {
-    this.value = e.target.value
+  _onInputChanged(e: Event) {
+    this.value = (e.target as HTMLInputElement).value
     this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
   }
 
@@ -76,7 +74,7 @@ export default class OxFontSelector extends LitElement {
     var template = html`
       <font-selector
         .creatable=${true}
-        @font-selected=${async e => {
+        @font-selected=${async (e: CustomEvent) => {
           var font = e.detail.font
           this.value = font.name
 
@@ -94,5 +92,3 @@ export default class OxFontSelector extends LitElement {
     })
   }
 }
-
-customElements.define('ox-font-selector', OxFontSelector)

package/src/{ox-property-editor-font-selector.js → ox-property-editor-font-selector.ts}

@@ -4,9 +4,8 @@
 
 import './ox-font-selector'
 
-import { html } from 'lit'
-
 import { OxPropertyEditor } from '@operato/property-editor'
+import { html } from 'lit'
 
 export class OxPropertyEditorFontSelector extends OxPropertyEditor {
   editorTemplate() {

package/src/redux-font-actions.ts

@@ -0,0 +1,21 @@
+import * as client from './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
+      })
+    }
+  }

package/src/{redux-font-reducers.js → redux-font-reducers.ts}

@@ -1,15 +1,24 @@
+import { CLEAR_FONT_LIST, UPDATE_FONT_LIST } from './redux-font-actions.js'
+
+import { Action } from 'redux'
 import WebFont from 'webfontloader'
 
-import { CLEAR_FONT_LIST, UPDATE_FONT_LIST } from './redux-font-actions.js'
+type Font = {
+  name: string
+  provider: string
+  uri: string
+  active: boolean
+  files: Array<{ name: string; fullpath: string }>
+}
 
-const reducerFont = (state = [], action) => {
+const ReducerFont = (state = [], action: any) => {
   switch (action.type) {
     case UPDATE_FONT_LIST:
-      let newState = action.list
+      let newState = action.list as Array<Font>
       let activatedFonts = newState.filter(font => font.active)
 
-      let googles = []
-      let customs = []
+      let googles = [] as Array<string>
+      let customs = [] as Array<string>
       let customFontCSS = ''
 
       activatedFonts.forEach(font => {
@@ -44,17 +53,16 @@ const reducerFont = (state = [], action) => {
         }
       })
 
-      let style = document.head.querySelector('#custom-fonts')
+      let style = document.head.querySelector('#custom-fonts') as HTMLStyleElement
       if (!style) {
         style = document.createElement('style')
         style.id = 'custom-fonts'
-        style.type = 'text/css'
         document.head.appendChild(style)
       }
       style.innerHTML = customFontCSS
 
       // TODO: typekit 등 타 서비스 지원
-      let WebFontConfig = {}
+      let WebFontConfig = {} as any
       if (googles.length) {
         WebFontConfig.google = {
           families: googles
@@ -77,4 +85,4 @@ const reducerFont = (state = [], action) => {
   }
 }
 
-export default reducerFont
+export default ReducerFont