diff --git a/addon/src/modifiers/on-key.js b/addon/src/modifiers/on-key.js index 492d25726..e50cf0b75 100644 --- a/addon/src/modifiers/on-key.js +++ b/addon/src/modifiers/on-key.js @@ -11,30 +11,66 @@ const ONLY_WHEN_FOCUSED_TAG_NAMES = ['input', 'select', 'textarea']; let modifier; if (macroCondition(dependencySatisfies('ember-modifier', '>=3.2.0 || 4.x'))) { + /** + * This is an element modifier to trigger some behavior when + * specified key combo is pressed. When used with a form element + * (input, textarea, or select), the action fires only when element + * has focus. When used with another element type, it will trigger the + * passed action, OR if no action is passed, it will trigger a `click` + * on the element. This allows for easy declaration of keyboard shortcuts + * for anything clickable: In the following example, we trigger a + * click on the button when the B key is pressed: + * + * + */ modifier = class OnKeyModifier extends Modifier { @service keyboard; + element; keyboardPriority = 0; activatedParamValue = true; eventName = 'keydown'; onlyWhenFocused = true; listenerName; - didReceiveArguments() { - let [keyCombo, callback] = this.args.positional; - let { activated, event, priority } = this.args.named; + constructor(owner, args) { + super(owner, args); + this.keyboard.register(this); + + registerDestructor(this, () => { + this.removeEventListeners(); + this.keyboard.unregister(this); + }); + } + + modify(element, positional, named) { + this.element = element; + + this.removeEventListeners(); + + this.setupProperties(positional, named); + + if (this.onlyWhenFocused) { + this.addEventListeners(); + } + } + + setupProperties(positional, named) { + let [keyCombo, callback] = positional; + let { activated, event, priority, onlyWhenFocused } = named; + this.keyCombo = keyCombo; this.callback = callback; this.eventName = event || 'keydown'; - this.activatedParamValue = Object.keys(this.args.named).includes( - 'activated' - ) - ? !!activated - : undefined; + this.activatedParamValue = 'activated' in named ? !!activated : undefined; this.keyboardPriority = priority ? parseInt(priority, 10) : 0; this.listenerName = listenerName(this.eventName, this.keyCombo); - if (this.args.named.onlyWhenFocused !== undefined) { - this.onlyWhenFocused = this.args.named.onlyWhenFocused; + if (onlyWhenFocused !== undefined) { + this.onlyWhenFocused = onlyWhenFocused; } else { this.onlyWhenFocused = ONLY_WHEN_FOCUSED_TAG_NAMES.includes( this.element.tagName.toLowerCase() @@ -42,23 +78,19 @@ if (macroCondition(dependencySatisfies('ember-modifier', '>=3.2.0 || 4.x'))) { } } - didInstall() { - this.keyboard.register(this); - if (this.onlyWhenFocused) { - this.element.addEventListener('click', this.onFocus, true); - this.element.addEventListener('focus', this.onFocus, true); - this.element.addEventListener('focusout', this.onFocusOut, true); - } + addEventListeners() { + this.element.addEventListener('click', this.onFocus, true); + this.element.addEventListener('focus', this.onFocus, true); + this.element.addEventListener('focusout', this.onFocusOut, true); } - willRemove() { + removeEventListeners = () => { if (this.onlyWhenFocused) { this.element.removeEventListener('click', this.onFocus, true); this.element.removeEventListener('focus', this.onFocus, true); this.element.removeEventListener('focusout', this.onFocusOut, true); } - this.keyboard.unregister(this); - } + }; @action onFocus() { this.isFocused = true; @@ -100,66 +132,30 @@ if (macroCondition(dependencySatisfies('ember-modifier', '>=3.2.0 || 4.x'))) { } }; } else { - /** - * This is an element modifier to trigger some behavior when - * specified key combo is pressed. When used with a form element - * (input, textarea, or select), the action fires only when element - * has focus. When used with another element type, it will trigger the - * passed action, OR if no action is passed, it will trigger a `click` - * on the element. This allows for easy declaration of keyboard shortcuts - * for anything clickable: In the following example, we trigger a - * click on the button when the B key is pressed: - * - * - */ modifier = class OnKeyModifier extends Modifier { @service keyboard; - element; keyboardPriority = 0; activatedParamValue = true; eventName = 'keydown'; onlyWhenFocused = true; listenerName; - constructor(owner, args) { - super(owner, args); - this.keyboard.register(this); - - registerDestructor(this, () => { - this.removeEventListeners(); - this.keyboard.unregister(this); - }); - } - - modify(element, positional, named) { - this.element = element; - - this.removeEventListeners(); - - this.setupProperties(positional, named); - - if (this.onlyWhenFocused) { - this.addEventListeners(); - } - } - - setupProperties(positional, named) { - let [keyCombo, callback] = positional; - let { activated, event, priority, onlyWhenFocused } = named; - + didReceiveArguments() { + let [keyCombo, callback] = this.args.positional; + let { activated, event, priority } = this.args.named; this.keyCombo = keyCombo; this.callback = callback; this.eventName = event || 'keydown'; - this.activatedParamValue = 'activated' in named ? !!activated : undefined; + this.activatedParamValue = Object.keys(this.args.named).includes( + 'activated' + ) + ? !!activated + : undefined; this.keyboardPriority = priority ? parseInt(priority, 10) : 0; this.listenerName = listenerName(this.eventName, this.keyCombo); - if (onlyWhenFocused !== undefined) { - this.onlyWhenFocused = onlyWhenFocused; + if (this.args.named.onlyWhenFocused !== undefined) { + this.onlyWhenFocused = this.args.named.onlyWhenFocused; } else { this.onlyWhenFocused = ONLY_WHEN_FOCUSED_TAG_NAMES.includes( this.element.tagName.toLowerCase() @@ -167,19 +163,23 @@ if (macroCondition(dependencySatisfies('ember-modifier', '>=3.2.0 || 4.x'))) { } } - addEventListeners() { - this.element.addEventListener('click', this.onFocus, true); - this.element.addEventListener('focus', this.onFocus, true); - this.element.addEventListener('focusout', this.onFocusOut, true); + didInstall() { + this.keyboard.register(this); + if (this.onlyWhenFocused) { + this.element.addEventListener('click', this.onFocus, true); + this.element.addEventListener('focus', this.onFocus, true); + this.element.addEventListener('focusout', this.onFocusOut, true); + } } - removeEventListeners = () => { + willRemove() { if (this.onlyWhenFocused) { this.element.removeEventListener('click', this.onFocus, true); this.element.removeEventListener('focus', this.onFocus, true); this.element.removeEventListener('focusout', this.onFocusOut, true); } - }; + this.keyboard.unregister(this); + } @action onFocus() { this.isFocused = true; diff --git a/test-app/config/ember-try.js b/test-app/config/ember-try.js index 6964e7cb5..2a4afccaa 100644 --- a/test-app/config/ember-try.js +++ b/test-app/config/ember-try.js @@ -5,6 +5,12 @@ const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup'); module.exports = async function () { return { + /** + * `ember-classic` scenario should not use `useWorkspaces` + * as only test-app need to get classic flags. + * Otherwise, this scenario would fail. + */ + useWorkspaces: process.argv.every((a) => !a.includes('ember-classic')), useYarn: true, scenarios: [ { diff --git a/test-app/package.json b/test-app/package.json index 91a169994..928ea4747 100644 --- a/test-app/package.json +++ b/test-app/package.json @@ -1,6 +1,7 @@ { "name": "test-app", "version": "8.1.0", + "private": true, "description": "Test app for ember-keyboard addon", "keywords": [], "repository": { @@ -86,5 +87,9 @@ }, "volta": { "extends": "../package.json" - } + }, + "workspaces": [ + "../addon", + "../docs" + ] } diff --git a/yarn.lock b/yarn.lock index a69682a68..bed9ef218 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5370,9 +5370,9 @@ ember-modifier-manager-polyfill@^1.2.0: ember-compatibility-helpers "^1.2.0" "ember-modifier@^2.1.2 || ^3.1.0": - version "3.2.5" - resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-3.2.5.tgz#b82052afe941f3b27c0840019992d59466dfbd77" - integrity sha512-66YA4pQijoDIAfoI0pYAhjYWu/VrTaD3BfxpA311hLIoBlaI2QQY/LR+32aah1EvKY/yInnCJA5wcl7C+f3mkg== + version "3.2.7" + resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-3.2.7.tgz#f2d35b7c867cbfc549e1acd8d8903c5ecd02ea4b" + integrity sha512-ezcPQhH8jUfcJQbbHji4/ZG/h0yyj1jRDknfYue/ypQS8fM8LrGcCMo0rjDZLzL1Vd11InjNs3BD7BdxFlzGoA== dependencies: ember-cli-babel "^7.26.6" ember-cli-normalize-entity-name "^1.0.0"