/** * Create mouse bindings */ (function () { /** * Global registry to store mouse shortcuts for multiple elements */ const MouseRegistry = { elements: new Map(), // elementId -> { tree, element } listenerAttached: false, snapshotHistory: [], pendingTimeout: null, pendingMatches: [], // Array of matches waiting for timeout sequenceTimeout: 500, // 500ms timeout for sequences clickHandler: null, contextmenuHandler: null }; /** * Normalize mouse action names * @param {string} action - The action to normalize * @returns {string} - Normalized action name */ function normalizeAction(action) { const normalized = action.toLowerCase().trim(); // Handle aliases const aliasMap = { 'rclick': 'right_click' }; return aliasMap[normalized] || normalized; } /** * Create a unique string key from a Set of actions for Map indexing * @param {Set} actionSet - Set of normalized actions * @returns {string} - Sorted string representation */ function setToKey(actionSet) { return Array.from(actionSet).sort().join('+'); } /** * Parse a single element (can be a simple click or click with modifiers) * @param {string} element - The element string (e.g., "click" or "ctrl+click") * @returns {Set} - Set of normalized actions */ function parseElement(element) { if (element.includes('+')) { // Click with modifiers return new Set(element.split('+').map(a => normalizeAction(a))); } // Simple click return new Set([normalizeAction(element)]); } /** * Parse a combination string into sequence elements * @param {string} combination - The combination string (e.g., "click right_click") * @returns {Array} - Array of Sets representing the sequence */ function parseCombination(combination) { // Check if it's a sequence (contains space) if (combination.includes(' ')) { return combination.split(' ').map(el => parseElement(el.trim())); } // Single element (can be a click or click with modifiers) return [parseElement(combination)]; } /** * Create a new tree node * @returns {Object} - New tree node */ function createTreeNode() { return { config: null, combinationStr: null, children: new Map() }; } /** * Build a tree from combinations * @param {Object} combinations - Map of combination strings to HTMX config objects * @returns {Object} - Root tree node */ function buildTree(combinations) { const root = createTreeNode(); for (const [combinationStr, config] of Object.entries(combinations)) { const sequence = parseCombination(combinationStr); console.log("Parsing mouse combination", combinationStr, "=>", sequence); let currentNode = root; for (const actionSet of sequence) { const key = setToKey(actionSet); if (!currentNode.children.has(key)) { currentNode.children.set(key, createTreeNode()); } currentNode = currentNode.children.get(key); } // Mark as end of sequence and store config currentNode.config = config; currentNode.combinationStr = combinationStr; } return root; } /** * Traverse the tree with the current snapshot history * @param {Object} treeRoot - Root of the tree * @param {Array} snapshotHistory - Array of Sets representing mouse actions * @returns {Object|null} - Current node or null if no match */ function traverseTree(treeRoot, snapshotHistory) { let currentNode = treeRoot; for (const snapshot of snapshotHistory) { const key = setToKey(snapshot); if (!currentNode.children.has(key)) { return null; } currentNode = currentNode.children.get(key); } return currentNode; } /** * Check if we're inside an input element where clicking should work normally * @returns {boolean} - True if inside an input-like element */ function isInInputContext() { const activeElement = document.activeElement; if (!activeElement) return false; const tagName = activeElement.tagName.toLowerCase(); // Check for input/textarea if (tagName === 'input' || tagName === 'textarea') { return true; } // Check for contenteditable if (activeElement.isContentEditable) { return true; } return false; } /** * Get the element that was actually clicked (from registered elements) * @param {Element} target - The clicked element * @returns {string|null} - Element ID if found, null otherwise */ function findRegisteredElement(target) { // Check if target itself is registered if (target.id && MouseRegistry.elements.has(target.id)) { return target.id; } // Check if any parent is registered let current = target.parentElement; while (current) { if (current.id && MouseRegistry.elements.has(current.id)) { return current.id; } current = current.parentElement; } return null; } /** * Create a snapshot from mouse event * @param {MouseEvent} event - The mouse event * @param {string} baseAction - The base action ('click' or 'right_click') * @returns {Set} - Set of actions representing this click */ function createSnapshot(event, baseAction) { const actions = new Set([baseAction]); // Add modifiers if present if (event.ctrlKey || event.metaKey) { actions.add('ctrl'); } if (event.shiftKey) { actions.add('shift'); } if (event.altKey) { actions.add('alt'); } return actions; } /** * Trigger an action for a matched combination * @param {string} elementId - ID of the element * @param {Object} config - HTMX configuration object * @param {string} combinationStr - The matched combination string * @param {boolean} isInside - Whether the click was inside the element */ function triggerAction(elementId, config, combinationStr, isInside) { const element = document.getElementById(elementId); if (!element) return; const hasFocus = document.activeElement === element; // Extract HTTP method and URL from hx-* attributes let method = 'POST'; // default let url = null; const methodMap = { 'hx-post': 'POST', 'hx-get': 'GET', 'hx-put': 'PUT', 'hx-delete': 'DELETE', 'hx-patch': 'PATCH' }; for (const [attr, httpMethod] of Object.entries(methodMap)) { if (config[attr]) { method = httpMethod; url = config[attr]; break; } } if (!url) { console.error('No HTTP method attribute found in config:', config); return; } // Build htmx.ajax options const htmxOptions = {}; // Map hx-target to target if (config['hx-target']) { htmxOptions.target = config['hx-target']; } // Map hx-swap to swap if (config['hx-swap']) { htmxOptions.swap = config['hx-swap']; } // Map hx-vals to values and add combination, has_focus, and is_inside const values = {}; if (config['hx-vals']) { Object.assign(values, config['hx-vals']); } values.combination = combinationStr; values.has_focus = hasFocus; values.is_inside = isInside; htmxOptions.values = values; // Add any other hx-* attributes (like hx-headers, hx-select, etc.) for (const [key, value] of Object.entries(config)) { if (key.startsWith('hx-') && !['hx-post', 'hx-get', 'hx-put', 'hx-delete', 'hx-patch', 'hx-target', 'hx-swap', 'hx-vals'].includes(key)) { // Remove 'hx-' prefix and convert to camelCase const optionKey = key.substring(3).replace(/-([a-z])/g, (g) => g[1].toUpperCase()); htmxOptions[optionKey] = value; } } // Make AJAX call with htmx htmx.ajax(method, url, htmxOptions); } /** * Handle mouse events and trigger matching combinations * @param {MouseEvent} event - The mouse event * @param {string} baseAction - The base action ('click' or 'right_click') */ function handleMouseEvent(event, baseAction) { // Different behavior for click vs right_click if (baseAction === 'click') { // Click: trigger for ALL registered elements (useful for closing modals/popups) handleGlobalClick(event); } else if (baseAction === 'right_click') { // Right-click: trigger ONLY if clicked on a registered element handleElementRightClick(event); } } /** * Handle global click events (triggers for all registered elements) * @param {MouseEvent} event - The mouse event */ function handleGlobalClick(event) { console.debug("Global click detected"); // Create a snapshot of current mouse action with modifiers const snapshot = createSnapshot(event, 'click'); // Add snapshot to history MouseRegistry.snapshotHistory.push(snapshot); // Cancel any pending timeout if (MouseRegistry.pendingTimeout) { clearTimeout(MouseRegistry.pendingTimeout); MouseRegistry.pendingTimeout = null; MouseRegistry.pendingMatches = []; } // Collect match information for ALL registered elements const currentMatches = []; let anyHasLongerSequence = false; let foundAnyMatch = false; for (const [elementId, data] of MouseRegistry.elements) { const element = document.getElementById(elementId); if (!element) continue; // Check if click was inside this element const isInside = element.contains(event.target); const treeRoot = data.tree; // Traverse the tree with current snapshot history const currentNode = traverseTree(treeRoot, MouseRegistry.snapshotHistory); if (!currentNode) { // No match in this tree continue; } // We found at least a partial match foundAnyMatch = true; // Check if we have a match (node has config) const hasMatch = currentNode.config !== null; // Check if there are longer sequences possible (node has children) const hasLongerSequences = currentNode.children.size > 0; if (hasLongerSequences) { anyHasLongerSequence = true; } // Collect matches if (hasMatch) { currentMatches.push({ elementId: elementId, config: currentNode.config, combinationStr: currentNode.combinationStr, isInside: isInside }); } } // Prevent default if we found any match and not in input context if (currentMatches.length > 0 && !isInInputContext()) { event.preventDefault(); } // Decision logic based on matches and longer sequences if (currentMatches.length > 0 && !anyHasLongerSequence) { // We have matches and NO longer sequences possible // Trigger ALL matches immediately for (const match of currentMatches) { triggerAction(match.elementId, match.config, match.combinationStr, match.isInside); } // Clear history after triggering MouseRegistry.snapshotHistory = []; } else if (currentMatches.length > 0 && anyHasLongerSequence) { // We have matches but longer sequences are possible // Wait for timeout - ALL current matches will be triggered if timeout expires MouseRegistry.pendingMatches = currentMatches; MouseRegistry.pendingTimeout = setTimeout(() => { // Timeout expired, trigger ALL pending matches for (const match of MouseRegistry.pendingMatches) { triggerAction(match.elementId, match.config, match.combinationStr, match.isInside); } // Clear state MouseRegistry.snapshotHistory = []; MouseRegistry.pendingMatches = []; MouseRegistry.pendingTimeout = null; }, MouseRegistry.sequenceTimeout); } else if (currentMatches.length === 0 && anyHasLongerSequence) { // No matches yet but longer sequences are possible // Just wait, don't trigger anything } else { // No matches and no longer sequences possible // This is an invalid sequence - clear history MouseRegistry.snapshotHistory = []; } // If we found no match at all, clear the history if (!foundAnyMatch) { MouseRegistry.snapshotHistory = []; } // Also clear history if it gets too long (prevent memory issues) if (MouseRegistry.snapshotHistory.length > 10) { MouseRegistry.snapshotHistory = []; } } /** * Handle right-click events (triggers only for clicked element) * @param {MouseEvent} event - The mouse event */ function handleElementRightClick(event) { // Find which registered element was clicked const elementId = findRegisteredElement(event.target); if (!elementId) { // Right-click wasn't on a registered element - don't prevent default // This allows browser context menu to appear return; } console.debug("Right-click on registered element", elementId); // For right-click, clicked_inside is always true (we only trigger if clicked on element) const clickedInside = true; // Create a snapshot of current mouse action with modifiers const snapshot = createSnapshot(event, 'right_click'); // Add snapshot to history MouseRegistry.snapshotHistory.push(snapshot); // Cancel any pending timeout if (MouseRegistry.pendingTimeout) { clearTimeout(MouseRegistry.pendingTimeout); MouseRegistry.pendingTimeout = null; MouseRegistry.pendingMatches = []; } // Collect match information for this element const currentMatches = []; let anyHasLongerSequence = false; let foundAnyMatch = false; const data = MouseRegistry.elements.get(elementId); if (!data) return; const treeRoot = data.tree; // Traverse the tree with current snapshot history const currentNode = traverseTree(treeRoot, MouseRegistry.snapshotHistory); if (!currentNode) { // No match in this tree console.debug("No match in tree for right-click"); // Clear history for invalid sequences MouseRegistry.snapshotHistory = []; return; } // We found at least a partial match foundAnyMatch = true; // Check if we have a match (node has config) const hasMatch = currentNode.config !== null; // Check if there are longer sequences possible (node has children) const hasLongerSequences = currentNode.children.size > 0; if (hasLongerSequences) { anyHasLongerSequence = true; } // Collect matches if (hasMatch) { currentMatches.push({ elementId: elementId, config: currentNode.config, combinationStr: currentNode.combinationStr, isInside: true // Right-click only triggers when clicking on element }); } // Prevent default if we found any match and not in input context if (currentMatches.length > 0 && !isInInputContext()) { event.preventDefault(); } // Decision logic based on matches and longer sequences if (currentMatches.length > 0 && !anyHasLongerSequence) { // We have matches and NO longer sequences possible // Trigger ALL matches immediately for (const match of currentMatches) { triggerAction(match.elementId, match.config, match.combinationStr, match.isInside); } // Clear history after triggering MouseRegistry.snapshotHistory = []; } else if (currentMatches.length > 0 && anyHasLongerSequence) { // We have matches but longer sequences are possible // Wait for timeout - ALL current matches will be triggered if timeout expires MouseRegistry.pendingMatches = currentMatches; MouseRegistry.pendingTimeout = setTimeout(() => { // Timeout expired, trigger ALL pending matches for (const match of MouseRegistry.pendingMatches) { triggerAction(match.elementId, match.config, match.combinationStr, match.isInside); } // Clear state MouseRegistry.snapshotHistory = []; MouseRegistry.pendingMatches = []; MouseRegistry.pendingTimeout = null; }, MouseRegistry.sequenceTimeout); } else if (currentMatches.length === 0 && anyHasLongerSequence) { // No matches yet but longer sequences are possible // Just wait, don't trigger anything } else { // No matches and no longer sequences possible // This is an invalid sequence - clear history MouseRegistry.snapshotHistory = []; } // If we found no match at all, clear the history if (!foundAnyMatch) { MouseRegistry.snapshotHistory = []; } // Also clear history if it gets too long (prevent memory issues) if (MouseRegistry.snapshotHistory.length > 10) { MouseRegistry.snapshotHistory = []; } } /** * Attach the global mouse event listeners if not already attached */ function attachGlobalListener() { if (!MouseRegistry.listenerAttached) { // Store handler references for proper removal MouseRegistry.clickHandler = (e) => handleMouseEvent(e, 'click'); MouseRegistry.contextmenuHandler = (e) => handleMouseEvent(e, 'right_click'); document.addEventListener('click', MouseRegistry.clickHandler); document.addEventListener('contextmenu', MouseRegistry.contextmenuHandler); MouseRegistry.listenerAttached = true; } } /** * Detach the global mouse event listeners */ function detachGlobalListener() { if (MouseRegistry.listenerAttached) { document.removeEventListener('click', MouseRegistry.clickHandler); document.removeEventListener('contextmenu', MouseRegistry.contextmenuHandler); MouseRegistry.listenerAttached = false; // Clean up handler references MouseRegistry.clickHandler = null; MouseRegistry.contextmenuHandler = null; // Clean up all state MouseRegistry.snapshotHistory = []; if (MouseRegistry.pendingTimeout) { clearTimeout(MouseRegistry.pendingTimeout); MouseRegistry.pendingTimeout = null; } MouseRegistry.pendingMatches = []; } } /** * Add mouse support to an element * @param {string} elementId - The ID of the element * @param {string} combinationsJson - JSON string of combinations mapping */ window.add_mouse_support = function (elementId, combinationsJson) { // Parse the combinations JSON const combinations = JSON.parse(combinationsJson); // Build tree for this element const tree = buildTree(combinations); // Get element reference const element = document.getElementById(elementId); if (!element) { console.error("Element with ID", elementId, "not found!"); return; } // Add to registry MouseRegistry.elements.set(elementId, { tree: tree, element: element }); // Attach global listener if not already attached attachGlobalListener(); }; /** * Remove mouse support from an element * @param {string} elementId - The ID of the element */ window.remove_mouse_support = function (elementId) { // Remove from registry if (!MouseRegistry.elements.has(elementId)) { console.warn("Element with ID", elementId, "not found in mouse registry!"); return; } MouseRegistry.elements.delete(elementId); // If no more elements, detach global listeners if (MouseRegistry.elements.size === 0) { detachGlobalListener(); } }; })();