diff --git a/README.md b/README.md index a264a769..7977c8a5 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ Shuang | 双拼练习 ---- -v5.13 2021.1.26 更新 +v5.14 2021.1.26 更新 ### 许可 @@ -45,7 +45,7 @@ v5.13 2021.1.26 更新 5. 多平台适配： - > 手机上使用：请切换至系统自带英文键盘以获得最佳输入体验，竖屏操作以获得最佳友好界面 + > 手机上使用：请切换至系统自带英文键盘以获得最佳输入体验，竖屏操作以获得最佳友好界面，支持键盘模拟 > > 电脑上使用：推荐使用 [Chrome 浏览器](https://www.google.cn/chrome)，支持较高版本的 IE （不保证后续更新仍支持） @@ -58,6 +58,8 @@ v5.13 2021.1.26 更新 > 支持显示按键提示 > > 支持显示实时按键 + > + > 支持键盘模拟 ### 添加自定义双拼方案 diff --git a/build/app.min.js b/build/app.min.js index 88d4d9ba..3f1ebac8 100644 --- a/build/app.min.js +++ b/build/app.min.js @@ -1 +1 @@ -"use strict";function _toConsumableArray(a){return _arrayWithoutHoles(a)||_iterableToArray(a)||_unsupportedIterableToArray(a)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArray(a){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(a))return Array.from(a)}function _arrayWithoutHoles(a){if(Array.isArray(a))return _arrayLikeToArray(a)}function _createForOfIteratorHelper(a,b){var c;if("undefined"==typeof Symbol||null==a[Symbol.iterator]){if(Array.isArray(a)||(c=_unsupportedIterableToArray(a))||b&&a&&"number"==typeof a.length){c&&(a=c);var d=0,e=function(){};return{s:e,n:function n(){return d>=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=a[Symbol.iterator]()},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;da.length)&&(b=a.length);for(var c=0,d=Array(b);c$("body").scrollWidth){var a=310===$("body").scrollWidth?310:$("#pic").scrollWidth,b=1874/1928*a/680;navigator&&navigator.userAgent&&/firefox/i.test(navigator.userAgent)?($("#keys").style.transform="scale(".concat(b,")"),$("#keys").style.transformOrigin="left top",$("#keys").style.margin="".concat(10*b,"px"),$("#pic-placeholder").style.height="".concat(300*(a/680),"px")):($("#keys").style.marginLeft="10px",$("#keys").style.zoom=b,$("#pic-placeholder").style.zoom=b)}else navigator&&navigator.userAgent&&/firefox/i.test(navigator.userAgent)?($("#keys").style.transform="unset",$("#keys").style.transformOrigin="unset",$("#pic-placeholder").style.height="300px",$("#keys").style.margin="10px auto"):($("#keys").style.marginLeft="auto",$("#keys").style.zoom="unset",$("#pic-placeholder").style.zoom="unset")},updatePressedKeyHint:function updatePressedKeyHint(a){if("false"!==this.config.showPressedKey&&a){var b,c=$$(".key"),d=_createForOfIteratorHelper(c);try{for(d.s();!(b=d.n()).done;){var f=b.value;f.classList.remove("pressed")}}catch(a){d.e(a)}finally{d.f()}var e="qwertyuiopasdfghjkl;zxcvbnm".indexOf(a.toLowerCase());-1===e||(c[e].classList.add("pressed"),setTimeout(function(){c[e].classList.remove("pressed")},300))}},updateTips:function updateTips(){var a=$("#tips");a.innerHTML="";var b=Shuang.resource.scheme[this.config.scheme];if(b.tips){var c,d=Array.isArray(b.tips)?b.tips:[b.tips],e=_createForOfIteratorHelper(d);try{for(e.s();!(c=e.n()).done;){var f=c.value,g=document.createElement("div");g.classList.add("line"),g.innerHTML=f,a.appendChild(g)}}catch(a){e.e(a)}finally{e.f()}}$("#pic").setAttribute("src","img/".concat(this.config.scheme,".png"))}};function detectDarkMode(){return!!(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches)||!!(6>new Date().getHours()||22=a.length?{done:!0}:{done:!1,value:a[d++]}},e:function e(a){throw a},f:e}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var f,g=!0,h=!1;return{s:function s(){c=a[Symbol.iterator]()},n:function n(){var a=c.next();return g=a.done,a},e:function e(a){h=!0,f=a},f:function f(){try{g||null==c["return"]||c["return"]()}finally{if(h)throw f}}}}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;da.length)&&(b=a.length);for(var c=0,d=Array(b);c$("body").scrollWidth){var a=310===$("body").scrollWidth?310:$("#pic").scrollWidth,b=1874/1928*a/680;navigator&&navigator.userAgent&&/firefox/i.test(navigator.userAgent)?($("#keys").style.transform="scale(".concat(b,")"),$("#keys").style.transformOrigin="left top",$("#keys").style.margin="".concat(10*b,"px"),$("#pic-placeholder").style.height="".concat(300*(a/680),"px")):($("#keys").style.marginLeft="10px",$("#keys").style.zoom=b,$("#pic-placeholder").style.zoom=b)}else navigator&&navigator.userAgent&&/firefox/i.test(navigator.userAgent)?($("#keys").style.transform="unset",$("#keys").style.transformOrigin="unset",$("#pic-placeholder").style.height="300px",$("#keys").style.margin="10px auto"):($("#keys").style.marginLeft="auto",$("#keys").style.zoom="unset",$("#pic-placeholder").style.zoom="unset")},updatePressedKeyHint:function updatePressedKeyHint(a){if("false"!==this.config.showPressedKey&&a){var b,c=$$(".key"),d=_createForOfIteratorHelper(c);try{for(d.s();!(b=d.n()).done;){var f=b.value;f.classList.remove("pressed")}}catch(a){d.e(a)}finally{d.f()}var e="qwertyuiopasdfghjkl;zxcvbnm".indexOf(a.toLowerCase());-1===e||(c[e].classList.add("pressed"),setTimeout(function(){c[e].classList.remove("pressed")},250))}},updateTips:function updateTips(){var a=$("#tips");a.innerHTML="";var b=Shuang.resource.scheme[this.config.scheme];if(b.tips){var c,d=Array.isArray(b.tips)?b.tips:[b.tips],e=_createForOfIteratorHelper(d);try{for(e.s();!(c=e.n()).done;){var f=c.value,g=document.createElement("div");g.classList.add("line"),g.innerHTML=f,a.appendChild(g)}}catch(a){e.e(a)}finally{e.f()}}$("#pic").setAttribute("src","img/".concat(this.config.scheme,".png"))}};function detectDarkMode(){return!!(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches)||!!(6>new Date().getHours()||22双拼练习 @ BlueSky
模式说明：
显示键位图：
夜间模式：
正确时自动切换：
错误时自动清空：
显示按键提示：
显示实时按键：

