监听全屏和退出全屏

see https://ld246.com/article/1731698559408

通过监听 window.siyuan.editorIsFullscreen 对象的变化实现

// 定义一个可观察的属性
window.siyuan._editorIsFullscreen = window.siyuan.editorIsFullscreen || false;
Object.defineProperty(window.siyuan, 'editorIsFullscreen', {
    get: function() {
        return this._editorIsFullscreen;
    },
    set: function(value) {
        const oldValue = this._editorIsFullscreen;
        this._editorIsFullscreen = value;
        // value true是全屏，false是退出全屏
        console.log(`editorIsFullscreen changed from ${oldValue} to ${value}`);
    },
    configurable: true,
    enumerable: true
});

通过监控类变化实现

// 监听其他元素全屏事件
observeClassAddition(protyle, 'fullscreen', (eventType) => {
    if(eventType === 'fullscreen'){
        fullScreenBtn.innerHTML = exitFullscreenSvg;
        fullScreenBtn.setAttribute('aria-label', '退出全屏');
    } else {
        fullScreenBtn.innerHTML = fullscreenSvg;
        fullScreenBtn.setAttribute('aria-label', '全屏');
    }
});
// 监听类名被添加
function observeClassAddition(element, className, callback) {
    if (!element) {
        console.error(`Element not found.`);
        return;
    }
    // 创建一个观察者实例
    const observer = new MutationObserver((mutationsList, observer) => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                // 检查类名是否包含指定的类名
                if (element.classList.contains(className)) {
                    // 发生全屏事件
                    callback('fullscreen', element);
                } else {
                    // 退出全屏事件
                    callback('exit-fullscreen', element);
                }
            }
        }
    });
    // 配置观察选项:
    const config = { attributes: true, attributeFilter: ['class'] };
    // 开始观察
    observer.observe(element, config);
    // 返回一个停止观察的方法
    return () => observer.disconnect();
}

‍