feat: add "dragging" class when scrollbar is dragged (fix #258 #268)

Grsmto · Feb 18, 2019 · c42e7e4 · c42e7e4
1 parent 54c0e4a
commit c42e7e4
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 1 deletion.
diff --git a/packages/simplebar/demo/browser/css/demo.css b/packages/simplebar/demo/browser/css/demo.css
@@ -83,6 +83,9 @@ p {
     padding: 10px;
     min-width: 230px;
     }
+    .demo1 p.odd:hover {
+      background: #666;
+    }
     .demo1 p.odd {
       background: #f0f0f0;
       }
@@ -149,6 +152,10 @@ p {
   height: 200px;
 }
 
+.demo-y-axis.simplebar-dragging .simplebar-scrollbar:before {
+  background-color: red;
+}
+
 .demo-both-axis .box,
 .demo-y-axis .box {
   width: 600px;

diff --git a/packages/simplebar/src/simplebar.css b/packages/simplebar/src/simplebar.css
@@ -110,6 +110,10 @@
     pointer-events: none;
 }
 
+[data-simplebar].simplebar-dragging .simplebar-track {
+  pointer-events: all;
+}
+
 .simplebar-scrollbar {
     position: absolute;
     right: 2px;

diff --git a/packages/simplebar/src/simplebar.js b/packages/simplebar/src/simplebar.js
@@ -121,7 +121,8 @@ export default class SimpleBar {
       visible: 'simplebar-visible',
       horizontal: 'simplebar-horizontal',
       vertical: 'simplebar-vertical',
-      hover: 'simplebar-hover'
+      hover: 'simplebar-hover',
+      dragging: 'simplebar-dragging',
     },
     scrollbarMinSize: 25,
     scrollbarMaxSize: 0,
@@ -746,6 +747,8 @@ export default class SimpleBar {
       scrollbar.getBoundingClientRect()[this.axis[axis].offsetAttr];
     this.draggedAxis = axis;
 
+    this.el.classList.add(this.classNames.dragging);
+
     document.addEventListener('mousemove', this.drag);
     document.addEventListener('mouseup', this.onEndDrag);
   }
@@ -802,6 +805,8 @@ export default class SimpleBar {
     e.preventDefault();
     e.stopPropagation();
 
+    this.el.classList.remove(this.classNames.dragging);
+
     document.removeEventListener('mousemove', this.drag);
     document.removeEventListener('mouseup', this.onEndDrag);
   };

diff --git a/packages/simplebar/test/simplebar.test.e2e.js b/packages/simplebar/test/simplebar.test.e2e.js
@@ -36,4 +36,17 @@ describe('Load', () => {
     expect(isRtl).toBeTruthy();
     expect(transformStyle).toEqual(`translate3d(${ elBoundingBox.width - scrollbarElBoundingBox.width}px, 0px, 0px)`);
   });
+
+  it('should add class "dragging" when dragging', async () => {
+    const el = await expect(page).toMatchElement('#demo2');
+
+    await page.click('#demo2 .simplebar-track.simplebar-vertical .simplebar-scrollbar');
+    await page.mouse.down();
+
+    const isDragging = await page.evaluate(el => el.classList.contains('simplebar-dragging'), el);
+
+    expect(isDragging).toBeTruthy();
+  }, 999999);
 });
+
+// await jestPuppeteer.debug();