From fcd53281adf374d8a352273bf75a3f78d0b05c5f Mon Sep 17 00:00:00 2001 From: jsakamoto Date: Sat, 30 Sep 2023 21:48:40 +0900 Subject: [PATCH] Improve helper JavaScript --- HotKeys2/script.js | 34 +++++++++++++++++----------------- HotKeys2/script.ts | 28 ++++++++++++++-------------- HotKeys2/wwwroot/script.min.js | 2 +- 3 files changed, 32 insertions(+), 32 deletions(-) diff --git a/HotKeys2/script.js b/HotKeys2/script.js index 7070db7..9d0a524 100644 --- a/HotKeys2/script.js +++ b/HotKeys2/script.js @@ -46,10 +46,10 @@ export var Toolbelt; (ev.metaKey ? 8 : 0); const key = convertToKeyName(ev); const code = ev.code; - const srcElement = ev.srcElement; - const tagName = srcElement.tagName; - const type = srcElement.getAttribute('type'); - const preventDefault1 = onKeyDown(modifiers, key, code, srcElement, tagName, type); + const targetElement = ev.target; + const tagName = targetElement.tagName; + const type = targetElement.getAttribute('type'); + const preventDefault1 = onKeyDown(modifiers, key, code, targetElement, tagName, type); const preventDefault2 = isWasm === true ? hotKeysWrpper.invokeMethod(OnKeyDownMethodName, modifiers, tagName, type, key, code) : false; if (preventDefault1 || preventDefault2) ev.preventDefault(); @@ -57,7 +57,7 @@ export var Toolbelt; hotKeysWrpper.invokeMethodAsync(OnKeyDownMethodName, modifiers, tagName, type, key, code); }); }; - const onKeyDown = (modifiers, key, code, srcElement, tagName, type) => { + const onKeyDown = (modifiers, key, code, targetElement, tagName, type) => { let preventDefault = false; hotKeyEntries.forEach(entry => { const byCode = entry.mode === 1; @@ -77,9 +77,7 @@ export var Toolbelt; entryModKeys |= 8; if (eventModkeys !== entryModKeys) return; - if (!isAllowedIn(entry, srcElement, tagName, type)) - return; - if (entry.excludeSelector !== '' && srcElement.matches(entry.excludeSelector)) + if (isExcludeTarget(entry, targetElement, tagName, type)) return; preventDefault = true; entry.action(); @@ -88,24 +86,26 @@ export var Toolbelt; }; const NonTextInputTypes = ["button", "checkbox", "color", "file", "image", "radio", "range", "reset", "submit",]; const InputTageName = "INPUT"; - const isAllowedIn = (entry, srcElement, tagName, type) => { + const isExcludeTarget = (entry, targetElement, tagName, type) => { if ((entry.exclude & 1) !== 0) { - if (tagName === InputTageName && NonTextInputTypes.indexOf(type || '') === -1) - return false; + if (tagName === InputTageName && NonTextInputTypes.every(t => t !== type)) + return true; } if ((entry.exclude & 2) !== 0) { - if (tagName === InputTageName && NonTextInputTypes.indexOf(type || '') !== -1) - return false; + if (tagName === InputTageName && NonTextInputTypes.some(t => t === type)) + return true; } if ((entry.exclude & 4) !== 0) { if (tagName === "TEXTAREA") - return false; + return true; } if ((entry.exclude & 8) !== 0) { - if (srcElement.contentEditable === "true") - return false; + if (targetElement.isContentEditable) + return true; } - return true; + if (entry.excludeSelector !== '' && targetElement.matches(entry.excludeSelector)) + return true; + return false; }; })(HotKeys2 = Blazor.HotKeys2 || (Blazor.HotKeys2 = {})); })(Blazor = Toolbelt.Blazor || (Toolbelt.Blazor = {})); diff --git a/HotKeys2/script.ts b/HotKeys2/script.ts index 54316f5..ddee1db 100644 --- a/HotKeys2/script.ts +++ b/HotKeys2/script.ts @@ -73,18 +73,18 @@ const key = convertToKeyName(ev); const code = ev.code; - const srcElement = ev.srcElement as HTMLElement; - const tagName = srcElement.tagName; - const type = srcElement.getAttribute('type'); + const targetElement = ev.target as HTMLElement; + const tagName = targetElement.tagName; + const type = targetElement.getAttribute('type'); - const preventDefault1 = onKeyDown(modifiers, key, code, srcElement, tagName, type); + const preventDefault1 = onKeyDown(modifiers, key, code, targetElement, tagName, type); const preventDefault2 = isWasm === true ? hotKeysWrpper.invokeMethod(OnKeyDownMethodName, modifiers, tagName, type, key, code) : false; if (preventDefault1 || preventDefault2) ev.preventDefault(); if (isWasm === false) hotKeysWrpper.invokeMethodAsync(OnKeyDownMethodName, modifiers, tagName, type, key, code); }); } - const onKeyDown = (modifiers: ModCodes, key: string, code: string, srcElement: HTMLElement, tagName: string, type: string | null ): boolean => { + const onKeyDown = (modifiers: ModCodes, key: string, code: string, targetElement: HTMLElement, tagName: string, type: string | null): boolean => { let preventDefault = false; hotKeyEntries.forEach(entry => { @@ -103,9 +103,7 @@ if (keyEntry.startsWith("Meta")) entryModKeys |= ModCodes.Meta; if (eventModkeys !== entryModKeys) return; - if (!isAllowedIn(entry, srcElement, tagName, type)) return; - - if (entry.excludeSelector !== '' && srcElement.matches(entry.excludeSelector)) return; + if (isExcludeTarget(entry, targetElement, tagName, type)) return; preventDefault = true; entry.action(); @@ -118,22 +116,24 @@ const InputTageName = "INPUT"; - const isAllowedIn = (entry: HotkeyEntry, srcElement: HTMLElement, tagName: string, type: string | null): boolean => { + const isExcludeTarget = (entry: HotkeyEntry, targetElement: HTMLElement, tagName: string, type: string | null): boolean => { if ((entry.exclude & Exclude.InputText) !== 0) { - if (tagName === InputTageName && NonTextInputTypes.indexOf(type || '') === -1) return false; + if (tagName === InputTageName && NonTextInputTypes.every(t => t !== type)) return true; } if ((entry.exclude & Exclude.InputNonText) !== 0) { - if (tagName === InputTageName && NonTextInputTypes.indexOf(type || '') !== -1) return false; + if (tagName === InputTageName && NonTextInputTypes.some(t => t === type)) return true; } if ((entry.exclude & Exclude.TextArea) !== 0) { - if (tagName === "TEXTAREA") return false; + if (tagName === "TEXTAREA") return true; } if ((entry.exclude & Exclude.ContentEditable) !== 0) { - if (srcElement.contentEditable === "true") return false; + if (targetElement.isContentEditable) return true; } - return true; + if (entry.excludeSelector !== '' && targetElement.matches(entry.excludeSelector)) return true; + + return false; } } \ No newline at end of file diff --git a/HotKeys2/wwwroot/script.min.js b/HotKeys2/wwwroot/script.min.js index 09e8722..b80f3a4 100644 --- a/HotKeys2/wwwroot/script.min.js +++ b/HotKeys2/wwwroot/script.min.js @@ -1 +1 @@ -export var Toolbelt;(function(n){var t;(function(n){var t;(function(n){class f{constructor(n,t,i,r,u,f){this.dotNetObj=n;this.mode=t;this.modifiers=i;this.keyEntry=r;this.exclude=u;this.excludeSelector=f}action(){this.dotNetObj.invokeMethodAsync("InvokeAction")}}let e=0;const t=new Map;n.register=(n,i,r,u,o,s)=>{const h=e++,c=new f(n,i,r,u,o,s);return t.set(h,c),h};n.unregister=n=>{t.delete(n)};const o={OS:"Meta",Decimal:"Period"},s=n=>o[n.key]||n.key,i="OnKeyDown";n.attach=(n,t)=>{document.addEventListener("keydown",r=>{if(typeof r.altKey!="undefined"){const u=(r.shiftKey?1:0)+(r.ctrlKey?2:0)+(r.altKey?4:0)+(r.metaKey?8:0),f=s(r),e=r.code,o=r.srcElement,c=o.tagName,l=o.getAttribute("type"),a=h(u,f,e,o,c,l),v=t===!0?n.invokeMethod(i,u,c,l,f,e):!1;(a||v)&&r.preventDefault();t===!1&&n.invokeMethodAsync(i,u,c,l,f,e)}})};const h=(n,i,r,u,f,e)=>{let o=!1;return t.forEach(t=>{const l=t.mode===1,a=l?r:i,s=t.keyEntry;if(s===a){const v=l?n:n&65534;let h=l?t.modifiers:t.modifiers&65534;(s.startsWith("Shift")&&l&&(h|=1),s.startsWith("Control")&&(h|=2),s.startsWith("Alt")&&(h|=4),s.startsWith("Meta")&&(h|=8),v===h)&&c(t,u,f,e)&&(t.excludeSelector!==""&&u.matches(t.excludeSelector)||(o=!0,t.action()))}}),o},r=["button","checkbox","color","file","image","radio","range","reset","submit",],u="INPUT",c=(n,t,i,f)=>(n.exclude&1)!=0&&i===u&&r.indexOf(f||"")===-1?!1:(n.exclude&2)!=0&&i===u&&r.indexOf(f||"")!==-1?!1:(n.exclude&4)!=0&&i==="TEXTAREA"?!1:(n.exclude&8)!=0&&t.contentEditable==="true"?!1:!0})(t=n.HotKeys2||(n.HotKeys2={}))})(t=n.Blazor||(n.Blazor={}))})(Toolbelt||(Toolbelt={})); \ No newline at end of file +export var Toolbelt;(function(n){var t;(function(n){var t;(function(n){class f{constructor(n,t,i,r,u,f){this.dotNetObj=n;this.mode=t;this.modifiers=i;this.keyEntry=r;this.exclude=u;this.excludeSelector=f}action(){this.dotNetObj.invokeMethodAsync("InvokeAction")}}let e=0;const t=new Map;n.register=(n,i,r,u,o,s)=>{const h=e++,c=new f(n,i,r,u,o,s);return t.set(h,c),h};n.unregister=n=>{t.delete(n)};const o={OS:"Meta",Decimal:"Period"},s=n=>o[n.key]||n.key,i="OnKeyDown";n.attach=(n,t)=>{document.addEventListener("keydown",r=>{if(typeof r.altKey!="undefined"){const u=(r.shiftKey?1:0)+(r.ctrlKey?2:0)+(r.altKey?4:0)+(r.metaKey?8:0),f=s(r),e=r.code,o=r.target,c=o.tagName,l=o.getAttribute("type"),a=h(u,f,e,o,c,l),v=t===!0?n.invokeMethod(i,u,c,l,f,e):!1;(a||v)&&r.preventDefault();t===!1&&n.invokeMethodAsync(i,u,c,l,f,e)}})};const h=(n,i,r,u,f,e)=>{let o=!1;return t.forEach(t=>{const l=t.mode===1,a=l?r:i,s=t.keyEntry;if(s===a){const v=l?n:n&65534;let h=l?t.modifiers:t.modifiers&65534;(s.startsWith("Shift")&&l&&(h|=1),s.startsWith("Control")&&(h|=2),s.startsWith("Alt")&&(h|=4),s.startsWith("Meta")&&(h|=8),v===h)&&(c(t,u,f,e)||(o=!0,t.action()))}}),o},r=["button","checkbox","color","file","image","radio","range","reset","submit",],u="INPUT",c=(n,t,i,f)=>(n.exclude&1)!=0&&i===u&&r.every(n=>n!==f)?!0:(n.exclude&2)!=0&&i===u&&r.some(n=>n===f)?!0:(n.exclude&4)!=0&&i==="TEXTAREA"?!0:(n.exclude&8)!=0&&t.isContentEditable?!0:n.excludeSelector!==""&&t.matches(n.excludeSelector)?!0:!1})(t=n.HotKeys2||(n.HotKeys2={}))})(t=n.Blazor||(n.Blazor={}))})(Toolbelt||(Toolbelt={})); \ No newline at end of file