feat: embed threshold and index val of navbar into html/inline js (#241)

* feat: refactor image retrieval logic and improve variable initialization

- Add a new file `layouts/partials/function/getImageSlice.html`
- Initialize variables `$context`, `$Path`, and `$params`
- Set `$Path` based on the result of the `partial/function/currentMenuItem.html` partial
- Retrieve the page `$gallery` based on `$Path`
- Return all resources of type `image` from `$gallery`

* refactor: adapt getImageSlice function to `single.json`

* feat: refactor navigation UI components to use static go template

* feat: update navigation functionality and threshold rendering

assets/ts/nav.ts

@@ -36,11 +36,6 @@ const indexDispNums = Array.from(
  */
 
 export function initNav(): void {
-  const s = state.get()
-  // init threshold text
-  updateThresholdText(expand(s.threshold))
-  // init index text
-  updateIndexText(expand(s.index + 1), expand(s.length))
   // add watcher for updating nav text
   state.addWatcher((o) => {
     updateIndexText(expand(o.index + 1), expand(o.length))

layouts/_default/single.json

@@ -1,15 +1,9 @@
-{{- $Page := . -}}
-{{- $Path := "" -}}
+{{- $context := . -}}
 {{- $params := .Page.Params | merge .Site.Params.Page -}}
 
-{{- with partial "function/currentMenuItem.html" . -}}
-  {{- $Path = .Identifier -}}
-{{- end -}}
-
-{{- $gallery := site.GetPage $Path -}}
-{{- with $gallery.Resources.ByType "image" -}}
+{{- with partial "function/getImageSlice.html" .  -}}
   {{- $index := len . -}}
-  {{- $Page.Scratch.Add "img" slice -}}
+  {{- $context.Scratch.Add "img" slice -}}
   {{- range sort . "Name" "desc" -}}
     {{- $image := . -}}
     {{- $index = sub $index 1 -}}
@@ -19,7 +13,7 @@
     {{- end -}}
     {{- $lores := .Resize (site.Params.loResOpt | default "700x webp Lanczos q60") -}}
     {{- $hires := .Resize (site.Params.hiResOpt | default "2000x webp Lanczos q75") -}}
-    {{- $Page.Scratch.Add "img" (dict
+    {{- $context.Scratch.Add "img" (dict
       "index" (int $index)
       "alt" (string $alt)
       "loUrl" (string $lores.RelPermalink)
@@ -31,7 +25,7 @@
       )
     -}}
   {{- end -}}
-    {{ $Page.Scratch.Get "img" | jsonify }}
+    {{ $context.Scratch.Get "img" | jsonify }}
 {{- else -}}
 []
 {{- end -}}

layouts/partials/function/getImageSlice.html

@@ -0,0 +1,10 @@
+{{- $context := . -}}
+{{- $Path := "" -}}
+{{- $params := .Page.Params | merge .Site.Params.Page -}}
+
+{{- with partial "function/currentMenuItem.html" . -}}
+  {{- $Path = .Identifier -}}
+{{- end -}}
+
+{{- $gallery := site.GetPage $Path -}}
+{{- return $gallery.Resources.ByType "image" -}}

layouts/partials/nav.html

@@ -33,6 +33,10 @@
     {{- end -}}
   </div>
   <div class="threshold">
+    {{- $length := 0 -}}
+    {{- with partial "function/getImageSlice.html" . -}}
+      {{- $length = len . -}}
+    {{- end -}}
     <span>{{- i18n "threshold" | strings.FirstUpper -}}:</span>
     <span>
       <button class="dec">&#xFF0D;</button>
@@ -42,10 +46,43 @@
     </span>
   </div>
   <div class="index">
-    <span class="num"></span><span class="num"></span><span class="num"></span
-    ><span class="num"></span>
+    <span class="num">0</span><span class="num">0</span><span class="num">0</span
+    ><span class="num">0</span>
     <span>/</span>
-    <span class="num"></span><span class="num"></span><span class="num"></span
-    ><span class="num"></span>
+    <span class="num">{{- math.Floor (div $length 1000) -}}</span
+    ><span class="num">{{- mod (math.Floor (div $length 100)) 10 -}}</span
+    ><span class="num">{{- mod (math.Floor (div $length 10)) 10 -}}</span
+    ><span class="num">{{- mod $length 10 -}}</span>
   </div>
 </nav>
+{{- /* for threshold */ -}}
+<script>
+  i = 2
+  const s = sessionStorage.getItem('thresholdsIndex')
+  if (s !== null) {
+    i = parseInt(s)
+  }
+  var t = ''
+  switch (i) {
+    case 0:
+      t = '0020'
+      break
+    case 1:
+      t = '0040'
+      break
+    case 2:
+      t = '0080'
+      break
+    case 3:
+      t = '0140'
+      break
+    case 4:
+      t = '0200'
+      break
+  }
+  Array.from(
+    document.getElementsByClassName('threshold').item(0).getElementsByClassName('num')
+  ).forEach((e, i) => {
+    e.innerText = t[i]
+  })
+</script>