@operato/font 1.0.0-beta.7 → 1.0.0

package/src/font-selector.js

@@ -1,465 +0,0 @@
-import "./font-creation-card";
-
-import { HeadroomStyles, ScrollbarStyles } from "@operato/styles";
-import { LitElement, css, html } from "lit";
-import {
-  createFont,
-  deleteFont,
-  fetchFontList,
-  updateFont,
-} from "./graphql-client";
-import { i18next, localize } from "@operato/i18n";
-
-import Headroom from "@operato/headroom";
-import { client } from "@operato/graphql";
-import { connect } from "pwa-helpers/connect-mixin.js";
-import gql from "graphql-tag";
-import { pulltorefresh } from "@operato/pull-to-refresh";
-import { store } from "@operato/shell";
-import uuid from "uuid/v4";
-
-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;
-        }
-
-        :host(.candrop) {
-          background: orange;
-          cursor: pointer;
-        }
-
-        #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)}
-                @file-drop=${(e) => this.onAttachmentDropped(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")) {
-      var creationCard = this.creationCard;
-      if (creationCard) {
-        creationCard.reset();
-      }
-    }
-  }
-
-  stateChanged(state) {
-    this.fonts = state.font;
-  }
-
-  refresh() {
-    return store.dispatch(fetchFontList());
-  }
-
-  toggleActive(font) {
-    store.dispatch(updateFont({ id: font.id, active: !font.active }));
-  }
-
-  onCreateFont(e) {
-    var font = e.detail;
-    this.createFont(font);
-  }
-
-  async createFont(font) {
-    if (font._files?.length > 0) {
-      let attachment = await this.attachFile(font._files[0], [
-        "fullpath",
-        "refBy",
-      ]);
-
-      //font.id = attachment?.refBy
-      font.uri = attachment?.fullpath;
-      delete font._files;
-    }
-
-    store.dispatch(createFont(font));
-  }
-
-  async onAttachmentDropped(e) {
-    var isNonFontIncluded = false;
-    var files = e.detail.filter((file) => {
-      var isFontFormat = !![
-        ".woff",
-        ".woff2",
-        ".eot",
-        ".svg",
-        ".svgz",
-        ".ttf",
-        ".otf",
-      ].find((ext) => file.name.endsWith(ext));
-      if (!isFontFormat) {
-        isNonFontIncluded = true;
-        return false;
-      }
-      var alreadyExist = !!this.fonts.find(
-        (font) =>
-          font.name == file.name.replace(/\.[^/.]+$/, "").replace(".", "_")
-      );
-      if (alreadyExist) return false;
-      return true;
-    });
-    // TODO alert if non-font file is included. ex) Non-font file is excluded in upload list.
-
-    if (files.length > 0) {
-      var attached = await this.attachFiles(files, [
-        "name",
-        "fullpath",
-        "refBy",
-      ]);
-      attached.forEach((attachment) => {
-        this.createFont({
-          id: attachment.refBy,
-          name: attachment.name.replace(/\.[^/.]+$/, "").replace(".", "_"), // cannot apply font correctly if '.' exists in name
-          provider: "custom",
-          active: true,
-          uri: attachment.fullpath,
-        });
-      });
-    }
-  }
-
-  /**
-   * attach a file
-   *
-   * @param { File } file file
-   * @param { Array<String> } fields fields to select from return
-   */
-  async attachFile(file, fields = []) {
-    var attaching = await client.mutate({
-      mutation: gql`
-        mutation ($attachment: NewAttachment!) {
-          createAttachment(attachment: $attachment) {
-            id
-          }
-        }
-      `,
-      variables: {
-        attachment: { refBy: uuid(), category: "font", file },
-      },
-      context: {
-        hasUpload: true,
-      },
-    });
-    // TODO mutation 이후 query 호출 안 해도 되도록 수정
-    // fullpath 값은 getter라서 그런지 뮤테이션에서 못 받아오는 듯
-    var attached = await client.query({
-      query: gql`
-        query($id: String!) {
-          attachment(id: $id) {
-            id
-            ${fields.join("\n")}
-          }
-        }
-      `,
-      variables: {
-        id: attaching.data.createAttachment?.id,
-      },
-    });
-    return attached.data.attachment;
-  }
-
-  /**
-   * attach multiple files
-   *
-   * @param { Array<File> } files files
-   * @param { Array<String> } fields fields to select from return
-   */
-  async attachFiles(files, fields = []) {
-    var attaching = await client.mutate({
-      mutation: gql`
-        mutation ($attachments: [NewAttachment!]!) {
-          createAttachments(attachments: $attachments) {
-            id
-          }
-        }
-      `,
-      variables: {
-        attachments: files.map((file) => ({
-          refBy: uuid(),
-          category: "",
-          file,
-        })),
-      },
-      context: {
-        hasUpload: true,
-      },
-    });
-    // TODO mutation 이후 query 호출 안 해도 되도록 수정
-    // fullpath 값은 getter라서 그런지 뮤테이션에서 못 받아오는 듯
-    var attached = await client.query({
-      query: gql`
-        query($filters: [Filter]) {
-          attachments(filters: $filters) {
-            items {
-              id
-              ${fields.join("\n")}
-            }
-            total
-          }
-        }
-      `,
-      variables: {
-        filters: {
-          name: "id",
-          operator: "in",
-          value: attaching.data.createAttachments.map(
-            (attachment) => attachment.id
-          ),
-        },
-      },
-    });
-    return attached.data.attachments.items;
-  }
-
-  async deleteFont(font) {
-    try {
-      client.mutate({
-        mutation: gql`
-          mutation ($refBys: [String!]!) {
-            deleteAttachmentsByRef(refBys: $refBys)
-          }
-        `,
-        variables: {
-          refBys: [font.id],
-        },
-      });
-    } catch (e) {}
-
-    store.dispatch(deleteFont(font));
-  }
-
-  onClickSelect(font) {
-    this.dispatchEvent(
-      new CustomEvent("font-selected", {
-        composed: true,
-        bubbles: true,
-        detail: {
-          font,
-        },
-      })
-    );
-  }
-}
-
-customElements.define("font-selector", FontSelector);

