Merge pull request #379 from materializecss/refactoring-events

Refactoring events

Author: wuda-io

docs/css/ghpages-materialize.css

@@ -172,12 +172,12 @@ export class Autocomplete extends Component {
     }
   }
 
-  _handleInputKeyupAndFocus = (e) => {
+  _handleInputKeyupAndFocus = (e: KeyboardEvent) => {
     if (e.type === 'keyup') Autocomplete._keydown = false;
     this.count = 0;
     const actualValue = this.el.value.toLowerCase();
     // Don't capture enter or arrow key usage.
-    if (e.keyCode === 13 || e.keyCode === 38 || e.keyCode === 40) return;
+    if (M.keys.ENTER.includes(e.key) || M.keys.ARROW_UP.includes(e.key) || M.keys.ARROW_DOWN.includes(e.key)) return;
     // Check if the input isn't empty
     // Check if focus triggered by tab
     if (this.oldVal !== actualValue && (M.tabPressed || e.type !== 'focus')) {
@@ -196,13 +196,12 @@ export class Autocomplete extends Component {
     this.oldVal = actualValue;
   }
 
-  _handleInputKeydown = (e) => {
+  _handleInputKeydown = (e: KeyboardEvent) => {
     Autocomplete._keydown = true;
     // Arrow keys and enter key usage
-    const keyCode = e.keyCode;
     const numItems = this.container.querySelectorAll('li').length;
     // select element on Enter
-    if (keyCode === M.keys.ENTER && this.activeIndex >= 0) {
+    if (M.keys.ENTER.includes(e.key) && this.activeIndex >= 0) {
       const liElement = this.container.querySelectorAll('li')[this.activeIndex];
       if (liElement) {
         this.selectOption(liElement.getAttribute('data-id'));
@@ -211,10 +210,10 @@ export class Autocomplete extends Component {
       return;
     }
     // Capture up and down key
-    if (keyCode === M.keys.ARROW_UP || keyCode === M.keys.ARROW_DOWN) {
+    if (M.keys.ARROW_UP.includes(e.key) || M.keys.ARROW_DOWN.includes(e.key)) {
       e.preventDefault();
-      if (keyCode === M.keys.ARROW_UP && this.activeIndex > 0) this.activeIndex--;
-      if (keyCode === M.keys.ARROW_DOWN && this.activeIndex < numItems - 1) this.activeIndex++;
+      if (M.keys.ARROW_UP.includes(e.key) && this.activeIndex > 0) this.activeIndex--;
+      if (M.keys.ARROW_DOWN.includes(e.key) && this.activeIndex < numItems - 1) this.activeIndex++;
       this.$active?.classList.remove('active');
       if (this.activeIndex >= 0) {
         this.$active = this.container.querySelectorAll('li')[this.activeIndex];

docs/js/materialize.js

@@ -107,7 +107,7 @@ export class Chips extends Component {
     this._input.removeEventListener('keydown', this._handleInputKeydown);
   }
 
-  _handleChipClick = (e) => {
+  _handleChipClick = (e: Event) => {
     const _chip = (<HTMLElement>e.target).closest('.chip');
     const clickedClose = (<HTMLElement>e.target).classList.contains('close');
     if (_chip) {
@@ -126,7 +126,7 @@ export class Chips extends Component {
     }
   }
 
-  static _handleChipsKeydown(e) {
+  static _handleChipsKeydown(e: KeyboardEvent) {
     Chips._keydown = true;
     const chips = (<HTMLElement>e.target).closest('.chips');
     const chipsKeydown = e.target && chips;
@@ -136,8 +136,8 @@ export class Chips extends Component {
     if (tag === 'INPUT' || tag === 'TEXTAREA' || !chipsKeydown) return;
 
     const currChips: Chips = (chips as any).M_Chips;
-    // backspace and delete
-    if (e.keyCode === 8 || e.keyCode === 46) {
+
+    if (M.keys.BACKSPACE.includes(e.key) || M.keys.DELETE.includes(e.key)) {
       e.preventDefault();
       let selectIndex = currChips.chipsData.length;
       if (currChips._selectedChip) {
@@ -152,16 +152,14 @@ export class Chips extends Component {
       else
         currChips._input.focus();
     }
-    // left arrow key
-    else if (e.keyCode === 37) {
+    else if (M.keys.ARROW_LEFT.includes(e.key)) {
       if (currChips._selectedChip) {
         const selectIndex = gGetIndex(currChips._selectedChip) - 1;
         if (selectIndex < 0) return;
         currChips.selectChip(selectIndex);
       }
     }
-    // right arrow key
-    else if (e.keyCode === 39) {
+    else if (M.keys.ARROW_RIGHT.includes(e.key)) {
       if (currChips._selectedChip) {
         const selectIndex = gGetIndex(currChips._selectedChip) + 1;
         if (selectIndex >= currChips.chipsData.length)
@@ -172,11 +170,11 @@ export class Chips extends Component {
     }
   }
 
-  static _handleChipsKeyup(e) {
+  static _handleChipsKeyup(e: Event) {
     Chips._keydown = false;
   }
 
-  static _handleChipsBlur(e) {
+  static _handleChipsBlur(e: Event) {
     if (!Chips._keydown && document.hidden) {
       const chips = (<HTMLElement>e.target).closest('.chips');
       const currChips: Chips = (chips as any).M_Chips;
@@ -192,10 +190,9 @@ export class Chips extends Component {
     this.el.classList.remove('focus');
   }
 
-  _handleInputKeydown = (e) => {
+  _handleInputKeydown = (e: KeyboardEvent) => {
     Chips._keydown = true;
-    // enter
-    if (e.keyCode === 13) {
+    if (M.keys.ENTER.includes(e.key)) {
       // Override enter if autocompleting.
       if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
         return;
@@ -205,10 +202,9 @@ export class Chips extends Component {
         this.addChip({id: this._input.value});
       }
       this._input.value = '';
-      // delete or left
     }
-    else if (
-      (e.keyCode === 8 || e.keyCode === 37) &&
+    else if (      
+      (M.keys.BACKSPACE.includes(e.key) || M.keys.ARROW_LEFT.includes(e.key)) &&
       this._input.value === '' &&
       this.chipsData.length
     ) {

src/autocomplete.ts

@@ -1,11 +1,22 @@
+import { M } from "./global";
 import { Component } from "./component";
 import anim from "animejs";
 
-const _defaults = {
+interface CollapsibleOptions {
+  accordion: boolean;
+  onOpenStart: Function|undefined;
+  onOpenEnd: Function|undefined;
+  onCloseStart: Function|undefined;
+  onCloseEnd: Function|undefined;
+  inDuration: number;
+  outDuration: number;
+}
+
+const _defaults: CollapsibleOptions = {
   accordion: true,
   onOpenStart: undefined,
   onOpenEnd: undefined,
-  onCloseStart: undefined,
+  onCloseStart: undefined,  
   onCloseEnd: undefined,
   inDuration: 300,
   outDuration: 300
@@ -14,9 +25,9 @@ const _defaults = {
 export class Collapsible extends Component {
   private _headers: HTMLElement[];
 
-  constructor(el, options) {
+  constructor(el: HTMLElement, options: CollapsibleOptions) {
     super(Collapsible, el, options);
-    (this.el as any).M_Collapsible = this;
+    this.el['M_Collapsible'] = this;
     this.options = {...Collapsible.defaults, ...options};
     // Setup tab indices
     this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
@@ -46,7 +57,7 @@ export class Collapsible extends Component {
 
   destroy() {
     this._removeEventHandlers();
-    (this.el as any).M_Collapsible = undefined;
+    this.el['M_Collapsible'].M_Collapsible = undefined;
   }
 
   _setupEventHandlers() {
@@ -76,8 +87,8 @@ export class Collapsible extends Component {
     }
   }
 
-  _handleCollapsibleKeydown = (e) => {
-    if (e.keyCode === 13) {
+  _handleCollapsibleKeydown = (e: KeyboardEvent) => {
+    if (M.keys.ENTER.includes(e.key)) {
       this._handleCollapsibleClick(e);
     }
   }

src/chips.ts

@@ -743,8 +743,8 @@ export class Datepicker extends Component {
     this.open();
   }
 
-  _handleInputKeydown = (e) => {
-    if (e.which === M.keys.ENTER) {
+  _handleInputKeydown = (e: KeyboardEvent) => {
+    if (M.keys.ENTER.includes(e.key)) {
       e.preventDefault();
       this.open();
     }

src/collapsible.ts

@@ -164,9 +164,10 @@ export class Dropdown extends Component {
     this.isTouchMoving = false;
   }
 
-  _handleTriggerKeydown = (e) => {
+  _handleTriggerKeydown = (e: KeyboardEvent) => {
     // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown
-    if ((e.which === M.keys.ARROW_DOWN || e.which === M.keys.ENTER) && !this.isOpen) {
+    const arrowDownOrEnter = M.keys.ARROW_DOWN.includes(e.key) || M.keys.ENTER.includes(e.key);
+    if (arrowDownOrEnter && !this.isOpen) {
       e.preventDefault();
       this.open();
     }
@@ -187,15 +188,16 @@ export class Dropdown extends Component {
     }
   }
 
-  _handleDropdownKeydown = (e) => {
-    if (e.which === M.keys.TAB) {
+  _handleDropdownKeydown = (e: KeyboardEvent) => {
+    const arrowUpOrDown = M.keys.ARROW_DOWN.includes(e.key) || M.keys.ARROW_UP.includes(e.key);
+    if (M.keys.TAB.includes(e.key)) {
       e.preventDefault();
       this.close();
     }
     // Navigate down dropdown list
-    else if ((e.which === M.keys.ARROW_DOWN || e.which === M.keys.ARROW_UP) && this.isOpen) {
+    else if (arrowUpOrDown && this.isOpen) {
       e.preventDefault();
-      const direction = e.which === M.keys.ARROW_DOWN ? 1 : -1;
+      const direction = M.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
       let newFocusedIndex = this.focusedIndex;
       let hasFoundNewIndex = false;
       do {
@@ -218,7 +220,7 @@ export class Dropdown extends Component {
       }
     }
     // ENTER selects choice on focused item
-    else if (e.which === M.keys.ENTER && this.isOpen) {
+    else if (M.keys.ENTER.includes(e.key) && this.isOpen) {
       // Search for <a> and <button>
       const focusedElement = this.dropdownEl.children[this.focusedIndex];
       const activatableElement = <HTMLElement>focusedElement.querySelector('a, button');
@@ -233,16 +235,17 @@ export class Dropdown extends Component {
       }
     }
     // Close dropdown on ESC
-    else if (e.which === M.keys.ESC && this.isOpen) {
+    else if (M.keys.ESC.includes(e.key) && this.isOpen) {
       e.preventDefault();
       this.close();
     }
 
-    // CASE WHEN USER TYPE LETTERS
-    const letter = String.fromCharCode(e.which).toLowerCase();
-    const nonLetters = [9, 13, 27, 38, 40];
-    if (letter && nonLetters.indexOf(e.which) === -1) {
-      this.filterQuery.push(letter);
+    // CASE WHEN USER TYPE LTTERS
+    const keyText = e.key.toLowerCase();
+    const isLetter = /[a-zA-Z0-9-_]/.test(keyText);
+    const specialKeys = [...M.keys.ARROW_DOWN, ...M.keys.ARROW_UP, ...M.keys.ENTER, ...M.keys.ESC, ...M.keys.TAB];
+    if (isLetter && !specialKeys.includes(e.key)) {
+      this.filterQuery.push(keyText);
       const string = this.filterQuery.join('');
       const newOptionEl = Array.from(this.dropdownEl.querySelectorAll('li'))
         .find((el) => el.innerText.toLowerCase().indexOf(string) === 0);

src/datepicker.ts

@@ -76,12 +76,12 @@ export class Forms {
   static Init(){
     document.addEventListener("DOMContentLoaded", () => {
 
-      document.addEventListener('keyup', e => {
+      document.addEventListener('keyup', (e: KeyboardEvent) => {
         const target = <HTMLInputElement>e.target;
         // Radio and Checkbox focus class
         if (target instanceof HTMLInputElement && ['radio','checkbox'].includes(target.type)) {
           // TAB, check if tabbing to radio or checkbox.
-          if (e.which === M.keys.TAB) {
+          if (M.keys.TAB.includes(e.key)) {
             target.classList.add('tabbed');
             target.addEventListener('blur', e => target.classList.remove('tabbed'), {once: true});
           }

src/dropdown.ts

@@ -30,11 +30,15 @@ export class M {
   static version = '2.0.1-alpha';
 
   static keys = {
-    TAB: 9,
-    ENTER: 13,
-    ESC: 27,
-    ARROW_UP: 38,
-    ARROW_DOWN: 40
+    TAB: ['Tab'],
+    ENTER: ['Enter'],
+    ESC: ['Escape', 'Esc'],
+    BACKSPACE: ['Backspace'],
+    ARROW_UP: ['ArrowUp', 'Up'],
+    ARROW_DOWN: ['ArrowDown', 'Down'],
+    ARROW_LEFT: ['ArrowLeft', 'Left'],
+    ARROW_RIGHT: ['ArrowRight', 'Right'],
+    DELETE: ['Delete', 'Del'],
   };
 
   static Autocomplete: typeof Autocomplete = Autocomplete;
@@ -61,19 +65,19 @@ export class M {
   static Range: typeof Range = Range;
   static Waves: typeof Waves = Waves;
 
-  static tabPressed:boolean = false;
-  static keyDown:boolean = false;
+  static tabPressed: boolean = false;
+  static keyDown: boolean = false;
 
-  static docHandleKeydown(e) {
+  static docHandleKeydown(e: KeyboardEvent) {
     M.keyDown = true;
-    if (e.which === M.keys.TAB || e.which === M.keys.ARROW_DOWN || e.which === M.keys.ARROW_UP) {
+    if ([...M.keys.TAB, ...M.keys.ARROW_DOWN, ...M.keys.ARROW_UP].includes(e.key)) {
       M.tabPressed = true;
     }
   }
 
-  static docHandleKeyup(e) {
+  static docHandleKeyup(e: KeyboardEvent) {
     M.keyDown = false;
-    if (e.which === M.keys.TAB || e.which === M.keys.ARROW_DOWN || e.which === M.keys.ARROW_UP) {
+    if ([...M.keys.TAB, ...M.keys.ARROW_DOWN, ...M.keys.ARROW_UP].includes(e.key)) {
       M.tabPressed = false;
     }
   }

src/forms.ts

@@ -94,9 +94,8 @@ export class Materialbox extends Component {
     if (this.overlayActive) this.close();
   }
 
-  _handleWindowEscape = (e) => {
-    // ESC key
-    if (e.keyCode === 27 && this.doneAnimating && this.overlayActive) this.close();
+  _handleWindowEscape = (e: KeyboardEvent) => {
+    if (M.keys.ESC.includes(e.key) && this.doneAnimating && this.overlayActive) this.close();
   }
 
   _makeAncestorsOverflowVisible() {

src/global.ts

@@ -96,9 +96,8 @@ export class Modal extends Component {
     if (closeTrigger) this.close();
   }
 
-  _handleKeydown = (e) => {
-    // ESC key
-    if (e.keyCode === 27 && this.options.dismissible) this.close();
+  _handleKeydown = (e: KeyboardEvent) => {
+    if (M.keys.ESC.includes(e.key) && this.options.dismissible) this.close();
   }
 
   _handleFocus = (e) => {

src/materialbox.ts

@@ -140,15 +140,15 @@ export class Timepicker extends Component {
     this.open();
   }
 
-  _handleInputKeydown = (e) => {
-    if (e.which === M.keys.ENTER) {
+  _handleInputKeydown = (e: KeyboardEvent) => {
+    if (M.keys.ENTER.includes(e.key)) {
       e.preventDefault();
       this.open();
     }
   }
 
-  _handleTimeInputEnterKey = (e) => {
-    if (e.which === M.keys.ENTER) {
+  _handleTimeInputEnterKey = (e: KeyboardEvent) => {
+    if (M.keys.ENTER.includes(e.key)) {
       e.preventDefault();
       this._inputFromTextField();
     }