think-drag-slider 1.0.0

package/README.md

@@ -0,0 +1,81 @@
+# think-drag-slider
+
+A lightweight JavaScript utility for enabling click-and-drag horizontal scrolling on any element.
+
+## Features
+
+- Adds drag-to-scroll behavior to one or more elements selected by CSS selector
+- Adds helper classes automatically:
+  - `.drag-slider` on initialization
+  - `.active` while dragging
+- Includes optional CSS for cursor states and disabling accidental text/image dragging
+
+## Installation
+
+```bash
+npm install think-drag-slider
+```
+
+## Basic Usage
+
+```js
+import dragSlider from 'think-drag-slider';
+import 'think-drag-slider/dragSlider.css';
+
+dragSlider('.my-scroll-row');
+```
+
+## HTML Example
+
+```html
+<div class="my-scroll-row">
+  <article>Item 1</article>
+  <article>Item 2</article>
+  <article>Item 3</article>
+</div>
+```
+
+Make sure your container can scroll horizontally, for example with layout/overflow styles:
+
+```css
+.my-scroll-row {
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+```
+
+## API
+
+### `dragSlider(target)`
+
+- `target` (`string`): CSS selector used by `document.querySelectorAll`.
+- Returns: `void`.
+
+If no elements match, the function exits safely.
+
+## Behavior Notes
+
+- Current implementation listens to mouse events (`mousedown`, `mousemove`, `mouseup`, `mouseleave`).
+- Drag speed is multiplied internally for a faster feel.
+- The utility currently logs drag distance to the console during dragging.
+
+## Included Files
+
+- `dragSlider.js`
+- `dragSlider.css`
+
+## Development
+
+Run the default script:
+
+```bash
+npm test
+```
+
+(Currently this project has no automated tests configured.)
+
+## License
+
+MIT

package/dragSlider.css

@@ -0,0 +1,40 @@
+/**
+ * @file dragSlider.css
+ * @description Cursor and interaction styles for draggable slider elements.
+ */
+
+/**
+ * Root drag slider container.
+ */
+.drag-slider {
+    position: relative;
+    cursor: grab;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.drag-slider::-webkit-scrollbar {
+    display: none;
+}
+
+/**
+ * Cursor feedback while dragging.
+ */
+.drag-slider.active {
+    cursor: grabbing;
+}
+
+/**
+ * Disable text/image dragging and text selection on descendants.
+ * Repeated vendor-prefixed declarations are intentional for broad browser support.
+ */
+.drag-slider * {
+    -webkit-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+}

package/dragSlider.js

@@ -0,0 +1,42 @@
+/**
+ * Enables click-and-drag horizontal scrolling on matching elements.
+ *
+ * @param {string} target CSS selector used to find slider elements.
+ * @returns {void}
+ */
+export default function dragSlider(target) {
+	const sliders = document.querySelectorAll(target);
+
+	if (!sliders.length) return;
+
+	sliders.forEach((slider) => {
+		let isDown = false;
+		let startX = 0;
+		let scrollLeft = 0;
+
+        slider.classList.add('drag-slider');
+
+		slider.addEventListener('mousedown', (e) => {
+			isDown = true;
+			slider.classList.add('active');
+			startX = e.pageX - slider.offsetLeft;
+			scrollLeft = slider.scrollLeft;
+		});
+		slider.addEventListener('mouseleave', () => {
+			isDown = false;
+			slider.classList.remove('active');
+		});
+		slider.addEventListener('mouseup', () => {
+			isDown = false;
+			slider.classList.remove('active');
+		});
+		slider.addEventListener('mousemove', (e) => {
+			if (!isDown) return;
+			e.preventDefault();
+			const x = e.pageX - slider.offsetLeft;
+			const walk = (x - startX) * 3; //scroll-fast
+			slider.scrollLeft = scrollLeft - walk;
+			console.log(walk);
+		});
+	});
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "think-drag-slider",
+    "version": "1.0.0",
+    "description": "A lightweight JavaScript utility for enabling click-and-drag horizontal scrolling on any element.",
+    "main": "dragSlider.js",
+    "scripts": {
+        "test": "echo \"No tests specified\" && exit 0"
+    },
+    "keywords": [
+        "slider",
+        "javascript",
+        "ui"
+    ],
+    "author": "Oleh Makedonskiy <dev@think.studio>",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dev-think-one/think-drag-slider.git"
+    },
+    "bugs": {
+        "url": "https://github.com/dev-think-one/think-drag-slider/issues"
+    },
+    "files": [
+        "dragSlider.js",
+        "dragSlider.css"
+    ]
+}