Eslint coding standards

eslint.config.mjs

@@ -16,7 +16,7 @@ export default [
       '@typescript-eslint/no-unused-vars': 'error',
       '@typescript-eslint/no-unused-expressions': 'error',
       '@typescript-eslint/no-this-alias': 'warn',
-      '@typescript-eslint/no-empty-object-type': 'error',
+      '@typescript-eslint/no-empty-object-type': ['error' , { allowWithName: 'BaseOptions$' }],
       '@typescript-eslint/no-require-imports': 'error',
       '@typescript-eslint/no-unsafe-function-type': 'error'
     }

src/autocomplete.ts

@@ -3,7 +3,7 @@ import { Dropdown, DropdownOptions } from "./dropdown";
 import { Component, BaseOptions, InitElements, MElement } from "./component";
 
 export interface AutocompleteData {
-  /** 
+  /**
    * A primitive value that can be converted to string.
    * If "text" is not provided, it will also be used as "option text" as well
    */
@@ -66,9 +66,9 @@ export interface AutocompleteOptions extends BaseOptions {
    * @default {}
    */
   dropdownOptions: Partial<DropdownOptions>;
-};
+}
 
-let _defaults: AutocompleteOptions = {
+const _defaults: AutocompleteOptions = {
   data: [], // Autocomplete data set
   onAutocomplete: null, // Callback for when autocompleted
   dropdownOptions: {
@@ -82,7 +82,7 @@ let _defaults: AutocompleteOptions = {
   onSearch: (text: string, autocomplete: Autocomplete) => {
     const normSearch = text.toLocaleLowerCase();
     autocomplete.setMenuItems(
-      autocomplete.options.data.filter((option) => 
+      autocomplete.options.data.filter((option) =>
         option.id.toString().toLocaleLowerCase().includes(normSearch)
           || option.text?.toLocaleLowerCase().includes(normSearch)
       )
@@ -118,7 +118,7 @@ export class Autocomplete extends Component<AutocompleteOptions> {
       ...Autocomplete.defaults,
       ...options
     };
-    
+
     this.isOpen = false;
     this.count = 0;
     this.activeIndex = -1;
@@ -168,8 +168,8 @@ export class Autocomplete extends Component<AutocompleteOptions> {
 
   _setupEventHandlers() {
     this.el.addEventListener('blur', this._handleInputBlur);
-    this.el.addEventListener('keyup', this._handleInputKeyupAndFocus);
-    this.el.addEventListener('focus', this._handleInputKeyupAndFocus);
+    this.el.addEventListener('keyup', this._handleInputKeyup);
+    this.el.addEventListener('focus', this._handleInputFocus);
     this.el.addEventListener('keydown', this._handleInputKeydown);
     this.el.addEventListener('click', this._handleInputClick);
     this.container.addEventListener(
@@ -188,8 +188,8 @@ export class Autocomplete extends Component<AutocompleteOptions> {
 
   _removeEventHandlers() {
     this.el.removeEventListener('blur', this._handleInputBlur);
-    this.el.removeEventListener('keyup', this._handleInputKeyupAndFocus);
-    this.el.removeEventListener('focus', this._handleInputKeyupAndFocus);
+    this.el.removeEventListener('keyup', this._handleInputKeyup);
+    this.el.removeEventListener('focus', this._handleInputFocus);
     this.el.removeEventListener('keydown', this._handleInputKeydown);
     this.el.removeEventListener('click', this._handleInputClick);
     this.container.removeEventListener(
@@ -226,11 +226,12 @@ export class Autocomplete extends Component<AutocompleteOptions> {
     this.el.parentElement.appendChild(this.container);
 
     // Initialize dropdown
-    let dropdownOptions = {
+    const dropdownOptions = {
       ...Autocomplete.defaults.dropdownOptions,
       ...this.options.dropdownOptions
     };
-    let userOnItemClick = dropdownOptions.onItemClick;
+    // @todo shouldn't we conditionally check if dropdownOptions.onItemClick is set in first place?
+    const userOnItemClick = dropdownOptions.onItemClick;
     // Ensuring the select Option call when user passes custom onItemClick function to dropdown
     dropdownOptions.onItemClick = (li) => {
       if (!li) return;
@@ -270,19 +271,29 @@ export class Autocomplete extends Component<AutocompleteOptions> {
     }
   }
 
-  _handleInputKeyupAndFocus = (e: KeyboardEvent) => {
+  _handleInputKeyup = (e: KeyboardEvent) => {
     if (e.type === 'keyup') Autocomplete._keydown = false;
     this.count = 0;
     const actualValue = this.el.value.toLocaleLowerCase();
     // Don't capture enter or arrow key usage.
     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 && (Utils.tabPressed || e.type !== 'focus')) {
+    if (this.oldVal !== actualValue && (Utils.tabPressed)) {
       this.open();
     }
+    this._inputChangeDetection(actualValue);
+  };
+
+  _handleInputFocus = () => {
+    this.count = 0;
+    const actualValue = this.el.value.toLocaleLowerCase();
+    this._inputChangeDetection(actualValue);
+  }
+
+  _inputChangeDetection = (value: string) => {
     // Value has changed!
-    if (this.oldVal !== actualValue) {
+    if (this.oldVal !== value) {
       this._setStatusLoading();
       this.options.onSearch(this.el.value, this);
     }
@@ -291,8 +302,8 @@ export class Autocomplete extends Component<AutocompleteOptions> {
       this.selectedValues = [];
       this._triggerChanged();
     }
-    this.oldVal = actualValue;
-  }
+    this.oldVal = value;
+  };
 
   _handleInputKeydown = (e: KeyboardEvent) => {
     Autocomplete._keydown = true;

src/buttons.ts

@@ -18,7 +18,7 @@ export interface FloatingActionButtonOptions extends BaseOptions {
   toolbarEnabled: boolean;
 };
 
-let _defaults: FloatingActionButtonOptions = {
+const _defaults: FloatingActionButtonOptions = {
   direction: 'top',
   hoverEnabled: true,
   toolbarEnabled: false
@@ -132,7 +132,7 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
 
   _handleDocumentClick = (e: MouseEvent) => {
     const elem = e.target;
-    if (elem !== this._menu) this.close;
+    if (elem !== this._menu) this.close();
   }
 
   /**
@@ -166,7 +166,7 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
     this.el.classList.add('active');
     const delayIncrement = 40;
     const duration = 275;
-    
+
     this._floatingBtnsReverse.forEach((el, index) => {
       const delay = delayIncrement * index;
       el.style.transition = 'none';
@@ -198,21 +198,19 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
   }
 
   _animateInToolbar() {
-    let scaleFactor;
-    let windowWidth = window.innerWidth;
-    let windowHeight = window.innerHeight;
-    let btnRect = this.el.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const btnRect = this.el.getBoundingClientRect();
 
-    const backdrop =  document.createElement('div');
+    const backdrop =  document.createElement('div'),
+    scaleFactor = windowWidth / backdrop[0].clientWidth,
+    fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');
     backdrop.classList.add('fab-backdrop'); //  $('<div class="fab-backdrop"></div>');
-
-    const fabColor = getComputedStyle(this._anchor).backgroundColor; // css('background-color');
-
+    backdrop.style.backgroundColor = fabColor;
     this._anchor.append(backdrop);
 
     this.offsetX = btnRect.left - windowWidth / 2 + btnRect.width / 2;
     this.offsetY = windowHeight - btnRect.bottom;
-    scaleFactor = windowWidth / backdrop[0].clientWidth;
     this.btnBottom = btnRect.bottom;
     this.btnLeft = btnRect.left;
     this.btnWidth = btnRect.width;
@@ -229,8 +227,6 @@ export class FloatingActionButton extends Component<FloatingActionButtonOptions>
     this._anchor.style.transform = `translateY(${this.offsetY}px`;
     this._anchor.style.transition = 'none';
 
-    backdrop.style.backgroundColor = fabColor;
-
     setTimeout(() => {
       this.el.style.transform = '';
       this.el.style.transition  = 'transform .2s cubic-bezier(0.550, 0.085, 0.680, 0.530), background-color 0s linear .2s';

src/carousel.ts

@@ -49,7 +49,7 @@ export interface CarouselOptions extends BaseOptions{
   onCycleTo: (current: Element, dragged: boolean) => void;
 }
 
-let _defaults: CarouselOptions = {
+const _defaults: CarouselOptions = {
   duration: 200, // ms
   dist: -100, // zoom scale TODO: make this more intuitive as an option
   shift: 0, // spacing for center image
@@ -72,25 +72,25 @@ export class Carousel extends Component<CarouselOptions> {
   offset: number;
   target: number;
   images: HTMLElement[];
-  itemWidth: any;
-  itemHeight: any;
+  itemWidth: number;
+  itemHeight: number;
   dim: number;
-  _indicators: any;
+  _indicators: HTMLUListElement;
   count: number;
   xform: string;
   verticalDragged: boolean;
-  reference: any;
-  referenceY: any;
+  reference: number;
+  referenceY: number;
   velocity: number;
   frame: number;
   timestamp: number;
   ticker: string | number | NodeJS.Timeout;
   amplitude: number;
   /** The index of the center carousel item. */
   center: number = 0;
-  imageHeight: any;
-  scrollingTimeout: any;
-  oneTimeCallback: any;
+  imageHeight: number;
+  scrollingTimeout: number | NodeJS.Timeout;
+  oneTimeCallback: (current: Element, dragged: boolean) => void | null;
 
   constructor(el: HTMLElement, options: Partial<CarouselOptions>) {
     super(el, options, Carousel);
@@ -152,7 +152,7 @@ export class Carousel extends Component<CarouselOptions> {
     // Setup cross browser string
     this.xform = 'transform';
     ['webkit', 'Moz', 'O', 'ms'].every((prefix) => {
-      var e = prefix + 'Transform';
+      const e = prefix + 'Transform';
       if (typeof document.body.style[e] !== 'undefined') {
         this.xform = e;
         return false;
@@ -446,13 +446,16 @@ export class Carousel extends Component<CarouselOptions> {
   }
 
   _track = () => {
-    let now: number, elapsed: number, delta: number, v: number;
-    now = Date.now();
-    elapsed = now - this.timestamp;
+    const now: number = Date.now(),
+      elapsed: number = now - this.timestamp,
+      delta: number = this.offset - this.frame,
+      v: number = (1000 * delta) / (1 + elapsed);
+    // now = Date.now();
+    // elapsed = now - this.timestamp;
     this.timestamp = now;
-    delta = this.offset - this.frame;
+    // delta = this.offset - this.frame;
     this.frame = this.offset;
-    v = (1000 * delta) / (1 + elapsed);
+    // v = (1000 * delta) / (1 + elapsed);
     this.velocity = 0.8 * v + 0.2 * this.velocity;
   }
 
@@ -476,33 +479,33 @@ export class Carousel extends Component<CarouselOptions> {
       this.el.classList.add('scrolling');
     }
     if (this.scrollingTimeout != null) {
-      window.clearTimeout(this.scrollingTimeout);
+      clearTimeout(this.scrollingTimeout);
     }
-    this.scrollingTimeout = window.setTimeout(() => {
+    this.scrollingTimeout = setTimeout(() => {
       this.el.classList.remove('scrolling');
     }, this.options.duration);
 
     // Start actual scroll
+    this.offset = typeof x === 'number' ? x : this.offset;
+    this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
+
+    const half: number = this.count >> 1,
+      delta: number = this.offset - this.center * this.dim,
+      dir: number = delta < 0 ? 1 : -1,
+      tween: number = (-dir * delta * 2) / this.dim;
     let i: number,
-      half: number,
-      delta: number,
-      dir: number,
-      tween: number,
       el: HTMLElement,
       alignment: string,
       zTranslation: number,
       tweenedOpacity: number,
       centerTweenedOpacity: number;
-    let lastCenter = this.center;
-    let numVisibleOffset = 1 / this.options.numVisible;
-
-    this.offset = typeof x === 'number' ? x : this.offset;
-    this.center = Math.floor((this.offset + this.dim / 2) / this.dim);
+    const lastCenter = this.center;
+    const numVisibleOffset = 1 / this.options.numVisible;
 
-    delta = this.offset - this.center * this.dim;
-    dir = delta < 0 ? 1 : -1;
-    tween = (-dir * delta * 2) / this.dim;
-    half = this.count >> 1;
+    // delta = this.offset - this.center * this.dim;
+    // dir = delta < 0 ? 1 : -1;
+    // tween = (-dir * delta * 2) / this.dim;
+    // half = this.count >> 1;
 
     if (this.options.fullWidth) {
       alignment = 'translateX(0)';
@@ -537,7 +540,7 @@ export class Carousel extends Component<CarouselOptions> {
         el.classList.add('active');
       }
 
-      let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
+      const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
         this.options.shift *
         tween *
         i}px) translateZ(${this.options.dist * tween}px)`;
@@ -556,7 +559,7 @@ export class Carousel extends Component<CarouselOptions> {
       // Don't show wrapped items.
       if (!this.noWrap || this.center + i < this.count) {
         el = this.images[this._wrap(this.center + i)];
-        let transformString = `${alignment} translateX(${this.options.shift +
+        const transformString = `${alignment} translateX(${this.options.shift +
           (this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
         this._updateItemStyle(el, tweenedOpacity, -i, transformString);
       }
@@ -571,7 +574,7 @@ export class Carousel extends Component<CarouselOptions> {
       // Don't show wrapped items.
       if (!this.noWrap || this.center - i >= 0) {
         el = this.images[this._wrap(this.center - i)];
-        let transformString = `${alignment} translateX(${-this.options.shift +
+        const transformString = `${alignment} translateX(${-this.options.shift +
           (-this.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
         this._updateItemStyle(el, tweenedOpacity, -i, transformString);
       }
@@ -580,7 +583,7 @@ export class Carousel extends Component<CarouselOptions> {
     // Don't show wrapped items.
     if (!this.noWrap || (this.center >= 0 && this.center < this.count)) {
       el = this.images[this._wrap(this.center)];
-      let transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
+      const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
         this.options.shift *
         tween}px) translateZ(${this.options.dist * tween}px)`;
       this._updateItemStyle(el, centerTweenedOpacity, 0, transformString);