feat(utils): global utilities

- Finished removing native jQuery support;
- Migrated global constants and utilitary functions to "Utils" module;
- Added type definitions and docs to "Utils" module;
- Exposed "Utils" module in global namespace ("M");
- Components no longer need to import global namespace;
- Removed unnecessary throttle wrapper function on components;
- Updated type definition for toast function + added docs;
- Fix touch event when target does not have a close carousel item;
- Fixed incorrect event instance check;
- Fixed type definitions using "Boolean" object as type.

Author: mauromascarenhas

src/autocomplete.ts

@@ -1,4 +1,4 @@
-import { M } from "./global";
+import { Utils } from "./utils";
 import { Dropdown, DropdownOptions } from "./dropdown";
 import { Component, BaseOptions, InitElements } from "./component";
 
@@ -214,7 +214,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
   _setupDropdown() {
     this.container = document.createElement('ul');
     this.container.style.maxHeight = this.options.maxDropDownHeight;
-    this.container.id = `autocomplete-options-${M.guid()}`;
+    this.container.id = `autocomplete-options-${Utils.guid()}`;
     this.container.classList.add('autocomplete-content', 'dropdown-content');
     this.el.setAttribute('data-target', this.container.id);
 
@@ -236,7 +236,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
       if (userOnItemClick && typeof userOnItemClick === 'function')
         userOnItemClick.call(this.dropdown, this.el);
     };
-    this.dropdown = M.Dropdown.init(this.el, dropdownOptions);
+    this.dropdown = Dropdown.init(this.el, dropdownOptions);
 
     // ! Workaround for Label: move label up again
     // TODO: Just use PopperJS in future!
