✨ Feat: add more params for typeit shortcodes

resolves #483
hugo-fixit · Aug 4, 2024 · 976db36 · 976db36
1 parent c0942a9
commit 976db36
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -738,7 +738,7 @@ class FixIt {
       Object.values(groupMap).forEach((group) => {
         const typeone = (i) => {
           const typeitElement = group[i];
-          const singleLoop = typeitElement.dataset.loop;
+          const singleData = typeitElement.dataset;
           stagingDOM.stage(typeitElement.querySelector('template').content.cloneNode(true));
           // for shortcodes usage
           let targetEle = typeitElement.firstElementChild
@@ -750,18 +750,19 @@ class FixIt {
           // create a new instance of TypeIt for each element
           const instance = new TypeIt(targetEle, {
             strings: stagingDOM.$el.querySelector('pre')?.innerHTML || stagingDOM.contentAsHtml(),
-            speed: speed,
+            speed: Number(singleData.speed) >= 0 ? Number(singleData.speed) : speed,
             lifeLike: true,
-            cursorSpeed: cursorSpeed,
-            cursorChar: cursorChar,
+            cursorSpeed: Number(singleData.cursorSpeed) >= 0 ? Number(singleData.cursorSpeed) : cursorSpeed,
+            cursorChar: singleData.cursorChar || cursorChar,
             waitUntilVisible: true,
-            loop: singleLoop ? JSON.parse(singleLoop) : loop,
+            loop: singleData.loop ? singleData.loop === 'true' : loop,
             afterComplete: () => {
+              const duration = Number(singleData.duration ?? vtypeitConfig.duration);
               if (i === group.length - 1) {
-                if (typeitConfig.duration >= 0) {
+                if (duration >= 0) {
                   window.setTimeout(() => {
                     instance.destroy();
-                  }, typeitConfig.duration);
+                  }, duration);
                 }
                 return;
               }

diff --git a/layouts/partials/single/related.html b/layouts/partials/single/related.html
@@ -11,6 +11,7 @@
   {{- end -}}
   {{- $related := $posts.Related . | first ($params.related.count | default 5) -}}
   {{- with $related -}}
+    <hr class="awesome-hr" />
     <h2 id="see-also">{{ T "single.relatedContent" }}</h2>
     <ul>
       {{- range $i, $p := . -}}

diff --git a/layouts/shortcodes/typeit.html b/layouts/shortcodes/typeit.html
@@ -25,6 +25,18 @@
 {{- with (.Get "group" | string) -}}
   {{- $wrapperAttrs = printf `%v data-group="%v"` $wrapperAttrs . -}}
 {{- end -}}
+{{- with .Get "speed" -}}
+  {{- $wrapperAttrs = printf `%v data-speed="%v"` $wrapperAttrs . -}}
+{{- end -}}
+{{- with .Get "cursorSpeed" -}}
+  {{- $wrapperAttrs = printf `%v data-cursor-speed="%v"` $wrapperAttrs . -}}
+{{- end -}}
+{{- with .Get "cursorChar" -}}
+  {{- $wrapperAttrs = printf `%v data-cursor-char="%v"` $wrapperAttrs . -}}
+{{- end -}}
+{{- with .Get "duration" -}}
+  {{- $wrapperAttrs = printf `%v data-duration="%v"` $wrapperAttrs . -}}
+{{- end -}}
 {{- with $loop -}}
   {{- $wrapperAttrs = printf `%v data-loop="true"` $wrapperAttrs -}}
 {{- end -}}