add onEscape option. fix #6 (#7)

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`.

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
 

demo/index.html

@@ -41,6 +41,10 @@ <h2>Selecting behavior on Enter keypress</h2>
       <p><code>data-ma-enter='cancel'</code><br><span data-malleable='true' data-ma-enter='cancel'>Pressing Enter will cancel edition.</span></p>
       <p><code>data-ma-enter='submit'</code><br><span data-malleable='true' data-ma-enter='submit'>Pressing Enter will submit changes.</span></p>
       <p><code>data-ma-enter='ignore'</code><br><span data-malleable='true' data-ma-enter='ignore'>Pressing Enter will do nothing.</span></p>
+      <h3>Same with Escape keypress</h3>
+      <p class='tip'>The default behavior is to Cancel action, but here is an example to ignore an Escape keypress:</p>
+      <p><code>data-ma-escape='ignore'</code><br><span data-malleable='true' data-ma-escape='ignore'>Pressing Escape will do nothing.</span></p>
+      <p><code>data-ma-escape='cancel'</code><br><span data-malleable='true' data-ma-escape='cancel'>Pressing Escape will cancel edition (default behavior, attribute doesn't need to be added).</span></p>
       <h2>Adding a placeholder</h2>
       <p><code>data-ma-placeholder='[email protected]'</code><br>Your email is: <span data-malleable='true' data-ma-placeholder='[email protected]' data-ma-type='email'>[email protected]</span></p>
     </div>

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",

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 === '') {