Commit Graph

21 Commits

Author SHA1 Message Date
Spedon
0812a5a6b8 feat: loading transition (#277)
* refactor: change hires loader function name

* feat: add loading transition animation and improve performance

* refactor: refactor mutation handling in desktop codebase

- Modify the `initStage` function in `assets/ts/desktop/stage.ts`:
  - Change the `onMutation` callback to accept a single mutation instead of an array of mutations.
  - Update the conditions inside the callback to use `hold` instead of `skip`.
- Modify the `onMutation` function in `assets/ts/desktop/utils.ts`:
  - Change the `callback` parameter to `trigger`.
  - Update the implementation of the function to iterate over each mutation and check if it triggers the `trigger` function. If it does, disconnect the observer and break the loop.

* style: refactor state section and remove unnecessary code

- Remove the declaration of `lastIndex` on line 21
- Add a comment block for the state section
- Add a declaration of `lastIndex` for the state section

* refactor: refactor mobile collection and intersection functions

- Modify the `initCollection` function in `assets/ts/mobile/collection.ts`
- Remove the nested loop in the `initCollection` function
- Modify the `onIntersection` function in `assets/ts/mobile/utils.ts`
- Replace the callback parameter with a trigger parameter in the `onIntersection` function
- Remove the nested loop in the `onIntersection` function

* refactor: refactor Watchable class constructor to include lazy parameter

- Add a second parameter `lazy` in the constructor of the `Watchable` class in `globalUtils.ts`
- Set the default value of `lazy` to `true` in the constructor
- Add a condition to check if `e` is equal to `this.obj` and `this.lazy` is `true` to return in `watch`
- Delete the previous constructor definition in the `Watchable` class in `globalUtils.ts`

* fix: set state's lazy param to false

* refactor: refactor third party lib import
2024-02-06 23:12:44 +08:00
Spedon
5132e36e87 fix: fix navItems sequence (#262) 2024-02-03 23:30:42 +08:00
Spedon
1f65b08b56 refactor: refactor the pile of crap I wrote before 🤡 (#259)
* feat: refactor file structure and imports in mobile and desktop components

- Removed the import of `scrollable` from `assets/ts/mobile/scroll.ts`
- Renamed `assets/ts/mobile/mounted.ts` to `assets/ts/mobile/state.ts`
- Changed the import of `active` from `./stage` to `./state` in `assets/ts/desktop/customCursor.ts`
- Changed the import of `active` from `../state` to `../globalState` in `assets/ts/desktop/stage.ts`
- Changed the import of `active` from `./stage` to `./state` in `assets/ts/desktop/stageNav.ts`
- Renamed `assets/ts/state.ts` to `assets/ts/globalState.ts`
- Created a new file `assets/ts/desktop/state.ts`
- Added the interface `HistoryItem` to `assets/ts/desktop/state.ts`
- Added the variables `cordHist`, `isOpen`, `active`, and `isLoading` to `assets/ts/desktop/state.ts`
- Deleted the function `loader` from `assets/ts/desktop/stage.ts` and replaced it with `setLoaderForImage`
- Deleted the import of `./stage` from `assets/ts/desktop/stageNav.ts`
- Added the import of `minimizeImage` from `./stage` in `assets/ts/desktop/stageNav.ts`
- Deleted the import of `./mounted` from `assets/ts/mobile/collection.ts`
- Changed the import of `mounted` from `./mounted` to `./state` in `

* refactor: refactor the `onVisible` function to improve performance

- Modify the type of the `onVisible` function parameter `T` to extend `HTMLElement`
- Change the `entries.forEach` loop in the `onVisible` function to `entries.every`

* feat: add new function for detecting opacity changes in element

- Add a new function `onOpacityOne` in `assets/ts/utils.ts`
- The function uses a `MutationObserver` to check for opacity changes on an element
- When the element's opacity reaches `1`, the provided callback function is called
- The `MutationObserver` is disconnected after the callback is executed

* refactor: refactor function names and parameters in intersection and mutation observers

- Change the function name `onVisible` to `onIntersection`
- Modify the `callback` parameter in the `onIntersection` function to accept `IntersectionObserverEntry[]` and `IntersectionObserver` parameters
- Remove the code block that checks for intersection ratio and immediately calls the `callback` function in the `onIntersection` function
- Modify the function name `onOpacityOne` to `onMutation`
- Modify the `callback` parameter in the `onMutation` function to accept `MutationRecord[]` and `MutationObserver` parameters
- Add a default value for the `observeOptions` parameter in the `onMutation` function

* refactor: refine preload logic on both mobile and desktop

* refactor: refactor import statements and add new files

- The import statement for `Watchable` in `assets/ts/globalState.ts` has been changed from `../utils` to `../globalUtils`
- The import statement for `Watchable` in `assets/ts/desktop/state.ts` has been changed from `../utils` to `../globalUtils`
- The import statement for `decrement` and `increment` in `assets/ts/desktop/stageNav.ts` has been changed from `../utils` to `../globalUtils`
- A new file `utils.ts` has been added in the `assets/ts/desktop` directory
- The import statements for `getRandom`, `onIntersection`, and `type MobileImage` in `assets/ts/mobile/collection.ts` have been changed from `../utils` to `./utils`
- The `imgs` array in `assets/ts/mobile/collection.ts` has been changed from an array of `HTMLImageElement` to an array of `MobileImage`
- The import statements for `expand`, `loadGsap`, `loadSwiper`, and `removeDuplicates` in `assets/ts/mobile/gallery.ts` have been changed from `../utils` to `../globalUtils`
- The import statement for `type MobileImage` in `assets/ts/mobile/gallery.ts` has been changed from `./utils` to `../mobile/utils`
- The `galleryLoadImages` function in `assets/ts/mobile/gallery.ts` has been removed
- A new file `utils.ts`

* refactor: refactor swiper import and functions in mobile and global utils

* refactor: refactor navigation and image loading logic in desktop and mobile

* refactor: remove print function and optimize removeDuplicates return

* refactor: update text variable assignments and attributes

* refactor: update variable types in galleryImages and collectionImages in mobile/gallery.ts

* refactor: refactor variable types for consistency with naming conventions

* refactor: update animation durations and types in gallery functions

* refactor: refactor image loading logic and add console logs

* refactor: refactor sass hierarchy

* refactor: remove console logs in multiple files
2024-02-03 23:17:16 +08:00
Spedon
9fa1b718b8 feat: add loading indicator for desktop and mobile (#244)
* feat: add new CSS rule for hiding elements

- Add a new CSS rule for the class "hide" with a display property set to "none".

* feat: refactor image loading and navigation logic on desktop

- Add a line of code in `assets/ts/desktop/stage.ts` to reset the `src` of `elc` and add a class `hide` to it
- Add a line of code in `assets/ts/desktop/stage.ts` to call the `loader` function with `elc` as an argument
- Add a function `loader` in `assets/ts/desktop/stage.ts` to handle image loading and error events
- Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to watch the `isLoading` state and set custom cursor accordingly
- Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to handle close click events by calling the `handleClick` function and setting `isLoading` state to false
- Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to handle previous/next click events by calling the `handleClick` function only if `isLoading` is false
- Modify the `initStageNav` function in `assets/ts/desktop/stageNav.ts` to handle previous/next hover events by setting `loadedText` and updating custom cursor depending on `isLoading` state

* feat: refactor createGallery function and enhance loading functionality on mobile

- Add a loading text element to the gallery.scss file
- Add a loading indicator to the createGallery function in gallery.ts
- Modify the createGallery function in gallery.ts to hide the loading text element on image load
- Move the image element append logic to the parent container in the createGallery function in gallery.ts

* feat: update translations and add new loading translation in i18n files

* chore: remove css source map

* chore: modify build command to ignore css source map

* refactor: remove unnecessary style

* fix: fix desktop cursor text transition bug
2024-01-20 23:34:13 +08:00
Spedon
ebdf2405f0 refactor: remove debug log in stage.ts (#154) 2023-11-13 22:42:34 +08:00
Spedon
c2956b7d4b fix: fix preloading in desktop (#152)
* chore(Geist): bump geist font to v1.0.1

* refactor(_typography.scss): split the CSS lang tag to ensure compatibility with Chromium-based browsers

* refactor(stage.ts): bump up preload count on desktop

* feat(params.toml): add support for user defined resize option

* feat(_fonts.scss): add a new font file to better support fullwidth plus and minus

* refactor(info): update info

* chore(build.yml): update branch name for updating bundled artifacts to include the current date

* chore(package.json): update version from 0.0.1 to v0.0.2 to reflect changes made in the codebase

* feat: refactor initialization process for retrieving and sorting image data

- Modify `main.ts` to use async initialization of resources
- Change the return type of `initResources` function to `Promise<ImageJSON[]>`
- Add try-catch block to handle errors in `initResources` function
- Use fetch API to retrieve image data from `index.json`
- Sort the image data based on the index field

* refactor: update file naming and variable assignments in layouts

- Add new file `exampleSite/config/_default/outputs.toml` with the contents `page = ["HTML", "JSON"]`
- Rename file `layouts/partials/resources/imageJSON.html` to `layouts/_default/single.json`
- Modify variable assignments and references in the `single.json` layou

* chore: remove code that includes imageJSON.html partials in layouts

- Remove the code that includes the "resources/imageJSON.html" partial in the 404.html layout
- Remove the code that includes the "resources/imageJSON.html" partial in the single.html layout

* refactor: add `getElPrev()` and `getElNext()` functions to `hires`

- Add `getElPrev()` and `getElNext()` to the `hires` function call

* refactor: refactor image retrieval for improved accuracy

- Add logging of `c0` variable for debugging
- Change `els.push(imgs[increment(s.index + i, s.length)])` to `els.push(imgs[increment(c0 + i, s.length)])` to retrieve images correctly
- Change `return imgs[increment(s.index, s.length)]` to `return imgs[decrement(c[c.length - 1].i, s.length)]` to retrieve previous element correctly
- Change `return imgs[decrement(s.index, s.length)]` to `return imgs[increment(c[c.length - 1].i, s.length)]` to retrieve next element correctly
2023-11-13 22:19:17 +08:00
Spedon
5394ea20eb fix: now preloading will also work in stageNav (#150)
* chore(Geist): bump geist font to v1.0.1

* refactor(_typography.scss): split the CSS lang tag to ensure compatibility with Chromium-based browsers

* refactor(stage.ts): bump up preload count on desktop

* feat(params.toml): add support for user defined resize option

* feat(_fonts.scss): add a new font file to better support fullwidth plus and minus

* refactor(info): update info

* chore(build.yml): update branch name for updating bundled artifacts to include the current date

* chore(package.json): update version from 0.0.1 to v0.0.2 to reflect changes made in the codebase

* feat: refactor initialization process for retrieving and sorting image data

- Modify `main.ts` to use async initialization of resources
- Change the return type of `initResources` function to `Promise<ImageJSON[]>`
- Add try-catch block to handle errors in `initResources` function
- Use fetch API to retrieve image data from `index.json`
- Sort the image data based on the index field

* refactor: update file naming and variable assignments in layouts

- Add new file `exampleSite/config/_default/outputs.toml` with the contents `page = ["HTML", "JSON"]`
- Rename file `layouts/partials/resources/imageJSON.html` to `layouts/_default/single.json`
- Modify variable assignments and references in the `single.json` layou

* chore: remove code that includes imageJSON.html partials in layouts

- Remove the code that includes the "resources/imageJSON.html" partial in the 404.html layout
- Remove the code that includes the "resources/imageJSON.html" partial in the single.html layout

* refactor: add `getElPrev()` and `getElNext()` functions to `hires`

- Add `getElPrev()` and `getElNext()` to the `hires` function call
2023-11-13 21:14:36 +08:00
Spedon
9c073e98e1 v0.0.2 (#144)
* chore(Geist): bump geist font to v1.0.1

* refactor(_typography.scss): split the CSS lang tag to ensure compatibility with Chromium-based browsers

* refactor(stage.ts): bump up preload count on desktop

* feat(params.toml): add support for user defined resize option

* feat(_fonts.scss): add a new font file to better support fullwidth plus and minus

* refactor(info): update info

* chore(build.yml): update branch name for updating bundled artifacts to include the current date

* chore(package.json): update version from 0.0.1 to v0.0.2 to reflect changes made in the codebase
2023-11-10 21:00:09 +08:00
Sped0n
f4eda42785 feat(i18n): add translations for the new languages (de, es, fr, it, CJK) 2023-11-03 14:19:06 +08:00
Sped0n
8caf13e5d5 fix(stage.ts, collection.ts, gallery.ts, resources.ts): set the alt attribute of the image element to the value of the alt property in the ImageJSON object to improve accessibility and provide alternative text for images. 2023-11-03 09:55:32 +08:00
Sped0n
137b099ace feat(stage.ts): add support for dynamic import of gsap library and initialize gsap and Power3 variables when mousemove event is triggered to improve performance and reduce initial load time 2023-11-03 09:01:20 +08:00
Sped0n
0cc97325c0 fix(stage.ts): add error logging to catch block in expandImage() and minimizeImage() functions for better error handling 2023-11-02 12:28:30 +08:00
Sped0n
dd01dd8bec refactor(utils.ts): add parameter arg0 to addWatcher callback for improved readability 2023-11-02 12:27:58 +08:00
Sped0n
a395513bd6 fix(customCursor.ts): move import statement for active to the top for better organization
fix(customCursor.ts): add return type void to onMouse function for clarity
fix(customCursor.ts): add passive option to window event listener for mousemove to improve performance
fix(stageNav.ts): move import statement for setCustomCursor to the top for better organization
fix(stageNav.ts): add return type void to handleClick function for clarity
fix(stageNav.ts): add return type void to handleKey function for clarity
fix(stageNav.ts): add passive option to overlay event listeners for click, keydown, mouseover, and focus to improve performance
fix(stageNav.ts): add passive option to window event listener for keydown to improve performance
fix(stageNav.ts): add return type void to nextImage function for clarity
fix(stageNav.ts): add return type void to prevImage function for clarity
fix(gallery.ts): move import statement for Swiper to the top for better organization
fix(gallery.ts): add return type void to slideUp function for clarity
fix(gallery.ts): add return type void to initGallery function for clarity
fix(gallery.ts): add passive option to window event listener for touchstart to improve performance
fix(gallery.ts): add return type void to changeSlide function for clarity
fix(gallery.ts): add return type void to scrollToActive function for clarity
fix(gallery.ts): add return type void to createGallery function for clarity
fix(gallery.ts): add passive option to close event listeners for click and keydown to improve performance
fix(gallery.ts): add passive option to overlay event listeners for click, keydown, mouseover, and focus to improve performance
fix(gallery.ts): add passive option to window event listener for touchstart to improve performance
fix(nav.ts): add return type void to initNav function for clarity
fix(utils.ts): add return type number to getRandom function for clarity
fix(utils.ts): add return type void to onVisible function for clarity
fix(utils.ts): add return type void to addWatcher function in Watchable class for clarity
2023-11-01 23:09:02 +08:00
Sped0n
6606dcec93 refactor(stage.ts): extract getElNextFive() function to improve code readability and reusability
refactor(stage.ts): move lores(getElNextFive()) to setPositions() function to ensure images are preloaded before setting positions
refactor(stage.ts): move lores(getElTrail()) to setPositions() function to ensure images are preloaded before setting positions when isOpen is true
refactor(stage.ts): remove redundant lores(imgs) call from minimizeImage() function
refactor(stage.ts): move lores(getElNextFive()) to initStage() function to ensure images are preloaded when stage is initialized
refactor(stage.ts): remove unused e.src assignment in createStage() function
2023-10-31 00:05:43 +08:00
Sped0n
b5aae19c70 feat(stage.ts): add functions to switch between high-resolution and low-resolution images for better image quality and performance 2023-10-30 17:45:46 +08:00
Sped0n
f328d727d5 refactor(stage.ts): reorder imports for better readability and consistency
fix(stage.ts): fix incorrect import order of incIndex and state in stage.ts
2023-10-30 15:54:03 +08:00
Sped0n
2022c7f03a feat(customCursor.scss): add custom cursor styles to improve user experience
refactor(customCursor.ts): remove unused code and optimize custom cursor functionality
refactor(stageNav.ts): remove unused code and optimize stage navigation functionality
refactor(stage.ts): remove unused code and optimize stage functionality
2023-10-29 22:25:36 +08:00
Sped0n
047ec5c630 feat(container.scss): add container styles for fixed position and scrolling behavior
feat(container.ts): create container module to handle scrollable behavior and add/remove disableScroll class

fix(customCursor.ts): update append target for cursor element to use container instead of main

fix(stage.ts): update append target for stage element to use container instead of main

fix(stageNav.ts): update append target for navOverlay element to use container instead of main

feat(main.ts): initialize container module and conditionally initialize stage and stageNav modules based on device type

fix(nav.ts): update references to state module functions to use state.get() instead of getState()
2023-10-29 22:12:06 +08:00
Sped0n
2025a57ae4 fix(customCursor.ts): fix variable declaration and initialization for cursor and cursorInner to improve code readability and maintainability
feat(customCursor.ts): add support for setting custom text for cursorInner to display different cursor text
fix(stage.ts): fix variable declaration and initialization for imgs, last, cordHist, isOpen, isAnimating, and active to improve code readability and maintainability
feat(stage.ts): add support for minimizing image and initialize stage with image JSON data
fix(stageNav.ts): fix variable declaration and initialization for navItems to improve code readability and maintainability
feat(stageNav.ts): add support for handling click and key events for stage navigation
fix(nav.ts): fix variable declaration and initialization for thresholdDiv and indexDispNums to improve code readability and maintainability
feat(nav.ts): initialize nav and update threshold text
2023-10-29 15:09:10 +08:00
Sped0n
a60ff94c7c feat(customCursor.ts): add custom cursor functionality to improve user experience
feat(stage.ts): implement stage functionality to display images and handle mouse events
feat(stageNav.ts): add stage navigation functionality to navigate between images and close the stage
fix(main.ts): fix import paths for customCursor, stage, and stageNav modules
2023-10-29 14:52:43 +08:00