Commit Graph

15 Commits

Author SHA1 Message Date
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
Sped0n
1dc5d62ccf fix(gallery.ts): fix swiper init bug 2023-11-03 16:04:41 +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
cd84d21a99 feat(gallery.ts): add dynamic import for gsap and swiper libraries to improve performance by loading them only when needed 2023-11-03 09:02:06 +08:00
Sped0n
d936f1b272 fix(gallery.ts): solve circular dependency in mobile view 2023-11-02 12:29:39 +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
9d365d8c96 fix(gallery.ts): add { passive: true } option to event listeners for better performance and scrolling behavior 2023-11-02 10:46:38 +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
bffd43c6cc feat(gallery.ts): add support for loading active images when sliding up to improve user experience 2023-10-31 00:06:47 +08:00
Sped0n
68ddbce37b feat(collection.ts): add image preloading functionality to improve performance and user experience 2023-10-31 00:06:14 +08:00
Sped0n
f9af230110 refactor(collection.ts): rename variable 'container' to 'collection' for better clarity and semantics
refactor(collection.ts): update classList manipulation to use 'collection' instead of 'container' for consistency and clarity
2023-10-31 00:03:14 +08:00
Sped0n
071f53071e feat(gallery.ts): change image source to a data attribute and dynamically load it when the image is visible 2023-10-30 17:47:06 +08:00
Sped0n
bd2354e2f5 feat: add new SCSS partials for collection and gallery components
- Added a new SCSS partial `_collection.scss` to define styles for the collection component.
- Added a new SCSS partial `_gallery.scss` to define styles for the gallery component.

The new partials contain styles for the collection and gallery components, including layout, positioning, and animations.

---

feat: add support for gallery functionality in mobile

- Created a new file `gallery.ts` to handle the gallery functionality in the mobile view.
- Added functions `slideUp()` and `slideDown()` to handle the sliding animation of the gallery.
- Initialized the gallery with the provided image data in the `initGallery()` function.
- Added event listeners to update the active slide and index text when the slide is changed.
- Created a helper function `changeSlide()` to change the active slide in the gallery.
- Created a helper function `scrollToActive()` to scroll to the active image in the collection.
- Created a helper function `updateIndexText()` to update the index text in the navigation.
- Created a helper function `createGallery()` to dynamically create the gallery HTML structure.

---

feat: add scrollable flag for mobile view

- Created a new file `scroll.ts` to handle the scrollable flag for the mobile view.
- Added a `scrollable` variable as a Watchable object to control the scrollability of the view.

---

fix: change port variable case from lowercase `port` to uppercase `PORT` to improve semantics

- Changed the variable name `port` to `PORT` in the `server.ts` file to improve code readability and semantics.
- The variable `PORT` is now used to define the port number for the server to listen on.
2023-10-29 22:11:04 +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