@marianmeres/stuic 1.65.0 → 1.67.0

package/dist/actions/drag-drop.d.ts

@@ -8,6 +8,7 @@ export interface DraggableOptions {
     payload?: any;
     effectAllowed?: EffectAllowed;
     isDragged?: Writable<Record<string, boolean>>;
+    logger?: (...args: any[]) => void;
 }
 export declare const draggable: (node: HTMLElement, options: DraggableOptions) => {
     update(newOptions?: DraggableOptions): void;
@@ -20,6 +21,7 @@ export interface DroppableOptions {
     onDragover?: (data: any) => void;
     dropEffect?: DropEffect;
     isDraggedOver?: Writable<Record<string, boolean>>;
+    logger?: (...args: any[]) => void;
 }
 export declare const droppable: (node: HTMLElement, options: DroppableOptions) => {
     update(newOptions?: DroppableOptions): void;

package/dist/actions/drag-drop.js

@@ -8,21 +8,11 @@ export const draggable = (node, options) => {
         effectAllowed: 'all',
     };
     options = { ...DEFAULT_OPTIONS, ...options };
-    // initalizer
-    const _init = (_opts) => {
-        if (_opts.enabled) {
-            node.setAttribute('draggable', 'true');
-            node.setAttribute('aria-grabbed', 'false');
-        }
-        else {
-            node.removeAttribute('draggable');
-        }
-    };
-    // init now
-    _init(options);
+    const _log = (...args) => options.logger?.apply(null, args);
     const _payload = () => (_isFn(options?.payload) ? options.payload() : options.payload);
     //
     const onDragstart = (e) => {
+        _log('onDragstart', e.dataTransfer);
         const pld = _payload();
         if (pld !== undefined) {
             // add "stuic" as a custom data format
@@ -33,18 +23,39 @@ export const draggable = (node, options) => {
         node.setAttribute('aria-grabbed', 'true');
     };
     const onDrag = (e) => {
+        // _log('onDrag', e.dataTransfer); // too much spam
         // const el: HTMLElement = e.currentTarget as HTMLElement;
         // clog(el);
         // ?
     };
     const onDragend = (e) => {
+        _log('onDragend', e.dataTransfer);
         // e.preventDefault();
         options?.isDragged?.update((old) => ({ ...old, [options.id]: false }));
         node.setAttribute('aria-grabbed', 'false');
     };
-    node.addEventListener('dragstart', onDragstart);
-    node.addEventListener('drag', onDrag);
-    node.addEventListener('dragend', onDragend);
+    const _removeListeners = () => {
+        node.removeEventListener('dragstart', onDragstart);
+        node.removeEventListener('drag', onDrag);
+        node.removeEventListener('dragend', onDragend);
+    };
+    // initalizer
+    const _init = (_opts) => {
+        _log('_init', _opts);
+        _removeListeners();
+        if (_opts.enabled) {
+            node.setAttribute('draggable', 'true');
+            node.setAttribute('aria-grabbed', 'false');
+            node.addEventListener('dragstart', onDragstart);
+            node.addEventListener('drag', onDrag);
+            node.addEventListener('dragend', onDragend);
+        }
+        else {
+            node.removeAttribute('draggable');
+        }
+    };
+    // init now
+    _init(options);
     return {
         update(newOptions) {
             options = { ...options, ...(newOptions || {}) };
@@ -52,9 +63,7 @@ export const draggable = (node, options) => {
             _init(options);
         },
         destroy() {
-            node.removeEventListener('dragstart', onDragstart);
-            node.removeEventListener('drag', onDrag);
-            node.removeEventListener('dragend', onDragend);
+            _removeListeners();
         },
     };
 };
@@ -65,21 +74,27 @@ export const droppable = (node, options) => {
         dropEffect: 'move',
     };
     options = { ...DEFAULT_OPTIONS, ...options };
+    const _log = (...args) => options.logger?.apply(null, args);
     //
     const onDragenter = (e) => {
         // e.preventDefault();
-        // console.log('dragover', e.dataTransfer);
+        _log('onDragenter', e.dataTransfer);
         e.dataTransfer.dropEffect = options.dropEffect;
         options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: true }));
     };
     const onDragover = (e) => {
-        e.preventDefault(); // this prevents animation
+        // _log('onDragover', e.dataTransfer); // too much spam
+        // prevent default to allow drop
+        // this alse prevents animation (todo: really?)
+        e.preventDefault();
     };
     const onDragleave = (e) => {
+        _log('onDragleave', e.dataTransfer);
         // e.preventDefault();
         options?.isDraggedOver?.update((old) => ({ ...old, [options.id]: false }));
     };
     const onDrop = (e) => {
+        _log('onDrop', e.dataTransfer);
         e.preventDefault();
         const target = e.target;
         e.dataTransfer.dropEffect = options.dropEffect;
@@ -101,18 +116,14 @@ export const droppable = (node, options) => {
         node.removeEventListener('drop', onDrop);
     };
     //
-    let _listens = false;
     const _init = (_opts) => {
-        if (_opts.enabled && !_listens) {
+        _log('_init', _opts);
+        _removeListeners();
+        if (_opts.enabled) {
             node.addEventListener('dragenter', onDragenter);
             node.addEventListener('dragover', onDragover);
             node.addEventListener('dragleave', onDragleave);
             node.addEventListener('drop', onDrop);
-            _listens = true;
-        }
-        else if (!_opts.enabled && _listens) {
-            _removeListeners();
-            _listens = false;
         }
     };
     // init now

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.65.0",
+	"version": "1.67.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",