collabmd 0.1.21 → 0.1.25

package/src/client/presentation/file-explorer-view.js

@@ -35,24 +35,36 @@ function findNodeByPath(nodes = [], pathValue = '') {
   return null;
 }
 
+const MOBILE_LONG_PRESS_DELAY_MS = 420;
+const MOBILE_LONG_PRESS_MOVE_TOLERANCE_PX = 10;
+
 export class FileExplorerView {
   constructor({
+    mobileBreakpointQuery = window.matchMedia('(max-width: 768px)'),
+    onDirectorySelect,
     onDirectoryToggle,
     onFileContextMenu,
     onFileSelect,
     onSearchChange,
     onTreeContextMenu,
   }) {
+    this.onDirectorySelect = onDirectorySelect;
     this.onDirectoryToggle = onDirectoryToggle;
     this.onFileContextMenu = onFileContextMenu;
     this.onFileSelect = onFileSelect;
     this.onSearchChange = onSearchChange;
     this.onTreeContextMenu = onTreeContextMenu;
+    this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.treeContainer = document.getElementById('fileTree');
     this.searchInput = document.getElementById('fileSearchInput');
     this.renderedDirectoryWrappers = new Map();
     this.renderedChildContainers = new Map();
     this.lastRenderMode = 'tree';
+    this.longPressTimer = 0;
+    this.longPressContext = null;
+    this.suppressedActivationTarget = null;
+    this.contextMenuCloseHandler = null;
+    this.actionSheetCloseHandler = null;
   }
 
   initialize() {
@@ -68,6 +80,33 @@ export class FileExplorerView {
       event.preventDefault();
       this.onTreeContextMenu?.(event);
     });
+
+    this.treeContainer?.addEventListener('pointerdown', (event) => {
+      if (event.target.closest('.file-tree-item')) {
+        return;
+      }
+
+      this.startLongPress(event, () => {
+        this.onTreeContextMenu?.({
+          clientX: Number(event.clientX || 0),
+          clientY: Number(event.clientY || 0),
+          preventDefault() {},
+          target: this.treeContainer,
+        });
+      }, this.treeContainer);
+    });
+    this.treeContainer?.addEventListener('pointermove', (event) => {
+      this.handleLongPressPointerMove(event);
+    }, { passive: true });
+    this.treeContainer?.addEventListener('pointerup', () => {
+      this.cancelLongPress();
+    });
+    this.treeContainer?.addEventListener('pointercancel', () => {
+      this.cancelLongPress();
+    });
+    this.treeContainer?.addEventListener('scroll', () => {
+      this.cancelLongPress();
+    }, { passive: true });
   }
 
   render({ activeFilePath, changedPaths = null, expandedDirs, reset = false, searchMatches, searchQuery, tree }) {
@@ -75,6 +114,10 @@ export class FileExplorerView {
       return;
     }
 
+    if (this.searchInput && this.searchInput.value !== searchQuery) {
+      this.searchInput.value = searchQuery;
+    }
+
     if (searchQuery) {
       this.lastRenderMode = 'search';
       this.renderSearchResults(searchMatches, activeFilePath);
@@ -142,13 +185,18 @@ export class FileExplorerView {
     }
 
     const fragment = document.createDocumentFragment();
-    for (const filePath of matches) {
+    for (const match of matches) {
+      if (match.type === 'directory') {
+        fragment.appendChild(this.createSearchDirectoryItem(match));
+        continue;
+      }
+
       fragment.appendChild(this.createFileItem({
         activeFilePath,
         depth: 0,
-        filePath,
-        fileType: getVaultTreeNodeType(filePath) ?? 'file',
-        name: getPathLeaf(filePath),
+        filePath: match.path,
+        fileType: match.type || (getVaultTreeNodeType(match.path) ?? 'file'),
+        name: match.name || getPathLeaf(match.path),
       }));
     }
     this.treeContainer.appendChild(fragment);
@@ -215,13 +263,19 @@ export class FileExplorerView {
       <span class="file-tree-name">${escapeHtml(node.name)}</span>
     `;
 
-    button.addEventListener('click', () => {
+    button.addEventListener('click', (event) => {
+      if (this.consumeSuppressedActivation(button, event)) {
+        return;
+      }
       this.onDirectoryToggle?.(node.path);
     });
     button.addEventListener('contextmenu', (event) => {
       event.preventDefault();
       this.onFileContextMenu?.(event, { directoryPath: node.path, type: 'directory' });
     });
+    this.bindLongPress(button, () => {
+      this.onFileContextMenu?.(this.createLongPressEvent(button), { directoryPath: node.path, type: 'directory' });
+    });
 
     wrapper.appendChild(button);
     this.renderedDirectoryWrappers.set(node.path, wrapper);
@@ -243,6 +297,33 @@ export class FileExplorerView {
     return wrapper;
   }
 
+  createSearchDirectoryItem(node) {
+    const button = document.createElement('button');
+    button.className = 'file-tree-item file-tree-dir';
+    button.style.setProperty('--depth', 0);
+    button.dataset.depth = 0;
+    button.innerHTML = `
+      <svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+      <span class="file-tree-name">${escapeHtml(node.name || getPathLeaf(node.path))}</span>
+    `;
+
+    button.addEventListener('click', (event) => {
+      if (this.consumeSuppressedActivation(button, event)) {
+        return;
+      }
+      this.onDirectorySelect?.(node.path);
+    });
+    button.addEventListener('contextmenu', (event) => {
+      event.preventDefault();
+      this.onFileContextMenu?.(event, { directoryPath: node.path, type: 'directory' });
+    });
+    this.bindLongPress(button, () => {
+      this.onFileContextMenu?.(this.createLongPressEvent(button), { directoryPath: node.path, type: 'directory' });
+    });
+
+    return button;
+  }
+
   rerenderDirectoryBranch(parentPath, tree, { activeFilePath, expandedDirs }) {
     const wrapper = this.renderedDirectoryWrappers.get(parentPath);
     const parentNode = findNodeByPath(tree, parentPath);
@@ -330,17 +411,124 @@ export class FileExplorerView {
       <span class="file-tree-name">${escapeHtml(stripVaultFileExtension(name))}</span>
     `;
 
-    button.addEventListener('click', () => {
+    button.addEventListener('click', (event) => {
+      if (this.consumeSuppressedActivation(button, event)) {
+        return;
+      }
       this.onFileSelect?.(filePath);
     });
     button.addEventListener('contextmenu', (event) => {
       event.preventDefault();
       this.onFileContextMenu?.(event, { filePath, type: 'file' });
     });
+    this.bindLongPress(button, () => {
+      this.onFileContextMenu?.(this.createLongPressEvent(button), { filePath, type: 'file' });
+    });
 
     return button;
   }
 
+  isMobileViewport() {
+    return Boolean(this.mobileBreakpointQuery?.matches);
+  }
+
+  bindLongPress(element, callback) {
+    if (!(element instanceof HTMLElement) || typeof callback !== 'function') {
+      return;
+    }
+
+    element.addEventListener('pointerdown', (event) => {
+      this.startLongPress(event, callback, element);
+    });
+    element.addEventListener('pointermove', (event) => {
+      this.handleLongPressPointerMove(event);
+    }, { passive: true });
+    element.addEventListener('pointerup', () => {
+      this.cancelLongPress();
+    });
+    element.addEventListener('pointercancel', () => {
+      this.cancelLongPress();
+    });
+    element.addEventListener('pointerleave', () => {
+      this.cancelLongPress();
+    });
+  }
+
+  startLongPress(event, callback, target = null) {
+    if (!this.isMobileViewport()) {
+      return;
+    }
+
+    if (!['touch', 'pen'].includes(String(event.pointerType || ''))) {
+      return;
+    }
+
+    if (Number(event.button ?? 0) !== 0) {
+      return;
+    }
+
+    this.cancelLongPress();
+    this.longPressContext = {
+      callback,
+      pointerId: event.pointerId,
+      startX: Number(event.clientX || 0),
+      startY: Number(event.clientY || 0),
+      target: target ?? event.currentTarget ?? event.target ?? null,
+    };
+    this.longPressTimer = window.setTimeout(() => {
+      const activeContext = this.longPressContext;
+      this.longPressTimer = 0;
+      if (!activeContext) {
+        return;
+      }
+
+      this.suppressedActivationTarget = activeContext.target;
+      activeContext.callback();
+      this.longPressContext = null;
+    }, MOBILE_LONG_PRESS_DELAY_MS);
+  }
+
+  handleLongPressPointerMove(event) {
+    if (!this.longPressContext || event.pointerId !== this.longPressContext.pointerId) {
+      return;
+    }
+
+    const deltaX = Math.abs(Number(event.clientX || 0) - this.longPressContext.startX);
+    const deltaY = Math.abs(Number(event.clientY || 0) - this.longPressContext.startY);
+    if (deltaX > MOBILE_LONG_PRESS_MOVE_TOLERANCE_PX || deltaY > MOBILE_LONG_PRESS_MOVE_TOLERANCE_PX) {
+      this.cancelLongPress();
+    }
+  }
+
+  cancelLongPress() {
+    if (this.longPressTimer) {
+      window.clearTimeout(this.longPressTimer);
+      this.longPressTimer = 0;
+    }
+    this.longPressContext = null;
+  }
+
+  createLongPressEvent(target) {
+    return {
+      clientX: this.longPressContext?.startX ?? 0,
+      clientY: this.longPressContext?.startY ?? 0,
+      preventDefault() {},
+      stopPropagation() {},
+      target,
+    };
+  }
+
+  consumeSuppressedActivation(target, event) {
+    if (this.suppressedActivationTarget !== target) {
+      return false;
+    }
+
+    this.suppressedActivationTarget = null;
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    return true;
+  }
+
   getFileIconSvg({ isExcalidraw, isImage, isMermaid, isPlantUml }) {
     if (isExcalidraw) {
       return '<svg class="file-tree-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>';
@@ -368,6 +556,11 @@ export class FileExplorerView {
       return;
     }
 
+    if (this.isMobileViewport()) {
+      this.showActionSheet(items);
+      return;
+    }
+
     const menu = document.createElement('div');
     menu.className = 'file-context-menu';
 
@@ -393,13 +586,61 @@ export class FileExplorerView {
     const close = (closeEvent) => {
       if (!menu.contains(closeEvent.target)) {
         this.removeContextMenu();
-        document.removeEventListener('click', close);
       }
     };
+    this.contextMenuCloseHandler = close;
     setTimeout(() => document.addEventListener('click', close), 0);
   }
 
+  showActionSheet(items) {
+    const backdrop = document.createElement('button');
+    backdrop.type = 'button';
+    backdrop.className = 'file-action-sheet-backdrop';
+    backdrop.setAttribute('aria-label', 'Close file actions');
+
+    const sheet = document.createElement('div');
+    sheet.className = 'file-action-sheet';
+
+    items.forEach((item) => {
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.className = `ui-button btn btn-secondary file-action-sheet-item${item.danger ? ' file-context-danger' : ''}`;
+      button.textContent = item.label;
+      button.addEventListener('click', () => {
+        this.removeContextMenu();
+        item.onSelect?.();
+      });
+      sheet.appendChild(button);
+    });
+
+    const cancelButton = document.createElement('button');
+    cancelButton.type = 'button';
+    cancelButton.className = 'ui-button btn btn-ghost file-action-sheet-item';
+    cancelButton.textContent = 'Cancel';
+    cancelButton.addEventListener('click', () => {
+      this.removeContextMenu();
+    });
+    sheet.appendChild(cancelButton);
+
+    backdrop.addEventListener('click', () => {
+      this.removeContextMenu();
+    });
+
+    document.body.append(backdrop, sheet);
+    this.actionSheetCloseHandler = () => {
+      backdrop.remove();
+      sheet.remove();
+      this.actionSheetCloseHandler = null;
+    };
+  }
+
   removeContextMenu() {
+    this.cancelLongPress();
     document.querySelectorAll('.file-context-menu').forEach((menu) => menu.remove());
+    if (this.contextMenuCloseHandler) {
+      document.removeEventListener('click', this.contextMenuCloseHandler);
+      this.contextMenuCloseHandler = null;
+    }
+    this.actionSheetCloseHandler?.();
   }
 }