思源打字机模式 -- 加了一个按钮

本贴最后更新于 824 天前,其中的信息可能已经水流花落
function activate() {
  // let protyle_wysiwyg = document.querySelectorAll('div.layout__wnd--active div.protyle:not(.fn__none) div.protyle-wysiwyg');
  // let protyle_wysiwyg = document.querySelectorAll(
  //   "div.protyle:not(.fn__none) div.protyle-wysiwyg"
  // );
  let protyle_wysiwyg = document.querySelectorAll(
    "div.protyle div.protyle-wysiwyg"
  );
  // let protyle_wysiwyg = document.querySelectorAll(
  //   ".protyle"
  // );
  if (protyle_wysiwyg.length > 0) {
    for (let editor of protyle_wysiwyg) {
      editor.onkeyup = (e, t) => {
        editor.style.marginBottom = window.screen.availHeight/2 + "px";
        let block = null;
        // 当前页面
        let page = editor.parentElement;
        // let page = document.activeElement.parentElement;
        if (document.activeElement.nodeName == "TABLE") {
          // 表格获取焦点
          block = window.getSelection().focusNode.parentElement;
          while (block != null && block.nodeName != "TD")
            block = block.parentElement;
        } else {
          block = window.getSelection().focusNode.parentElement; // 当前光标

          while (block != null && block.dataset.nodeId == null)
            block = block.parentElement;
        }
        if (block == null || page == null) return;
        let block_height = block.clientHeight; // 当前块的高度
        let block_bottom = block.getBoundingClientRect().bottom; // 当前块的底部

        let page_height = page.clientHeight; // 当前页面的高度
        let page_bottom = page.getBoundingClientRect().bottom; // 当前页面的底部

        // console.log(block_height, block_bottom, page_height, page_bottom);

        page.style.scrollBehavior = "smooth";
        page.scrollBy(
          0,
          -(page_bottom - page_height / 2 - (block_bottom - block_height / 2))
        );
      };
    }
  }
}

function deactivate() {
  let protyle_wysiwyg = document.querySelectorAll(
    "div.protyle:not(.fn__none) div.protyle-wysiwyg"
  );
  if (protyle_wysiwyg.length > 0) {
    for (let editor of protyle_wysiwyg) {
      editor.onkeyup = (e, t) => {};
    }
  }
}

var sync = document.getElementById("barSync");
sync.insertAdjacentHTML(
  "afterend",
  '<div id="type"class="toolbar__item b3-tooltips b3-tooltips__se"></div>'
);
var typ = document.getElementById("type");
typ.style.width = "auto";
var unenbleIcon =
  '<svg t="1647999956702" class="icon" style="display: block;"viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" width="20" height="32"><path d="M886.3 917.9H133.4c-18.5 0-35.9-8.2-47.7-22.4S69 862.6 72.5 844.4L122 581.1c5.5-29.3 31.1-50.6 60.9-50.6h654.7c29.9 0 55.5 21.4 61 50.8l48.6 263.2c3.4 18.2-1.5 36.8-13.3 51-11.8 14.3-29.1 22.4-47.6 22.4zM182.9 553c-19 0-35.4 13.6-38.9 32.2L94.5 848.6c-2.2 11.6 0.9 23.5 8.4 32.6 7.5 9.1 18.6 14.3 30.4 14.3h752.9c11.8 0 22.8-5.2 30.4-14.3 7.5-9.1 10.6-20.9 8.5-32.6l-48.6-263.2c-3.5-18.8-19.9-32.4-39-32.4H182.9z" fill="#bfbfbf" p-id="1686"></path><path d="M747 658.7H509.8c-6.2 0-11.2-5-11.2-11.2s5-11.2 11.2-11.2H747c6.2 0 11.2 5 11.2 11.2s-5 11.2-11.2 11.2zM812.6 801.9H207.1c-6.2 0-11.2-5-11.2-11.2s5-11.2 11.2-11.2h605.5c6.2 0 11.2 5 11.2 11.2s-5 11.2-11.2 11.2zM724.5 553H295.1V77.8h429.5V553z m-407-22.4H702V100.2H317.5v430.4z" fill="#bfbfbf" p-id="1687"></path><path d="M309.9 658.8H265c-6.2 0-11.2-5.1-11.2-11.2 0-6.2 5.1-11.2 11.2-11.2h44.9c6.2 0 11.2 5.1 11.2 11.2s-5 11.2-11.2 11.2zM437.9 658.8H393c-6.2 0-11.2-5.1-11.2-11.2 0-6.2 5.1-11.2 11.2-11.2h44.9c6.2 0 11.2 5.1 11.2 11.2 0.1 6.1-5 11.2-11.2 11.2z" fill="#bfbfbf" p-id="1688"></path></svg>';
