build(deps-dev): bump eslint-plugin-n from 16.6.1 to 16.6.2 (#224)

Bumps [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n) from 16.6.1 to 16.6.2.
- [Release notes](https://github.com/eslint-community/eslint-plugin-n/releases)
- [Commits](https://github.com/eslint-community/eslint-plugin-n/compare/16.6.1...16.6.2)

---
updated-dependencies:
- dependency-name: eslint-plugin-n
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.eslintrc.json

@@ -22,6 +22,7 @@
     "arrow-body-style": "off",
     "prefer-arrow-callback": "off",
     "import/no-cycle": "error",
+    "@typescript-eslint/non-nullable-type-assertion-style": "off",
     "sort-imports": [
       "error",
       {

.github/dependabot.yml

@@ -8,5 +8,5 @@ updates:
   - package-ecosystem: 'npm' # See documentation for possible values
     directory: '/' # Location of package manifests
     schedule:
-      interval: 'daily'
+      interval: 'weekly'
     open-pull-requests-limit: 1000

.github/workflows/build.yml

@@ -24,7 +24,7 @@ jobs:
 
       - name: Get changed files in scope
         id: changed-files-specific
-        uses: tj-actions/changed-files@v40
+        uses: tj-actions/changed-files@v41
         with:
           files: |
             package.json

.gitignore

@@ -21,4 +21,7 @@ $RECYCLE.BIN/
 
 # Hugo
 .hugo_build.lock
-jsconfig.json
+jsconfig.json
+
+# css map
+*.css.map

.prettierignore

@@ -3,3 +3,4 @@ static
 exmapleSite
 *.yaml
 *.yml
+single.json

assets/scss/_core/_base.scss

@@ -17,3 +17,7 @@ a,
 button {
   cursor: pointer;
 }
+
+.hide {
+  display: none;
+}

assets/scss/_core/_font.scss

@@ -1,6 +1,8 @@
 @font-face {
   font-family: 'Geist';
-  src: url('/lib/fonts/GeistVF.woff2') format('woff2');
+  src:
+    url('/lib/fonts/GeistVF.woff2') format('woff2 supports variations'),
+    url('/lib/fonts/GeistVF.woff2') format('woff2-variations');
   font-weight: 400;
   font-style: normal;
   font-display: swap;

assets/scss/_partial/_gallery.scss

@@ -27,6 +27,18 @@
         height: 100%;
         object-fit: contain;
       }
+
+      .loadingText {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate3d(-50%, -50%, 0);
+      }
+
+      .slideContainer {
+        position: relative;
+        display: inline-block;
+      }
     }
   }
 

assets/scss/_variables.scss

@@ -1,7 +1,7 @@
 @import '_core/mixins';
 
 :root {
-  --window-height: 100vh;
+  --window-height: 100svh;
   --nav-height: 2rem;
   --space-standard: 0.625rem;
 

assets/scss/style.scss

@@ -6,5 +6,6 @@
 
 @import '_partial/collection';
 @import '_partial/gallery';
+@import '_partial/container';
 
 @import 'node_modules/swiper/swiper.scss';

assets/ts/desktop/stage.ts

@@ -25,6 +25,7 @@ export const cordHist = new Watchable<HistoryItem[]>([])
 export const isOpen = new Watchable<boolean>(false)
 export const isAnimating = new Watchable<boolean>(false)
 export const active = new Watchable<boolean>(false)
+export const isLoading = new Watchable<boolean>(false)
 
 let _gsap: typeof gsap
 let _Power3: typeof Power3
@@ -54,22 +55,26 @@ function getElCurrent(): HTMLImageElement {
 }
 
 function getElNextSeven(): HTMLImageElement[] {
+  const c = cordHist.get()
   const s = state.get()
+  const c0 = c.length > 0 ? c[c.length - 1].i : s.index
   const els = []
   for (let i = 0; i < 7; i++) {
-    els.push(imgs[increment(s.index + i, s.length)])
+    els.push(imgs[increment(c0 + i, s.length)])
   }
   return els
 }
 
 function getElPrev(): HTMLImageElement {
+  const c = cordHist.get()
   const s = state.get()
-  return imgs[increment(s.index, s.length)]
+  return imgs[decrement(c[c.length - 1].i, s.length)]
 }
 
 function getElNext(): HTMLImageElement {
+  const c = cordHist.get()
   const s = state.get()
-  return imgs[decrement(s.index, s.length)]
+  return imgs[increment(c[c.length - 1].i, s.length)]
 }
 
 /**
@@ -110,9 +115,13 @@ function setPositions(): void {
 
   if (isOpen.get()) {
     lores(getElTrail())
-    hires([getElCurrent()])
+    const elc = getElCurrent()
+    elc.src = '' // reset src to ensure we only display hires images
+    elc.classList.add('hide')
+    hires([elc, getElPrev(), getElNext()])
     _gsap.set(imgs, { opacity: 0 })
-    _gsap.set(getElCurrent(), { opacity: 1, x: 0, y: 0, scale: 1 })
+    _gsap.set(elc, { opacity: 1, x: 0, y: 0, scale: 1 })
+    loader(elc)
   }
 }
 
@@ -123,7 +132,11 @@ function expandImage(): void {
   isOpen.set(true)
   isAnimating.set(true)
 
-  hires([getElCurrent(), getElPrev(), getElNext()])
+  const elc = getElCurrent()
+  // don't clear src here because we want a better transition
+
+  hires([elc, getElPrev(), getElNext()])
+  loader(elc)
 
   const tl = _gsap.timeline()
   // move down and hide trail inactive
@@ -288,3 +301,27 @@ function lores(imgs: HTMLImageElement[]): void {
     img.width = parseInt(img.dataset.loImgW as string)
   })
 }
+
+function loader(e: HTMLImageElement): void {
+  if (!e.complete) {
+    isLoading.set(true)
+    e.addEventListener(
+      'load',
+      () => {
+        isLoading.set(false)
+        e.classList.remove('hide')
+      },
+      { once: true, passive: true }
+    )
+    e.addEventListener(
+      'error',
+      () => {
+        isLoading.set(false)
+      },
+      { once: true, passive: true }
+    )
+  } else {
+    e.classList.remove('hide')
+    isLoading.set(false)
+  }
+}

assets/ts/desktop/stageNav.ts

@@ -3,7 +3,14 @@ import { decIndex, incIndex, state } from '../state'
 import { decrement, increment } from '../utils'
 
 import { setCustomCursor } from './customCursor'
-import { active, cordHist, isAnimating, isOpen, minimizeImage } from './stage'
+import {
+  active,
+  cordHist,
+  isAnimating,
+  isLoading,
+  isOpen,
+  minimizeImage
+} from './stage'
 
 /**
  * types
@@ -21,6 +28,8 @@ const navItems = [
   mainDiv.getAttribute('closeText') as string,
   mainDiv.getAttribute('nextText') as string
 ] as const
+const loadingText = (mainDiv.getAttribute('loadingText') as string) + '...'
+let loadedText = ''
 
 /**
  * main functions
@@ -56,39 +65,80 @@ function handleKey(e: KeyboardEvent): void {
  */
 
 export function initStageNav(): void {
+  // isLoading
+  isLoading.addWatcher((o) => {
+    if (o) setCustomCursor(loadingText)
+    else setCustomCursor(loadedText)
+  })
+  // navOverlay
   const navOverlay = document.createElement('div')
   navOverlay.className = 'navOverlay'
-  for (const navItem of navItems) {
+  for (const [index, navItem] of navItems.entries()) {
     const overlay = document.createElement('div')
     overlay.className = 'overlay'
-    overlay.addEventListener(
-      'click',
-      () => {
-        handleClick(navItem)
-      },
-      { passive: true }
-    )
-    overlay.addEventListener(
-      'keydown',
-      () => {
-        handleClick(navItem)
-      },
-      { passive: true }
-    )
-    overlay.addEventListener(
-      'mouseover',
-      () => {
-        setCustomCursor(navItem)
-      },
-      { passive: true }
-    )
-    overlay.addEventListener(
-      'focus',
-      () => {
-        setCustomCursor(navItem)
-      },
-      { passive: true }
-    )
+    const isClose = index === 1
+    // close
+    if (isClose) {
+      overlay.addEventListener(
+        'click',
+        () => {
+          handleCloseClick(navItem)
+        },
+        { passive: true }
+      )
+      overlay.addEventListener(
+        'keydown',
+        () => {
+          handleCloseClick(navItem)
+        },
+        { passive: true }
+      )
+      overlay.addEventListener(
+        'mouseover',
+        () => {
+          handleCloseHover(navItem)
+        },
+        { passive: true }
+      )
+      overlay.addEventListener(
+        'focus',
+        () => {
+          handleCloseHover(navItem)
+        },
+        { passive: true }
+      )
+    }
+    // prev and next
+    else {
+      overlay.addEventListener(
+        'click',
+        () => {
+          handlePNClick(navItem)
+        },
+        { passive: true }
+      )
+      overlay.addEventListener(
+        'keydown',
+        () => {
+          handlePNClick(navItem)
+        },
+        { passive: true }
+      )
+      overlay.addEventListener(
+        'mouseover',
+        () => {
+          handlePNHover(navItem)
+        },
+        { passive: true }
+      )
+      overlay.addEventListener(
+        'focus',
+        () => {
+          handlePNHover(navItem)
+        },
+        { passive: true }
+      )
+    }
     navOverlay.append(overlay)
   }
   active.addWatcher(() => {
@@ -127,3 +177,23 @@ function prevImage(): void {
 
   decIndex()
 }
+
+function handleCloseClick(navItem: NavItem): void {
+  handleClick(navItem)
+  isLoading.set(false)
+}
+
+function handleCloseHover(navItem: NavItem): void {
+  loadedText = navItem
+  setCustomCursor(navItem)
+}
+
+function handlePNClick(navItem: NavItem): void {
+  if (!isLoading.get()) handleClick(navItem)
+}
+
+function handlePNHover(navItem: NavItem): void {
+  loadedText = navItem
+  if (isLoading.get()) setCustomCursor(loadingText)
+  else setCustomCursor(navItem)
+}

assets/ts/main.ts

@@ -5,7 +5,7 @@ import { initState } from './state'
 import { isMobile } from './utils'
 
 initContainer()
-const ijs = initResources()
+const ijs = await initResources()
 initState(ijs.length)
 initNav()
 

assets/ts/mobile/gallery.ts

@@ -196,14 +196,34 @@ function createGallery(ijs: ImageJSON[]): void {
   for (const ij of ijs) {
     const _swiperSlide = document.createElement('div')
     _swiperSlide.className = 'swiper-slide'
+    // loading indicator
+    const l = document.createElement('div')
+    l.className = 'loadingText'
+    l.innerText =
+      (document.getElementById('main')?.getAttribute('loadingText') as string) + '...'
     // img
     const e = document.createElement('img')
     e.dataset.src = ij.hiUrl
     e.height = ij.hiImgH
     e.width = ij.hiImgW
     e.alt = ij.alt
+    e.classList.add('hide')
+    // load event
+    e.addEventListener(
+      'load',
+      () => {
+        e.classList.remove('hide')
+        l.classList.add('hide')
+      },
+      { once: true, passive: true }
+    )
+    // parent container
+    const p = document.createElement('div')
+    p.className = 'slideContainer'
     // append
-    _swiperSlide.append(e)
+    p.append(e)
+    p.append(l)
+    _swiperSlide.append(p)
     _swiperWrapper.append(_swiperSlide)
   }
   // swiper node

assets/ts/nav.ts

@@ -31,37 +31,11 @@ const indexDispNums = Array.from(
   indexDiv.getElementsByClassName('num')
 ) as HTMLSpanElement[]
 
-// links div
-const linksDiv = document.getElementsByClassName('links').item(0) as HTMLDivElement
-
-// links
-const links = Array.from(linksDiv.getElementsByClassName('link')) as HTMLAnchorElement[]
-
-// current link index
-const currentLinkIndex = document
-  .getElementById('main')
-  ?.getAttribute('currentMenuItemIndex') as string
-
-// set current link
-for (const [index, link] of links.entries()) {
-  if (index === parseInt(currentLinkIndex)) {
-    // set current link style
-    link.classList.add('current')
-    // set current link title (only if not home)
-    if (index !== 0) document.title = link.innerText + ' | ' + document.title
-  }
-}
-
 /**
  * init
  */
 
 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))

assets/ts/resources.ts

@@ -10,17 +10,21 @@ export interface ImageJSON {
   hiImgW: number
 }
 
-export function initResources(): ImageJSON[] {
-  const imagesJson = document.getElementById('imagesSource')
-  if (imagesJson === null) {
-    return []
-  }
-  return JSON.parse(imagesJson.textContent as string).sort(
-    (a: ImageJSON, b: ImageJSON) => {
+export async function initResources(): Promise<ImageJSON[]> {
+  try {
+    const response = await fetch(`${window.location.href}index.json`, {
+      headers: {
+        Accept: 'application/json'
+      }
+    })
+    const data: ImageJSON[] = await response.json()
+    return data.sort((a: ImageJSON, b: ImageJSON) => {
       if (a.index < b.index) {
         return -1
       }
       return 1
-    }
-  )
+    })
+  } catch (_) {
+    return []
+  }
 }

doc/getStarted.md

@@ -22,7 +22,7 @@ The minimum required Hugo version can be seen in the [`theme.toml`](https://gith
 
 ## Installation
 
-### Git
+### Git (for adavanced user)
 
 On the main branch, you can find the theme's latest source code. To use the latest version, you can clone the repository to `themes/bridget` by running the following command in the root directory of your Hugo site:
 
@@ -36,9 +36,13 @@ If you are already using Git for your site, you can add the theme as a submodule
 git submodule add https://github.com/Sped0n/bridget themes/bridget
 ```
 
+> ⚠️⚠️⚠️
+>
+> Please refer to the config section for the following content.
+
 ### Module (recommended)
 
-> If you want to modify the theme, use Git installation instead.
+> If you want to have some customizations, use Git installation instead.
 
 This theme is also available as a [Hugo module](https://gohugo.io/hugo-modules/). Run the following command in the root directory of your Hugo site:
 
@@ -46,7 +50,7 @@ First turn your site into a Hugo module (in case you haven't done it yet):
 
 ```shell
 hugo mod init github.com/me/my-new-site
-# or whatever you like, it doesn’t necessarily have to be a GitHub link.
+# or whatever you like, it doesn’t necessarily have to be a GitHub repo link.
 hugo mod init blablabla
 ```
 
@@ -65,6 +69,10 @@ If you want to upgrade the theme, just run:
 hugo mod get -u
 ```
 
+> ⚠️⚠️⚠️
+>
+> Please refer to the config section for the following content.
+
 ## Content Management
 
 The content is where the pictures/text is stored, while the static refers to the website icons.
@@ -155,8 +163,12 @@ replacements = "github.com/Sped0n/bridget -> ../.."
 path = "github.com/Sped0n/bridget"
 ```
 
-- If you want to <u>modify the theme</u> or you have <u>installation with Git</u>, please keep the `replacements` configuration and change the path after the arrow to the location of your local theme file.
-- If you have <u>installation with Module</u>, remove the `replacements` configuration.
+- If you have <u>installation with Git</u>
+
+  - `replacement`: replace the <u>path after the arrow</u>(`../..`) with the location of your local theme file (⚠️⚠️⚠️**relative path only**, example: `themes/bridget`)
+  - `path`: no change
+
+- If you have <u>installation with Module</u>, **remove the `replacements` configuration**.
 
 ### `markup.toml`
 
@@ -164,8 +176,40 @@ path = "github.com/Sped0n/bridget"
 
 ### `params.toml`
 
-There is a detailed description in the comments.
+Detailed description in the comments.
+
+> ⚠️⚠️⚠️
+>
+> Only thing that you need to pay **extra attention** is the [`bundled`](https://github.com/Sped0n/bridget/blob/1e2f1fadde9c16989eef1ab771f2ac8463dec5a4/exampleSite/config/_default/params.toml#L6) option, please read the corresponding doc and set it as your need.
+>
+> For users who have installation with module, please always set this option to `true`, unless you know what you are doing.
+>
+> Or you might get the error related to `node_modules/swiper/swiper.scss`.
 
 ### `sitemap.toml`
 
 https://gohugo.io/templates/sitemap-template/#configuration
+
+## Customization (AKA for developer)
+
+> Before heading to this section, please make sure you have **installation with Git**.
+
+### Option 1: _it just works_ way
+
+> If you want to modify js/ts file, please use option 2.
+
+1.  Use hugo create a site and move the bridget theme into the theme directory.
+2.  Run `npm install` in the <u>bridget theme root dir</u>, not <u>your hugo site root dir</u>.
+3.  After the command is done, copy the `node_modules` dir from <u>bridget theme root dir</u> to <u>your hugo site root dir</u>.
+4.  In <u>your hugo site root dir</u>, write/modify configuration files according to your needs, remember to set `bundled` option to `false`, so hugo will not use prebuilt css file.
+5.  Run `hugo server` in <u>your hugo site root dir</u>, and you are good to go.
+
+### Option 2: recommended way
+
+1.  Use hugo create a site and move the bridget theme into the theme directory.
+2.  Run `npm install` in the <u>bridget theme root dir</u>, not <u>your hugo site root dir</u>.
+3.  Run `npm run dev` in the <u>bridget theme root dir</u>, we will use content in exampleSite to debug.
+4.  Make your customization.
+5.  After modification, run `npm run build` in the <u>bridget theme root dir</u> to build artifacts.
+6.  In <u>your hugo site root dir</u>, write/modify configuration files according to your needs, remember to set `bundled` option to `true`, so hugo will use the artifacts you built in step 5.
+7.  Run `hugo server` in <u>your hugo site root dir</u>, and you are good to go.

exampleSite/config/_default/outputs.toml

@@ -0,0 +1 @@
+page = ["HTML", "JSON"]

exampleSite/config/_default/params.toml

@@ -1,5 +1,5 @@
 # description of the site (will be placed in meta)
-description = "Bridget is a minimal Hugo theme designed for photographers / visual artists."
+description = "Bridget is a minimal Hugo theme designed for photographers/visual artists."
 # use bundled js and css
 # * if you want to build the js and css from scratch, set this to false and run `npm install` and `npm run build`
 # * tldr: set this to false if you want to develop and edit the js and css
@@ -14,8 +14,8 @@ svgFavicon = "/dot.svg"
 svgFaviconFallback = "/dot.png"
 
 # resize options for dynamic resolution, please refer to https://gohugo.io/content-management/image-processing/#image-processing-options
-loResOpt = "700x webp Lanczos q60"
-hiResOpt = "2000x webp Lanczos q75"
+loResOpt = "800x webp Lanczos q60"
+hiResOpt = "2500x webp Lanczos q75"
 
 # page config
 [page]

exampleSite/content/Info/index.md

@@ -10,9 +10,9 @@ menu:
 unifiedAlt: ''
 ---
 
-Bridget is a _minimal_ Hugo theme designed for photographers / visual artists.
+Bridget is a _minimal_ Hugo theme designed for photographers/visual artists.
 
-The inspiration for this theme came from a video by <u>[Hyperlexed](https://www.youtube.com/@Hyperplexed)</u>, which can be found <u>[here](https://www.youtube.com/watch?v=Jt3A2lNN2aE)</u>. Initially, it was designed using pure TypeScript and CSS. However, after website designer <u>[Tyler McRobert](https://tylermcrobert.com)</u> made the source code publicly available, the whole project was modified to mimic the original design. The animations in Bridget are achieved using gsap and swiper. In essence, it is more like a porting of the original design into Hugo.
+The inspiration for this theme came from a video by <u>[Hyperlexed](https://www.youtube.com/@Hyperplexed)</u>, which can be found <u>[here](https://www.youtube.com/watch?v=Jt3A2lNN2aE)</u>. Initially, it was developed using raw TypeScript and CSS. However, after website designer <u>[Tyler McRobert](https://tylermcrobert.com)</u> made the source code publicly available, I realized that I have invented many unnecessary components, and this project was modified to porting the original design to hugo while focusing on _performance_.
 
 Once again, great shout out to <u>[Tyler McRobert](https://tylermcrobert.com)</u> for his inspiration to this project.
 

i18n/de.toml

@@ -8,3 +8,5 @@ other = "schließen"
 other = "schwelle"
 [404]
 other = "seite nicht gefunden"
+[loading]
+other = "lade"

i18n/en.toml

@@ -8,3 +8,5 @@ other = "close"
 other = "threshold"
 [404]
 other = "page not found"
+[loading]
+other = "loading"

i18n/es.toml

@@ -8,3 +8,5 @@ other = "cerrar"
 other = "umbral"
 [404]
 other = "página no encontrada"
+[loading]
+other = "cargando"

i18n/fr.toml

@@ -8,3 +8,5 @@ other = "fermer"
 other = "seuil"
 [404]
 other = "page non trouvée"
+[loading]
+other = "chargement"

i18n/it.toml

@@ -8,3 +8,5 @@ other = "chiudi"
 other = "soglia"
 [404]
 other = "pagina non trovata"
+[loading]
+other = "caricamento"

i18n/ja.toml

@@ -8,3 +8,5 @@ other = "閉じる"
 other = "しきい値"
 [404]
 other = "ページが見つかりません"
+[loading]
+other = "読み込み中"

i18n/ko.toml

@@ -8,3 +8,5 @@ other = "닫기"
 other = "임계값"
 [404]
 other = "페이지를 찾을 수 없습니다"
+[loading]
+other = "로딩중"

i18n/zh-cn.toml

@@ -8,3 +8,5 @@ other = "关闭"
 other = "阈值"
 [404]
 other = "页面不存在"
+[loading]
+other = "加载中"

i18n/zh-hk.toml

@@ -8,3 +8,5 @@ other = "關閉"
 other = "閾值"
 [404]
 other = "找不到頁面"
+[loading]
+other = "載入中"

i18n/zh-mo.toml

@@ -8,3 +8,5 @@ other = "關閉"
 other = "閾值"
 [404]
 other = "找不到頁面"
+[loading]
+other = "載入中"

i18n/zh-sg.toml

@@ -8,3 +8,5 @@ other = "关闭"
 other = "阈值"
 [404]
 other = "页面不存在"
+[loading]
+other = "加载中"

i18n/zh-tw.toml

@@ -8,3 +8,5 @@ other = "關閉"
 other = "閾值"
 [404]
 other = "找不到頁面"
+[loading]
+other = "載入中"

layouts/404.html

@@ -1,10 +1,4 @@
 {{- define "main" -}}
-  {{- $params := .Scratch.Get "params" -}}
-  {{- $currentPage := . -}}
-  {{- with partial "function/currentMenuItem.html" . -}}
-    {{- partial "resources/imageJSON.html" (dict "Path" .DirName "Page" $currentPage) -}}
-    <script>document.getElementById("main").setAttribute("currentMenuItemIndex", "{{- (sub .ID 1) -}}")</script>
-  {{- end -}}
   <div class="container">
     {{- partial "nav.html" . -}}
   </div>

layouts/_default/baseof.html

@@ -3,11 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{{ site.Title }}</title>
-    {{- partial "head/link.html" -}}
-    {{- partial "head/meta.html" -}}
-    {{- partial "head/seo.html" -}}
-    {{- partial "head/favicon.html" -}}
+    {{- partial "head/link.html" . -}}
+    {{- partial "head/meta.html" . -}}
+    {{- partial "head/seo.html" . -}}
+    {{- partial "head/favicon.html" . -}}
   </head>
   <body lang="{{- site.LanguageCode -}}">
     <div id="main">

layouts/_default/single.html

@@ -1,19 +1,14 @@
 {{- define "main" -}}
-  {{- $params := .Scratch.Get "params" -}}
-  {{- $currentPage := . -}}
-  {{- with partial "function/currentMenuItem.html" . -}}
-    {{- partial "resources/imageJSON.html" (dict "Path" .DirName "Page" $currentPage) -}}
-    <script>
-      document.getElementById("main").setAttribute("currentMenuItemIndex", "{{- (sub .ID 1) -}}")
-      document.getElementById("main").setAttribute("nextText", "{{- i18n "next" -}}")
-      document.getElementById("main").setAttribute("prevText", "{{- i18n "prev" -}}")
-      document.getElementById("main").setAttribute("closeText", "{{- i18n "close" -}}")
-   </script>
-  {{- end -}}
+  <script>
+    document.getElementById("main").setAttribute("nextText", "{{- i18n "next" -}}")
+    document.getElementById("main").setAttribute("prevText", "{{- i18n "prev" -}}")
+    document.getElementById("main").setAttribute("closeText", "{{- i18n "close" -}}")
+    document.getElementById("main").setAttribute("loadingText", "{{- i18n "loading" -}}")
+  </script>
   <div class="container">
     {{- partial "nav.html" . -}}
+    <article class="info">
+      {{ .Content }}
+    </article>
   </div>
-  <article class="info">
-    {{ .Content }}
-  </article>
 {{- end -}}

layouts/_default/single.json

@@ -1,10 +1,9 @@
-{{- $Page := .Page -}}
+{{- $context := . -}}
 {{- $params := .Page.Params | merge .Site.Params.Page -}}
 
-{{- $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 -}}
@@ -14,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)
@@ -26,5 +25,7 @@
       )
     -}}
   {{- end -}}
-    <script id="imagesSource" type="application/json">{{ $Page.Scratch.Get "img" | jsonify | safeJS }}</script>
+    {{ $context.Scratch.Get "img" | jsonify }}
+{{- else -}}
+[]
 {{- end -}}

layouts/partials/function/currentMenuItem.html

@@ -1,15 +1,17 @@
 {{- $currentPage := . -}}
 
-{{- $dirName := "" -}}
-{{- $id := -1 -}}
+{{- $identifier := "" -}}
+{{- $title := "" -}}
+{{- $weight := -1 -}}
 
 {{- range site.Menus.main -}}
   {{ $menu_item_url := .URL | relLangURL }}
   {{ $page_url:= $currentPage.RelPermalink | relLangURL }}
   {{ if eq $menu_item_url $page_url }}
-    {{- $dirName = .Identifier -}}
-    {{- $id = .Weight -}}
+    {{- $identifier = .Identifier -}}
+    {{- $title = .Title -}}
+    {{- $weight = .Weight -}}
   {{- end -}}
 {{- end -}}
 
-{{- return (dict "DirName" $dirName "ID" $id) -}}
+{{- return (dict "Identifier" $identifier "Title" $title "Weight" $weight) -}}

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/head/link.html

@@ -8,7 +8,7 @@
 {{- partial "plugin/style.html" $style -}}
 
 {{/* main style */}}
-{{- if site.Params.bundled -}}
+{{- if (site.Params.bundled | default true) -}}
   {{- $style := dict "Link" "/bundled/css/style.min.css" "Defer" true -}}
   {{- partial "plugin/style.html" $style -}}
 {{- else -}}

layouts/partials/head/meta.html

@@ -1,9 +1,22 @@
-<meta name="Description" content="{{- site.Params.description -}}" />
-<meta
-  name="application-name"
-  content="{{- .Site.Params.app.title | default site.Title -}}"
-/>
-<meta
-  name="apple-mobile-web-app-title"
-  content="{{- .Site.Params.app.title | default site.Title -}}"
-/>
+{{/* Title */}}
+{{- $page_title := "" -}}
+{{- with partial "function/currentMenuItem.html" . -}}
+  {{ $page_title = printf "%s" site.Title | printf "%s%s" " | " | printf "%s%s" .Title | printf "%s" }}
+{{- end -}}
+<title>{{ $page_title }}</title>
+
+{{/* Basic */}}
+<meta name="Description" content="{{ site.Params.description }}" />
+<meta name="application-name" content="{{ $page_title }}" />
+<meta name="apple-mobile-web-app-title" content="{{ $page_title }}" />
+
+{{/* Opengraph */}}
+<meta property="og:title" content="{{ $page_title }}" />
+<meta name="twitter:title" content="{{ $page_title }}" />
+<meta property="og:type" content="website" />
+<meta property="og:url" content="{{ .Permalink }}" />
+<meta property="og:description" content="{{ site.Params.description }}" />
+<meta name="twitter:description" content="{{ site.Params.description }}" />
+
+{{/* Generator */}}
+{{ hugo.Generator }}

layouts/partials/nav.html

@@ -4,19 +4,39 @@
   </div>
   <div class="links">
     {{- $index := 0 -}}
+    {{- $currentIndex := -1 -}}
+    {{- with partial "function/currentMenuItem.html" . -}}
+      {{- $currentIndex = sub .Weight 1 -}}
+    {{- end -}}
     {{- $menus := .Site.Menus.main -}}
     {{- $len := len $menus }}
     {{- range $menus -}}
       {{- $url := .URL | relURL -}}
       {{- if eq (add $index 1) $len -}}
-        <a href="{{- .URL | relURL -}}" class="link">{{- .Title -}}</a>
+        <a
+          href="{{- .URL | relURL -}}"
+          class="link{{- if eq $index $currentIndex -}}
+            {{- printf " current" -}}
+          {{- end -}}"
+          >{{- .Title -}}</a
+        >
       {{- else -}}
-        <a href="{{- .URL | relURL -}}" class="link">{{- .Title -}}</a>,&nbsp
+        <a
+          href="{{- .URL | relURL -}}"
+          class="link{{- if eq $index $currentIndex -}}
+            {{- printf " current" -}}
+          {{- end -}}"
+          >{{- .Title -}}</a
+        >,&nbsp
       {{- end -}}
       {{- $index = add $index 1 -}}
     {{- 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>
@@ -26,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>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bridget",
-  "version": "v0.0.2",
+  "version": "v1.0.0",
   "description": "bridget theme source file",
   "packageManager": "pnpm@8.10.2",
   "private": true,
@@ -9,7 +9,7 @@
     "lint": "eslint . --fix && prettier --write .",
     "lint:check": "eslint . && prettier . --check",
     "dev": "run-p rollup:dev hugo:dev",
-    "build": "rm -f ./static/bundled/js/* && run-s rollup:build hugo:build && yes | cp -rf ./exampleSite/public/css/* ./static/bundled/css",
+    "build": "rm -f ./static/bundled/js/* && run-s rollup:build hugo:build && yes | cp -rf ./exampleSite/public/css/*.css ./static/bundled/css",
     "server": "run-p rollup:server hugo:server",
     "rollup:build": "rollup -c --environment BUILD:production",
     "rollup:server": "rollup -c --watch --environment BUILD:production",
@@ -37,29 +37,29 @@
   },
   "homepage": "https://github.com/Sped0n/bridget#readme",
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.5",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
-    "eslint-config-standard-with-typescript": "^39.1.1",
+    "eslint-config-standard-with-typescript": "^43.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-n": "^16.3.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "3.0.3",
+    "prettier": "3.2.4",
     "prettier-plugin-go-template": "^0.0.15",
     "prettier-plugin-organize-imports": "^3.2.4",
-    "rollup": "^4.3.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.3"
   },
   "dependencies": {
-    "gsap": "^3.12.2",
-    "swiper": "^11.0.4"
+    "gsap": "^3.12.5",
+    "swiper": "^11.0.5",
+    "rollup": "^4.9.6",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6"
   }
 }

static/bundled/js/U1UNkq.js

@@ -1 +0,0 @@
-import{l as e,c as t,W as n,s as a,i as s,a as i,d as o,b as c}from"./main.js";let r=[],d={x:0,y:0};const g=new n([]),l=new n(!1),m=new n(!1),u=new n(!1);let h,p,f=!1;function v(){return g.get().map((e=>r[e.i]))}function y(){const e=v().slice(-a.get().trailLength);return e.slice(0,e.length-1)}function w(){const e=v();return e[e.length-1]}function I(){const e=a.get(),t=[];for(let n=0;n<7;n++)t.push(r[s(e.index+n,e.length)]);return t}function x(){const e=a.get();return r[s(e.index,e.length)]}function E(){const e=a.get();return r[o(e.index,e.length)]}function L(e){if(l.get()||m.get()||!f)return;const t={x:e.clientX,y:e.clientY};if(Math.hypot(t.x-d.x,t.y-d.y)>a.get().threshold){d=t,i();const e={i:a.get().index,...t};g.set([...g.get(),e].slice(-a.get().length))}}function W(){if(m.get()||!f)return;l.set(!0),m.set(!0),k([w(),x(),E()]);const e=h.timeline();e.to(y(),{y:"+=20",ease:p.easeIn,stagger:.075,duration:.3,delay:.1,opacity:0}),e.to(w(),{x:0,y:0,ease:p.easeInOut,duration:.7,delay:.3}),e.to(w(),{delay:.1,scale:1,ease:p.easeInOut}),e.then((()=>{m.set(!1)})).catch((e=>{console.log(e)}))}function H(){if(m.get()||!f)return;l.set(!1),m.set(!0),N([w()]),N(y());const e=h.timeline();e.to(w(),{scale:.6,duration:.6,ease:p.easeInOut}),e.to(w(),{delay:.3,duration:.7,ease:p.easeInOut,x:g.get()[g.get().length-1].x-window.innerWidth/2,y:g.get()[g.get().length-1].y-window.innerHeight/2}),e.to(y(),{y:"-=20",ease:p.easeOut,stagger:-.1,duration:.3,opacity:1}),e.then((()=>{m.set(!1)})).catch((e=>{console.log(e)}))}function k(e){e.forEach((e=>{e.src=e.dataset.hiUrl,e.height=parseInt(e.dataset.hiImgH),e.width=parseInt(e.dataset.hiImgW)}))}function N(e){e.forEach((e=>{e.src=e.dataset.loUrl,e.height=parseInt(e.dataset.loImgH),e.width=parseInt(e.dataset.loImgW)}))}const b=document.createElement("div"),A=document.createElement("div");function O(e){const t=e.clientX,n=e.clientY;b.style.transform=`translate3d(${t}px, ${n}px, 0)`}function U(e){A.innerText=e}const T=document.getElementById("main"),S=[T.getAttribute("prevText"),T.getAttribute("closeText"),T.getAttribute("nextText")];function B(e){e===S[0]?$():e===S[1]?H():Y()}function X(e){if(!l.get()&&!m.get())switch(e.key){case"ArrowLeft":$();break;case"Escape":H();break;case"ArrowRight":Y()}}function Y(){m.get()||(g.set(g.get().map((e=>({...e,i:s(e.i,a.get().length)})))),i())}function $(){m.get()||(g.set(g.get().map((e=>({...e,i:o(e.i,a.get().length)})))),c())}function j(n){b.className="cursor",A.className="cursorInner",b.append(A),t.append(b),window.addEventListener("mousemove",O,{passive:!0}),u.addWatcher((e=>{e?b.classList.add("active"):b.classList.remove("active")})),function(n){!function(e){const n=document.createElement("div");n.className="stage";for(const t of e){const e=document.createElement("img");e.height=t.loImgH,e.width=t.loImgW,e.dataset.hiUrl=t.hiUrl,e.dataset.hiImgH=t.hiImgH.toString(),e.dataset.hiImgW=t.hiImgW.toString(),e.dataset.loUrl=t.loUrl,e.dataset.loImgH=t.loImgH.toString(),e.dataset.loImgW=t.loImgW.toString(),e.alt=t.alt,n.append(e)}t.append(n)}(n);const s=document.getElementsByClassName("stage").item(0);r=Array.from(s.getElementsByTagName("img")),s.addEventListener("click",(()=>{W()})),s.addEventListener("keydown",(()=>{W()})),window.addEventListener("mousemove",L,{passive:!0}),l.addWatcher((e=>{u.set(e&&!m.get())})),m.addWatcher((e=>{u.set(l.get()&&!e)})),g.addWatcher((e=>{!function(){const e=v();0!==e.length&&f&&(N(I()),h.set(e,{x:e=>g.get()[e].x-window.innerWidth/2,y:e=>g.get()[e].y-window.innerHeight/2,opacity:e=>e+1+a.get().trailLength<=g.get().length?0:1,zIndex:e=>e,scale:.6}),l.get()&&(N(v()),k([w()]),h.set(r,{opacity:0}),h.set(w(),{opacity:1,x:0,y:0,scale:1})))}()})),N(I()),window.addEventListener("mousemove",(()=>{e().then((e=>{h=e[0],p=e[1],f=!0})).catch((e=>{console.log(e)}))}),{once:!0,passive:!0})}(n),function(){const e=document.createElement("div");e.className="navOverlay";for(const t of S){const n=document.createElement("div");n.className="overlay",n.addEventListener("click",(()=>{B(t)}),{passive:!0}),n.addEventListener("keydown",(()=>{B(t)}),{passive:!0}),n.addEventListener("mouseover",(()=>{U(t)}),{passive:!0}),n.addEventListener("focus",(()=>{U(t)}),{passive:!0}),e.append(n)}u.addWatcher((()=>{u.get()?e.classList.add("active"):e.classList.remove("active")})),t.append(e),window.addEventListener("keydown",X,{passive:!0})}()}export{j as initDesktop};

static/bundled/js/fRwBqI.js

@@ -1 +0,0 @@
-import{W as e,s as t,e as n,l as a,f as s,g as c,h as o,j as l,c as m,o as i,k as d}from"./main.js";const r=new e(!1);let p,u,g,h;const E=new e(!1);let y,v,f,N=-1,w=[],x=[],I=[],B=!1;function T(){n.set(!0),I[t.get().index].scrollIntoView({block:"center",behavior:"auto"}),v.to(u,{y:"100%",ease:f.easeInOut,duration:1}),v.to(g,{opacity:0,duration:1.2,delay:.4})}function C(){const e=[];e.push(x[h.activeIndex]),e.push(x[Math.min(h.activeIndex+1,h.slides.length)]),e.push(x[Math.max(h.activeIndex-1,0)]);for(const t of e)t.src=t.dataset.src}let L=[];function k(e){c(e),!E.get()&&B&&(E.set(!0),C(),v.to(g,{opacity:1,duration:1}),v.to(u,{y:0,ease:f.easeInOut,duration:1,delay:.4}),setTimeout((()=>{n.set(!1),E.set(!1)}),1200))}function A(e){(function(e){!function(e){const t=document.createElement("div");t.className="collection";for(const[n,a]of e.entries()){const e=0!==n?d(-25,25):0,s=0!==n?d(-30,30):0,c=document.createElement("img");c.dataset.src=a.loUrl,c.height=a.loImgH,c.width=a.loImgW,c.alt=a.alt,c.style.transform=`translate3d(${e}%, ${s-50}%, 0)`,t.append(c)}m.append(t)}(e);const t=document.getElementsByClassName("collection").item(0);r.addWatcher((e=>{e?t.classList.remove("hidden"):t.classList.add("hidden")})),L=Array.from(t.getElementsByTagName("img")),L.forEach(((e,t)=>{e.addEventListener("click",(()=>{k(t)}),{passive:!0}),e.addEventListener("keydown",(()=>{k(t)}),{passive:!0}),i(e,(()=>{for(let e=0;e<5;e++){const n=t+e;n<0||n>L.length-1||(L[n].src=L[n].dataset.src)}}))}))})(e),function(e){!function(e){const t=document.createElement("div");t.className="swiper-wrapper";for(const n of e){const e=document.createElement("div");e.className="swiper-slide";const a=document.createElement("img");a.dataset.src=n.hiUrl,a.height=n.hiImgH,a.width=n.hiImgW,a.alt=n.alt,e.append(a),t.append(e)}const n=document.createElement("div");n.className="galleryInner",n.append(t);const a=document.createElement("div");a.insertAdjacentHTML("afterbegin",'<span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>\n    <span>/</span>\n    <span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>');const s=document.createElement("div"),c=document.getElementById("main")?.getAttribute("closeText");s.innerText=l(c),s.addEventListener("click",(()=>{T()}),{passive:!0}),s.addEventListener("keydown",(()=>{T()}),{passive:!0});const o=document.createElement("div");o.className="nav",o.append(a,s);const i=document.createElement("div");i.className="gallery",i.append(n),i.append(o);const d=document.createElement("div");d.className="curtain",m.append(i,d)}(e),w=Array.from(document.getElementsByClassName("nav").item(0)?.getElementsByClassName("num")??[]),p=document.getElementsByClassName("galleryInner").item(0),u=document.getElementsByClassName("gallery").item(0),g=document.getElementsByClassName("curtain").item(0),x=Array.from(u.getElementsByTagName("img")),I=Array.from(document.getElementsByClassName("collection").item(0)?.getElementsByTagName("img")??[]),t.addWatcher((()=>{const e=t.get();var n;e.index!==N&&(n=e.index,C(),h.slideTo(n,0),function(){const e=o(t.get().index+1),n=o(t.get().length);w.forEach(((t,a)=>{t.innerText=a<4?e[a]:n[a-4]}))}(),N=e.index)})),r.addWatcher((e=>{e&&n.set(!0)})),window.addEventListener("touchstart",(()=>{a().then((e=>{v=e[0],f=e[1]})).catch((e=>{console.log(e)})),s().then((e=>{y=e,h=new y(p,{spaceBetween:20}),h.on("slideChange",(({realIndex:e})=>{c(e)}))})).catch((e=>{console.log(e)})),B=!0}),{once:!0,passive:!0}),r.set(!0)}(e)}export{A as initMobile};

static/bundled/js/main.js

@@ -1 +1 @@
-function t(t,e){return(t+1)%e}function e(t,e){return(t+e-1)%e}function n(t){return("0000"+t.toString()).slice(-4)}function s(t,e){return Math.floor(Math.random()*(e-t+1))+t}function o(t,e){new IntersectionObserver(((n,s)=>{n.forEach((n=>{n.intersectionRatio>0&&(e(t),s.disconnect())}))})).observe(t)}function r(t){return t.charAt(0).toUpperCase()+t.slice(1)}async function i(){const t=await import("./-BhIIs.js");return[t.gsap,t.Power3]}async function a(){return(await import("./ep7_9p.js")).Swiper}class c{constructor(t){this.obj=t,this.watchers=[]}get(){return this.obj}set(t){this.obj=t,this.watchers.forEach((t=>{t(this.obj)}))}addWatcher(t){this.watchers.push(t)}}const l=new c(!0);let h;const d=[{threshold:20,trailLength:20},{threshold:40,trailLength:10},{threshold:80,trailLength:5},{threshold:140,trailLength:5},{threshold:200,trailLength:5}],m=new c({index:-1,length:0,threshold:d[E()].threshold,trailLength:d[E()].trailLength});function u(t){const e=m.get();e.index=t,m.set(e)}function g(){const e=m.get();e.index=t(e.index,e.length),m.set(e)}function f(){const t=m.get();t.index=e(t.index,t.length),m.set(t)}function x(t,e){const n=d.findIndex((e=>t.threshold===e.threshold))+e;if(n<0||n>=d.length)return t;sessionStorage.setItem("thresholdsIndex",n.toString());const s=d[n];return{...t,...s}}function E(){const t=sessionStorage.getItem("thresholdsIndex");return null===t?2:parseInt(t)}const p=document.getElementsByClassName("threshold").item(0),y=Array.from(p.getElementsByClassName("num")),w=p.getElementsByClassName("dec").item(0),I=p.getElementsByClassName("inc").item(0),L=document.getElementsByClassName("index").item(0),b=Array.from(L.getElementsByClassName("num")),B=document.getElementsByClassName("links").item(0),C=Array.from(B.getElementsByClassName("link")),N=document.getElementById("main")?.getAttribute("currentMenuItemIndex");for(const[t,e]of C.entries())t===parseInt(N)&&(e.classList.add("current"),0!==t&&(document.title=e.innerText+" | "+document.title));function j(t){y.forEach(((e,n)=>{e.innerText=t[n]}))}function S(t,e){b.forEach(((n,s)=>{n.innerText=s<4?t[s]:e[s-4]}))}h=document.getElementsByClassName("container").item(0),l.addWatcher((t=>{t?h.classList.remove("disableScroll"):h.classList.add("disableScroll")}));const v=function(){const t=document.getElementById("imagesSource");return null===t?[]:JSON.parse(t.textContent).sort(((t,e)=>t.index<e.index?-1:1))}();!function(t){const e=m.get();e.length=t,x(e,0),m.set(e)}(v.length),function(){const t=m.get();j(n(t.threshold)),S(n(t.index+1),n(t.length)),m.addWatcher((t=>{S(n(t.index+1),n(t.length)),j(n(t.threshold))})),w.addEventListener("click",(()=>{!function(){let t=m.get();t=x(t,-1),m.set(t)}()}),{passive:!0}),I.addEventListener("click",(()=>{!function(){let t=m.get();t=x(t,1),m.set(t)}()}),{passive:!0})}(),v.length>0&&(window.matchMedia("(hover: none)").matches?import("./fRwBqI.js").then((t=>{t.initMobile(v)})).catch((t=>{console.log(t)})):import("./U1UNkq.js").then((t=>{t.initDesktop(v)})).catch((t=>{console.log(t)})));export{c as W,g as a,f as b,h as c,e as d,l as e,a as f,u as g,n as h,t as i,r as j,s as k,i as l,o,m as s};
+function t(t,e){return(t+1)%e}function e(t,e){return(t+e-1)%e}function n(t){return("0000"+t.toString()).slice(-4)}function s(t,e){return Math.floor(Math.random()*(e-t+1))+t}function o(t,e){new IntersectionObserver(((n,s)=>{n.forEach((n=>{n.intersectionRatio>0&&(e(t),s.disconnect())}))})).observe(t)}function r(t){return t.charAt(0).toUpperCase()+t.slice(1)}async function a(){const t=await import("./EY5BO_.js");return[t.gsap,t.Power3]}async function i(){return(await import("./f6JTi3.js")).Swiper}class c{constructor(t){this.obj=t,this.watchers=[]}get(){return this.obj}set(t){this.obj=t,this.watchers.forEach((t=>{t(this.obj)}))}addWatcher(t){this.watchers.push(t)}}const h=new c(!0);let l;const d=[{threshold:20,trailLength:20},{threshold:40,trailLength:10},{threshold:80,trailLength:5},{threshold:140,trailLength:5},{threshold:200,trailLength:5}],g=new c({index:-1,length:0,threshold:d[w()].threshold,trailLength:d[w()].trailLength});function u(t){const e=g.get();e.index=t,g.set(e)}function m(){const e=g.get();e.index=t(e.index,e.length),g.set(e)}function f(){const t=g.get();t.index=e(t.index,t.length),g.set(t)}function p(t,e){const n=d.findIndex((e=>t.threshold===e.threshold))+e;if(n<0||n>=d.length)return t;sessionStorage.setItem("thresholdsIndex",n.toString());const s=d[n];return{...t,...s}}function w(){const t=sessionStorage.getItem("thresholdsIndex");return null===t?2:parseInt(t)}const x=document.getElementsByClassName("threshold").item(0),y=Array.from(x.getElementsByClassName("num")),E=x.getElementsByClassName("dec").item(0),j=x.getElementsByClassName("inc").item(0),L=document.getElementsByClassName("index").item(0),b=Array.from(L.getElementsByClassName("num"));l=document.getElementsByClassName("container").item(0),h.addWatcher((t=>{t?l.classList.remove("disableScroll"):l.classList.add("disableScroll")}));const v=await async function(){try{const t=await fetch(`${window.location.href}index.json`,{headers:{Accept:"application/json"}});return(await t.json()).sort(((t,e)=>t.index<e.index?-1:1))}catch(t){return[]}}();!function(t){const e=g.get();e.length=t,p(e,0),g.set(e)}(v.length),g.addWatcher((t=>{var e,s,o;e=n(t.index+1),s=n(t.length),b.forEach(((t,n)=>{t.innerText=n<4?e[n]:s[n-4]})),o=n(t.threshold),y.forEach(((t,e)=>{t.innerText=o[e]}))})),E.addEventListener("click",(()=>{!function(){let t=g.get();t=p(t,-1),g.set(t)}()}),{passive:!0}),j.addEventListener("click",(()=>{!function(){let t=g.get();t=p(t,1),g.set(t)}()}),{passive:!0}),v.length>0&&(window.matchMedia("(hover: none)").matches?import("./x7en59.js").then((t=>{t.initMobile(v)})).catch((t=>{console.log(t)})):import("./xwx9uS.js").then((t=>{t.initDesktop(v)})).catch((t=>{console.log(t)})));export{c as W,m as a,f as b,l as c,e as d,h as e,i as f,u as g,n as h,t as i,r as j,s as k,a as l,o,g as s};

static/bundled/js/x7en59.js

@@ -0,0 +1 @@
+import{W as e,s as t,e as n,l as a,f as s,g as c,h as o,j as d,c as i,o as l,k as m}from"./main.js";const r=new e(!1);let p,u,g,h;const E=new e(!1);let v,y,f,N=-1,x=[],I=[],w=[],B=!1;function L(){n.set(!0),w[t.get().index].scrollIntoView({block:"center",behavior:"auto"}),y.to(u,{y:"100%",ease:f.easeInOut,duration:1}),y.to(g,{opacity:0,duration:1.2,delay:.4})}function T(){const e=[];e.push(I[h.activeIndex]),e.push(I[Math.min(h.activeIndex+1,h.slides.length)]),e.push(I[Math.max(h.activeIndex-1,0)]);for(const t of e)t.src=t.dataset.src}let C=[];function A(e){c(e),!E.get()&&B&&(E.set(!0),T(),y.to(g,{opacity:1,duration:1}),y.to(u,{y:0,ease:f.easeInOut,duration:1,delay:.4}),setTimeout((()=>{n.set(!1),E.set(!1)}),1200))}function k(e){(function(e){!function(e){const t=document.createElement("div");t.className="collection";for(const[n,a]of e.entries()){const e=0!==n?m(-25,25):0,s=0!==n?m(-30,30):0,c=document.createElement("img");c.dataset.src=a.loUrl,c.height=a.loImgH,c.width=a.loImgW,c.alt=a.alt,c.style.transform=`translate3d(${e}%, ${s-50}%, 0)`,t.append(c)}i.append(t)}(e);const t=document.getElementsByClassName("collection").item(0);r.addWatcher((e=>{e?t.classList.remove("hidden"):t.classList.add("hidden")})),C=Array.from(t.getElementsByTagName("img")),C.forEach(((e,t)=>{e.addEventListener("click",(()=>{A(t)}),{passive:!0}),e.addEventListener("keydown",(()=>{A(t)}),{passive:!0}),l(e,(()=>{for(let e=0;e<5;e++){const n=t+e;n<0||n>C.length-1||(C[n].src=C[n].dataset.src)}}))}))})(e),function(e){!function(e){const t=document.createElement("div");t.className="swiper-wrapper";for(const n of e){const e=document.createElement("div");e.className="swiper-slide";const a=document.createElement("div");a.className="loadingText",a.innerText=document.getElementById("main")?.getAttribute("loadingText")+"...";const s=document.createElement("img");s.dataset.src=n.hiUrl,s.height=n.hiImgH,s.width=n.hiImgW,s.alt=n.alt,s.classList.add("hide"),s.addEventListener("load",(()=>{s.classList.remove("hide"),a.classList.add("hide")}),{once:!0,passive:!0});const c=document.createElement("div");c.className="slideContainer",c.append(s),c.append(a),e.append(c),t.append(e)}const n=document.createElement("div");n.className="galleryInner",n.append(t);const a=document.createElement("div");a.insertAdjacentHTML("afterbegin",'<span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>\n    <span>/</span>\n    <span class="num"></span><span class="num"></span><span class="num"></span><span class="num"></span>');const s=document.createElement("div"),c=document.getElementById("main")?.getAttribute("closeText");s.innerText=d(c),s.addEventListener("click",(()=>{L()}),{passive:!0}),s.addEventListener("keydown",(()=>{L()}),{passive:!0});const o=document.createElement("div");o.className="nav",o.append(a,s);const l=document.createElement("div");l.className="gallery",l.append(n),l.append(o);const m=document.createElement("div");m.className="curtain",i.append(l,m)}(e),x=Array.from(document.getElementsByClassName("nav").item(0)?.getElementsByClassName("num")??[]),p=document.getElementsByClassName("galleryInner").item(0),u=document.getElementsByClassName("gallery").item(0),g=document.getElementsByClassName("curtain").item(0),I=Array.from(u.getElementsByTagName("img")),w=Array.from(document.getElementsByClassName("collection").item(0)?.getElementsByTagName("img")??[]),t.addWatcher((()=>{const e=t.get();var n;e.index!==N&&(n=e.index,T(),h.slideTo(n,0),function(){const e=o(t.get().index+1),n=o(t.get().length);x.forEach(((t,a)=>{t.innerText=a<4?e[a]:n[a-4]}))}(),N=e.index)})),r.addWatcher((e=>{e&&n.set(!0)})),window.addEventListener("touchstart",(()=>{a().then((e=>{y=e[0],f=e[1]})).catch((e=>{console.log(e)})),s().then((e=>{v=e,h=new v(p,{spaceBetween:20}),h.on("slideChange",(({realIndex:e})=>{c(e)}))})).catch((e=>{console.log(e)})),B=!0}),{once:!0,passive:!0}),r.set(!0)}(e)}export{k as initMobile};