下午就要期末考试了,我已经准备好了复习题和答案,如下图:
我是通过块引脚注插件来引用答案的
每次我想快速滑动答案的时候,老是容易划到下一个答案,希望可以像悬浮窗口那样,点击的时候自动聚焦这个答案
为什么不选择悬浮窗口呢?
因为
- 窗口太小了,每次都要调整
- 悬浮需要消耗时间,希望不能快速查看某一个答案
故有没有大佬可以写一个 js 代码片段,点击引用自动聚焦,以排除其他块内容的影响
下午就要期末考试了,我已经准备好了复习题和答案,如下图:
我是通过块引脚注插件来引用答案的
每次我想快速滑动答案的时候,老是容易划到下一个答案,希望可以像悬浮窗口那样,点击的时候自动聚焦这个答案
为什么不选择悬浮窗口呢?
因为
故有没有大佬可以写一个 js 代码片段,点击引用自动聚焦,以排除其他块内容的影响
思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。
融合块、大纲和双向链接,重构你的思维。
提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。
超级块和普通情况不同,它无法在光标处于文本区域时按 alt+ 右方向键触发聚焦,必须点击超级图标才行。所以,这里使用了 mouseover 模拟出超级块图标。
又因为这个聚焦产生的焦点无法用 requestAnimationFrame 监听,所以这里先用 while 和 sleep 替代。
修改后的代码如下(兼容超级块和普通块):
setTimeout(()=>{ // 兼容超级和普通块
openAny.setKeymap('mouseleft', async (event, {sleep}) => {
if(!event.target.closest('[data-type~="block-ref"]')) return;
let el; const start = Date.now();
while(!el){
if (Date.now() - start > 5000) {console.warn('获取聚焦块元素失败');break;}
el = document.querySelector('[data-node-id].protyle-wysiwyg--hl')
await sleep(40);
}
if(el.closest('.sb')){ // 超级块
openAny.press('mouseover', el.firstElementChild.querySelector('[contenteditable="true"]'));
const superBtn = await whenElementExist(()=>document.querySelector('use[*|href="#iconSuper"]')?.closest('button'));
openAny.click(superBtn).click('#commonMenu [data-id="enter"]');
} else { // 普通块
openAny.press('alt+arrowright', el);
}
});
}, 2000);
说明:超级块不用触发快捷键,普通块需要触发快捷键。
你查看答案是按 alt+ 点击 分屏查看吗?
如果是的话 openAny 可以实现,代码如下:
openAny.setKeymap('alt+mouseleft', async (event, {whenElementExist}) => {
const el = await whenElementExist('[data-node-id].protyle-wysiwyg--hl');
openAny.press('alt+arrowright', el);
});
须知,凡是手动能操作的,大多数情况 openAny 也可以。
补充:
openAny 代码片段下载地址
正如 J 佬所说,你代码片段没开启。
不要放到 openAny.js 里面,会报错的。
如果不需要分屏,可以用下面的代码,支持手机和 pc。
setTimeout(()=>{
openAny.setKeymap('mouseleft', async (event, {whenElementExist}) => {
if(!event.target.closest('[data-type="block-ref"]')) return;
const el = await whenElementExist('[data-node-id].protyle-wysiwyg--hl');
openAny.press('alt+arrowright', el);
});
}, 2000);
目前仅支持引用,不支持链接等,如果想支持链接,可以改下 这里的限制即可
if(!event.target.matches('[data-type="block-ref"]')) return;
比如,下面的代码同时支持引用和链接
if(!event.target.closest('[data-type="block-ref"],[data-type="a"]')) return;
超级块和普通情况不同,它无法在光标处于文本区域时按 alt+ 右方向键触发聚焦,必须点击超级图标才行。所以,这里使用了 mouseover 模拟出超级块图标。
又因为这个聚焦产生的焦点无法用 requestAnimationFrame 监听,所以这里先用 while 和 sleep 替代。
修改后的代码如下(兼容超级块和普通块):
setTimeout(()=>{ // 兼容超级和普通块
openAny.setKeymap('mouseleft', async (event, {sleep}) => {
if(!event.target.closest('[data-type~="block-ref"]')) return;
let el; const start = Date.now();
while(!el){
if (Date.now() - start > 5000) {console.warn('获取聚焦块元素失败');break;}
el = document.querySelector('[data-node-id].protyle-wysiwyg--hl')
await sleep(40);
}
if(el.closest('.sb')){ // 超级块
openAny.press('mouseover', el.firstElementChild.querySelector('[contenteditable="true"]'));
const superBtn = await whenElementExist(()=>document.querySelector('use[*|href="#iconSuper"]')?.closest('button'));
openAny.click(superBtn).click('#commonMenu [data-id="enter"]');
} else { // 普通块
openAny.press('alt+arrowright', el);
}
});
}, 2000);
说明:超级块不用触发快捷键,普通块需要触发快捷键。
InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。
Logseq 是一个隐私优先、开源的知识库工具。
Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.
GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。
子曰:“工欲善其事,必先利其器。”
RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。
webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。
Latke 是一款以 JSON 为主的 Java Web 框架。
Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。
Postman 是一款简单好用的 HTTP API 调试工具。
房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。
Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。
安全 · 稳定 · 快速
为跨境从业人员提供专业的跨境浏览器
IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。
MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。
Thank God It's Friday! 感谢老天,总算到星期五啦!
LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。
Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。
星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网
星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。
Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。
我来 wolai:不仅仅是未来的云端笔记!
Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。
如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。
Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。
愿逝者安息!