@operato/font 7.1.31 → 7.1.32

package/src/ox-file-selector.ts

@@ -1,113 +0,0 @@
-import '@material/web/icon/icon.js'
-
-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

@@ -1,94 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import '@material/web/icon/icon.js'
-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);
-      }
-
-      md-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') || ''}
-      />
-
-      <md-icon @click=${() => this.openSelector()}>font_download</md-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

@@ -1,17 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import './ox-font-selector'
-
-import { html, TemplateResult } from 'lit'
-
-import { OxPropertyEditor, PropertySpec } from '@operato/property-editor'
-
-export class OxPropertyEditorFontSelector extends OxPropertyEditor {
-  editorTemplate(value: any, spec: PropertySpec): TemplateResult {
-    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

@@ -1,21 +0,0 @@
-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 =
-  (listParam?: { sortings?: any; filters?: any; pagination?: any }) => async (dispatch: any) => {
-    try {
-      const fonts = await client.fetchFontList(listParam || { 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.ts

@@ -1,88 +0,0 @@
-import { CLEAR_FONT_LIST, UPDATE_FONT_LIST } from './redux-font-actions.js'
-
-import { Action } from 'redux'
-import WebFont from 'webfontloader'
-
-type Font = {
-  name: string
-  provider: string
-  uri: string
-  active: boolean
-  files: Array<{ name: string; fullpath: string }>
-}
-
-const ReducerFont = (state = [], action: any) => {
-  switch (action.type) {
-    case UPDATE_FONT_LIST:
-      let newState = action.list as Array<Font>
-      let activatedFonts = newState.filter(font => font.active)
-
-      let googles = [] as Array<string>
-      let customs = [] as Array<string>
-      let customFontCSS = ''
-
-      activatedFonts.forEach(font => {
-        const { name, provider, files, uri } = font
-
-        if (provider === 'google') {
-          googles.push(name)
-        } else if (provider === 'custom') {
-          customs.push(name)
-
-          if (files && files.length > 0) {
-            customFontCSS += files
-              .map(file => {
-                const { name: filename, fullpath } = file
-                const bold = filename.toUpperCase().indexOf('BOLD') !== -1
-
-                return `@font-face {
-                font-family: '${name}';
-                src: local('${name}'), url(${fullpath});
-                font-weight: ${bold ? 'bold' : 'normal'};
-              }
-              `
-              })
-              .join('\n')
-          } else {
-            customFontCSS += `@font-face {
-              font-family: '${name}';
-              src: local('${name}')${uri ? `, url(${uri})` : ''};
-            }
-            `
-          }
-        }
-      })
-
-      let style = document.head.querySelector('#custom-fonts') as HTMLStyleElement
-      if (!style) {
-        style = document.createElement('style')
-        style.id = 'custom-fonts'
-        document.head.appendChild(style)
-      }
-      style.innerHTML = customFontCSS
-
-      // TODO: typekit 등 타 서비스 지원
-      let WebFontConfig = {} as any
-      if (googles.length) {
-        WebFontConfig.google = {
-          families: googles
-        }
-      }
-      if (customs.length) {
-        WebFontConfig.custom = {
-          families: customs
-        }
-      }
-      if (Object.keys(WebFontConfig).length) WebFont.load(WebFontConfig)
-
-      return newState
-
-    case CLEAR_FONT_LIST:
-      return []
-
-    default:
-      return state
-  }
-}
-
-export default ReducerFont

package/src/themes/font-theme.css

@@ -1,14 +0,0 @@
-body {
-  --font-tools-background-color: var(--primary-color);
-  --font-selector-background-color: #fff;
-  --font-selector-name-font: bold 14px var(--theme-font);
-  --font-selector-border: 1px solid rgba(0, 0, 0, 0.2);
-  --font-selector-icon-size: 35px;
-  --font-selector-icon-font: normal 20px/35px var(--md-icon-font, 'Material Symbols Outlined');
-  --font-selector-icon-color: var(--primary-color);
-  --font-selector-icon-background-color: rgba(255, 255, 255, 0.85);
-  --font-selector-etc-background-color: var(--primary-color);
-  --font-selector-etc-font: bold 9px var(--theme-font);
-  --font-selector-etc-icon-font: normal 72px var(--md-icon-font, 'Material Symbols Outlined');
-  --font-selector-etc-icon-color: var(--secondary-color);
-}