[js] 在面包屑旁添加全屏按钮,快捷切换全屏

本贴最后更新于 242 天前,其中的信息可能已经时移世改

效果是在面包屑旁添加一个全屏按钮,快捷切换页签的全屏状态:

JS 片段:

// 在面包屑旁添加全屏按钮,快捷切换全屏 JS片段 // author by JeffreyChen https://ld246.com/article/1731698559408 // 参考 @wilsons 的方法进行了优化 https://ld246.com/article/1731683038390/comment/1731693866270#comments ,不再需要全屏切换快捷键 (function() { function addFullScreenButton(protyleElement) { // 检查该 protyle 是否已经有了 fullScreen_simulate 按钮 if (protyleElement.querySelector('.fullScreen_simulate')) { return; // 如果已存在,直接返回 } let mode = protyleElement.querySelector('.protyle-breadcrumb .block__icon[data-type="readonly"]'); if (mode) { mode.insertAdjacentHTML( "beforebegin", '<button class="fullScreen_simulate block__icon fn__flex-center ariaLabel" aria-label="全屏切换"></button>' ); let fullScreenBtn = protyleElement.querySelector(".fullScreen_simulate"); fullScreenBtn.innerHTML = `<svg><use xlink:href="#iconFullscreen"></use></svg>`; fullScreenBtn.addEventListener("click", function (e) { // 获取 .layout-tab-container > .protyle .protyle-breadcrumb__space 元素 const breadcrumbSpace = protyleElement.querySelector('.protyle-breadcrumb__space'); // 如果元素存在,则模拟点击,聚焦当前页签 if (breadcrumbSpace) { breadcrumbSpace.click(); } toggleFullScreen(protyleElement, fullScreenBtn); // 切换全屏状态 }); } } // 切换全屏状态的函数 function toggleFullScreen(protyle, fullScreenBtn) { if (!window.siyuan.editorIsFullscreen) { enterFullScreen(protyle, fullScreenBtn); } else { exitFullScreen(protyle, fullScreenBtn); } } function enterFullScreen(protyle, fullScreenBtn) { protyle.classList.add("fullscreen"); window.siyuan.editorIsFullscreen = true; updateFullScreenButton(fullScreenBtn, true); // 更新按钮 } function exitFullScreen(protyle, fullScreenBtn) { protyle.classList.remove("fullscreen"); window.siyuan.editorIsFullscreen = false; updateFullScreenButton(fullScreenBtn, false); // 更新按钮 } function updateFullScreenButton(fullScreenBtn, isFullScreen) { const iconUse = fullScreenBtn.querySelector('use'); // 切换图标 iconUse.setAttribute('xlink:href', isFullScreen ? '#iconFullscreenExit' : '#iconFullscreen'); fullScreenBtn.setAttribute('aria-label', isFullScreen ? '退出全屏' : '全屏'); } // 定期检查 .layout__center 是否存在于 DOM 中 function checkForLayoutCenter() { const targetNode = document.querySelector('.layout__center'); if (targetNode) { startObserving(targetNode); // 立即检查一次 protyle-breadcrumb checkProtyleElements(targetNode); } else { setTimeout(checkForLayoutCenter, 200); } } function checkProtyleElements(targetNode) { const protyles = targetNode.querySelectorAll('.layout-tab-container > .protyle'); protyles.forEach(protyle => { addFullScreenButton(protyle); }); } function startObserving(targetNode) { const observer = new MutationObserver((mutations) => { mutations.forEach(mutation => { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { // 检查添加的节点是否是 .protyle 元素 if (node.nodeType === 1 && node.matches('.layout-tab-container > .protyle')) { addFullScreenButton(node); } }); } else if (mutation.type === 'attributes' && mutation.target.matches('.layout-tab-container > .protyle')) { // 如果已有的 protyle 的类名发生变化,尝试添加全屏按钮 addFullScreenButton(mutation.target); } }); }); // 配置并开始观察 const config = { childList: true, subtree: true, attributes: true }; observer.observe(targetNode, config); } checkForLayoutCenter(); })();
旧方案(全屏切换需要设置快捷键)
// 在面包屑旁添加全屏按钮,快捷切换全屏 JS片段 // author by JeffreyChen https://ld246.com/article/1731698559408 // 注意:需要为全屏切换设置一个快捷键 (function() { function addFullScreenButton(protyleElement) { // 检查该 protyle 是否已经有了 fullScreen_simulate 按钮 if (protyleElement.querySelector('.fullScreen_simulate')) { return; // 如果已存在,直接返回 } let mode = protyleElement.querySelector('.protyle-breadcrumb .block__icon[data-type="readonly"]'); if (mode) { mode.insertAdjacentHTML( "beforebegin", '<button class="fullScreen_simulate block__icon fn__flex-center ariaLabel" aria-label="全屏切换"></button>' ); let fullScreenBtn = protyleElement.querySelector(".fullScreen_simulate"); fullScreenBtn.innerHTML = `<svg><use xlink:href="#iconFullscreen"></use></svg>`; fullScreenBtn.addEventListener("click", function (e) { // 获取 .layout-tab-container > .protyle .protyle-breadcrumb__space 元素 const breadcrumbSpace = protyleElement.querySelector('.protyle-breadcrumb__space'); // 如果元素存在,则模拟点击,聚焦当前页签 if (breadcrumbSpace) { breadcrumbSpace.click(); } dispatchKeyEvent(); // 切换图标 const iconUse = fullScreenBtn.querySelector('use'); if (iconUse.getAttribute('xlink:href') === '#iconFullscreen') { iconUse.setAttribute('xlink:href', '#iconFullscreenExit'); } else { iconUse.setAttribute('xlink:href', '#iconFullscreen'); } }); } } function dispatchKeyEvent() { let keyInit = parseHotKeyStr(window.top.siyuan.config.keymap.editor.general.fullscreen.custom); keyInit["bubbles"] = true; let keydownEvent = new KeyboardEvent('keydown', keyInit); document.getElementsByTagName("body")[0].dispatchEvent(keydownEvent); let keyUpEvent = new KeyboardEvent('keyup', keyInit); document.getElementsByTagName("body")[0].dispatchEvent(keyUpEvent); } /** * @param {*} hotkeyStr 思源hotkey格式 Refer: https://github.com/siyuan-note/siyuan/blob/d0f011b1a5b12e5546421f8bd442606bf0b5ad86/app/src/protyle/util/hotKey.ts#L4 * @returns KeyboardEventInit Refer: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/KeyboardEvent */ function parseHotKeyStr(hotkeyStr) { let result = { ctrlKey: false, altKey: false, metaKey: false, shiftKey: false, key: 'A', keyCode: 0 } if (hotkeyStr == "" || hotkeyStr == undefined || hotkeyStr == null) { console.error("解析快捷键设置失败", hotkeyStr); throw new Error("解析快捷键设置失败"); } let onlyKey = hotkeyStr; if (hotkeyStr.indexOf("⌘") != -1) { result.ctrlKey = true; onlyKey = onlyKey.replace("⌘", ""); } if (hotkeyStr.indexOf("⌥") != -1) { result.altKey = true; onlyKey = onlyKey.replace("⌥", ""); } if (hotkeyStr.indexOf("⇧") != -1) { result.shiftKey = true; onlyKey = onlyKey.replace("⇧", ""); } // 未处理 windows btn (MetaKey) result.key = onlyKey; // 在https://github.com/siyuan-note/siyuan/commit/70acd57c4b4701b973a8ca93fadf6c003b24c789#diff-558f9f531a326d2fd53151e3fc250ac4bd545452ba782b0c7c18765a37a4e2cc // 更改中,思源改为使用keyCode判断快捷键按下事件,这里进行了对应的转换 // 另请参考该提交中涉及的文件 result.keyCode = keyCodeList[result.key]; console.assert(result.keyCode != undefined, `keyCode转换错误,key为${result.key}`); switch (result.key) { case "→": { result.key = "ArrowRight"; break; } case "←": { result.key = "ArrowLeft"; break; } case "↑": { result.key = "ArrowUp"; break; } case "↓": { result.key = "ArrowDown"; break; } case "⌦": { result.key = "Delete"; break; } case "⌫": { result.key = "Backspace"; break; } case "↩": { result.key = "Enter"; break; } } return result; } const keyCodeList = { "⌫": 8, "⇥": 9, "↩": 13, "⇧": 16, "⌘": 91, "⌥": 18, "Pause": 19, "CapsLock": 20, "Escape": 27, " ": 32, "PageUp": 33, "PageDown": 34, "End": 35, "Home": 36, "←": 37, "↑": 38, "→": 39, "↓": 40, "PrintScreen": 44, "Insert": 45, "⌦": 46, "0": 48, "1": 49, "2": 50, "3": 51, "4": 52, "5": 53, "6": 54, "7": 55, "8": 56, "9": 57, "A": 65, "B": 66, "C": 67, "D": 68, "E": 69, "F": 70, "G": 71, "H": 72, "I": 73, "J": 74, "K": 75, "L": 76, "M": 77, "N": 78, "O": 79, "P": 80, "Q": 81, "R": 82, "S": 83, "T": 84, "U": 85, "V": 86, "W": 87, "X": 88, "Y": 89, "Z": 90, "ContextMenu": 93, "MyComputer": 182, "MyCalculator": 183, ";": 186, "=": 187, ",": 188, "-": 189, ".": 190, "/": 191, "`": 192, "[": 219, "\\": 220, "]": 221, "'": 222, "*": 106, "+": 107, "-": 109, ".": 110, "/": 111, "F1": 112, "F2": 113, "F3": 114, "F4": 115, "F5": 116, "F6": 117, "F7": 118, "F8": 119, "F9": 120, "F10": 121, "F11": 122, "F12": 123, "NumLock": 144, "ScrollLock": 145 }; // 定期检查 .layout__center 是否存在于 DOM 中 function checkForLayoutCenter() { const targetNode = document.querySelector('.layout__center'); if (targetNode) { startObserving(targetNode); // 立即检查一次 protyle-breadcrumb checkProtyleElements(targetNode); } else { setTimeout(checkForLayoutCenter, 200); } } function checkProtyleElements(targetNode) { const protyles = targetNode.querySelectorAll('.layout-tab-container > .protyle'); protyles.forEach(protyle => { addFullScreenButton(protyle); }); } function startObserving(targetNode) { const observer = new MutationObserver((mutations) => { mutations.forEach(mutation => { if (mutation.type === 'childList') { mutation.addedNodes.forEach(node => { // 检查添加的节点是否是 .protyle 元素 if (node.nodeType === 1 && node.matches('.layout-tab-container > .protyle')) { addFullScreenButton(node); } }); } else if (mutation.type === 'attributes' && mutation.target.matches('.layout-tab-container > .protyle')) { // 如果已有的 protyle 的类名发生变化,尝试添加全屏按钮 addFullScreenButton(mutation.target); } }); }); // 配置并开始观察 const config = { childList: true, subtree: true, attributes: true }; observer.observe(targetNode, config); } checkForLayoutCenter(); })();
打赏 50 积分后可见
50 积分 • 6 打赏
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    26386 引用 • 109743 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    204 引用 • 1479 回帖
2 操作
JeffreyChen 在 2024-11-16 03:51:10 更新了该帖
JeffreyChen 在 2024-11-16 03:49:59 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 试试新建工作空间,只使用这个代码片段,看看会不会有问题

    1 回复
  • 其他回帖
  • wujianzhong via macOS

    有 Bug,,在 macOS 下,全屏后右上角的退出全屏按钮(整排按钮)都不可用,无论鼠标如何点都不起作用

    1 回复
  • 你排查一下跟哪个插件冲突

    1 回复
  • wilsons 2

    刚才试了下,通过监听 window.siyuan.editorIsFullscreen 对象的变化也可以判断是否全屏了,这样就不需要监听 protyle 样式的变化了

    // 定义一个可观察的属性 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 });
  • 查看全部回帖
JeffreyChen
思源笔记同步教程:https://ld246.com/article/1692089679062 爱发电:https://afdian.com/a/JeffreyChen

推荐标签 标签

  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 818 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 558 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖 • 3 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖 • 2 关注
  • OneNote
    1 引用 • 3 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    186 引用 • 1021 回帖
  • 导航

    各种网址链接、内容导航。

    45 引用 • 177 回帖 • 1 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 1 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖 • 2 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    19 引用 • 23 回帖 • 741 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • C++

    C++ 是在 C 语言的基础上开发的一种通用编程语言,应用广泛。C++ 支持多种编程范式,面向对象编程、泛型编程和过程化编程。

    108 引用 • 153 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 762 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 252 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 199 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 640 关注
  • V2Ray
    1 引用 • 15 回帖 • 3 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 37 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    268 引用 • 666 回帖 • 1 关注
  • sts
    2 引用 • 2 回帖 • 244 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 5 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    84 引用 • 414 回帖
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