@operato/font 7.1.31 → 7.1.32

package/src/font-creation-card.ts

@@ -1,263 +0,0 @@
-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);
-
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface);
-
-        -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;
-        text-transform: capitalize;
-      }
-
-      [front] md-icon {
-        --md-icon-size: 42px;
-        font-size: 3.5em;
-        color: var(--md-sys-color-primary);
-      }
-
-      [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, var(--md-sys-color-secondary));
-      }
-
-      input,
-      select,
-      ox-file-selector {
-        background-color: var(--card-list-create-input-background-color, var(--md-sys-color-surface-variant));
-        color: var(--card-list-create-input-color, var(--md-sys-color-on-surface));
-      }
-
-      [back] form .props input,
-      [back] form .props select {
-        grid-column: span 6;
-        border: var(--card-list-create-input-border);
-        border-radius: var(--card-list-create-input-border-radius);
-        font: var(--card-list-create-input-font);
-        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'] {
-        font: var(--button-font);
-        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><md-icon>add_circle_outline</md-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/font-graphql-client.ts

@@ -1,117 +0,0 @@
-import { client } from '@operato/graphql'
-import gql from 'graphql-tag'
-
-/**
- * @param {Object} listParam {filters, pagination, sortings}
- */
-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!]) {
-        fonts(filters: $filters, pagination: $pagination, sortings: $sortings) {
-          items {
-            id
-            name
-            provider
-            uri
-            path
-            active
-            files {
-              name
-              fullpath
-            }
-            createdAt
-            updatedAt
-          }
-          total
-        }
-      }
-    `,
-    variables: listParam
-  })
-
-  return response.data && response.data.fonts
-}
-
-/**
- * @param {Object} font Font patch
- */
-export async function createFont(font: any) {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation CreateFont($font: NewFont!) {
-        createFont(font: $font) {
-          name
-          provider
-          uri
-          path
-          active
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      font: { active: false, ...font }
-    },
-    context: {
-      hasUpload: true
-    }
-  })
-
-  return response.data
-}
-
-/**
- * @param {Object} font Font patch
- */
-export async function updateFont(font: any) {
-  var { id, ...patch } = font
-
-  const response = await client.mutate({
-    mutation: gql`
-      mutation UpdateFont($id: String!, $patch: FontPatch!) {
-        updateFont(id: $id, patch: $patch) {
-          id
-          name
-          provider
-          files {
-            name
-            fullpath
-          }
-          path
-          active
-          createdAt
-          updatedAt
-        }
-      }
-    `,
-    variables: {
-      id,
-      patch
-    },
-    context: {
-      hasUpload: true
-    }
-  })
-
-  return response.data
-}
-
-/**
- * @param {String} id Font id
- */
-export async function deleteFont(id: string) {
-  const response = await client.mutate({
-    mutation: gql`
-      mutation ($id: String!) {
-        deleteFont(id: $id)
-      }
-    `,
-    variables: {
-      id
-    }
-  })
-
-  return response.data
-}

package/src/font-selector.ts

@@ -1,261 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/input/ox-select.js'
-import '@operato/popup/ox-popup-list.js'
-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 { i18next, localize } from '@operato/i18n'
-import { pulltorefresh } from '@operato/pull-to-refresh'
-import { store } from '@operato/shell'
-import { ScrollbarStyles, CommonHeaderStyles } 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,
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        color: var(--md-sys-color-on-background);
-        background-color: var(--md-sys-color-background);
-
-        position: relative;
-      }
-
-      #main {
-        overflow: auto;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-        grid-auto-rows: var(--card-list-rows-height);
-        grid-gap: 20px;
-        box-sizing: border-box;
-        padding: var(--spacing-medium);
-      }
-
-      #main .card {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        overflow: hidden;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-radius: var(--md-sys-shape-corner-small);
-        color: var(--md-sys-color-on-surface);
-        background-color: var(--md-sys-color-surface);
-
-        position: relative;
-      }
-
-      #main .card.create {
-        overflow: visible;
-      }
-
-      .card .button-container {
-        position: absolute;
-        right: 0;
-        height: 100%;
-        display: flex;
-        direction: rtl;
-        flex-direction: column;
-        flex-wrap: wrap;
-      }
-
-      .card .button-container > md-icon {
-        text-align: center;
-        width: var(--font-selector-icon-size, 35px);
-        height: var(--font-selector-icon-size, 35px);
-        color: var(--md-sys-color-on-primary-container);
-        background-color: var(--md-sys-color-primary-container);
-      }
-
-      .card .button-container > md-icon:last-child {
-        border-bottom-left-radius: var(--md-sys-shape-corner-medium);
-      }
-
-      .card .button-container > md-icon:hover,
-      .card .button-container > md-icon:active {
-        color: var(--md-sys-color-on-secondary);
-        background-color: var(--md-sys-color-secondary);
-      }
-
-      #main .card:hover {
-        cursor: pointer;
-      }
-
-      [face] {
-        flex: 1;
-      }
-
-      [name] {
-        color: var(--md-sys-color-on-tertiary);
-        background-color: var(--md-sys-color-tertiary);
-        opacity: 0.8;
-        margin-top: -35px;
-        width: 100%;
-        color: #fff;
-        font-weight: bolder;
-        font-size: 13px;
-        text-indent: 7px;
-      }
-
-      [provider] {
-        color: var(--md-sys-color-on-secondary);
-        background-color: var(--md-sys-color-secondary);
-        width: 100%;
-        min-height: 15px;
-        font-size: 0.6rem;
-        color: #fff;
-        text-indent: 7px;
-      }
-    `
-  ]
-
-  @property({ type: Array }) fonts: Array<any> = []
-  @property({ type: Boolean }) creatable: boolean = false
-  @property({ type: String }) provider: string = ''
-
-  @query('#main') main!: HTMLElement
-  @query('.header') header!: HTMLElement
-  @query('font-creation-card') creationCard!: { reset: () => {} }
-
-  showGotoTop: boolean = false
-
-  render() {
-    var fonts = this.fonts || []
-
-    return html`
-      <div class="header">
-        <div class="filters">
-          <ox-select
-            .placeholder=${i18next.t('text.please choose a provider')}
-            .value=${this.provider}
-            @change=${(e: Event) => {
-              this.provider = (e.currentTarget as HTMLInputElement).value
-            }}
-          >
-            <ox-popup-list>
-              ${['', 'google', 'custom'].map(provider => html` <div option value=${provider}>${provider}&nbsp;</div> `)}
-            </ox-popup-list>
-          </ox-select>
-        </div>
-      </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}>ABCDEFGHIJKLMNOPQRSTUVWXYZ</font>
-                  <br />
-                  <font .face=${font.name}>abcdefghijklmnopqrstuvwxyz</font>
-                  <br />
-                  <font .face=${font.name}>1234567890~!@#$%^&*</font>
-                </div>
-                <div name>${font.name}</div>
-                <div provider>${font.provider}</div>
-                <div class="button-container">
-                  <md-icon
-                    @click=${(e: Event) => {
-                      e.stopPropagation()
-                      this.toggleActive(font)
-                    }}
-                    >${font.active ? 'check_box' : 'check_box_outline_blank'}</md-icon
-                  >
-                  <md-icon
-                    @click=${(e: Event) => {
-                      e.stopPropagation()
-                      this.deleteFont(font)
-                    }}
-                    >delete</md-icon
-                  >
-                </div>
-              </div>
-            `
-          )}
-      </div>
-    `
-  }
-
-  async firstUpdated() {
-    var list = this.renderRoot.querySelector('#main')
-
-    pulltorefresh({
-      container: this.renderRoot,
-      scrollable: list,
-      refresh: () => {
-        return this.refresh()
-      }
-    })
-  }
-
-  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

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