From 869da1da74d822dc6ff87cee544aca0c2e406d12 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Thu, 25 Feb 2021 18:42:57 +0100
Subject: [PATCH] Splitpanes refactoring

---
 src/components/Splitpanes.vue | 42 ++++++++++++++++++++++++-----------
 src/splitter.js               | 26 ++++------------------
 2 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/components/Splitpanes.vue b/src/components/Splitpanes.vue
index 42bcfa4..ac5595c 100644
--- a/src/components/Splitpanes.vue
+++ b/src/components/Splitpanes.vue
@@ -20,8 +20,8 @@
     <!-- Splitter start-->
     <div
       class="splitpanes-splitter"
-      @mousedown="onMouseDown"
-      @touchstart="onMouseDown"
+      @mousedown="bindEvents"
+      @touchstart="bindEvents"
     >
       <div
         :class="[
@@ -137,8 +137,25 @@ export default {
   },
 
   methods: {
-    onMouseDown () {
-      splitter.bindEvents(this.onMouseMove, this.onMouseUp)
+    bindEvents () {
+      // Passive: false to prevent scrolling while touch dragging.
+      document.addEventListener('mousemove', this.onMouseMove, { passive: false })
+      document.addEventListener('mouseup', this.onMouseUp)
+
+      if ('ontouchstart' in window) {
+        document.addEventListener('touchmove', this.onMouseMove, { passive: false })
+        document.addEventListener('touchend', this.onMouseUp)
+      }
+    },
+
+    unbindEvents () {
+      document.removeEventListener('mousemove', this.onMouseMove, { passive: false })
+      document.removeEventListener('mouseup', this.onMouseUp)
+
+      if ('ontouchstart' in window) {
+        document.removeEventListener('touchmove', this.onMouseMove, { passive: false })
+        document.removeEventListener('touchend', this.onMouseUp)
+      }
     },
 
     onMouseMove (event) {
@@ -166,18 +183,17 @@ export default {
         this.dragging = false
       }
 
-      splitter.unbindEvents(this.onMouseMove, this.onMouseUp)
+      this.unbindEvents()
     },
 
     moveSplitter (event) {
-      const dragPercentage = splitter
-        .getCurrentDragPercentage(event, this.container, this.horizontal)
-
-      const paneBeforeMax = this.paneBefore.max
-      const paneAfterMax = this.paneAfter.max
-
-      // Prevent dragging beyond pane max.
-      const offset = splitter.calculateOffset(paneBeforeMax, paneAfterMax, dragPercentage)
+      const splitterInfo = {
+        container: this.container,
+        paneBeforeMax: this.paneBefore.max,
+        paneAfterMax: this.paneAfter.max,
+        isHorisontal: this.horizontal
+      }
+      const offset = splitter.calculateOffset(event, splitterInfo)
       const dir = this.horizontal ? 'top' : 'left'
       this.$set(this.movableSplitter, dir, offset)
     },
diff --git a/src/splitter.js b/src/splitter.js
index 3c7032f..b93aa05 100644
--- a/src/splitter.js
+++ b/src/splitter.js
@@ -1,25 +1,4 @@
 export default {
-  bindEvents (onMouseMove, onMouseUp) {
-    // Passive: false to prevent scrolling while touch dragging.
-    document.addEventListener('mousemove', onMouseMove, { passive: false })
-    document.addEventListener('mouseup', onMouseUp)
-
-    if ('ontouchstart' in window) {
-      document.addEventListener('touchmove', onMouseMove, { passive: false })
-      document.addEventListener('touchend', onMouseUp)
-    }
-  },
-
-  unbindEvents (onMouseMove, onMouseUp) {
-    document.removeEventListener('mousemove', onMouseMove, { passive: false })
-    document.removeEventListener('mouseup', onMouseUp)
-
-    if ('ontouchstart' in window) {
-      document.removeEventListener('touchmove', onMouseMove, { passive: false })
-      document.removeEventListener('touchend', onMouseUp)
-    }
-  },
-
   // Get the cursor position relative to the splitpane container.
   getCurrentMouseDrag (event, container) {
     const rect = container.getBoundingClientRect()
@@ -40,7 +19,10 @@ export default {
     return drag * 100 / containerSize
   },
 
-  calculateOffset (paneBeforeMax, paneAfterMax, dragPercentage) {
+  // Returns the new position in percents.
+  calculateOffset (event, { container, isHorisontal, paneBeforeMax, paneAfterMax }) {
+    const dragPercentage = this.getCurrentDragPercentage(event, container, isHorisontal)
+
     const paneBeforeMaxReached = paneBeforeMax < 100 && (dragPercentage >= paneBeforeMax)
     const paneAfterMaxReached = paneAfterMax < 100 && (dragPercentage <= 100 - paneAfterMax)