@operato/font 1.0.0-beta.9 → 1.0.6

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.ts

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

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

@@ -0,0 +1,21 @@
+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 =
+  (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.ts

@@ -0,0 +1,88 @@
+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/font-creation-card.js

@@ -1,311 +0,0 @@
-import "@operato/attachment";
-
-import { LitElement, css, html } from "lit";
-import { i18next, localize } from "@operato/i18n";
-
-import { FileDropHelper } from "@operato/utils";
-
-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(.candrop) [front],
-        :host(.candrop) [back] {
-          border-width: 2px;
-          background-color: #fffde9;
-        }
-
-        :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;
-        }
-
-        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;
-        }
-      `,
-    ];
-  }
-
-  async firstUpdated() {
-    FileDropHelper.set(this);
-  }
-
-  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}
-            >
-              ${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
-            >
-            <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);
-              }}
-            ></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);