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"