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

package/src/font-creation-card.js

@@ -1,270 +0,0 @@
-import './ox-file-selector'
-
-import { css, html, LitElement } from 'lit'
-
-import { i18next, localize } from '@operato/i18n'
-
-export class FontCreationCard extends localize(i18next)(LitElement) {
-  static get properties() {
-    return {
-      provider: {
-        type: String
-      },
-      googleFonts: {
-        type: Array
-      },
-      files: {
-        type: Array
-      }
-    }
-  }
-
-  constructor() {
-    super()
-    this.provider = 'google'
-    this.providers = [
-      { value: 'google', display: 'Google' },
-      // TODO 구글 외 폰트 서비스 구현
-      // { value: 'typekit', display: 'Typekit' },
-      { value: 'custom', display: 'Custom' }
-    ]
-    this.googleFonts = []
-  }
-
-  static get styles() {
-    return [
-      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;
-        }
-      `
-    ]
-  }
-
-  render() {
-    let isProviderGoogle = this.provider == 'google' && this.googleFonts.length > 0
-    let isFileAttached = this.files.length > 0 ? true : false
-    return html`
-      <div @click=${e => this.onClickFlip(e)} front><mwc-icon>add_circle_outline</mwc-icon>create font</div>
-
-      <div @click=${e => this.onClickFlip(e)} back>
-        <form @submit=${e => this.onClickSubmit(e)}>
-          <div class="props">
-            <label>${i18next.t('label.provider')}</label>
-            <select
-              name="provider"
-              @change=${e => {
-                this.provider = e.target.value
-                if (e.target.value === '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 => {
-                this.files = Array.from(e.detail.files)
-              }}
-            ></ox-file-selector>
-            <!------------------------------------------------>
-
-            <label for="checkbox-active" @click=${e => 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) {
-    if (!['INPUT', 'SELECT', 'OPTION'].find(tagName => tagName === e.target.tagName)) {
-      if (e.currentTarget.hasAttribute('front')) this.reset() // 입력 폼으로 뒤집기 전에 한 번 리셋
-      this.classList.toggle('flipped')
-    }
-  }
-
-  async onClickSubmit(e) {
-    e.preventDefault()
-    e.stopPropagation()
-
-    var form = e.target
-
-    var detail = {}
-    detail.name = form.elements['name'].value
-    detail.provider = form.elements['provider'].value
-    detail.active = form.elements['active'].checked
-    if (this.provider === 'custom') {
-      detail.uri = form.elements['uri'].value
-      if (this.files?.length > 0) {
-        detail.files = this.files
-      }
-    }
-
-    this.dispatchEvent(new CustomEvent('create-font', { detail }))
-  }
-
-  reset() {
-    var form = this.shadowRoot.querySelector('form')
-    if (form) {
-      form.reset()
-    }
-
-    this.files = []
-    this.classList.remove('flipped')
-  }
-}
-
-customElements.define('font-creation-card', FontCreationCard)

package/src/font-selector.js

@@ -1,287 +0,0 @@
-import './font-creation-card'
-
-import { css, html, LitElement } from 'lit'
-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'
-
-export class FontSelector extends localize(i18next)(connect(store)(LitElement)) {
-  static get styles() {
-    return [
-      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;
-        }
-      `
-    ]
-  }
-
-  static get properties() {
-    return {
-      fonts: Array,
-      _page: Number,
-      _total: Number,
-      creatable: Boolean
-    }
-  }
-
-  render() {
-    var fonts = this.fonts || []
-
-    return html`
-      <div id="filter">
-        <select
-          @change=${e => {
-            this.provider = e.currentTarget.value
-            this.requestUpdate()
-          }}
-        >
-          <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 => this.onCreateFont(e)}></font-creation-card>
-            `
-          : html``}
-        ${fonts.map(
-          font => html`
-            <div class="card" @click=${e => 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 => {
-                    e.stopPropagation()
-                    this.toggleActive(font)
-                  }}
-                  >${font.active ? 'check_box' : 'check_box_outline_blank'}</mwc-icon
-                >
-                <mwc-icon
-                  @click=${e => {
-                    e.stopPropagation()
-                    this.deleteFont(font)
-                  }}
-                  >delete</mwc-icon
-                >
-              </div>
-            </div>
-          `
-        )}
-      </div>
-    `
-  }
-
-  async firstUpdated() {
-    var list = this.shadowRoot.querySelector('#main')
-
-    pulltorefresh({
-      container: this.shadowRoot,
-      scrollable: list,
-      refresh: () => {
-        return this.refresh()
-      }
-    })
-
-    /* for headroom */
-    var main = this.renderRoot.querySelector('#main')
-    main.addEventListener('scroll', e => {
-      this.showGotoTop = e.target.scrollTop !== 0
-    })
-
-    var filter = this.renderRoot.querySelector('#filter')
-
-    await this.requestUpdate()
-
-    var originPaddingTop = parseFloat(getComputedStyle(main, null).getPropertyValue('padding-top'))
-    main.style.paddingTop = filter.clientHeight + originPaddingTop + 'px'
-    var headroom = new Headroom(filter, {
-      scroller: main
-    })
-    headroom.init()
-  }
-
-  get creationCard() {
-    return this.shadowRoot.querySelector('font-creation-card')
-  }
-
-  updated(changes) {
-    if (changes.has('fonts')) {
-      this.creationCard?.reset()
-    }
-  }
-
-  stateChanged(state) {
-    this.fonts = state.font
-  }
-
-  refresh() {
-    return store.dispatch(actionUpdateFontList())
-  }
-
-  async toggleActive(font) {
-    try {
-      await updateFont({ id: font.id, active: !font.active })
-      this.refresh()
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  async onCreateFont(e) {
-    try {
-      await createFont(e.detail)
-      this.refresh()
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  async deleteFont(font) {
-    try {
-      await deleteFont(font.id)
-      this.refresh()
-    } catch (e) {
-      console.error(e)
-    }
-  }
-
-  onClickSelect(font) {
-    this.dispatchEvent(
-      new CustomEvent('font-selected', {
-        composed: true,
-        bubbles: true,
-        detail: {
-          font
-        }
-      })
-    )
-  }
-}
-
-customElements.define('font-selector', FontSelector)

package/src/index.js

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

package/src/ox-file-selector.js

@@ -1,138 +0,0 @@
-import '@material/mwc-icon'
-import '@material/mwc-icon-button'
-
-import { css, html, LitElement } from 'lit'
-
-export class OxFileSelector extends LitElement {
-  static get styles() {
-    return [
-      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;
-        }
-      `
-    ]
-  }
-
-  static get properties() {
-    return {
-      label: String,
-      accept: String,
-      showFilename: {
-        type: Boolean,
-        attribute: 'show-filename'
-      },
-      multiple: {
-        type: Boolean,
-        attribute: 'multiple'
-      },
-      _files: Array
-    }
-  }
-
-  constructor() {
-    super()
-
-    this._files = []
-    this.label = 'select file'
-    this.multiple = false
-  }
-
-  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 => {
-            const el = e.currentTarget
-            this.dispatchEvent(
-              new CustomEvent('file-change', {
-                bubbles: true,
-                composed: true,
-                detail: {
-                  files: el.files
-                }
-              })
-            )
-
-            el.value = null
-          }}
-        />
-      </div>
-    `
-  }
-
-  get fileInput() {
-    return this.renderRoot.querySelector('#input-file')
-  }
-}
-
-window.customElements.define('ox-file-selector', OxFileSelector)