登录 注册

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

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

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 打赏
  • 思源笔记

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

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

    25278 引用 • 104290 回帖
  • 代码片段

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

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

    153 引用 • 1000 回帖
2 引用
求代码片段 | 默认全屏编辑 • JeffreyChen
求助怎样把全屏切换按钮移动到上面直接可见的位置 • JeffreyChen
2 操作
JeffreyChen 在 2024-11-16 03:51:10 更新了该帖
JeffreyChen 在 2024-11-16 03:49:59 更新了该帖
6 打赏
3 感谢
2 收藏
1 赞同
2 引用
2 操作
8 回帖
3
3
2
392 199 100 1 1 91

相关帖子

8 回帖
[js] 在面包屑旁添加全屏按钮，快捷切换全屏

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • wilsons • • 3
    付费者 捐赠者

    建议加上其他事件切换时（比如按快捷键，文档菜单全屏等）也自动切换按钮，类似我下面这样的代码

    // 监听其他元素全屏事件
        observeClassAddition(protyle, 'fullscreen', (eventType) => {
            if(eventType === 'fullscreen'){
                fullScreenBtn.innerHTML = exitFullscreenSvg;
                fullScreenBtn.setAttribute('aria-label', '退出全屏');
            } else {
                fullScreenBtn.innerHTML = fullscreenSvg;
                fullScreenBtn.setAttribute('aria-label', '全屏');
            }
        });
​
  • 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
    });
​
  • wujianzhong • via macOS
    付费者

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

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    试试新建工作空间，只使用这个代码片段，看看会不会有问题

    1 回复
  • wujianzhong • via macOS
    付费者

    试了，，在空白的新空间可以使用，，但安装了插件之后就出问题了

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    你排查一下跟哪个插件冲突

    1 回复
  • wujianzhong •
    付费者

    跟 移除按钮 和 移除按钮-经典 两个插件冲突

    1 回复
  • JeffreyChen •
    付费者 支持者 捐赠者 作者

    你是两个插件都打开了吗？还是只打开了一个

请输入回帖内容 ...
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器，不是 Markdown 文件编辑器； 思源笔记同步教程：https://ld246.com/article/1692089679062 爱发电：https://afdian.com/a/JeffreyChen
回帖
8681
 帖子
136
 积分
2238

近期热议

推荐标签 标签

  • BookxNote

    BookxNote 是一款全新的电子书学习工具，助力您的学习与思考，让您的大脑更高效的记忆。

    笔记整理交给我，一心只读圣贤书。

    1 引用 • 1 回帖 • 5 关注
  • 链书

    链书（Chainbook）是 B3log 开源社区提供的区块链纸质书交易平台，通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书，我们共同构建这个全新的交易平台，让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 1 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 727 关注
  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    948 引用 • 1460 回帖 • 1 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 678 关注
  • 安全

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

    203 引用 • 818 回帖 • 1 关注
  • Sandbox

    如果帖子标签含有 Sandbox ，则该帖子会被视为“测试帖”，主要用于测试社区功能，排查 bug 等，该标签下内容不定期进行清理。

    431 引用 • 1250 回帖 • 597 关注
  • AWS
    11 引用 • 28 回帖 • 10 关注
  • B3log

    B3log 是一个开源组织，名字来源于“Bulletin Board Blog”缩写，目标是将独立博客与论坛结合，形成一种新的网络社区体验，详细请看 B3log 构思。目前 B3log 已经开源了多款产品：Sym、Solo、Vditor 和 思源笔记。

    1063 引用 • 3455 回帖 • 160 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司，是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务，以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    84 引用 • 324 回帖
  • 脑图

    脑图又叫思维导图，是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具。

    32 引用 • 99 回帖
  • Angular

    Angular 是 AngularJS 的新版本。

    26 引用 • 66 回帖 • 548 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 387 关注
  • Postman

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

    4 引用 • 3 回帖 • 2 关注
  • DevOps

    DevOps（Development 和 Operations 的组合词）是一组过程、方法与系统的统称，用于促进开发（应用程序/软件工程）、技术运营和质量保障（QA）部门之间的沟通、协作与整合。

    58 引用 • 25 回帖
  • 创业

    你比 99% 的人都优秀么？

    82 引用 • 1395 回帖 • 1 关注
  • Maven

    Maven 是基于项目对象模型（POM）、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    187 引用 • 318 回帖 • 255 关注
  • Dubbo

    Dubbo 是一个分布式服务框架，致力于提供高性能和透明化的 RPC 远程服务调用方案，是 [阿里巴巴] SOA 服务化治理方案的核心框架，每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持，并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 612 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划，本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE，直到 1999 年 Sun 买下此公司。Sun 于次年（2000 年）六月将 NetBeans IDE 开源，直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 703 关注
  • OnlyOffice
    4 引用 • 21 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎，支持 Go 和 JavaScript。

    28 引用 • 197 回帖 • 31 关注
  • 反馈

    Communication channel for makers and users.

    122 引用 • 910 回帖 • 272 关注
  • 安装

    你若安好，便是晴天。

    132 引用 • 1184 回帖 • 1 关注
  • 强迫症

    强迫症（OCD）属于焦虑障碍的一种类型，是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病，其特点为有意识的强迫和反强迫并存，一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • 学习

    “梦想从学习开始，事业从实践起步” —— 习近平

    173 引用 • 518 回帖
  • 智能合约

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

    1 引用 • 11 回帖

最新标签