www: optimize file browser splitter for mobile

marcone · Feb 5, 2024 · 68c1091 · 68c1091
1 parent edec4ca
commit 68c1091
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/teslausb-www/html/filebrowser.css b/teslausb-www/html/filebrowser.css
@@ -1,9 +1,3 @@
-@media(hover: none) {
-  .fb-splitter {
-    width: 15px !important;
-  }
-}
-
 #musicbrowser {
   font-size: 16px;
 }
@@ -28,6 +22,25 @@
   touch-action: none;
 }
 
+.fb-splitterflag {
+  position: fixed;
+  width: 40px;
+  height: 64px;
+  top: 50%;
+  background: #ccc;
+  border-style: solid;
+  border-color: #444;
+  border-width: 1px 0px 1px 1px;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+@media(hover: hover) {
+  .fb-splitterflag {
+    visibility: hidden;
+  }
+}
+
 .fb-selection-rect {
   position: absolute;
   background-color: rgba(20, 137, 189, 0.5);

diff --git a/teslausb-www/html/filebrowser.js b/teslausb-www/html/filebrowser.js
@@ -43,6 +43,7 @@ class FileBrowser {
         <ul class="fb-tree"></ul>
       </div>
       <div class="fb-splitter"></div>
+      <div class="fb-splitterflag"></div>
       <div class="fb-filesdiv">
         <div class="fb-dirpath"></div>
         <div class="fb-fileslist"></div>
@@ -66,6 +67,9 @@ class FileBrowser {
 
     const splitter = this.anchor_elem.querySelector(".fb-splitter");
     splitter.onpointerdown = (e) => { this.splitterPointerDown(e); };
+    const splitterflag = this.anchor_elem.querySelector(".fb-splitterflag");
+    splitterflag.onpointerdown = (e) => { this.splitterPointerDown(e); };
+    this.splitterSetFlagPos();
 
     const fileList = this.anchor_elem.querySelector('.fb-fileslist');
     fileList.onpointerdown = (e) => { this.listPointerDown(e); };
@@ -354,13 +358,23 @@ class FileBrowser {
     }
   }
 
+  splitterSetFlagPos() {
+    const splitter = this.anchor_elem.querySelector(".fb-splitter");
+    const splitterflag = this.anchor_elem.querySelector(".fb-splitterflag");
+    splitterflag.style.left = (splitter.getBoundingClientRect().x - 
+      splitterflag.getBoundingClientRect().width + 1) + "px";
+  }
+
   splitterPointerMove(event) {
-    var treediv = this.anchor_elem.querySelector(".fb-splitter").previousElementSibling;
-    treediv.style.width = `${event.clientX - this.splitter_clickoffset - 2}px`;
+    const treediv = this.anchor_elem.querySelector(".fb-splitter").previousElementSibling;
+    const treedivrect = treediv.getBoundingClientRect();
+    const newwidth = event.clientX + this.splitter_clickoffset - treedivrect.x;
+    treediv.style.width = `${newwidth}px`;
+    this.splitterSetFlagPos();
   }
 
   splitterPointerUp(event) {
-    var splitter = event.target;
+    const splitter = event.target;
     splitter.removeEventListener("pointermove", this.splitterPointerMove);
     splitter.removeEventListener("pointerup", this.splitterPointerUp);
     splitter.releasePointerCapture(event.pointerId);
@@ -372,7 +386,9 @@ class FileBrowser {
     splitter.addEventListener("pointermove", this.splitterPointerMove);
     splitter.addEventListener("pointerup", this.splitterPointerUp);
     splitter.setPointerCapture(event.pointerId);
-    this.splitter_clickoffset = event.offsetX;
+    const treediv = this.anchor_elem.querySelector(".fb-splitter").previousElementSibling;
+    const treedivrect = treediv.getBoundingClientRect();
+    this.splitter_clickoffset = treedivrect.x + treedivrect.width - event.clientX;
     this.splitter_active = true;
   }