js实现斜杠菜单展开并支持左右方向键

// js实现斜杠菜单展开并支持左右方向键
(() => {
    // 使用兼容模式，
    // 如果左右箭头有问题，可以使用兼容模式，兼容模式用ctrl/cmd + 方向键移动
    // 默认false，未开启，设为true开启
    const useCompatibilityMode  = false;

    // 搜索时，虚拟分组列表跳转位置
    // currpos 直接跳转到下一列的相同位置
    // first 跳转到下一列的第一个元素那里，默认first
    const searchGroupSkipPos = "first";

    // 校正因子
    // 虚拟分组情况下，当左右方向键跳转有错误时，可以通过微调该参数进行校正，
    // 此时控制台会输出当前计算的分组大小，只要输出结果和实际一致就可以了
    // 可输入正值或负值或小数
    const correctionFactor = 0;

    ////////////// 以下代码不涉及配置项，如无必要勿动 //////////////////////////
    // 筛选时虚拟列表跳过元素个数
    // 由于筛选列表没有分组，这里用跳过元素数代替，这个变量会自动修改，手动修改无效
    let skipElementNumInSearch = 3;

    // 初始化最后一个分组的大小，用于分组筛选时方向键跳转的判断依据，会实时计算
    let lastGroupSize = 1;
  
    // 判断是否默认主题
    //const theme = siyuan.config.appearance.mode === 0 ? siyuan.config.appearance.themeLight : siyuan.config.appearance.themeDark;
    //if(theme !== 'midnight' && theme !== 'daylight') return;

    // 注入css，解决第一个元素边距导致的列表内容不对齐
    const dialogStyle = document.createElement('style');
    dialogStyle.textContent = `
        .hint--menu:not(.fn__none) button:nth-child(1) {
            margin-top: 0;
        }
    `;
    document.head.appendChild(dialogStyle);

    // 设置下一个元素的焦点
    function nextElementFocus(nextElement) {
        const menu = document.querySelector(".hint--menu:not(.fn__none)");
        const currentFocus = menu.querySelector('.b3-list-item--focus');
        currentFocus.classList.remove("b3-list-item--focus");
        nextElement?.classList.add("b3-list-item--focus");
    }

    // 获取下一个分组元素的焦点
    function focusNextGroupButton() {
        const menu = document.querySelector(".hint--menu:not(.fn__none)");
        const currentFocus = menu.querySelector('.b3-list-item--focus');
        let nextElement = currentFocus.nextElementSibling;
  
        // 继续查找下一个元素，直到找到一个按钮或.b3-menu__separator
        while (nextElement && nextElement.classList.contains('b3-list-item') && !nextElement.classList.contains('b3-menu__separator')) {
            nextElement = nextElement.nextElementSibling;
        }
  
        // 如果找到了.b3-menu__separator，就聚焦到它的前一个按钮
        if (nextElement && nextElement.classList.contains('b3-menu__separator')) {
            nextElement = nextElement.nextElementSibling;
        }
  
        // 如果没有找到任何按钮或.b3-menu__separator，循环到列表开头
        if (!nextElement || !nextElement.classList.contains('b3-list-item')) {
            nextElement = menu.querySelector('.b3-list-item');
        }
  
        nextElementFocus(nextElement);
    }

    // 获取上一个分组元素的焦点
    function focusPreviousGroupButton() {
        const menu = document.querySelector(".hint--menu:not(.fn__none)");
        const currentFocus = menu.querySelector('.b3-list-item--focus');
        let previousElement = currentFocus.previousElementSibling;
  
        // 继续查找上一个元素，直到找到一个按钮或.b3-menu__separator
        while (previousElement && previousElement.classList.contains('b3-list-item') && !previousElement.classList.contains('b3-menu__separator')) {
            previousElement = previousElement.previousElementSibling;
        }
  
        // 如果找到了.b3-menu__separator，就聚焦到它的前一个按钮
        if (previousElement && previousElement.classList.contains('b3-menu__separator')) {
            previousElement = previousElement.previousElementSibling;
        }
  
        // 如果没有找到任何按钮或.b3-menu__separator，循环到列表结尾
        if (!previousElement || !previousElement.classList.contains('b3-list-item')) {
            previousElement = menu.querySelector('.b3-list-item:last-child');
        }
  
        nextElementFocus(getGroupFirstElement(previousElement));
    }

    // 获取分组的第一个元素
    function getGroupFirstElement(currentFocus) {
        const menu = document.querySelector(".hint--menu:not(.fn__none)");
        let previousElement = currentFocus.previousElementSibling;
  
        // 继续查找上一个元素，直到找到一个按钮或.b3-menu__separator
        while (previousElement && previousElement.classList.contains('b3-list-item') && !previousElement.classList.contains('b3-menu__separator')) {
            previousElement = previousElement.previousElementSibling;
        }
  
        // 如果找到了.b3-menu__separator，就聚焦到它的前一个按钮
        if (previousElement && previousElement.classList.contains('b3-menu__separator')) {
            previousElement = previousElement.nextElementSibling;
        }
  
        // 如果没有找到任何按钮或.b3-menu__separator，循环到列表结尾
        if (!previousElement || !previousElement.classList.contains('b3-list-item')) {
            previousElement = menu.querySelector('.b3-list-item');
        }
        return previousElement;
    }

    // 获取上一个元素
    function focusPreviousButton(type='') {
        const menu = document.querySelector(".hint--menu:not(.fn__none)");
        const currentFocus = menu.querySelector('.b3-list-item--focus');
        let previousElement = currentFocus.previousElementSibling;
        if(type === ''){
            if(previousElement.classList.contains("b3-menu__separator")){
                previousElement = previousElement.previousElementSibling;
            }
        }
        if(!previousElement || !previousElement.classList.contains('b3-list-item')){
            previousElement = menu.querySelector('.b3-list-item:last-child');
        }
        nextElementFocus(previousElement);
    }

    // 获取下一个元素
    function focusNextButton(type='') {
        const menu = document.querySelector(".hint--menu:not(.fn__none)");
        const currentFocus = menu.querySelector('.b3-list-item--focus');
        let nextElement = currentFocus.nextElementSibling;
        if(type === ''){
            if(nextElement.classList.contains("b3-menu__separator")){
                nextElement = nextElement.nextElementSibling;
            }
        }
        if(!nextElement || !nextElement.classList.contains('b3-list-item')){
            nextElement = menu.querySelector('.b3-list-item');
        }
        nextElementFocus(nextElement);
    }

    // 获取上n个元素
    function focusPreviousNButton() {
        const menu = document.querySelector(".hint--menu:not(.fn__none)");
        const currentFocus = menu.querySelector('.b3-list-item--focus');
        let previousElement = currentFocus.previousElementSibling;
        const num = menu.querySelectorAll('.b3-list-item').length;
        if(skipElementNumInSearch >= num) {
            focusPreviousButton('search');
            return;
        }
        let count = 1;
        while (previousElement && previousElement.classList.contains('b3-list-item') && count <= skipElementNumInSearch) {
            previousElement = previousElement.previousElementSibling;
            count++;
        }
        // 如果没有找到任何按钮，循环到列表开头
        if (!previousElement || !previousElement.classList.contains('b3-list-item')) {
            if(searchGroupSkipPos === "first") {
                previousElement = menu.querySelector('.b3-list-item:nth-last-child('+lastGroupSize+')');
            } else {
                previousElement = menu.querySelector('.b3-list-item:last-child');
            }
        }
        nextElementFocus(previousElement);
    }

    // 获取下n个元素
    function focusNextNButton() {
        const menu = document.querySelector(".hint--menu:not(.fn__none)");
        const currentFocus = menu.querySelector('.b3-list-item--focus');
        let nextElement = currentFocus.nextElementSibling;
        const num = menu.querySelectorAll('.b3-list-item').length;
        if(skipElementNumInSearch >= num) {
            focusNextButton('search');
            return;
        }
        let count = 1;
        while (nextElement && nextElement.classList.contains('b3-list-item') && count <= skipElementNumInSearch) {
            nextElement = nextElement.nextElementSibling;
            count++;
        }
        // 如果没有找到任何按钮或.b3-menu__separator，循环到列表开头
        if (!nextElement || !nextElement.classList.contains('b3-list-item')) {
            nextElement = menu.querySelector('.b3-list-item');
        }
        nextElementFocus(nextElement);
    }

    // 计算计算虚拟列表大小
    function calcSearchGroupSize(menu, type) {
        // 计算方法
        // 分组大小 = 父容器大小 / (button.ofoffsetHeight + button.margin)
        const menuContent = menu.firstElementChild;
        const menuContentHeiht = menuContent.offsetHeight;
        const button = menu.querySelector("button.b3-list-item:nth-child(2)");
        const buttonStyle = getComputedStyle(button, null);
        const buttonMargin = parseFloat(buttonStyle.marginTop) + parseFloat(buttonStyle.marginBottom);
        const buttonHeight = button.offsetHeight + buttonMargin;
        let groupSize = Math.round((menuContentHeiht + (parseFloat(correctionFactor)||0)) / buttonHeight);
        if(correctionFactor !== 0) console.log("当前分组大小", groupSize, "校正因子", correctionFactor);
        //console.log(groupSize, menuContentHeiht, buttonHeight);

        // 跳转方式
        if(searchGroupSkipPos === 'first') {
            // 跳转到下一列第一个元素位置
            // 算法
            // 1. 先计算当前在列表中的位置 = 当前所在条数 / 分组大小 取余
            // 2 计算下一跳间隔数（下一分组首位置）= 分组大小 - 当前在列表中的位置
            // 3 计算上一跳间隔数（上一分组首位置）= 当前在列表中的位置 - 1 + (分组大小 - 1)
            const currentFocus = menu.querySelector('.b3-list-item--focus');
            const currPos = getCurrPos(currentFocus);
            // 当余数为0时，说明当前在列表中是最后一个元素，currPosInGroup应等于groupSize
            const currPosInGroup = currPos % groupSize || groupSize;
            if(type === 'next'){
                // 下一跳
                const nexPos = groupSize - currPosInGroup;
                skipElementNumInSearch = nexPos;
            } else {
                // 上一跳
                let prevPos = currPosInGroup - 1 + (groupSize - 1);
                // 计算所有元素个数
                const groupNum = menu.querySelectorAll('button.b3-list-item').length;
                if(currPos <= groupSize) {
                    // 如果当前在第一列，则下一跳是最后一列，要计算最后一列分组的实际大小，可能不足groupSize
                    // 所有元素数 % 分组大小 即最后一列的实际大小，当为0时应取groupSize
                    lastGroupSize = groupNum % groupSize || groupSize;
                    // 当没有上一个元素了，会自动取最后最一组的倒数第lastGroupSize的那个元素（即最后最一组的第一个元素）
                    prevPos = currPosInGroup - 1 + (lastGroupSize - 1);
                }
                skipElementNumInSearch = prevPos;
            }
        } else {
            // 跳转到上一列/下一列相同位置
            // -1 是因为跳过n个元素，不含第一个或最后一个
            skipElementNumInSearch = groupSize - 1;
        }
    }

    // 获取焦点元素的当前位置
    function getCurrPos(focusedItem) {
        let count = 0;
        // 遍历当前元素的所有前兄弟元素
        for (let sibling = focusedItem.previousElementSibling; sibling; sibling = sibling.previousElementSibling) {
          // 如果前兄弟元素是 button 并且拥有 b3-list-item 类，则计数加一
          if (sibling.tagName.toLowerCase() === 'button' && sibling.classList.contains('b3-list-item')) {
            count++;
          }
        }
        return count + 1;
    }

    // 延迟执行
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    // 等待元素渲染完成后执行
    function whenElementExist(selector) {
        return new Promise(resolve => {
            const checkForElement = () => {
                let element = null;
                if (typeof selector === 'function') {
                    element = selector();
                } else {
                    element = document.querySelector(selector);
                }
                if (element) {
                    resolve(element);
                } else {
                    requestAnimationFrame(checkForElement);
                }
            };
            checkForElement();
        });
    }

    let hintMenuShow = false;
    let hintMenuTimer = null;
    function monitorHintMenu(layoutCenter) {
        // 定义一个回调函数处理 DOM 变化
        const observerCallback = (mutationsList) => {
            mutationsList.forEach((mutation) => {
                if (mutation.type === 'childList') {
                    // 当 layout__center 元素有新的子元素被添加或删除时触发
                    mutation.addedNodes.forEach((node) => {
                        if (node.classList && node.classList.contains('hint--menu')) {
                            // 检查新添加的节点是否是 .hint--menu
                            checkFnNoneClass(node);
                        }
                    });
                } else if (mutation.type === 'attributes' && mutation.target.classList.contains('hint--menu')) {
                    // 当 .hint--menu 元素的属性发生变化时触发
                    checkFnNoneClass(mutation.target);
                }
            });
        };
  
        // 检查是否有 .fn_none 类
        function checkFnNoneClass(node) {
            const hasFnNoneClass = node.classList.contains('fn__none');
            if(!hasFnNoneClass){
                // 显示menu
                hintMenuShow = true;
                if(hintMenuTimer) clearTimeout(hintMenuTimer);
            } else {
                // 隐藏menu
                if(hintMenuTimer) clearTimeout(hintMenuTimer);
                hintMenuTimer = setTimeout(()=>{ hintMenuShow = false; }, 100);
            }
        }
  
        // 配置 MutationObserver
        const config = { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] };
  
        // 创建一个新的 MutationObserver 实例
        const observer = new MutationObserver(observerCallback);
  
        // 开始观察 layout__center 元素
        observer.observe(layoutCenter, config);
  
        // 返回一个函数以停止观察
        return () => {
            observer.disconnect();
        };
    }

    // 监控menu显示状态
    if(!useCompatibilityMode) {
         // 等待标签页容器渲染完成后开始监听
        whenElementExist('.layout__center').then(async element => {
            monitorHintMenu(element);
        });
    }

    // 监听按键
    if(useCompatibilityMode) {
        // 使用兼容模式
        document.addEventListener('keydown', function(event) {
            const menu = document.querySelector(".hint--menu:not(.fn__none)");
            const sepEl = document.querySelector("div.b3-menu__separator");
            if(menu && (event.ctrlKey || event.metaKey)){
                if (event.key === 'ArrowRight') {
                    if(sepEl){
                        focusNextGroupButton();
                    } else {
                        // 计算虚拟列表大小
                        calcSearchGroupSize(menu, 'next');
                        // 跳过n个元素
                        focusNextNButton();
                    }
                    event.preventDefault();
                    event.stopPropagation();
                } else if (event.key === 'ArrowLeft') {
                    if(sepEl){
                        focusPreviousGroupButton();
                    } else {
                        // 计算虚拟列表大小
                        calcSearchGroupSize(menu, 'prev');
                        // 跳过n个元素
                        focusPreviousNButton();
                    }
                    event.preventDefault();
                    event.stopPropagation();
                } else if (event.key === 'Escape') {
                    menu.classList.add("fn__none");
                    event.preventDefault();
                    event.stopPropagation();
                }
                // ctrl + 上下箭头 思源监控不到
                // else if (event.key === 'ArrowUp') {
                //     focusPreviousButton();
                // }
                // else if (event.key === 'ArrowDown') {
                //     focusNextButton();
                // }
            }
        });
    } else {
        // 不使用兼容模式
        document.addEventListener('keydown', function(event) {
            const menu = document.querySelector(".hint--menu");
            const sepEl = document.querySelector("div.b3-menu__separator");
            if(menu && hintMenuShow){
                menu.classList.remove("fn__none");
                if (event.key === 'ArrowRight') {
                    if(sepEl){
                        focusNextGroupButton();
                    } else {
                        // 计算虚拟列表大小
                        calcSearchGroupSize(menu, 'next');
                        // 跳过n个元素
                        focusNextNButton();
                    }
                    event.preventDefault();
                    event.stopPropagation();
                } else if (event.key === 'ArrowLeft') {
                    if(sepEl){
                        focusPreviousGroupButton();
                    } else {
                        // 计算虚拟列表大小
                        calcSearchGroupSize(menu, 'prev');
                        // 跳过n个元素
                        focusPreviousNButton();
                    }
                    event.preventDefault();
                    event.stopPropagation();
                } else if (event.key === 'Escape') {
                    menu.classList.add("fn__none");
                    event.preventDefault();
                    event.stopPropagation();
                }
            }
        });
    }
})();