1. 切换至系统自带的英文输入法

2. 空格键 / 回车键 切换或清空

3. Tab 键 显示答案（可能不唯一）

4. 手机练习推荐使用微信小程序

5. 使用 Chrome 浏览器 体验最佳

6. 查看 双拼输入介绍

微信小程序： 双拼练习
@ BlueSky | v5.13 2021.1.26 更新
https://github.com/BlueSky-07/Shuang
键位图 https://api.ihint.me/keyboard
字帖 https://api.ihint.me/zi
iOS/macOS 原生双拼输入法常见方案设置指南
支持开发者： 支付宝 微信
\ No newline at end of file diff --git a/index.src.html b/index.src.html index e32d2312..50b74a00 100644 --- a/index.src.html +++ b/index.src.html @@ -121,7 +121,7 @@ src="https://api.ihint.me/qr.php?https://mp.weixin.qq.com/a/~Jaww_jP-YK1G39fiZ01Qxg~~">
- @ BlueSky | v5.13 2021.1.26 更新 + @ BlueSky | v5.14 2021.1.26 更新
https://github.com/BlueSky-07/Shuang diff --git a/package.json b/package.json index 7cf4c6dc..0d52b776 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "shuang", - "version": "5.13.0", + "version": "5.14.0", "description": "帮助你快速上手双拼输入法", "scripts": { "clear": "rm -rf build", diff --git a/src/action.js b/src/action.js index 86412f80..7d6c0bd3 100644 --- a/src/action.js +++ b/src/action.js @@ -122,6 +122,17 @@ Shuang.app.action = { window.addEventListener('resize', Shuang.app.setting.updateKeysHintLayoutRatio) window.resizeTo(window.outerWidth, window.outerHeight) + /** Simulate Keyboard */ + const keys = $$('.key') + const qwerty = 'qwertyuiopasdfghjkl;zxcvbnm' + for (let i = 0; i < keys.length; i++) { + keys[i].addEventListener('click', () => { + const event = new KeyboardEvent('keyup', { key: qwerty[i].toUpperCase()}) + event.simulated = true + document.dispatchEvent(event) + }) + } + /** All Done **/ this.redo() }, @@ -144,6 +155,9 @@ Shuang.app.action = { } break default: + if (e.simulated) { + $('#a').value += e.key.toLowerCase() + } $('#a').value = $('#a').value .slice(0, 2) .replace(/[^a-zA-Z;]/g, '') @@ -155,9 +169,9 @@ Shuang.app.action = { const isRight = this.judge() if (canAuto) { if (isRight && Shuang.app.setting.config.autoNext === 'true') { - this.next() + this.next(e.simulated) } else if (!isRight && Shuang.app.setting.config.autoClear === 'true') { - this.redo() + this.redo(e.simulated) } } } @@ -167,23 +181,23 @@ Shuang.app.action = { const btn = $('#btn') const [sheng, yun] = input.value if (yun && Shuang.core.current.judge(sheng, yun)) { - btn.onclick = this.next.bind(this) + btn.onclick = () => this.next(true) btn.innerText = Shuang.resource.emoji.right return true } else { - btn.onclick = this.redo.bind(this) + btn.onclick = () => this.redo(true) btn.innerText = Shuang.resource.emoji.wrong return false } }, - redo() { + redo(noFocus) { $('#a').value = '' - $('#a').focus() - $('#btn').onclick = this.redo.bind(this) + if (!noFocus) $('#a').focus() + $('#btn').onclick = () => this.redo(noFocus) $('#btn').innerText = Shuang.resource.emoji.wrong }, - next() { - this.redo() + next(noFocus) { + this.redo(noFocus) switch (Shuang.app.setting.config.mode) { case 'all-random': Shuang.core.current = Shuang.core.model.getRandom() diff --git a/src/app.bundle.js b/src/app.bundle.js index 60255f70..5e90e551 100644 --- a/src/app.bundle.js +++ b/src/app.bundle.js @@ -518,7 +518,7 @@ Shuang.app.setting = { keys[index].classList.add('pressed') setTimeout(() => { keys[index].classList.remove('pressed') - }, 300) + }, 250) }, updateTips() { const tips = $('#tips') @@ -675,6 +675,17 @@ Shuang.app.action = { window.addEventListener('resize', Shuang.app.setting.updateKeysHintLayoutRatio) window.resizeTo(window.outerWidth, window.outerHeight) + /** Simulate Keyboard */ + const keys = $$('.key') + const qwerty = 'qwertyuiopasdfghjkl;zxcvbnm' + for (let i = 0; i < keys.length; i++) { + keys[i].addEventListener('click', () => { + const event = new KeyboardEvent('keyup', { key: qwerty[i].toUpperCase()}) + event.simulated = true + document.dispatchEvent(event) + }) + } + /** All Done **/ this.redo() }, @@ -697,6 +708,9 @@ Shuang.app.action = { } break default: + if (e.simulated) { + $('#a').value += e.key.toLowerCase() + } $('#a').value = $('#a').value .slice(0, 2) .replace(/[^a-zA-Z;]/g, '') @@ -708,9 +722,9 @@ Shuang.app.action = { const isRight = this.judge() if (canAuto) { if (isRight && Shuang.app.setting.config.autoNext === 'true') { - this.next() + this.next(e.simulated) } else if (!isRight && Shuang.app.setting.config.autoClear === 'true') { - this.redo() + this.redo(e.simulated) } } } @@ -720,23 +734,23 @@ Shuang.app.action = { const btn = $('#btn') const [sheng, yun] = input.value if (yun && Shuang.core.current.judge(sheng, yun)) { - btn.onclick = this.next.bind(this) + btn.onclick = () => this.next(true) btn.innerText = Shuang.resource.emoji.right return true } else { - btn.onclick = this.redo.bind(this) + btn.onclick = () => this.redo(true) btn.innerText = Shuang.resource.emoji.wrong return false } }, - redo() { + redo(noFocus) { $('#a').value = '' - $('#a').focus() - $('#btn').onclick = this.redo.bind(this) + if (!noFocus) $('#a').focus() + $('#btn').onclick = () => this.redo(noFocus) $('#btn').innerText = Shuang.resource.emoji.wrong }, - next() { - this.redo() + next(noFocus) { + this.redo(noFocus) switch (Shuang.app.setting.config.mode) { case 'all-random': Shuang.core.current = Shuang.core.model.getRandom() diff --git a/src/setting.js b/src/setting.js index 95217898..0ca9456f 100644 --- a/src/setting.js +++ b/src/setting.js @@ -157,7 +157,7 @@ Shuang.app.setting = { keys[index].classList.add('pressed') setTimeout(() => { keys[index].classList.remove('pressed') - }, 300) + }, 250) }, updateTips() { const tips = $('#tips')