blogs/FixIt
1
0
Fork 0
mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 23:38:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cell
2024-04-20 16:20:41 +08:00
parent c09f141034
commit 72bd72f5ed
7 changed files with 64 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/theme.js
+31 -6
View File
@@ -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);
}
}
layouts/_default/baseof.html
+1 -1
View File
@@ -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 */ -}}
layouts/partials/assets.html
+4 -3
View File
@@ -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 */ -}}
layouts/partials/header.html
+8 -12
View File
@@ -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 -}}
layouts/partials/home/profile.html
+2 -3
View File
@@ -45,10 +45,9 @@
{{- 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 -}}
layouts/partials/init/index.html
+1 -1
View File
@@ -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" . -}}
layouts/shortcodes/typeit.html
+17 -15
View File
@@ -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" -}}
{{- $attrs := printf `id="%v"` $id -}}
{{- with $classList -}}
{{- $attrs = delimit $classList " " | printf `%v class="%v"` $attrs -}}
{{- $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 -}}
<div class="typeit"{{ if ne $loop "" }} data-loop="{{ $loop }}"{{ end }}>{{ printf `<%v %v></%v>` $tag $attrs $tag | safeHTML }}</div>
{{- /* EOF */ -}}
{{- $innerAttrs := "" -}}
{{- with $classList -}}
{{- $innerAttrs = printf `class="%v"` (delimit $classList " ") -}}
{{- end -}}
<div {{ $wrapperAttrs | safeHTMLAttr }}>
{{- printf `<%v %v></%v>` $tag $innerAttrs $tag | safeHTML -}}
<template>{{ printf "%v" $content | safeHTML }}</template>
</div>
{{- .Page.Store.Set "hasTyped" true -}}