Add Tree Selector

assets/modal.js

@@ -43,6 +43,7 @@
         backdrop.addEventListener('mousedown', function (e) {
             if (e.target === backdrop) close();
         });
+        wireDrag(header);
         cancelBtn.addEventListener('click', close);
         confirmBtn.addEventListener('click', function () {
             if (confirmBtn.disabled) return;
@@ -52,6 +53,53 @@
         });
     }
 
+    // wireDrag makes the modal draggable by `handle`. Dragging switches the
+    // modal to fixed positioning so flexbox alignment doesn't fight us.
+    function wireDrag(handle) {
+        var dragging = false;
+        var startX, startY, originX, originY;
+
+        function onDown(e) {
+            if (e.button !== undefined && e.button !== 0) return;
+            var pt = e.touches ? e.touches[0] : e;
+            var rect = modal.getBoundingClientRect();
+            modal.classList.add('is-dragged');
+            modal.style.position = 'fixed';
+            modal.style.left = rect.left + 'px';
+            modal.style.top = rect.top + 'px';
+            dragging = true;
+            startX = pt.clientX;
+            startY = pt.clientY;
+            originX = rect.left;
+            originY = rect.top;
+            e.preventDefault();
+        }
+
+        function onMove(e) {
+            if (!dragging) return;
+            var pt = e.touches ? e.touches[0] : e;
+            var dx = pt.clientX - startX;
+            var dy = pt.clientY - startY;
+            var w = modal.offsetWidth;
+            var h = modal.offsetHeight;
+            var maxX = window.innerWidth - w;
+            var maxY = window.innerHeight - h;
+            var x = Math.max(0, Math.min(maxX, originX + dx));
+            var y = Math.max(0, Math.min(maxY, originY + dy));
+            modal.style.left = x + 'px';
+            modal.style.top = y + 'px';
+        }
+
+        function onUp() { dragging = false; }
+
+        handle.addEventListener('mousedown', onDown);
+        handle.addEventListener('touchstart', onDown, { passive: false });
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('touchmove', onMove, { passive: false });
+        document.addEventListener('mouseup', onUp);
+        document.addEventListener('touchend', onUp);
+    }
+
     function open(opts) {
         if (backdrop && backdrop.parentNode) close();
         if (!backdrop) build();
@@ -59,6 +107,11 @@
         currentOpts = opts;
         prevFocus = document.activeElement;
 
+        modal.classList.remove('is-dragged');
+        modal.style.position = '';
+        modal.style.left = '';
+        modal.style.top = '';
+
         titleEl.textContent = opts.title || '';
 
         bodyEl.textContent = '';