var enbleIcon =
  '<svg t="1647999956702" style="display: block;"class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" width="20" height="32"><path d="M886.3 917.9H133.4c-18.5 0-35.9-8.2-47.7-22.4S69 862.6 72.5 844.4L122 581.1c5.5-29.3 31.1-50.6 60.9-50.6h654.7c29.9 0 55.5 21.4 61 50.8l48.6 263.2c3.4 18.2-1.5 36.8-13.3 51-11.8 14.3-29.1 22.4-47.6 22.4zM182.9 553c-19 0-35.4 13.6-38.9 32.2L94.5 848.6c-2.2 11.6 0.9 23.5 8.4 32.6 7.5 9.1 18.6 14.3 30.4 14.3h752.9c11.8 0 22.8-5.2 30.4-14.3 7.5-9.1 10.6-20.9 8.5-32.6l-48.6-263.2c-3.5-18.8-19.9-32.4-39-32.4H182.9z" fill="#1f2339" p-id="1686"></path><path d="M747 658.7H509.8c-6.2 0-11.2-5-11.2-11.2s5-11.2 11.2-11.2H747c6.2 0 11.2 5 11.2 11.2s-5 11.2-11.2 11.2zM812.6 801.9H207.1c-6.2 0-11.2-5-11.2-11.2s5-11.2 11.2-11.2h605.5c6.2 0 11.2 5 11.2 11.2s-5 11.2-11.2 11.2zM724.5 553H295.1V77.8h429.5V553z m-407-22.4H702V100.2H317.5v430.4z" fill="#1f2339" p-id="1687"></path><path d="M309.9 658.8H265c-6.2 0-11.2-5.1-11.2-11.2 0-6.2 5.1-11.2 11.2-11.2h44.9c6.2 0 11.2 5.1 11.2 11.2s-5 11.2-11.2 11.2zM437.9 658.8H393c-6.2 0-11.2-5.1-11.2-11.2 0-6.2 5.1-11.2 11.2-11.2h44.9c6.2 0 11.2 5.1 11.2 11.2 0.1 6.1-5 11.2-11.2 11.2z" fill="#1f2339" p-id="1688"></path></svg>';
if (localStorage.getItem("typrt") == null) {
  localStorage.setItem("typrt", "false");
}
if (localStorage.getItem("typrt") == "false") {
  typ.innerHTML = unenbleIcon;
} else if (localStorage.getItem("typrt") == "true") {
  typ.innerHTML = enbleIcon;
  document.body.onclick = activate;
}
typ.onclick = (e) => {
  // var typ = document.getElementById("type");
  // console.log(typ);
  if (localStorage.getItem("typrt") == "false") {
    localStorage.setItem("typrt", "true");
    typ.innerHTML = enbleIcon;
    document.body.onclick = activate;
  } else if (localStorage.getItem("typrt") == "true") {
    localStorage.setItem("typrt", "false");
    typ.innerHTML = unenbleIcon;
    document.body.onclick = null;
    deactivate();
  }
};

加到 theme.js 文件后面,按钮亮起即为开启,再点一次就是关闭.

利用 localStorage 存储当前模式是否开启不知道是不是有副作用.

  • 思源笔记

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

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

    19810 引用 • 75842 回帖 • 1 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    130 引用 • 793 回帖
  • IPFS

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

    20 引用 • 245 回帖 • 234 关注
  • abitmean

    有点意思就行了

    29 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 2 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    192 引用 • 291 回帖 • 433 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    140 引用 • 441 回帖 • 1 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    60 引用 • 287 回帖
  • 反馈

    Communication channel for makers and users.

    124 引用 • 907 回帖 • 210 关注
  • 电影

    这是一个不能说的秘密。

    120 引用 • 597 回帖
  • danl
    89 关注
  • Laravel

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

    19 引用 • 23 回帖 • 699 关注
  • Maven

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

    186 引用 • 318 回帖 • 336 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 31 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 531 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • 学习

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

    163 引用 • 473 回帖
  • GitLab

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

    46 引用 • 72 回帖
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 4 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 113 回帖 • 284 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 608 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    165 引用 • 407 回帖 • 514 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

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

    1425 引用 • 10043 回帖 • 474 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 111 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • RESTful

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

    30 引用 • 114 回帖