♻️ Refactor: refactor echarts shortcode data store way (#420)

assets/js/theme.js

@@ -586,11 +586,14 @@ class FixIt {
         this._echartsArr[i].dispose();
       }
       this._echartsArr = [];
+      const stagingDOM = this.util.getStagingDOM()
       this.util.forEach(document.getElementsByClassName('echarts'), ($echarts) => {
         const chart = echarts.init($echarts, this.isDark ? 'dark' : 'light', { renderer: 'svg' });
-        chart.setOption(JSON.parse(this.data[$echarts.id]));
+        stagingDOM.stage($echarts.querySelector('template').content.cloneNode(true));
+        chart.setOption(stagingDOM.contentAsJson());
         this._echartsArr.push(chart);
       });
+      stagingDOM.destroy();
     });
     this.switchThemeEventSet.add(this._echartsOnSwitchTheme);
     this._echartsOnSwitchTheme();
@@ -672,17 +675,13 @@ class FixIt {
         acc[group].push(ele);
         return acc;
       }, {});
-      const stagingElement = document.createElement('div')
-      stagingElement.style.display = 'none';
-      document.body.appendChild(stagingElement);
+      const stagingDOM = this.util.getStagingDOM()
 
       Object.values(groupMap).forEach((group) => {
         const typeone = (i) => {
           const typeitElement = group[i];
           const singleLoop = typeitElement.dataset.loop;
-          // get the content of the typed element
-          stagingElement.innerHTML = '';
-          stagingElement.appendChild(typeitElement.querySelector('template').content.cloneNode(true));
+          stagingDOM.stage(typeitElement.querySelector('template').content.cloneNode(true));
           // for shortcodes usage
           let targetEle = typeitElement.firstElementChild
           // for system elements usage
@@ -690,10 +689,9 @@ class FixIt {
             typeitElement.innerHTML = '';
             targetEle = typeitElement
           }
-          const typedContents = stagingElement.querySelector('pre')?.innerHTML || stagingElement.innerHTML
           // create a new instance of TypeIt for each element
           const instance = new TypeIt(targetEle, {
-            strings: typedContents,
+            strings: stagingDOM.$el.querySelector('pre')?.innerHTML || stagingDOM.contentAsHtml(),
             speed: speed,
             lifeLike: true,
             cursorSpeed: cursorSpeed,
@@ -716,7 +714,7 @@ class FixIt {
         };
         typeone(0);
       });
-      document.body.removeChild(stagingElement);
+      stagingDOM.destroy();
     }
   }
 

assets/js/util.js

@@ -55,4 +55,34 @@ export default class Util {
       behavior: 'smooth'
     });
   }
+
+  /**
+   * get a hidden element for temporary use
+   * @returns {Object} { $el: Element, destroy: Function }
+   */
+  getStagingDOM() {
+    const stagingElement = document.createElement('div')
+    stagingElement.style.display = 'none';
+    document.body.appendChild(stagingElement);
+
+    return {
+      $el: stagingElement,
+      stage(dom) {
+        stagingElement.innerHTML = '';
+        stagingElement.appendChild(dom);
+      },
+      contentAsHtml() {
+        return stagingElement.innerHTML;
+      },
+      contentAsText() {
+        return stagingElement.innerText;
+      },
+      contentAsJson() {
+        return JSON.parse(stagingElement.innerHTML);
+      },
+      destroy() {
+        document.body.removeChild(stagingElement);
+      }
+    }
+  }
 }

layouts/shortcodes/echarts.html

@@ -1,6 +1,8 @@
 {{- $content := .Inner | transform.Unmarshal | jsonify -}}
-{{- $id := dict "Content" $content "Scratch" .Page.Scratch | partial "function/id.html" -}}
 {{- $width := cond .IsNamedParams (.Get "width") (.Get 0) | default "100%" -}}
 {{- $height := cond .IsNamedParams (.Get "height") (.Get 1) | default "30rem" -}}
-<div class="echarts" id="{{ $id }}" style="width: {{ $width }}; height: {{ $height }};"></div>
+{{- $attrs := printf `style="width: %v; height: %v;"` $width $height -}}
+<div class="echarts" {{ $attrs | safeHTMLAttr }}>
+  <template>{{ $content }}</template>
+</div>
 {{- /* EOF */ -}}