diff --git a/en/assets/shortcut-key.js b/en/assets/shortcut-key.js new file mode 100644 index 00000000..381d5835 --- /dev/null +++ b/en/assets/shortcut-key.js @@ -0,0 +1,74 @@ + +// 处理键位和功能绑定关系,执行匹配的快捷键的功能 +class KeyBinding { + constructor(combinationKeys, selectorMap) { + this.combinationKeys = combinationKeys; + this.selectorMap = selectorMap; + } + + matchAction(e) { + return Object.entries(this.combinationKeys).find(([k, val]) => { + const { prefixKeys = [], keys } = val; + const isComposing = !!prefixKeys.find((key) => e[key]); + return isComposing && keys.includes(e.key); + }); + } + + handleAction(e) { + const keyType = this.matchAction(e); + if (keyType) { + const actionButton = document.querySelector(this.selectorMap[keyType[0]]); + if (actionButton) actionButton.click(); + } + } +} + +// 键位绑定器,监听 keydown 事件 +class EventBinder { + constructor(contentId, keyBinding) { + this.contentDom = document.getElementById(contentId); + this.keyBinding = keyBinding; + } + + bindKeydown() { + if (this.contentDom) { + this.contentDom.addEventListener('keydown', (e) => { + const target = e.target; + if (target && target.classList.contains('ace_text-input')) { + this.keyBinding.handleAction(e); + } + }); + } + } +} + +// 封装初始化逻辑 +function initializeKeyBinding() { + const bindCombinationKeysWithAction = { + // 重置用 i 键代替,编辑框中内置了很多快捷键,没有合适的键位设置了 + 'reset': { + prefixKeys: ['ctrlKey', 'metaKey'], + keys: ['i'] + }, + 'clip': { + prefixKeys: ['ctrlKey', 'metaKey'], + keys: ['c'] + }, + 'play': { + prefixKeys: ['ctrlKey', 'metaKey'], + keys: ['Enter'], + } + }; + + const combinationKeysWithSelector = { + 'reset': '.reset-button', + 'clip': '.clip-button', + 'play': '.play-button' + }; + + const keyBinding = new KeyBinding(bindCombinationKeysWithAction, combinationKeysWithSelector); + const eventBinder = new EventBinder('content', keyBinding); + eventBinder.bindKeydown(); +} + +window.addEventListener('load', initializeKeyBinding); diff --git a/en/book.toml b/en/book.toml index abe56952..3b6664fb 100644 --- a/en/book.toml +++ b/en/book.toml @@ -14,7 +14,7 @@ level = 1 [output.html] additional-css = ["theme/style1.css"] -additional-js = ["assets/custom3.js", "assets/lang1.js"] +additional-js = ["assets/custom3.js", "assets/lang1.js","assets/shortcut-key.js"] git-repository-url = "https://github.com/sunface/rust-by-practice" edit-url-template = "https://github.com/sunface/rust-by-practice/edit/master/en/{path}" diff --git a/zh-CN/assets/shortcut-key.js b/zh-CN/assets/shortcut-key.js new file mode 100644 index 00000000..381d5835 --- /dev/null +++ b/zh-CN/assets/shortcut-key.js @@ -0,0 +1,74 @@ + +// 处理键位和功能绑定关系,执行匹配的快捷键的功能 +class KeyBinding { + constructor(combinationKeys, selectorMap) { + this.combinationKeys = combinationKeys; + this.selectorMap = selectorMap; + } + + matchAction(e) { + return Object.entries(this.combinationKeys).find(([k, val]) => { + const { prefixKeys = [], keys } = val; + const isComposing = !!prefixKeys.find((key) => e[key]); + return isComposing && keys.includes(e.key); + }); + } + + handleAction(e) { + const keyType = this.matchAction(e); + if (keyType) { + const actionButton = document.querySelector(this.selectorMap[keyType[0]]); + if (actionButton) actionButton.click(); + } + } +} + +// 键位绑定器,监听 keydown 事件 +class EventBinder { + constructor(contentId, keyBinding) { + this.contentDom = document.getElementById(contentId); + this.keyBinding = keyBinding; + } + + bindKeydown() { + if (this.contentDom) { + this.contentDom.addEventListener('keydown', (e) => { + const target = e.target; + if (target && target.classList.contains('ace_text-input')) { + this.keyBinding.handleAction(e); + } + }); + } + } +} + +// 封装初始化逻辑 +function initializeKeyBinding() { + const bindCombinationKeysWithAction = { + // 重置用 i 键代替,编辑框中内置了很多快捷键,没有合适的键位设置了 + 'reset': { + prefixKeys: ['ctrlKey', 'metaKey'], + keys: ['i'] + }, + 'clip': { + prefixKeys: ['ctrlKey', 'metaKey'], + keys: ['c'] + }, + 'play': { + prefixKeys: ['ctrlKey', 'metaKey'], + keys: ['Enter'], + } + }; + + const combinationKeysWithSelector = { + 'reset': '.reset-button', + 'clip': '.clip-button', + 'play': '.play-button' + }; + + const keyBinding = new KeyBinding(bindCombinationKeysWithAction, combinationKeysWithSelector); + const eventBinder = new EventBinder('content', keyBinding); + eventBinder.bindKeydown(); +} + +window.addEventListener('load', initializeKeyBinding); diff --git a/zh-CN/book.toml b/zh-CN/book.toml index 6ec0e158..1a411c97 100644 --- a/zh-CN/book.toml +++ b/zh-CN/book.toml @@ -14,7 +14,7 @@ level = 1 [output.html] additional-css = ["theme/style1.css"] -additional-js = ["assets/custom3.js", "assets/lang1.js"] +additional-js = ["assets/custom3.js", "assets/lang1.js","assets/shortcut-key.js"] git-repository-url = "https://github.com/sunface/rust-by-practice" edit-url-template = "https://github.com/sunface/rust-by-practice/edit/master/zh-CN/{path}"