-
-
Notifications
You must be signed in to change notification settings - Fork 233
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #551 from biati-digital/code-cleanup
refactor: code cleanup and minor improvements
- Loading branch information
Showing
32 changed files
with
2,347 additions
and
2,187 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,114 +1,129 @@ | ||
| import type { PluginOptions, PluginType } from '@glightbox/plugin-core'; | ||
| import { GLightboxPlugin } from '@glightbox/plugin-core'; | ||
| import type { PluginOptions, PluginType } from "@glightbox/plugin-core"; | ||
| import { GLightboxPlugin } from "@glightbox/plugin-core"; | ||
|
|
||
| export interface DragOptions extends PluginOptions { | ||
| dragToleranceX?: number; | ||
| dragToleranceX?: number; | ||
| } | ||
|
|
||
| export default class DragNavigation extends GLightboxPlugin { | ||
| name = 'drag'; | ||
| type: PluginType = 'other'; | ||
| options: DragOptions = {}; | ||
| isDown = false; | ||
| slider: HTMLElement | null = null; | ||
| actveSlide: HTMLElement | null = null; | ||
| startX = 0; | ||
| scrollLeft = 0; | ||
| activeSlideIndex = 0; | ||
| movedAmount = 0; | ||
| movedDirection = ''; | ||
| defaults: DragOptions = { | ||
| dragToleranceX: 10 | ||
| }; | ||
| mouseDownEvent: ((e: MouseEvent) => void) | null = null; | ||
| mouseLeaveEvent: ((e: MouseEvent) => void) | null = null; | ||
| mouseUpEvent: ((e: MouseEvent) => void) | null = null; | ||
| mouseMoveEvent: ((e: MouseEvent) => void) | null = null; | ||
| name = "drag"; | ||
| type: PluginType = "other"; | ||
| options: DragOptions = {}; | ||
| isDown = false; | ||
| slider: HTMLElement | null = null; | ||
| actveSlide: HTMLElement | null = null; | ||
| startX = 0; | ||
| scrollLeft = 0; | ||
| activeSlideIndex = 0; | ||
| movedAmount = 0; | ||
| movedDirection = ""; | ||
| defaults: DragOptions = { | ||
| dragToleranceX: 10, | ||
| }; | ||
| mouseDownEvent: ((e: MouseEvent) => void) | null = null; | ||
| mouseLeaveEvent: ((e: MouseEvent) => void) | null = null; | ||
| mouseUpEvent: ((e: MouseEvent) => void) | null = null; | ||
| mouseMoveEvent: ((e: MouseEvent) => void) | null = null; | ||
|
|
||
| constructor(options: Partial<DragOptions> = {}) { | ||
| super(); | ||
| this.options = { ...this.defaults, ...options }; | ||
| } | ||
| constructor(options: Partial<DragOptions> = {}) { | ||
| super(); | ||
| this.options = { ...this.defaults, ...options }; | ||
| } | ||
|
|
||
| init(): void { | ||
| const slider = document.querySelector<HTMLElement>('.gl-slider'); | ||
| if (!slider) { | ||
| return; | ||
| } | ||
| init(): void { | ||
| const slider = document.querySelector<HTMLElement>(".gl-slider"); | ||
| if (!slider) { | ||
| return; | ||
| } | ||
|
|
||
| this.mouseDownEvent = this.onMouseDown.bind(this); | ||
| this.mouseLeaveEvent = this.onMouseLeave.bind(this); | ||
| this.mouseUpEvent = this.onMouseUp.bind(this); | ||
| this.mouseMoveEvent = this.onMouseMove.bind(this); | ||
| this.mouseDownEvent = this.onMouseDown.bind(this); | ||
| this.mouseLeaveEvent = this.onMouseLeave.bind(this); | ||
| this.mouseUpEvent = this.onMouseUp.bind(this); | ||
| this.mouseMoveEvent = this.onMouseMove.bind(this); | ||
|
|
||
| slider.addEventListener('mousedown', this.mouseDownEvent); | ||
| slider.addEventListener('mouseleave', this.mouseLeaveEvent); | ||
| slider.addEventListener('mouseup', this.mouseUpEvent); | ||
| slider.addEventListener('mousemove', this.mouseMoveEvent); | ||
| this.slider = slider; | ||
| } | ||
| slider.addEventListener("mousedown", this.mouseDownEvent); | ||
| slider.addEventListener("mouseleave", this.mouseLeaveEvent); | ||
| slider.addEventListener("mouseup", this.mouseUpEvent); | ||
| slider.addEventListener("mousemove", this.mouseMoveEvent); | ||
| this.slider = slider; | ||
| } | ||
|
|
||
| destroy(): void { | ||
| this.mouseDownEvent && this.slider?.removeEventListener('mousedown', this.mouseDownEvent); | ||
| this.mouseLeaveEvent && this.slider?.removeEventListener('mouseleave', this.mouseLeaveEvent); | ||
| this.mouseUpEvent && this.slider?.removeEventListener('mouseup', this.mouseUpEvent); | ||
| this.mouseMoveEvent && this.slider?.removeEventListener('mousemove', this.mouseMoveEvent); | ||
| } | ||
| destroy(): void { | ||
| this.mouseDownEvent && | ||
| this.slider?.removeEventListener("mousedown", this.mouseDownEvent); | ||
| this.mouseLeaveEvent && | ||
| this.slider?.removeEventListener("mouseleave", this.mouseLeaveEvent); | ||
| this.mouseUpEvent && | ||
| this.slider?.removeEventListener("mouseup", this.mouseUpEvent); | ||
| this.mouseMoveEvent && | ||
| this.slider?.removeEventListener("mousemove", this.mouseMoveEvent); | ||
| } | ||
|
|
||
| onMouseDown(e: MouseEvent) { | ||
| if (!this.slider) { | ||
| return; | ||
| } | ||
| this.isDown = true; | ||
| this.slider?.classList.add('doing-drag'); | ||
| this.startX = e.pageX - this.slider.offsetLeft; | ||
| this.scrollLeft = this.slider.scrollLeft; | ||
| this.actveSlide = this.slider.querySelector('.visible'); | ||
| this.activeSlideIndex = Number.parseInt(this.actveSlide?.getAttribute('data-index') || '0'); | ||
| } | ||
| onMouseDown(e: MouseEvent) { | ||
| if (!this.slider) { | ||
| return; | ||
| } | ||
| this.isDown = true; | ||
| this.slider?.classList.add("doing-drag"); | ||
| this.startX = e.pageX - this.slider.offsetLeft; | ||
| this.scrollLeft = this.slider.scrollLeft; | ||
| this.actveSlide = this.slider.querySelector(".visible"); | ||
| this.activeSlideIndex = Number.parseInt( | ||
| this.actveSlide?.getAttribute("data-index") || "0", | ||
| ); | ||
| } | ||
|
|
||
| onMouseUp() { | ||
| this.isDown = false; | ||
| let scrollTo = this.actveSlide; | ||
| if (this.movedAmount > 10) { | ||
| const nextIndex = this.movedDirection === 'right' ? this.activeSlideIndex + 1 : this.activeSlideIndex - 1; | ||
| const next = this.slider?.querySelector<HTMLElement>(`div[data-index="${nextIndex}"]`); | ||
| if (next) { | ||
| scrollTo = next; | ||
| } | ||
| } | ||
| this.slider?.addEventListener('scrollend', this.removeDragClass); | ||
| scrollTo?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' }); | ||
| } | ||
| onMouseUp() { | ||
| this.isDown = false; | ||
| let scrollTo = this.actveSlide; | ||
| if (this.movedAmount > 10) { | ||
| const nextIndex = | ||
| this.movedDirection === "right" | ||
| ? this.activeSlideIndex + 1 | ||
| : this.activeSlideIndex - 1; | ||
| const next = this.slider?.querySelector<HTMLElement>( | ||
| `div[data-index="${nextIndex}"]`, | ||
| ); | ||
| if (next) { | ||
| scrollTo = next; | ||
| } | ||
| } | ||
| this.slider?.addEventListener("scrollend", this.removeDragClass); | ||
| scrollTo?.scrollIntoView({ | ||
| behavior: "smooth", | ||
| block: "start", | ||
| inline: "start", | ||
| }); | ||
| } | ||
|
|
||
| onMouseMove(e: MouseEvent) { | ||
| if (!this.isDown || !this.slider) { | ||
| return; | ||
| } | ||
| e.preventDefault(); | ||
| onMouseMove(e: MouseEvent) { | ||
| if (!this.isDown || !this.slider) { | ||
| return; | ||
| } | ||
| e.preventDefault(); | ||
|
|
||
| const x = e.pageX - this.slider.offsetLeft; | ||
| const SCROLL_SPEED = 1; | ||
| const walk = (x - this.startX) * SCROLL_SPEED; | ||
| const x = e.pageX - this.slider.offsetLeft; | ||
| const SCROLL_SPEED = 1; | ||
| const walk = (x - this.startX) * SCROLL_SPEED; | ||
|
|
||
| const sliderWidth = this.slider.clientWidth; | ||
| let moved = this.scrollLeft - walk; | ||
| if (this.activeSlideIndex > 0) { | ||
| moved = moved - (sliderWidth * this.activeSlideIndex + 1); | ||
| } | ||
| const percentage = (moved / sliderWidth) * 100; | ||
| this.movedDirection = percentage > 0 ? 'right' : 'left'; | ||
| this.slider.scrollLeft = this.scrollLeft - walk; | ||
| this.movedAmount = Math.abs(percentage); | ||
| } | ||
| const sliderWidth = this.slider.clientWidth; | ||
| let moved = this.scrollLeft - walk; | ||
| if (this.activeSlideIndex > 0) { | ||
| moved = moved - (sliderWidth * this.activeSlideIndex + 1); | ||
| } | ||
| const percentage = (moved / sliderWidth) * 100; | ||
| this.movedDirection = percentage > 0 ? "right" : "left"; | ||
| this.slider.scrollLeft = this.scrollLeft - walk; | ||
| this.movedAmount = Math.abs(percentage); | ||
| } | ||
|
|
||
| onMouseLeave() { | ||
| this.isDown = false; | ||
| this.slider?.classList.remove('doing-drag'); | ||
| } | ||
| onMouseLeave() { | ||
| this.isDown = false; | ||
| this.slider?.classList.remove("doing-drag"); | ||
| } | ||
|
|
||
| removeDragClass() { | ||
| this.slider?.classList.remove('doing-drag'); | ||
| this.slider?.removeEventListener('scrollend', this.removeDragClass); | ||
| } | ||
| removeDragClass() { | ||
| this.slider?.classList.remove("doing-drag"); | ||
| this.slider?.removeEventListener("scrollend", this.removeDragClass); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1 @@ | ||
| export { default as ImageSlide } from './drag'; | ||
|
|
||
| export { default as ImageSlide } from "./drag"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,25 @@ | ||
| // vite.config.ts | ||
| import { resolve } from 'path'; | ||
| import { defineConfig } from 'vite'; | ||
| import dts from 'vite-plugin-dts'; | ||
| import { resolve } from "node:path"; | ||
| import { defineConfig } from "vite"; | ||
| import dts from "vite-plugin-dts"; | ||
| // https://vitejs.dev/guide/build.html#library-mode | ||
|
|
||
| export default defineConfig({ | ||
| build: { | ||
| minify: true, | ||
| cssCodeSplit: true, | ||
| cssMinify: true, | ||
| lib: { | ||
| entry: resolve(__dirname, 'src/index.ts'), | ||
| name: 'DragPlugin', | ||
| fileName: (format, entryName) => { | ||
| if (format === 'umd') { | ||
| return `${entryName}.umd.js`; | ||
| } | ||
| if (format === 'cjs') { | ||
| return `${entryName}.cjs.js`; | ||
| } | ||
| return `${entryName}.es.js`; | ||
| }, | ||
| formats: ['es', 'cjs', 'umd'] | ||
| } | ||
| }, | ||
| plugins: [dts()] | ||
| build: { | ||
| minify: true, | ||
| cssCodeSplit: true, | ||
| cssMinify: true, | ||
| lib: { | ||
| entry: resolve(__dirname, "src/index.ts"), | ||
| name: "DragPlugin", | ||
| fileName: (format, entryName) => { | ||
| if (format === "umd") { | ||
| return `${entryName}.umd.js`; | ||
| } | ||
| return `${entryName}.es.js`; | ||
| }, | ||
| formats: ["es", "umd"], | ||
| }, | ||
| }, | ||
| plugins: [dts()], | ||
| }); |
Oops, something went wrong.