From f5c5cdb2bd2b87313786b3569b818998583c018c Mon Sep 17 00:00:00 2001
From: Nicolas CARPi <3043706+NicolasCARPi@users.noreply.github.com>
Date: Sun, 11 Jun 2023 14:07:19 +0200
Subject: [PATCH] add onEscape option. fix #6 (#7)
---
CHANGELOG.md | 4 ++++
DOCUMENTATION.md | 10 ++++++++++
demo/index.html | 4 ++++
package-lock.json | 4 ++--
package.json | 2 +-
src/main.ts | 47 +++++++++++++++++++++++++++++++++--------------
6 files changed, 54 insertions(+), 17 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d79be68..600e0dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
# Changelog for malle
+## 2.4.0
+
+* Add `onEscape` option to set behavior of Escape keypress (fix #6)
+
## 2.3.0
* Add `returnedValueIsTrustedHtml` so the function used on original element is `innerHTML` instead of the safer `innerText`.
diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index eb4161f..bc56789 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -133,6 +133,16 @@ default value: 'submit'
What to do when the user presses Enter key? By default the form will be submitted (if valid), but you can decide to do nothing or cancel the edition.
+#### onEscape
+`Action`
+* `Action.Submit` (`'submit'`)
+* `Action.Cancel` (`'cancel'`)
+* `Action.Ignore` (`'ignore'`)
+
+default value: 'cancel'
+
+What to do when the user presses Escape key? By default the form will be cancelled, but you can decide to do nothing or even submit the form if you're crazy.
+
#### requireDiff
boolean
diff --git a/demo/index.html b/demo/index.html
index f49120c..277d8e7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -41,6 +41,10 @@ Selecting behavior on Enter keypress
data-ma-enter='cancel'
Pressing Enter will cancel edition.
data-ma-enter='submit'
Pressing Enter will submit changes.
data-ma-enter='ignore'
Pressing Enter will do nothing.
+ Same with Escape keypress
+ The default behavior is to Cancel action, but here is an example to ignore an Escape keypress:
+ data-ma-escape='ignore'
Pressing Escape will do nothing.
+ data-ma-escape='cancel'
Pressing Escape will cancel edition (default behavior, attribute doesn't need to be added).
Adding a placeholder
data-ma-placeholder='you@example.com'
Your email is: niko@example.com
diff --git a/package-lock.json b/package-lock.json
index 33a3786..b8d9511 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@deltablot/malle",
- "version": "2.3.0",
+ "version": "2.4.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@deltablot/malle",
- "version": "2.3.0",
+ "version": "2.4.0",
"license": "MIT",
"devDependencies": {
"@types/jest": "^27.4.1",
diff --git a/package.json b/package.json
index ff7ac16..d1d7a99 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@deltablot/malle",
- "version": "2.3.0",
+ "version": "2.4.0",
"description": "Make text elements malleable, without dependencies.",
"main": "dist/main.js",
"typings": "dist/main.d.ts",
diff --git a/src/main.ts b/src/main.ts
index 92269b9..982979a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -53,6 +53,7 @@ export interface Options {
onBlur?: Action;
onEdit?(original: HTMLElement, event:Event, input: HTMLInputElement): boolean;
onEnter?: Action;
+ onEscape?: Action;
placeholder?: string;
requireDiff?: boolean;
returnedValueIsTrustedHtml?: boolean;
@@ -105,6 +106,7 @@ export class Malle {
onBlur: Action.Submit,
onEdit: undefined,
onEnter: Action.Submit,
+ onEscape: Action.Cancel,
placeholder: '',
requireDiff: true,
returnedValueIsTrustedHtml: false,
@@ -203,22 +205,38 @@ export class Malle {
}
handleKeypress(event: KeyboardEvent): boolean {
- // we only care about the Enter key
- // and ignore it for textarea
- if (event.key !== 'Enter' || this.opt.inputType === InputType.Textarea) {
+ // ignore it for textarea
+ if (this.opt.inputType === InputType.Textarea) {
return false;
}
- // read behavior from options
- let enterAction: string = this.opt.onEnter;
- // and let element override it
- if (this.original.dataset.maEnter) {
- enterAction = this.original.dataset.maEnter;
- }
- if (enterAction === Action.Ignore) {
- event.preventDefault();
+ if (event.key === 'Enter') {
+ // read behavior from options
+ let enterAction: string = this.opt.onEnter;
+ // and let element override it
+ if (this.original.dataset.maEnter) {
+ enterAction = this.original.dataset.maEnter;
+ }
+ if (enterAction === Action.Ignore) {
+ event.preventDefault();
+ return;
+ }
+ this[enterAction](event);
return;
}
- this[enterAction](event);
+
+ if (event.key === 'Escape') {
+ // read behavior from options
+ let escAction: string = this.opt.onEscape;
+ // and let element override it
+ if (this.original.dataset.maEscape) {
+ escAction = this.original.dataset.maEscape;
+ }
+ if (escAction === Action.Ignore) {
+ event.preventDefault();
+ return;
+ }
+ this[escAction](event);
+ }
}
getInput(): HTMLInputElement {
@@ -280,8 +298,9 @@ export class Malle {
});
});
}
- // listen on keypress for Enter key
- input.addEventListener('keypress', this.handleKeypress.bind(this));
+ // listen on keypress for Enter/Escape keys. Note that Escape will only appear with keydown/keyup, not keypress event.
+ // and we need to use keydown instead of keyup otherwise the default behavior is processed.
+ input.addEventListener('keydown', this.handleKeypress.bind(this));
// listen also on blur events
// but only if there is no action buttons
if (this.opt.submit === '' && this.opt.cancel === '') {