feat: functionality separated in multiple packages

packages/drag-navigation/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @glightbox/drag-navigation
+
+## 1.0.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @glightbox/plugin-core@1.0.0-beta.2

packages/drag-navigation/README.md

@@ -0,0 +1,11 @@
+# @glightbox/drag-navigation
+
+This package enables drag functionality in GLightbox
+
+## Installation
+
+`npm i @glightbox/drag-navigation@beta`
+
+## Options and usage
+
+For options and usage, visit the [documentation website](https://glightbox.biati.digital/)

packages/drag-navigation/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@glightbox/drag-navigation",
+  "version": "1.0.0-beta.2",
+  "description": "GLightbox plugin to enable user drag to change slides",
+  "author": "Biati Digital",
+  "homepage": "https://biati-digital.github.io/glightbox/",
+  "repository": {
+    "url": "https://github.com/biati-digital/glightbox",
+    "type": "git"
+  },
+  "bugs": "https://github.com/biati-digital/glightbox/issues",
+  "type": "module",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "watch": "vite build --watch",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "glightbox"
+  ],
+  "dependencies": {
+    "@glightbox/plugin-core": "1.0.0-beta.2"
+  },
+  "license": "GPLV3"
+}

packages/drag-navigation/src/drag.ts

@@ -0,0 +1,114 @@
+import type { PluginOptions, PluginType } from '@glightbox/plugin-core';
+import { GLightboxPlugin } from '@glightbox/plugin-core';
+
+export interface DragOptions extends PluginOptions {
+    dragToleranceX?: number;
+}
+
+export default class DragNavigation extends GLightboxPlugin {
+    name = 'drag';
+    type: PluginType = 'other';
+    options: DragOptions;
+    isDown: boolean = false;
+    slider: HTMLElement | null = null;
+    actveSlide: HTMLElement | null = null;
+    startX = 0;
+    scrollLeft: number = 0;
+    activeSlideIndex: number = 0;
+    movedAmount: number = 0;
+    movedDirection: string = '';
+    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 };
+    }
+
+    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);
+
+        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);
+    }
+
+    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 = 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' });
+    }
+
+    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 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');
+    }
+
+    removeDragClass() {
+        this.slider?.classList.remove('doing-drag');
+        this.slider?.removeEventListener('scrollend', this.removeDragClass);
+    }
+}

packages/drag-navigation/src/index.ts

@@ -0,0 +1,2 @@
+export { default as ImageSlide } from './drag';
+

packages/drag-navigation/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "./dist/**/*",
+    "vite.config.ts",
+    "tsconfig.tsbuildinfo"
+  ]
+}

packages/drag-navigation/vite.config.ts

@@ -0,0 +1,28 @@
+// vite.config.ts
+import { resolve } from '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()]
+});

packages/glightbox/CHANGELOG.md

@@ -0,0 +1,8 @@
+# glightbox
+
+## 4.0.0-beta.5
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @glightbox/plugin-core@1.0.0-beta.2

packages/glightbox/README.md

@@ -0,0 +1,11 @@
+# glightbox
+
+This package is the core of the library.
+
+## Installation
+
+`npm i glightbox@beta`
+
+## Options and usage
+
+For options and usage, visit the [documentation website](https://glightbox.biati.digital/)

packages/glightbox/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "glightbox",
+  "version": "4.0.0-beta.5",
+  "description": "Beautiful Pure Javascript Lightbox",
+  "homepage": "https://biati-digital.github.io/glightbox/",
+  "repository": {
+    "url": "https://github.com/biati-digital/glightbox",
+    "type": "git"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs.js",
+  "import": "./dist/index.es.js",
+  "scripts": {
+    "dev": "vite",
+    "watch": "vite build --watch",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./src": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./style": {
+      "import": "./dist/glightbox.css",
+      "require": "./dist/glightbox.css"
+    }
+  },
+  "directories": {
+    "src": "src"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "lightbox",
+    "javascript",
+    "gallery",
+    "popup"
+  ],
+  "author": "Biati Digital",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "GPLV3",
+  "dependencies": {
+    "@glightbox/utils": "1.0.0-beta.1",
+    "@glightbox/plugin-core": "1.0.0-beta.2"
+  },
+  "devDependencies": {
+    "vite-plugin-static-copy": "^1.0.1"
+  }
+}