attach drag handlers to root

lineupjs · Apr 14, 2020 · edfc616 · edfc616
1 parent 5b00f94
commit edfc616
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/src/internal/drag.ts b/src/internal/drag.ts
@@ -1,6 +1,8 @@
+import {cssClass} from '../styles';
 
 /** @internal */
 export interface IDragHandleOptions {
+  attachRoot?: boolean;
   /**
    * drag base container
    * @default handle parentElement
@@ -38,6 +40,8 @@ export function dragHandle(handle: HTMLElement | SVGElement, options: Partial<ID
     minDelta: 2
   }, options);
 
+  let ueberElement: HTMLElement | null = null;
+
   // converts the given x coordinate to be relative to the given element
   const toContainerRelative = (x: number, elem: HTMLElement | SVGElement) => {
     const rect = elem.getBoundingClientRect();
@@ -73,9 +77,10 @@ export function dragHandle(handle: HTMLElement | SVGElement, options: Partial<ID
     evt.preventDefault();
 
     const end = toContainerRelative(evt.clientX, o.container) - handleShift;
-    o.container.removeEventListener('mousemove', <any>mouseMove);
-    o.container.removeEventListener('mouseup', <any>mouseUp);
-    o.container.removeEventListener('mouseleave', <any>mouseUp);
+    ueberElement!.removeEventListener('mousemove', <any>mouseMove);
+    ueberElement!.removeEventListener('mouseup', <any>mouseUp);
+    ueberElement!.removeEventListener('mouseleave', <any>mouseUp);
+    ueberElement!.classList.remove(cssClass('dragging'));
 
     if (Math.abs(start - end) < 2) {
       //ignore
@@ -96,9 +101,11 @@ export function dragHandle(handle: HTMLElement | SVGElement, options: Partial<ID
     start = last = toContainerRelative(evt.clientX, o.container) - handleShift;
 
     // register other event listeners
-    o.container.addEventListener('mousemove', <any>mouseMove);
-    o.container.addEventListener('mouseup', <any>mouseUp);
-    o.container.addEventListener('mouseleave', <any>mouseUp);
+    ueberElement = <HTMLElement>handle.closest('body') || <HTMLElement>handle.closest(`.${cssClass()}`)!; // take the whole body or root lineup
+    ueberElement.addEventListener('mousemove', <any>mouseMove);
+    ueberElement.addEventListener('mouseup', <any>mouseUp);
+    ueberElement.addEventListener('mouseleave', <any>mouseUp);
+    ueberElement!.classList.add(cssClass('dragging'));
 
     o.onStart(handle, start, 0, evt);
   };

diff --git a/src/styles/engine/_header.scss b/src/styles/engine/_header.scss
@@ -102,6 +102,10 @@
   cursor: col-resize !important;
 }
 
+.#{$lu_css_prefix}-dragging {
+  cursor: ew-resize !important;
+}
+
 // FIXME
 .#{$lu_css_prefix}-dialog-sub-nested > section {
   margin-bottom: $lu_engine_grip_gap + 15px;