package/src/index.js

@@ -1,3 +0,0 @@
-export * from "./font-selector";
-export * from "./ox-font-selector";
-export * from "./ox-property-editor-font-selector";

package/src/ox-font-selector.js

@@ -1,102 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import "@material/mwc-icon";
-import "./font-selector";
-
-import { LitElement, css, html } from "lit";
-
-import { i18next } from "@operato/i18n";
-import { openPopup } from "@operato/layout";
-
-export default class OxFontSelector extends LitElement {
-  static get properties() {
-    return {
-      value: String,
-      properties: Object,
-    };
-  }
-
-  static get styles() {
-    return [
-      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;
-        }
-      `,
-    ];
-  }
-
-  render() {
-    return html`
-      <input
-        id="text"
-        type="text"
-        .value=${this.value || ""}
-        @change=${(e) => this._onInputChanged(e)}
-        .placeholder=${this.getAttribute("placeholder") || ""}
-      />
-
-      <mwc-icon @click=${(e) => this.openSelector(e)}>font_download</mwc-icon>
-    `;
-  }
-
-  _onInputChanged(e) {
-    this.value = e.target.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) => {
-          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"),
-    });
-  }
-}
-
-customElements.define("ox-font-selector", OxFontSelector);

package/src/ox-property-editor-font-selector.js

@@ -1,25 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import "./ox-font-selector";
-
-import { OxPropertyEditor } from "@operato/property-editor";
-import { html } from "lit";
-
-export class OxPropertyEditorFontSelector extends OxPropertyEditor {
-  editorTemplate() {
-    return html`
-      <ox-font-selector
-        id="editor"
-        .value=${this.value}
-        .properties=${this.property}
-      ></ox-font-selector>
-    `;
-  }
-}
-
-customElements.define(
-  "ox-property-editor-font-selector",
-  OxPropertyEditorFontSelector
-);

package/things-factory.config.js

@@ -1,5 +0,0 @@
-import bootstrap from './client/bootstrap'
-
-export default {
-  bootstrap
-}