@operato/font 1.0.0-beta.8 → 1.0.1

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);