fix(constants): correct and unify constant implementations across files

README.md

@@ -35,27 +35,18 @@ Initialize Allonsh by importing the module and providing the required options.
 
 ```js
 import Allonsh from './allonsh.js';
-import { CSS_CLASSES, EVENTS } from './constants.js';
 
 // Initialize Allonsh with options
 const allonsh = new Allonsh({
-  draggableSelector: CSS_CLASSES.DRAGGABLE, // Required: class for draggable elements
-  dropzoneSelector: CSS_CLASSES.DROPZONE, // Optional: class for dropzones
+  draggableSelector: 'allonsh-draggable', // Required: class for draggable elements
+  dropzoneSelector: 'allonsh-dropzone', // Optional: class for dropzones
   playAreaSelector: 'play-area', // Optional: class for the container area
   restrictToDropzones: false, // Optional: restrict dragging to dropzones
   enableStacking: true, // Optional: enable stacking inside dropzones
   stackDirection: 'horizontal', // Optional: 'horizontal' or 'vertical'
   stackSpacing: 8, // Optional: spacing between stacked items (px)
   useGhostEffect: true, // Optional: enable ghost effect (shows transparent clone while dragging)
 });
-
-// Listen for custom events
-document.addEventListener(EVENTS.DRAG_START, (e) => {
-  // handle drag start
-});
-document.addEventListener(EVENTS.DROP, (e) => {
-  // handle drop
-});
 ```
 
 ## Documentation

demo/index.html

@@ -47,7 +47,7 @@ <h2 class="demo-header__title">
           Allonsh.js
           <span class="demo-header__demoText"> Demo </span>
 
-          <span class="demo-allonsh__currentVersion"> v0.1.0-beta2 </span>
+          <span class="demo-allonsh__currentVersion"> v0.2.0-beta </span>
         </h2>
       </div>
       <div class="demo-header__github">

docs/allonsh.md

@@ -82,24 +82,15 @@ Allonsh dispatches the following custom events on relevant elements:
 
 ```js
 import Allonsh from 'allonsh';
-import { CSS_CLASSES, EVENTS } from 'allonsh/constants';
 
 const dragDrop = new Allonsh({
-  draggableSelector: CSS_CLASSES.DRAGGABLE,
-  dropzoneSelector: CSS_CLASSES.DROPZONE,
+  draggableSelector: 'draggable',
+  dropzoneSelector: 'dropzone',
   playAreaSelector: 'play-area',
   restrictToDropzones: true,
   enableStacking: true,
   stackDirection: 'vertical',
   stackSpacing: 10,
   useGhostEffect: true,
 });
-
-// Listen for custom events
-document.addEventListener(EVENTS.DRAG_START, (e) => {
-  // handle drag start
-});
-document.addEventListener(EVENTS.DROP, (e) => {
-  // handle drop
-});
 ```

docs/constants.md

@@ -6,23 +6,15 @@ This document provides a detailed reference for the constants defined in `src/co
 
 Defines z-index values for various UI elements to control stacking order:
 
-- `GHOST`: 999 — Used for ghost elements during drag operations.
-- `DRAGGING`: 1000 — Active dragging element.
-- `DROPPED`: 9999 — Element after being dropped.
-- `HEADER`: 10 — Header bar.
-- `THEME_TOGGLE`: 9 — Theme toggle button.
-- `CONTROL_PANEL`: 5 — Control panel UI.
-- `FREEMODE_TITLE`: 5 — Title in freemode.
+- `GHOST`: 99 — Used for ghost elements during drag operations.
+- `DRAGGING`: 100 — Active dragging element.
 
 ## DEFAULTS
 
 Default configuration values for stack layout and direction:
 
 - `STACK_SPACING`: 5 — Default spacing between stack items.
-- `STACK_SPACING_DEMO`: 10 — Spacing for demo mode.
 - `STACK_DIRECTION`: 'horizontal' — Default stack direction.
-- `STACK_DIRECTION_VERTICAL`: 'vertical' — Vertical stack direction.
-- `STACK_DIRECTION_HORIZONTAL`: 'horizontal' — Horizontal stack direction.
 
 ## CSS_CLASSES
 
@@ -157,7 +149,3 @@ import { EVENTS } from '../src/constants.js';
 const dropHandler = vi.fn();
 dropzone.addEventListener(EVENTS.DROP, dropHandler);
 ```
-
-### Usage in Demo
-
-In `demo/js/script.js`, constants are used indirectly via the Allonsh class, which applies them for styling, event handling, and configuration.

src/allonsh.js

@@ -10,6 +10,7 @@ import {
   FLEX_WRAP,
   DISPLAY_MODES,
   POINTER_EVENTS,
+  STACK_DIRECTION,
 } from './constants.js';
 
 class Allonsh {
@@ -124,13 +125,13 @@ class Allonsh {
         );
       }
     }
-    this._unbindEventListeners();
 
     this.draggableElements = this.playAreaElement.querySelectorAll(
       `.${draggableSelector}`
     );
 
     this.draggableElements.forEach((element) => {
+      this._unbindEventListeners();
       element.style.cursor = CSS_CURSORS.GRAB;
       element.addEventListener('mousedown', this._boundMouseDown);
       element.addEventListener('touchstart', this._boundTouchStart, {
@@ -215,7 +216,7 @@ class Allonsh {
     try {
       dropzone.style.display = DISPLAY_MODES.FLEX;
       dropzone.style.flexDirection =
-        this.stackDirection === DEFAULTS.STACK_DIRECTION_VERTICAL
+        this.stackDirection === STACK_DIRECTION.VERTICAL
           ? FLEX_DIRECTIONS.COLUMN
           : FLEX_DIRECTIONS.ROW;
       dropzone.style.gap = `${this.stackSpacing}px`;
@@ -554,7 +555,7 @@ class Allonsh {
                 CSS_POSITIONS.ABSOLUTE;
               this.currentDraggedElement.style.left = `${offsetX}px`;
               this.currentDraggedElement.style.top = `${offsetY}px`;
-              this.currentDraggedElement.style.zIndex = Z_INDEX.DROPPED;
+              this.currentDraggedElement.style.zIndex = Z_INDEX.DRAGGING;
             } catch (e) {
               console.warn(
                 'Allonsh Warning: Could not append dragged element back to play area.',

src/constants.js

@@ -4,21 +4,13 @@
  */
 
 export const Z_INDEX = {
-  GHOST: 999,
-  DRAGGING: 1000,
-  DROPPED: 9999,
-  HEADER: 10,
-  THEME_TOGGLE: 9,
-  CONTROL_PANEL: 5,
-  FREEMODE_TITLE: 5,
+  GHOST: 99,
+  DRAGGING: 100,
 };
 
 export const DEFAULTS = {
   STACK_SPACING: 5,
-  STACK_SPACING_DEMO: 10,
   STACK_DIRECTION: 'horizontal',
-  STACK_DIRECTION_VERTICAL: 'vertical',
-  STACK_DIRECTION_HORIZONTAL: 'horizontal',
 };
 
 export const CSS_CLASSES = {
@@ -55,6 +47,11 @@ export const FLEX_DIRECTIONS = {
   COLUMN: 'column',
 };
 
+export const STACK_DIRECTION = {
+  VERTICAL: 'vertical',
+  HORIZONTAL: 'horizontal',
+};
+
 export const FLEX_WRAP = 'wrap';
 
 export const DISPLAY_MODES = {