♻️ Refactor: refactor typeit shortcode and feature (#420)

hugo-fixit · Apr 20, 2024 · 72bd72f · 72bd72f
1 parent c09f141
commit 72bd72f
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 39 deletions.
diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -663,18 +663,42 @@ class FixIt {
       const cursorSpeed = typeitConfig.cursorSpeed || 1000;
       const cursorChar = typeitConfig.cursorChar || '|';
       const loop = typeitConfig.loop ?? false;
-      Object.values(typeitConfig.data).forEach((group) => {
+      // divide them into different groups according to the data-group attribute value of the element
+      // results in an object like {group1: [ele1, ele2], group2: [ele3, ele4]}
+      const typeitElements = document.querySelectorAll('.typeit')
+      const groupMap = Array.from(typeitElements).reduce((acc, ele) => {
+        const group = ele.dataset.group || ele.id || Math.random().toString(36).substring(2);
+        acc[group] = acc[group] || [];
+        acc[group].push(ele);
+        return acc;
+      }, {});
+      const stagingElement = document.createElement('div')
+      stagingElement.style.display = 'none';
+      document.body.appendChild(stagingElement);
+
+      Object.values(groupMap).forEach((group) => {
         const typeone = (i) => {
-          const id = group[i];
-          const shortcodeLoop = document.querySelector(`#${id}`).parentElement.dataset.loop;
-          const instance = new TypeIt(`#${id}`, {
-            strings: this.data[id],
+          const typeitElement = group[i];
+          const singleLoop = typeitElement.dataset.loop;
+          // get the content of the typed element
+          stagingElement.innerHTML = '';
+          stagingElement.appendChild(typeitElement.querySelector('template').content);
+          // for shortcodes usage
+          let targetEle = typeitElement.firstElementChild
+          // for system elements usage
+          if (typeitElement.firstElementChild.tagName === 'TEMPLATE') {
+            typeitElement.innerHTML = '';
+            targetEle = typeitElement
+          }
+          // create a new instance of TypeIt for each element
+          const instance = new TypeIt(targetEle, {
+            strings: stagingElement.innerHTML,
             speed: speed,
             lifeLike: true,
             cursorSpeed: cursorSpeed,
             cursorChar: cursorChar,
             waitUntilVisible: true,
-            loop: shortcodeLoop ? JSON.parse(shortcodeLoop) : loop,
+            loop: singleLoop ? JSON.parse(singleLoop) : loop,
             afterComplete: () => {
               if (i === group.length - 1) {
                 if (typeitConfig.duration >= 0) {
@@ -691,6 +715,7 @@ class FixIt {
         };
         typeone(0);
       });
+      document.body.removeChild(stagingElement);
     }
   }
 

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -28,7 +28,7 @@
       <main class="container{{ if (eq $toc.enable true) | and (eq $toc.position `left`) }} container-reverse{{ end }}">
         {{- block "content" . }}{{ end -}}
       </main>
-      {{- partial "footer.html" . -}}
+      {{- partialCached "footer.html" . -}}
     </div>
 
     {{- /* Theme widgets */ -}}

diff --git a/layouts/partials/assets.html b/layouts/partials/assets.html
@@ -2,6 +2,7 @@
 {{- $cdn := .Scratch.Get "cdn" | default dict -}}
 {{- $fingerprint := .Scratch.Get "fingerprint" -}}
 {{- $config := (.Scratch.Get "this").config -}}
+{{- $config = dict "version" (.Scratch.Get "version") | merge $config -}}
 
 {{- /* Search */ -}}
 {{- if .Site.Params.search | and .Site.Params.search.enable -}}
@@ -70,11 +71,11 @@
 {{- end -}}
 
 {{- /* TypeIt */ -}}
-{{- with (.Scratch.Get "this").typeitMap -}}
-  {{- $typeit := $.Site.Params.typeit -}}
+{{- if .Store.Get "hasTyped" -}}
+  {{- $typeit := .Site.Params.typeit -}}
   {{- $source := $cdn.typeitJS | default "lib/typeit/index.umd.js" -}}
   {{- dict "Source" $source "Fingerprint" $fingerprint "Defer" true | dict "Scratch" $.Scratch "Data" | partial "scratch/script.html" -}}
-  {{- $config = dict "speed" $typeit.speed "cursorSpeed" $typeit.cursorSpeed "cursorChar" $typeit.cursorChar "duration" $typeit.duration "loop" $typeit.loop "data" . | dict "typeit" | merge $config -}}
+  {{- $config = dict "speed" $typeit.speed "cursorSpeed" $typeit.cursorSpeed "cursorChar" $typeit.cursorChar "duration" $typeit.duration "loop" $typeit.loop | dict "typeit" | merge $config -}}
 {{- end -}}
 
 {{- /* KaTeX */ -}}

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -14,9 +14,8 @@
             <span class="header-title-pre">{{ . | safeHTML }}</span>
           {{- end -}}
           {{- if .typeit -}}
-            {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "typeit-header-desktop" | partial "function/id.html" -}}
-            <span id="{{ $id }}" class="typeit"></span>
-            {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
+            {{- $.Store.Set "hasTyped" true -}}
+            <span class="typeit"><template>{{ .name | default $.Site.Title }}</template></span>
           {{- else -}}
             <span class="header-title-text">{{ .name | default $.Site.Title }}</span>
           {{- end -}}
@@ -29,9 +28,8 @@
       </a>
       {{- with .Site.Params.header.subtitle -}}
         {{- if .typeit -}}
-          {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "typeit-header-subtitle-desktop" | partial "function/id.html" -}}
-          <span id="{{ $id }}" class="typeit header-subtitle"></span>
-          {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
+        {{- $.Store.Set "hasTyped" true -}}
+          <span class="typeit header-subtitle"><template>{{ .name }}</template></span>
         {{- else -}}
           <span class="header-subtitle">{{ .name }}</span>
         {{- end -}}
@@ -164,9 +162,8 @@
               <span class="header-title-pre">{{ . | safeHTML }}</span>
             {{- end -}}
             {{- if .typeit -}}
-              {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "typeit-header-title-mobile" | partial "function/id.html" -}}
-              <span id="{{ $id }}" class="typeit"></span>
-              {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
+              {{- $.Store.Set "hasTyped" true -}}
+              <span class="typeit"><template>{{ .name | default $.Site.Title }}</template></span>
             {{- else -}}
               <span class="header-title-text">{{ .name | default $.Site.Title }}</span>
             {{- end -}}
@@ -179,9 +176,8 @@
         </a>
         {{- with .Site.Params.header.subtitle -}}
           {{- if .typeit -}}
-            {{- $id := dict "Content" .name "Scratch" $.Scratch "Id" "typeit-header-subtitle-mobile" | partial "function/id.html" -}}
-            <span id="{{ $id }}" class="typeit header-subtitle"></span>
-            {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
+            {{- $.Store.Set "hasTyped" true -}}
+            <span class="typeit header-subtitle"><template>{{ .name }}</template></span>
           {{- else -}}
             <span class="header-subtitle">{{- .name -}}</span>
           {{- end -}}

diff --git a/layouts/partials/home/profile.html b/layouts/partials/home/profile.html
@@ -45,10 +45,9 @@ <h1 class="home-title">
   {{- with $profile.subtitle -}}
     <p class="home-subtitle">
       {{- if $profile.typeit -}}
-        {{- $id := dict "Content" . "Scratch" $.Scratch "Id" "typeit-profile-subtitle" | partial "function/id.html" -}}
         <span class="d-none">{{ . }}</span>
-        <span id="{{ $id }}" class="typeit"></span>
-        {{- dict $id (slice $id) | dict "typeitMap" | merge ($.Scratch.Get "this") | $.Scratch.Set "this" -}}
+        {{- $.Store.Set "hasTyped" true -}}
+        <span class="typeit"><template>{{ . }}</template></span>
       {{- else -}}
         {{- . -}}
       {{- end -}}

diff --git a/layouts/partials/init/index.html b/layouts/partials/init/index.html
@@ -1,5 +1,5 @@
 {{- .Scratch.Set "version" "v0.3.3-RC" -}}
-{{- .Scratch.Set "this" (dict "version" (.Scratch.Get "version") | dict "config") -}}
+{{- .Scratch.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}
 {{- partial "init/detection-version.html" . -}}

diff --git a/layouts/shortcodes/typeit.html b/layouts/shortcodes/typeit.html
@@ -1,3 +1,4 @@
+{{- /* trim the newline */ -}}
 {{- $content := trim (partial "function/dos2unix.html" .Inner) "\n" -}}
 {{- $classList := slice -}}
 {{- with .Get "class" -}}
@@ -15,25 +16,26 @@
     {{- /* parsing code links */ -}}
     {{- $content = replaceRE `(<span[^<>]*>)([^<>]*)\[([^<>]+)\]\(([^<>]+)\)([^<>]*)(</span>)` "$1$2$6<a href=\"$4\">$3</a>$1$5$6" $content -}}
   {{- end -}}
-  {{- /* split multiline string */ -}}
-  {{- $content = split $content "\n" -}}
   {{- $classList = $classList | append "highlight" -}}
 {{- else -}}
   {{- $content = $content | .Page.RenderString -}}
 {{- end -}}
 
-{{- /* trim the newline */ -}}
-{{- $id := dict "Content" $content "Scratch" .Page.Scratch | partial "function/id.html" -}}
-{{- $key := .Get "group" | string | default $id -}}
-{{- $typeitMap := (.Page.Scratch.Get "this").typeitMap | default dict -}}
-{{- $group := index $typeitMap $key -}}
-{{- $group = $group | default slice | append $id -}}
-{{- dict $key $group | merge $typeitMap | .Page.Scratch.SetInMap "this" "typeitMap" -}}
+{{- $wrapperAttrs := `class="typeit"` -}}
+{{- with (.Get "group" | string) -}}
+  {{- $wrapperAttrs = printf `%v data-group="%v"` $wrapperAttrs . -}}
+{{- end -}}
+{{- with $loop -}}
+  {{- $wrapperAttrs = printf `%v data-loop="true"` $wrapperAttrs -}}
+{{- end -}}
 
-{{- $attrs := printf `id="%v"` $id -}}
+{{- $innerAttrs := "" -}}
 {{- with $classList -}}
-  {{- $attrs = delimit $classList " " | printf `%v class="%v"` $attrs -}}
+  {{- $innerAttrs = printf `class="%v"` (delimit $classList " ") -}}
 {{- end -}}
 
-<div class="typeit"{{ if ne $loop "" }} data-loop="{{ $loop }}"{{ end }}>{{ printf `<%v %v></%v>` $tag $attrs $tag | safeHTML }}</div>
-{{- /* EOF */ -}}
+<div {{ $wrapperAttrs | safeHTMLAttr }}>
+  {{- printf `<%v %v></%v>` $tag $innerAttrs $tag | safeHTML -}}
+  <template>{{ printf "%v" $content | safeHTML }}</template>
+</div>
+{{- .Page.Store.Set "hasTyped" true -}}