Commit Graph

79 Commits

Author SHA1 Message Date
Sped0n
98f2012e9d fix(main.ts): fix imported module and function for correct init 2023-11-03 08:48:31 +08:00
Sped0n
f5ebeead9e fix(nav.ts): fix circular dependency in desktop view 2023-11-02 12:30:13 +08:00
Sped0n
d936f1b272 fix(gallery.ts): solve circular dependency in mobile view 2023-11-02 12:29:39 +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
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
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
1e945353df refactor(state.ts): improve code readability by adding comments and organizing code into sections
feat(state.ts): add nextFive property to state object to store the next five indices for preload
feat(state.ts): add getNextFive function to calculate the next five indices based on the current index and length
2023-10-31 00:04:29 +08:00
Sped0n
102e9aacf7 fix(state.ts): change the increment value in decThreshold function from 1 to -1 to correctly decrease the threshold value 2023-10-31 00:03:59 +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
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
3cbbc5b6da refactor(resources.ts): update ImageJSON interface to include separate properties for low resolution and high resolution image URLs, heights, and widths for better organization and clarity
refactor(imageJSON.html): modify image resizing logic to generate separate low resolution and high resolution image URLs, heights, and widths to improve performance and optimize image loading
2023-10-30 17:44:59 +08:00
Sped0n
40f278ce1c feat(nav.ts): add functionality to set the current link based on the currentMenuItemIndex attribute 2023-10-30 15:55:02 +08:00
Sped0n
ead0a84ac7 refactor(main.ts): improve code readability by adding conditional check for ijs length before initializing stage or collection
fix(resources.ts): handle case when imagesJson element is not found to prevent error and return empty array
2023-10-30 15:54:36 +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
13fa8b21fb Merge branch 'dev' into main 2023-10-29 22:15:47 +08:00
Sped0n
6e4213054c refactor(state.ts): refactor state management to use a Watchable class for improved reactivity and encapsulation
fix(state.ts): fix bug in decThreshold function where the wrong value was being passed to updateThreshold function
2023-10-29 22:12:31 +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
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
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
6848e413ca chore(utils.ts): add custom helpers and types for better code organization and reusability 2023-10-29 14:54:52 +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
Spedon
4387abe52f Gsap (#120)
* feat: add gsap to deps

* chore: migrate to pnpm

* refractor: change var name

* chore(.idea): remove unnecessary files and configurations

Remove the following files and configurations from the .idea directory:
- .gitignore: Remove default ignored files.
- bridget.iml: Remove module file.
- codeStyles/Project.xml: Remove project code style configuration.
- codeStyles/codeStyleConfig.xml: Remove project code style configuration.
- inspectionProfiles/Project_Default.xml: Remove project inspection profile.
- jsLibraryMappings.xml: Remove JavaScript library mappings.
- jsLinters/eslint.xml: Remove ESLint configuration.
- modules.xml: Remove project module configuration.
- vcs.xml: Remove VCS directory mapping.
- watcherTasks.xml: Remove project tasks options.

* chore(.prettierrc.json): update Prettier configuration to include support for go-template files and improve code formatting settings

The Prettier configuration file (.prettierrc.json) has been updated with the following changes:
- `useTabs` is set to `false` to use spaces for indentation
- `tabWidth` is set to `2` to specify the number of spaces for each indentation level
- `printWidth` is set to `88` to limit the line length to 88 characters
- `singleQuote` is set to `true` to use single quotes for strings
- `trailingComma` is set to `none` to remove trailing commas in arrays and objects
- `bracketSpacing` is set to `true` to add spaces inside brackets
- `semi` is set to `false` to remove semicolons at the end of statements
- `plugins` is added to include the "prettier-plugin-go-template" plugin for go-template files
- `overrides` is added to specify the parser as "go-template" for files with the ".html" extension

* chore(base.scss): improve font rendering by adding font smoothing properties to all elements
feat(base.scss): add user-select: none to body to disable text selection
feat(base.scss): add overscroll-behavior-y: none to html and body to disable vertical scrolling on overscroll
feat(base.scss): add cursor: pointer to anchor tags and buttons for better user experience
feat(font.scss): add font-face declaration for HelveticaNow font
refactor(media.scss): remove unused file
feat(mixins.scss): add min-width and max-width mixins for responsive design
feat(reset.scss): add the new CSS reset version 1.8.4
feat(reset.scss): remove all styles from User-Agent-Stylesheet except for the display property
feat(reset.scss): set box-sizing: border-box for all elements
feat(reset.scss): revert cursor style for anchor tags and buttons
feat(reset.scss): remove list styles (bullets/numbers) from ol, ul, and menu
feat(reset.scss): set max-inline-size and max-block-size to 100% for images
feat(reset.scss): set border-collapse: collapse for tables
feat(reset.scss): set -webkit-user-select: auto for input and textarea to fix Safari issue
feat(reset.scss): revert white-space property for textarea on Safari
feat(reset.scss): set -webkit-appearance: revert for meter element
feat(reset.scss): revert all styles for preformatted text
feat(reset.scss): unset color for input placeholder
feat(reset.scss): remove default dot sign for lists
feat(reset.scss): set display: none for elements with hidden attribute
feat(reset.scss): revert styles for contenteditable elements
feat(reset.scss): set -webkit-user-drag: element for draggable elements
feat(reset.scss): revert native behavior for modal dialogs
feat(typography.scss): set line-height, font-size, and font-family for body
feat(typography.scss): increase font-size for tablet and laptop breakpoints

* feat: add custom cursor styles

Add a new file `_customCursor.scss` to the `assets/css/_partial` directory. This file contains styles for a custom cursor. The `.cursor` class is used to position the cursor and set its appearance. The `.active` class is used to display the cursor. The `.cursorInner` class is used to position the inner content of the cursor.

---

refactor: remove unused footer styles

Delete the file `_footer.scss` from the `assets/css/_partial` directory. This file contains styles for the footer section of the page. The styles are no longer used and can be safely removed.

---

refactor: remove unused image styles

Delete the files `_imagesDesktop.scss` and `_imagesMobile.scss` from the `assets/css/_partial` directory. These files contain styles for displaying images on desktop and mobile devices. The styles are no longer used and can be safely removed.

---

feat: add navigation styles

Add a new file `_nav.scss` to the `assets/css/_partial` directory. This file contains styles for the navigation bar. The styles define the layout and appearance of the navigation bar, including its position, background color, and alignment of its contents. The styles also include media queries to adjust the layout for smaller screens.

---

refactor: remove unused overlay styles

Delete the file `_overlay.scss` from the `assets/css/_partial` directory. This file contains styles for an overlay element. The styles are no longer used and can be safely removed.

---

feat: add stage styles

Add a new file `_stage.scss` to the `assets/css/_partial` directory. This file contains styles for the stage element, which is used to display images. The styles define the position and size of the stage, as well as the appearance of the images within it.

---

feat: add stage navigation overlay styles

Add a new file `_stageNav.scss` to the `assets/css/_partial` directory. This file contains styles for the stage navigation overlay. The styles define the position and size of the overlay, as well as its appearance and behavior. The overlay is used for navigation within the stage.

* chore(variables.scss): update variable names and values for better readability and consistency
chore(style.scss): reorganize import statements for better organization and readability

* fix(main.ts): import correct functions from utils module
feat(stage.ts): implement stage navigation functionality
feat(stageNav.ts): implement stage navigation overlay functionality
feat(state.ts): implement state management for index and threshold
feat(utils.ts): add utility functions for increment and decrement

* fix(index.html): fix doctype declaration to use lowercase 'doctype' for HTML5 compliance
fix(index.html): fix meta tag indentation for better readability
fix(index.html): fix indentation of head and body tags for better readability
fix(index.html): fix indentation of header, main, and footer sections for better readability
fix(index.html): fix indentation of script tag for better readability
fix(index.html): fix indentation of closing div tag for better readability
fix(index.html): fix indentation of closing body and html tags for better readability
feat(index.html): add partial for navigation bar to improve website navigation
fix(head.html): fix indentation of esBuildOpts variable for better readability
fix(head.html): fix indentation of script tag for better readability
feat(nav.html): add navigation bar partial to improve website navigation

* refactor(stage.ts): change cordHist, isOpen, isAnimating, and active variables to instances of the watchable class to improve semantics and encapsulation

* refactor(customCursor.ts): rename addActiveCallback to active.addWatcher for better readability and consistency
refactor(stageNav.ts): rename getIsAnimating to isAnimating.get for better readability and consistency
refactor(stageNav.ts): rename addActiveCallback to active.addWatcher for better readability and consistency
feat(stageNav.ts): add check for isOpen.get() and isAnimating.get() before handling key events to prevent unwanted actions

* chore(package.json): add prettier-plugin-go-template as a dev dependency to enable formatting of Go templates with Prettier

* chore: add helvetica now font

* chore(tsconfig.json): add "moduleResolution" property with value "node" to improve module resolution in the project configuration

* refactor(stage.ts): rename class 'watchable' to 'Watchable' for consistency and clarity
feat(utils.ts): add Watchable class to provide a generic watchable object with getter, setter, and watcher functionality
2023-10-29 12:39:56 +08:00
Sped0n
bb9870176f refactor(stage.ts): rename class 'watchable' to 'Watchable' for consistency and clarity
feat(utils.ts): add Watchable class to provide a generic watchable object with getter, setter, and watcher functionality
2023-10-29 12:31:48 +08:00
Sped0n
e93bca55d5 refactor(customCursor.ts): rename addActiveCallback to active.addWatcher for better readability and consistency
refactor(stageNav.ts): rename getIsAnimating to isAnimating.get for better readability and consistency
refactor(stageNav.ts): rename addActiveCallback to active.addWatcher for better readability and consistency
feat(stageNav.ts): add check for isOpen.get() and isAnimating.get() before handling key events to prevent unwanted actions
2023-10-29 02:42:04 +08:00
Sped0n
817b543ee0 refactor(stage.ts): change cordHist, isOpen, isAnimating, and active variables to instances of the watchable class to improve semantics and encapsulation 2023-10-29 02:41:37 +08:00
Sped0n
d32d5b5e4f fix(main.ts): import correct functions from utils module
feat(stage.ts): implement stage navigation functionality
feat(stageNav.ts): implement stage navigation overlay functionality
feat(state.ts): implement state management for index and threshold
feat(utils.ts): add utility functions for increment and decrement
2023-10-29 00:58:53 +08:00
Sped0n
b1415b7f17 refractor: change var name 2023-08-13 22:33:47 +08:00
Spedon
823502839f debugging 2023-05-04 12:34:32 +08:00
Spedon
a6648c7c2f finish the basic scroll logic 2023-05-04 12:34:17 +08:00
Spedon
c610f01d51 separate desktop component to imagesDesktop 2023-05-04 12:33:01 +08:00
Spedon
448710a77d change overlay cursor z index 2023-03-28 18:56:17 +08:00
Spedon
5e311692f4 add stack update the refresh components 2023-03-28 18:55:53 +08:00
Spedon
44a8d0c544 change function name 2023-03-28 18:37:25 +08:00
Spedon
9a6f141533 optimize reused code fragments 2023-03-28 17:00:14 +08:00
Spedon
823de500d7 add comments for the code 2023-03-28 16:59:15 +08:00
Spedon
de692352f2 combine handle next/prev click code into one function 2023-03-28 14:14:41 +08:00
Spedon
42a8bb8bc8 fix the bug of transition not working when changing from display none to block 2023-03-26 23:32:12 +08:00
Spedon
7f6cfe4366 add comments 2023-03-26 20:52:29 +08:00
Spedon
3ba067b19e add enter overlay event listener now is a function 2023-03-25 18:14:15 +08:00
Spedon
7262a43fae move pushIndex function to utils.ts 2023-03-24 17:17:57 +08:00
Spedon
5b172414ec now the overlay delay time will change with the stack depth 2023-03-24 16:53:31 +08:00
Spedon
e897561afa initial version of transition toward image elements 2023-03-24 16:11:00 +08:00
Spedon
56fd85e875 set the layer 0 as stack top 2023-03-21 12:00:22 +08:00
Spedon
7da5c2228a now html element can be generated by typescript 2023-03-21 11:55:05 +08:00