refactor: switch ui && clean up

groupher · Feb 25, 2021 · b415058 · b415058
1 parent 8a5ad85
commit b415058
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 83 deletions.
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/src/constant.js b/src/constant.js
@@ -0,0 +1,6 @@
+export const MODE = {
+  SHORT: "short",
+  LONG: "long",
+};
+
+export const holder = 1;
diff --git a/src/index.css b/src/index.css
@@ -6,7 +6,25 @@
   margin: 0;
 }
 
-.cdx-quote-paper {
+/* .cdx-quote [contentEditable="true"][data-placeholder]::before {
+  content: attr(data-placeholder);
+  color: #707684;
+  font-weight: normal;
+  opacity: 1;
+} */
+
+.cdx-quote-short {
+  margin-left: 15px;
+  min-height: 0;
+  border: none;
+  border-radius: 0;
+  border-left: 4px solid;
+  border-left-color: #388ae5;
+  color: grey;
+  box-shadow: none;
+}
+
+.cdx-quote-long {
   position: relative;
   border: 2px solid;
   border-left: 1px solid;
@@ -23,7 +41,7 @@
   border-bottom-left-radius: 12px;
 }
 
-.cdx-quote-paper::before {
+.cdx-quote-long::before {
   position: absolute;
   content: "\201C";
   font-size: 50px;
@@ -34,7 +52,7 @@
   background: white;
 }
 
-.cdx-quote-paper::after {
+.cdx-quote-long::after {
   position: absolute;
   content: "\201D";
   font-size: 42px;
@@ -45,39 +63,46 @@
   background: white;
 }
 
-.cdx-quote-papper__text {
+.cdx-quote__text {
   line-height: 1.8em;
   min-height: 30px;
   border: none;
   border-radius: 0;
   color: grey;
   box-shadow: none;
+  padding: 10px 12px;
+  outline: none;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.cdx-quote-papper__text:empty:before {
+.cdx-quote__text[contenteditable="true"]:empty::before {
   content: attr(placeholder);
-  color: #bbbbbb;
+  color: #707684;
+  font-weight: normal;
+  opacity: 1;
 }
-.cdx-quote-papper__text:focus:before {
-  content: none;
+
+.cdx-quote__text[contenteditable="true"]:focus:empty::before {
+  opacity: 0.5;
 }
 
-.cdx-quote-source {
+.cdx-quote-caption {
   position: absolute;
   bottom: 10px;
   right: 42px;
   display: flex;
   align-items: center;
 }
 
-.cdx-quote-source__line {
+.cdx-quote-caption__line {
   width: 30px;
   height: 1px;
   margin-right: 10px;
   background: #bbb;
 }
 
-.cdx-quote-source__text {
+.cdx-quote-caption__text {
   cursor: text;
   outline: none;
   color: grey;
@@ -91,45 +116,12 @@
 } 
 */
 
-.cdx-quote-source__text:empty:before {
+.cdx-quote-caption__text[contenteditable="true"]:empty:before {
   content: attr(placeholder);
   color: #bbbbbb;
   margin-right: 8px;
 }
-.cdx-quote-source__text:focus:before {
+.cdx-quote-caption__text[contenteditable="true"]:focus:before {
   content: "";
   margin-right: 8px;
 }
-
-.cdx-quote__text {
-  min-height: 0;
-  border: none;
-  border-radius: 0;
-  border-left: 4px solid;
-  border-left-color: #388ae5;
-  color: grey;
-  box-shadow: none;
-}
-
-.cdx-quote__caption {
-}
-
-/*
-.cdx-quote-papper__text[data-placeholder]:empty::before{
-  content: attr(data-placeholder);
-  color: #707684;
-  font-weight: normal;
-  opacity: 1;
-}
-  
-.cdx-quote-papper__text[data-placeholder]:focus:empty::before{
-  opacity: 0.5;
-}
-*/
-
-.cdx-quote [contentEditable="true"][data-placeholder]::before {
-  content: attr(data-placeholder);
-  color: #707684;
-  font-weight: normal;
-  opacity: 1;
-}
diff --git a/src/index.js b/src/index.js
@@ -7,6 +7,8 @@ import "./index.css";
 import PaperIcon from "./icon/paper.svg";
 import QuoteIcon from "./icon/quote.svg";
 
+import { MODE } from "./constant";
+
 /**
  * @class Quote
  * @classdesc Quote Tool for Editor.js
@@ -30,10 +32,8 @@ export default class Quote {
    */
   static get toolbox() {
     return {
-      /* icon: '<svg width="15" height="14" viewBox="0 0 15 14" xmlns="http://www.w3.org/2000/svg"><path d="M13.53 6.185l.027.025a1.109 1.109 0 0 1 0 1.568l-5.644 5.644a1.109 1.109 0 1 1-1.569-1.568l4.838-4.837L6.396 2.23A1.125 1.125 0 1 1 7.986.64l5.52 5.518.025.027zm-5.815 0l.026.025a1.109 1.109 0 0 1 0 1.568l-5.644 5.644a1.109 1.109 0 1 1-1.568-1.568l4.837-4.837L.58 2.23A1.125 1.125 0 0 1 2.171.64L7.69 6.158l.025.027z" /></svg>', */
-      icon:
-        '<svg t="1570603614482" class="icon" width="15" height="14" viewBox="0 0 1210 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4264" width="200" height="200"><path d="M517.587974 506.412527a134.482163 134.482163 0 0 0-98.857417-40.735469h-162.841665a69.545917 69.545917 0 0 1-69.796443-69.796443v-23.24878a186.14055 186.14055 0 0 1 186.14055-186.090444h46.497558a47.249136 47.249136 0 0 0 46.547664-46.547664V46.948505a47.249136 47.249136 0 0 0-46.547664-46.547664h-46.497558a362.159864 362.159864 0 0 0-144.302768 29.461815A368.423005 368.423005 0 0 0 29.463819 228.329067 362.310179 362.310179 0 0 0 0.002004 372.631835v511.773776a138.991625 138.991625 0 0 0 139.592886 139.592886h279.135667a138.991625 138.991625 0 0 0 139.592886-139.592886V605.269944a134.482163 134.482163 0 0 0-40.735469-98.857417z m651.366662 0a134.482163 134.482163 0 0 0-98.857417-40.735469h-162.841666a69.545917 69.545917 0 0 1-69.796443-69.796443v-23.24878a186.14055 186.14055 0 0 1 186.14055-186.090444h46.497559a47.249136 47.249136 0 0 0 46.547663-46.547664V46.948505a47.249136 47.249136 0 0 0-46.547663-46.547664h-46.497559a362.159864 362.159864 0 0 0-144.302768 29.461815 368.423005 368.423005 0 0 0-198.466411 198.466411A362.310179 362.310179 0 0 0 651.368666 372.631835v511.773776a138.991625 138.991625 0 0 0 139.592886 139.592886h279.135667a138.991625 138.991625 0 0 0 139.592886-139.592886V605.269944a134.482163 134.482163 0 0 0-40.735469-98.857417z" fill="" p-id="4265"></path></svg>',
-      title: this.i18n === "en" ? "Quote" : "引用",
+      icon: QuoteIcon,
+      title: "引用",
     };
   }
 
@@ -89,26 +89,26 @@ export default class Quote {
     this.api = api;
     this.i18n = config.i18n || "en";
 
-    this.data = {
+    this._data = {
       text: data.text || "",
-      type: data.type || "short", // 'short' || 'part'
-      caption: data.caption || "someone",
+      mode: data.mode || MODE.SHORT,
+      caption: data.caption || "",
     };
 
     this.settings = [
       {
-        name: "short",
         title: "短引用",
+        raw: MODE.SHORT,
         icon: QuoteIcon,
-        type: "short",
       },
       {
-        name: "paper",
         title: "长文引用",
+        raw: MODE.LONG,
         icon: PaperIcon,
-        type: "paper",
       },
     ];
+
+    this.element = null;
   }
 
   /**
@@ -119,18 +119,21 @@ export default class Quote {
   get CSS() {
     return {
       block: this.api.styles.block,
-      wrapper: "cdx-quote-paper", // 'cdx-quote',
-      text: "cdx-quote-papper__text", // 'cdx-quote__text',
-      input: this.api.styles.input,
+      settingsButton: this.api.styles.settingsButton,
+      settingsButtonActive: this.api.styles.settingsButtonActive,
 
-      //
-      quoteSource: "cdx-quote-source",
+      text: "cdx-quote__text", // 'cdx-quote__text',
 
-      quoteSourceLine: "cdx-quote-source__line",
-      quoteSourceText: "cdx-quote-source__text",
+      // short
+      shortWrapper: "cdx-quote-short",
 
-      settingsButton: this.api.styles.settingsButton,
-      settingsButtonActive: this.api.styles.settingsButtonActive,
+      // long
+      longWrapper: "cdx-quote-long", // 'cdx-quote',
+
+      // caption for long mode
+      caption: "cdx-quote-caption",
+      captionLine: "cdx-quote-caption__line",
+      captionText: "cdx-quote-caption__text",
     };
   }
 
@@ -140,35 +143,103 @@ export default class Quote {
    * @returns {Element}
    */
   render() {
+    // this.element = this.drawLongQuote();
+    this.element = this.drawShortQuote();
+    return this.element;
+  }
+
+  /**
+   * short/normal content quote style
+   *
+   * @returns {Element}
+   */
+  drawShortQuote() {
+    const Wrapper = make("div", [this.CSS.block]);
+    const Blockquote = make("blockquote", [this.CSS.shortWrapper]);
+
+    const TextEl = make("div", [this.CSS.text], {
+      innerText: this._data.text || "",
+      contentEditable: true,
+      placeholder: "// 引用内容",
+    });
+
+    TextEl.addEventListener("input", (e) => {
+      this._data.text = e.target.innerHTML;
+    });
+
+    Blockquote.appendChild(TextEl);
+
+    Wrapper.appendChild(Blockquote);
+
+    this._data.mode = MODE.SHORT;
+    return Wrapper;
+  }
+
+  /**
+   * long content quote style
+   *
+   * @returns {Element}
+   */
+  drawLongQuote() {
     const Wrapper = make("div", [this.CSS.block]);
-    const Blockquote = make("blockquote", [this.CSS.wrapper]);
+    const Blockquote = make("blockquote", [this.CSS.longWrapper]);
 
-    const Quote = make("div", [this.CSS.input, this.CSS.text], {
-      innerText: this.data.text || "",
+    const TextEl = make("div", [this.CSS.text], {
+      innerText: this._data.text || "",
       contentEditable: true,
-      placeholder: "引用内容。",
+      placeholder: "// 引用内容",
+    });
+
+    TextEl.addEventListener("input", (e) => {
+      this._data.text = e.target.innerHTML;
     });
 
     // bottom source
-    const QuoteSource = make("div", [this.CSS.quoteSource]);
-    const QuoteSourceLine = make("div", [this.CSS.quoteSourceLine]);
-    const QuoteSourceText = make("div", [this.CSS.quoteSourceText], {
+    const CaptionEl = make("div", [this.CSS.caption]);
+    const CaptionLineEl = make("div", [this.CSS.captionLine]);
+    const CaptionTextEl = make("div", [this.CSS.captionText], {
       contentEditable: true,
       innerText: "",
-      placeholder: "引用来源",
+      placeholder: "// 引用说明",
     });
 
-    QuoteSource.appendChild(QuoteSourceLine);
-    QuoteSource.appendChild(QuoteSourceText);
+    CaptionTextEl.addEventListener("input", (e) => {
+      this._data.caption = e.target.innerHTML;
+    });
+
+    CaptionEl.appendChild(CaptionLineEl);
+    CaptionEl.appendChild(CaptionTextEl);
 
-    Blockquote.appendChild(Quote);
-    Blockquote.appendChild(QuoteSource);
+    Blockquote.appendChild(TextEl);
+    Blockquote.appendChild(CaptionEl);
 
     Wrapper.appendChild(Blockquote);
 
+    this._data.mode = MODE.LONG;
     return Wrapper;
   }
 
+  // switch quote view between long / short
+  switchView() {
+    const { mode } = this._data;
+    const newViewEl =
+      mode === MODE.SHORT ? this.drawLongQuote() : this.drawShortQuote();
+
+    this.replaceElement(newViewEl);
+  }
+
+  /**
+   * replace element wrapper with new html element
+   * @param {HTMLElement} node
+   */
+  replaceElement(node) {
+    this.element.replaceWith(node);
+    this.element = node;
+
+    this.api.tooltip.hide();
+    this.api.toolbar.close();
+  }
+
   /**
    * Create Quote Tool settings
    *
@@ -182,12 +253,13 @@ export default class Quote {
         innerHTML: item.icon,
       });
 
-      if (this.data.type === item.name) highlightSettingIcon(itemEl, this.api);
+      if (this._data.mode === item.raw) highlightSettingIcon(itemEl, this.api);
 
       this.api.tooltip.onHover(itemEl, item.title, { placement: "top" });
       itemEl.addEventListener("click", () => {
         // this.setCenterIcon(item.name);
         highlightSettingIcon(itemEl, this.api);
+        this.switchView();
       });
 
       Wrapper.appendChild(itemEl);
@@ -203,10 +275,14 @@ export default class Quote {
    * @returns {QuoteData}
    */
   save(quoteElement) {
-    const text = quoteElement.querySelector(`.${this.CSS.text}`);
+    const TextEl = quoteElement.querySelector(`.${this.CSS.text}`);
+    const CaptionTextEl = quoteElement.querySelector(
+      `.${this.CSS.captionText}`
+    );
 
-    return Object.assign(this.data, {
-      text: text.innerHTML,
+    return Object.assign(this._data, {
+      text: TextEl.innerHTML,
+      caption: CaptionTextEl ? CaptionTextEl.innerHTML : "",
     });
   }