allow resize menu by drag side on tests/debug.html (#677)

It's about resizing the left panel by dragging along the right side.
maplibre · May 25, 2023 · c24bc06 · c24bc06
1 parent 4442473
commit c24bc06
Showing 1 changed file with 65 additions and 13 deletions.
diff --git a/tests/debug.html b/tests/debug.html
@@ -26,15 +26,13 @@
       #menu {
         background: #fff;
         position: absolute;
+        right: 5px;
         z-index: 1;
-        top: 10px;
-        bottom: 10px;
-        left: 10px;
+        width: 100%;
+        height: 100%;
         border-radius: 3px;
-        width: 120px;
         font-family: 'Open Sans', sans-serif;
         overflow: scroll;
-        resize: horizontal;
       }
 
       #menu a {
@@ -103,20 +101,74 @@
       #colorbox::-moz-color-swatch {
         border: none;
       }
+
+      #container {
+        position: absolute;
+        top: 10px;
+        bottom: 10px;
+        left: 10px;
+        width: 120px;
+        height: 95vh;
+      }
+
+      .resizer {
+        position: absolute;
+        cursor: col-resize;
+        height: 100%;
+        right: 0;
+        top: 0;
+        width: 5px;
+        z-index: 1;
+      }
     </style>
   </head>
 
   <body>
-    <nav id="menu">
-      <input
-        oninput="handleSearch()"
-        id="menu-search"
-        type="search"
-        placeholder="Search..."
-      />
-    </nav>
+    <div id="container">
+      <nav id="menu">
+        <input
+          oninput="handleSearch()"
+          id="menu-search"
+          type="search"
+          placeholder="Search..."
+        />
+      </nav>
+      <div class="resizer"></div>
+      </div>
     <div id="map"></div>
+    <script>
+      //ignore this ,it's just to allow user resize menu by drag
+      const container = document.getElementById('container');
+
+      let x = 0;
+      let y = 0;
+      let w = 0;
+
+      const mouseDownHandler = function (e) {
+        x = e.clientX;
+        y = e.clientY;
+
+        const styles = window.getComputedStyle(container);
+        w = parseInt(styles.width, 10);
+
+        document.addEventListener('mousemove', mouseMoveHandler);
+        document.addEventListener('mouseup', mouseUpHandler);
+      };
+
+      const mouseMoveHandler = function (e) {
+        const dx = e.clientX - x;
+        const dy = e.clientY - y;
+
+        container.style.width = `${w + dx}px`;
+      };
 
+      container.addEventListener('mousedown', mouseDownHandler)
+
+      const mouseUpHandler = function () {
+        document.removeEventListener('mousemove', mouseMoveHandler);
+        document.removeEventListener('mouseup', mouseUpHandler);
+      };
+    </script>
     <script>
       function handleSearch() {
         const search = document.getElementById("menu-search").value;