js
// 定义一个可观察的属性
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
});
js
// 监听其他元素全屏事件
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();
}