@@ -271,10 +271,10 @@ export class Autocomplete extends Component<AutocompleteOptions> {
     this.count = 0;
     const actualValue = this.el.value.toLowerCase();
     // Don't capture enter or arrow key usage.
-    if (M.keys.ENTER.includes(e.key) || M.keys.ARROW_UP.includes(e.key) || M.keys.ARROW_DOWN.includes(e.key)) return;
+    if (Utils.keys.ENTER.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key) || Utils.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')) {
+    if (this.oldVal !== actualValue && (Utils.tabPressed || e.type !== 'focus')) {
       this.open();
     }
     // Value has changed!
@@ -295,7 +295,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
     // Arrow keys and enter key usage
     const numItems = this.container.querySelectorAll('li').length;
     // select element on Enter
-    if (M.keys.ENTER.includes(e.key) && this.activeIndex >= 0) {
+    if (Utils.keys.ENTER.includes(e.key) && this.activeIndex >= 0) {
       const liElement = this.container.querySelectorAll('li')[this.activeIndex];
       if (liElement) {
         this.selectOption(liElement.getAttribute('data-id'));
@@ -304,10 +304,10 @@ export class Autocomplete extends Component<AutocompleteOptions> {
       return;
     }
     // Capture up and down key
-    if (M.keys.ARROW_UP.includes(e.key) || M.keys.ARROW_DOWN.includes(e.key)) {
+    if (Utils.keys.ARROW_UP.includes(e.key) || Utils.keys.ARROW_DOWN.includes(e.key)) {
       e.preventDefault();
-      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++;
+      if (Utils.keys.ARROW_UP.includes(e.key) && this.activeIndex > 0) this.activeIndex--;
+      if (Utils.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];

src/carousel.ts

@@ -1,4 +1,4 @@
-import { M } from "./global";
+import { Utils } from "./utils";
 import { Component, BaseOptions, InitElements } from "./component";
 
 export interface CarouselOptions extends BaseOptions{
@@ -236,7 +236,7 @@ export class Carousel extends Component<CarouselOptions> {
     window.removeEventListener('resize', this._handleThrottledResize);
   }
 
-  _handleThrottledResize = (() => M.throttle(function(){ this._handleResize(); }, 200, null).bind(this))();
+  _handleThrottledResize: () => void = Utils.throttle(function(){ this._handleResize(); }, 200, null).bind(this);
 
   _handleCarouselTap = (e: MouseEvent | TouchEvent) => {
     // Fixes firefox draggable image bug
@@ -328,6 +328,7 @@ export class Carousel extends Component<CarouselOptions> {
     }
     else if (!this.options.fullWidth) {
       const clickedElem = (<HTMLElement>e.target).closest('.carousel-item');
+      if (!clickedElem) return;
       const clickedIndex = [...clickedElem.parentNode.children].indexOf(clickedElem);
       const diff = this._wrap(this.center) - clickedIndex;
       // Disable clicks if carousel was shifted by click
@@ -407,17 +408,17 @@ export class Carousel extends Component<CarouselOptions> {
 
   _xpos(e: MouseEvent | TouchEvent) {
     // touch event
-    if (e instanceof TouchEvent && e.targetTouches.length >= 1) {
-      return e.targetTouches[0].clientX;
+    if (e.type.startsWith("touch") && (e as TouchEvent).targetTouches.length >= 1) {
+      return (e as TouchEvent).targetTouches[0].clientX;
     }
     // mouse event
     return (e as MouseEvent).clientX;
   }
 
   _ypos(e: MouseEvent | TouchEvent) {
     // touch event
-    if (e instanceof TouchEvent && e.targetTouches.length >= 1) {
-      return e.targetTouches[0].clientY;
+    if (e.type.startsWith("touch") && (e as TouchEvent).targetTouches.length >= 1) {
+      return (e as TouchEvent).targetTouches[0].clientY;
     }
     // mouse event
     return (e as MouseEvent).clientY;

src/chips.ts

@@ -1,4 +1,4 @@
-import { M } from "./global";
+import { Utils } from "./utils";
 import { Autocomplete, AutocompleteOptions } from "./autocomplete";
 import { Component, BaseOptions, InitElements } from "./component";
 
@@ -117,7 +117,7 @@ export class Chips extends Component<ChipsOptions> {
 
     // Set input id
     if (!this._input.getAttribute('id'))
-      this._input.setAttribute('id', M.guid());
+      this._input.setAttribute('id', Utils.guid());
 
     // Render initial chips
     if (this.options.data.length) {
@@ -221,7 +221,7 @@ export class Chips extends Component<ChipsOptions> {
 
     const currChips: Chips = (chips as any).M_Chips;
 
-    if (M.keys.BACKSPACE.includes(e.key) || M.keys.DELETE.includes(e.key)) {
+    if (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.DELETE.includes(e.key)) {
       e.preventDefault();
       let selectIndex = currChips.chipsData.length;
       if (currChips._selectedChip) {
@@ -236,14 +236,14 @@ export class Chips extends Component<ChipsOptions> {
       else
         currChips._input.focus();
     }
-    else if (M.keys.ARROW_LEFT.includes(e.key)) {
+    else if (Utils.keys.ARROW_LEFT.includes(e.key)) {
       if (currChips._selectedChip) {
         const selectIndex = gGetIndex(currChips._selectedChip) - 1;
         if (selectIndex < 0) return;
         currChips.selectChip(selectIndex);
       }
     }
-    else if (M.keys.ARROW_RIGHT.includes(e.key)) {
+    else if (Utils.keys.ARROW_RIGHT.includes(e.key)) {
       if (currChips._selectedChip) {
         const selectIndex = gGetIndex(currChips._selectedChip) + 1;
         if (selectIndex >= currChips.chipsData.length)
@@ -276,7 +276,7 @@ export class Chips extends Component<ChipsOptions> {
 
   _handleInputKeydown = (e: KeyboardEvent) => {
     Chips._keydown = true;
-    if (M.keys.ENTER.includes(e.key)) {
+    if (Utils.keys.ENTER.includes(e.key)) {
       // Override enter if autocompleting.
       if (this.hasAutocomplete && this.autocomplete && this.autocomplete.isOpen) {
         return;
@@ -288,7 +288,7 @@ export class Chips extends Component<ChipsOptions> {
       this._input.value = '';
     }
     else if (      
-      (M.keys.BACKSPACE.includes(e.key) || M.keys.ARROW_LEFT.includes(e.key)) &&
+      (Utils.keys.BACKSPACE.includes(e.key) || Utils.keys.ARROW_LEFT.includes(e.key)) &&
       this._input.value === '' &&
       this.chipsData.length
     ) {

src/collapsible.ts

@@ -1,6 +1,6 @@
 import anim from "animejs";
 
-import { M } from "./global";
+import { Utils } from "./utils";
 import { Component, BaseOptions, InitElements } from "./component";
 
 export interface CollapsibleOptions extends BaseOptions {
@@ -138,7 +138,7 @@ export class Collapsible extends Component<CollapsibleOptions> {
   }
 
   _handleCollapsibleKeydown = (e: KeyboardEvent) => {
-    if (M.keys.ENTER.includes(e.key)) {
+    if (Utils.keys.ENTER.includes(e.key)) {
       this._handleCollapsibleClick(e);
     }
   }

src/datepicker.ts

@@ -1,5 +1,5 @@
-import { M } from "./global";
 import { Modal } from "./modal";
+import { Utils } from "./utils";
 import { FormSelect } from "./select";
 import { BaseOptions, Component, InitElements, I18nOptions } from "./component";
 
@@ -276,7 +276,7 @@ export class Datepicker extends Component<DatepickerOptions> {
     if (this.options.minDate) this.options.minDate.setHours(0, 0, 0, 0);
     if (this.options.maxDate) this.options.maxDate.setHours(0, 0, 0, 0);
 
-    this.id = M.guid();
+    this.id = Utils.guid();
 
     this._setupVariables();
     this._insertHTMLIntoDOM();
@@ -930,7 +930,7 @@ export class Datepicker extends Component<DatepickerOptions> {
   }
 
   _handleInputKeydown = (e: KeyboardEvent) => {
-    if (M.keys.ENTER.includes(e.key)) {
+    if (Utils.keys.ENTER.includes(e.key)) {
       e.preventDefault();
       this.open();
     }

src/dropdown.ts

@@ -1,6 +1,6 @@
 import anim from "animejs";
 
-import { M } from "./global";
+import { Utils } from "./utils";
 import { Component, BaseOptions, InitElements, Openable } from "./component";
 
 export interface DropdownOptions extends BaseOptions {
@@ -114,7 +114,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     (this.el as any).M_Dropdown = this;
 
     Dropdown._dropdowns.push(this);
-    this.id = M.getIdFromTrigger(el);
+    this.id = Utils.getIdFromTrigger(el);
     this.dropdownEl = document.getElementById(this.id);
 
     this.options = {
@@ -264,7 +264,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
 
   _handleTriggerKeydown = (e: KeyboardEvent) => {
     // ARROW DOWN OR ENTER WHEN SELECT IS CLOSED - open Dropdown
-    const arrowDownOrEnter = M.keys.ARROW_DOWN.includes(e.key) || M.keys.ENTER.includes(e.key);
+    const arrowDownOrEnter = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ENTER.includes(e.key);
     if (arrowDownOrEnter && !this.isOpen) {
       e.preventDefault();
       this.open();
@@ -287,15 +287,15 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
   }
 
   _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)) {
+    const arrowUpOrDown = Utils.keys.ARROW_DOWN.includes(e.key) || Utils.keys.ARROW_UP.includes(e.key);
+    if (Utils.keys.TAB.includes(e.key)) {
       e.preventDefault();
       this.close();
     }
     // Navigate down dropdown list
     else if (arrowUpOrDown && this.isOpen) {
       e.preventDefault();
-      const direction = M.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
+      const direction = Utils.keys.ARROW_DOWN.includes(e.key) ? 1 : -1;
       let newFocusedIndex = this.focusedIndex;
       let hasFoundNewIndex = false;
       do {
@@ -318,7 +318,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
       }
     }
     // ENTER selects choice on focused item
-    else if (M.keys.ENTER.includes(e.key) && this.isOpen) {
+    else if (Utils.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');
@@ -333,15 +333,15 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
       }
     }
     // Close dropdown on ESC
-    else if (M.keys.ESC.includes(e.key) && this.isOpen) {
+    else if (Utils.keys.ESC.includes(e.key) && this.isOpen) {
       e.preventDefault();
       this.close();
     }
 
     // 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];
+    const specialKeys = [...Utils.keys.ARROW_DOWN, ...Utils.keys.ARROW_UP, ...Utils.keys.ENTER, ...Utils.keys.ESC, ...Utils.keys.TAB];
     if (isLetter && !specialKeys.includes(e.key)) {
       this.filterQuery.push(keyText);
       const string = this.filterQuery.join('');
@@ -430,7 +430,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
       width: idealWidth
     };
 
-    const alignments = M.checkPossibleAlignments(
+    const alignments = Utils.checkPossibleAlignments(
       this.el,
       closestOverflowParent,
       dropdownBounds,

src/edges.ts

@@ -1,6 +1,6 @@
 export class Edges {
-  public top: Boolean; // If the top edge was exceeded
-  public right: Boolean; // If the right edge was exceeded
-  public bottom: Boolean; // If the bottom edge was exceeded
-  public left: Boolean; // If the left edge was exceeded
+  public top: boolean; // If the top edge was exceeded
+  public right: boolean; // If the right edge was exceeded
+  public bottom: boolean; // If the bottom edge was exceeded
+  public left: boolean; // If the left edge was exceeded
 }

src/forms.ts

@@ -1,4 +1,4 @@
-import { M } from "./global";
+import { Utils } from "./utils";
 
 export class Forms {
 
@@ -81,7 +81,7 @@ export class Forms {
         // Radio and Checkbox focus class
         if (target instanceof HTMLInputElement && ['radio','checkbox'].includes(target.type)) {
           // TAB, check if tabbing to radio or checkbox.
-          if (M.keys.TAB.includes(e.key)) {
+          if (Utils.keys.TAB.includes(e.key)) {
             target.classList.add('tabbed');
             target.addEventListener('blur', e => target.classList.remove('tabbed'), {once: true});
           }