splitter: use more lightweight split.js for sidebar splitter

package.json

@@ -19,7 +19,7 @@
     "mime-types": "^2.1.27",
     "pretty-bytes": "^5.3.0",
     "register-service-worker": "^1.7.1",
-    "split-me": "^1.2.2"
+    "split.js": "^1.6.2"
   },
   "devDependencies": {
     "css-loader": "^3.5.3",

src/coll.js

@@ -17,7 +17,8 @@ import fasLeft from '@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg';
 import fasRight from '@fortawesome/fontawesome-free/svgs/solid/arrow-right.svg';
 import fasMenuV from '@fortawesome/fontawesome-free/svgs/solid/ellipsis-v.svg';
 
-import { defineCustomElements as defineSplitMe } from 'split-me/loader';
+import Split from 'split.js'
+//import { defineCustomElements as defineSplitMe } from 'split-me/loader';
 
 
 const RWP_SCHEME = "search://";
@@ -59,6 +60,7 @@ class Coll extends LitElement
     this.editable = false;
 
     this.showSidebar = localStorage.getItem(`pages:showSidebar`) === "1";
+    this.splitter = null;
   }
 
   static get properties() {
@@ -98,7 +100,7 @@ class Coll extends LitElement
       this.isFullscreen = !!document.fullscreenElement;
     });
 
-    defineSplitMe(window);
+    //defineSplitMe(window);
   }
 
   updated(changedProperties) {
@@ -146,6 +148,40 @@ class Coll extends LitElement
     if (changedProperties.has("showSidebar")) {
       localStorage.setItem(`pages:showSidebar`, this.showSidebar ? "1" : "0");
     }
+
+    if (changedProperties.has("tabData") || changedProperties.has("showSidebar")) {
+      this.configureSplitter();
+    }
+  }
+
+  configureSplitter() {
+    if (this.tabData.view === "replay" && this.showSidebar) {
+      const pages = this.renderRoot.querySelector("wr-page-view");
+      const replay = this.renderRoot.querySelector("wr-coll-replay");
+
+      if (pages && replay && !this.splitter) {
+        const opts = {
+          sizes: [30, 70],
+
+          minSize: [300, 300],
+
+          gutterSize: 4,
+
+          onDragStart() {
+            replay.setDisablePointer(true);
+          },
+
+          onDragEnd() {
+            replay.setDisablePointer(false);
+          }
+        }
+
+        this.splitter = Split([pages, replay], opts);
+      }
+    } else {
+      this.splitter.destroy();
+      this.splitter = null;
+    }
   }
 
   async doUpdateInfo() {
@@ -399,14 +435,14 @@ class Coll extends LitElement
       opacity: 1.0;
     }
 
-    split-me {
-      --phantom-divider-thickness: 4px;
-      --divider-thickness: 0.1rem;
-      --divider-color: rgb(151, 152, 154);
-      --divider-shadow: 0;
-      width: 100%;
-      height: 100%;
-      display: block;
+    .gutter.gutter-horizontal {
+      cursor: col-resize;
+      float: left;
+      background-color: rgb(151, 152, 154);
+    }
+
+    .gutter.gutter-horizontal:hover {
+      cursor: col-resize;
     }
 
     wr-page-view, wr-coll-replay {
@@ -585,7 +621,7 @@ class Coll extends LitElement
       replay.setDisablePointer(true);
     }
 
-    event.path[0].addEventListener("mouseup", (event) => this.dragEnd(), {once: true});
+    //event.path[0].addEventListener("mouseup", (event) => this.dragEnd(), {once: true});
   }
 
   dragEnd() {
@@ -621,41 +657,32 @@ class Coll extends LitElement
     class="is-paddingless ${isResources ? '' : 'is-hidden'}">
     </wr-coll-resources>
 
-    <split-me n="${isSidebar ? 2 : 1}"
-    d="horizontal" 
-    .sizes=${[0.30, 0.70]}
-    .minSizes=${[0.10, 0.50]}
-    @dragstart="${this.dragStart}"
-    class="${isReplay || isPages ? '' : 'is-hidden'}"
-    >
-      <wr-page-view
-      slot="0"
-      .collInfo="${this.collInfo}"
-      .active="${isPages}"
-      .editable="${this.editable}"
-      .isSidebar="${isSidebar}"
-      currList="${this.tabData.currList || 0}"
-      query="${this.tabData.query || ""}"
-      .url="${this.tabData.url || ""}"
-      .ts="${this.tabData.ts || ""}"
-      @coll-tab-nav="${this.onCollTabNav}" id="pages"
-      class="${isSidebar ? 'sidebar' : (isPages ? '' : 'is-hidden')}">
-      </wr-page-view>
+    <wr-page-view
+    slot="0"
+    .collInfo="${this.collInfo}"
+    .active="${isPages}"
+    .editable="${this.editable}"
+    .isSidebar="${isSidebar}"
+    currList="${this.tabData.currList || 0}"
+    query="${this.tabData.query || ""}"
+    .url="${this.tabData.url || ""}"
+    .ts="${this.tabData.ts || ""}"
+    @coll-tab-nav="${this.onCollTabNav}" id="pages"
+    class="${isSidebar ? 'sidebar' : (isPages ? '' : 'is-hidden')}">
+    </wr-page-view>
 
-      ${isReplay ? html`
-      <wr-coll-replay
-      slot="${isSidebar ? 1 : 0}"
-      .collInfo="${this.collInfo}"
-      sourceUrl="${this.sourceUrl}"
-      url="${this.tabData.url || ""}"
-      ts="${this.tabData.ts || ""}"
-      @coll-tab-nav="${this.onCollTabNav}" id="replay"
-      @replay-loading="${(e) => this.isLoading = e.detail.loading}"
-      class="${isReplay ? '' : 'is-hidden'}">
-      </wr-coll-replay>
-      ` : ``}
-
-    </split-me>
+    ${isReplay ? html`
+    <wr-coll-replay
+    slot="${isSidebar ? 1 : 0}"
+    .collInfo="${this.collInfo}"
+    sourceUrl="${this.sourceUrl}"
+    url="${this.tabData.url || ""}"
+    ts="${this.tabData.ts || ""}"
+    @coll-tab-nav="${this.onCollTabNav}" id="replay"
+    @replay-loading="${(e) => this.isLoading = e.detail.loading}"
+    class="${isReplay ? '' : 'is-hidden'}">
+    </wr-coll-replay>
+    ` : ``}
 
     `;
   }

yarn.lock

@@ -3530,11 +3530,6 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
-
 lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@~4.17.12:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
@@ -5410,13 +5405,6 @@ spdy@^4.0.1:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
-split-me@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/split-me/-/split-me-1.2.2.tgz#64c1641f455d61662e7674cca4896f4ee4e72792"
-  integrity sha512-wZF3TUNVn/DGoLfMlg3wFbYmh+vhLDSZ6fcIVcVH6xuf/v9Es4aXcynYvEiyO71zniv4TqsUEhQkwPJ1xnz5FQ==
-  dependencies:
-    lodash.throttle "^4.1.1"
-
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -5424,6 +5412,11 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
+split.js@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/split.js/-/split.js-1.6.2.tgz#b8c63aeef2b15d84a003ead09e7def6ad166bb40"
+  integrity sha512-72C7zcQePzlmWqPOKkB2Ro0sUmnWSx+qEWXjLJKk6Qp4jAkFRz1hJgJb+ay6ZQyz/Aw9r8N/PZiCEKbPVpFoDQ==
+
 sprintf-js@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.1.2.tgz#da1765262bf8c0f571749f2ad6c26300207ae673"