登录 注册

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

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

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

    23111 引用 • 93056 回帖 • 1 关注
  • 代码片段

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

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

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

相关帖子

2 回帖
[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
    });
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器，不是 Markdown 文件编辑器； 思源笔记同步教程：ld246.com/article/1692089679062
回帖
6546
 帖子
131
 积分
3868

近期热议

推荐标签 标签

  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 41 关注
  • MongoDB

    MongoDB（来自于英文单词“Humongous”，中文含义为“庞大”）是一个基于分布式文件存储的数据库，由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。它支持的数据结构非常松散，是类似 JSON 的 BSON 格式，因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 8 关注
  • Swift

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

    36 引用 • 37 回帖 • 535 关注
  • 思源笔记

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

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

    23110 引用 • 93056 回帖 • 1 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识，提高团队的工作效率，让用户满意。

    3 引用 • 8 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖 • 1 关注
  • SQLServer

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

    21 引用 • 31 回帖 • 2 关注
  • 国际化

    i18n（其来源是英文单词 internationalization 的首末字符 i 和 n，18 为中间的字符数）是“国际化”的简称。对程序来说，国际化是指在不修改代码的情况下，能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • GitHub

    GitHub 于 2008 年上线，目前，除了 Git 代码仓库托管及基本的 Web 管理界面以外，还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱（报表）、代码片段分享（Gist）等功能。正因为这些功能所提供的便利，又经过长期的积累，GitHub 的用户活跃度很高，在开源世界里享有深远的声望，并形成了社交化编程文化（Social Coding）。

    210 引用 • 2036 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区（论坛/BBS/社交网络/博客）系统平台。

    下一代的社区系统，为未来而构建

    524 引用 • 4601 回帖 • 701 关注
  • 周末

    星期六到星期天晚，实行五天工作制后，指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • Ubuntu

    Ubuntu（友帮拓、优般图、乌班图）是一个以桌面应用为主的 Linux 操作系统，其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词，意思是“人性”、“我的存在是因为大家的存在”，是非洲传统的一种价值观，类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    126 引用 • 169 回帖
  • sts
    2 引用 • 2 回帖 • 198 关注
  • 钉钉

    钉钉，专为中国企业打造的免费沟通协同多端平台， 阿里巴巴出品。

    15 引用 • 67 回帖 • 335 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 484 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 1 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    132 引用 • 1114 回帖 • 125 关注
  • Spring

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

    943 引用 • 1460 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 484 关注
  • RESTful

    一种软件架构设计风格而不是标准，提供了一组设计原则和约束条件，主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

    30 引用 • 114 回帖 • 3 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    5 引用 • 107 回帖
  • BookxNote

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

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

    1 引用 • 1 回帖 • 1 关注
  • IPFS

    IPFS（InterPlanetary File System，星际文件系统）是永久的、去中心化保存和共享文件的方法，这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    21 引用 • 245 回帖 • 244 关注
  • 分享

    有什么新发现就分享给大家吧！

    247 引用 • 1793 回帖 • 1 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具，它遵循 OpenAPI Specification（这是一种通用的、和编程语言无关的 API 描述规范）。Swagger 贯穿整个 API 生命周期，如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 7 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    313 引用 • 547 回帖

最新标签