fix: simplify code and avoid reusing code (DRY) (#367)

Author: ghiscoding

packages/multiple-select-vanilla/src/MultipleSelectInstance.ts

@@ -15,8 +15,8 @@ import {
   createDomElement,
   emptyElement,
   findParent,
-  getElementOffset,
-  getElementSize,
+  getOffset,
+  getSize,
   insertAfter,
   toggleElement,
 } from './utils/domUtils.js';
@@ -801,10 +801,10 @@ export class MultipleSelectInstance {
     if (window.getComputedStyle) {
       computedWidth = window.getComputedStyle(this.elm).width;
       if (computedWidth === 'auto') {
-        computedWidth = getElementSize(this.dropElm, 'outer', 'width') + 20;
+        computedWidth = getSize(this.dropElm, 'outer', 'width') + 20;
       }
     } else {
-      computedWidth = getElementSize(this.elm, 'outer', 'width') + 20;
+      computedWidth = getSize(this.elm, 'outer', 'width') + 20;
     }
 
     this.parentElm.style.width = `${this.options.width || computedWidth}px`;
@@ -1271,7 +1271,7 @@ export class MultipleSelectInstance {
   protected adjustDropSizeAndPosition() {
     if (this.dropElm) {
       if (this.options.container) {
-        const offset = getElementOffset(this.dropElm);
+        const offset = getOffset(this.dropElm);
         let container: HTMLElement;
         if (this.options.container instanceof Node) {
           container = this.options.container as HTMLElement;
@@ -1282,13 +1282,13 @@ export class MultipleSelectInstance {
         this.dropElm.style.top = `${offset?.top ?? 0}px`;
         this.dropElm.style.left = `${offset?.left ?? 0}px`;
         this.dropElm.style.minWidth = 'auto';
-        this.dropElm.style.width = `${getElementSize(this.parentElm, 'outer', 'width')}px`;
+        this.dropElm.style.width = `${getSize(this.parentElm, 'outer', 'width')}px`;
       }
 
       const minHeight = this.options.minHeight;
       let maxHeight = this.options.maxHeight;
       if (this.options.maxHeightUnit === 'row') {
-        maxHeight = getElementSize(this.dropElm.querySelector('ul>li') as HTMLLIElement, 'outer', 'height') * this.options.maxHeight;
+        maxHeight = getSize(this.dropElm.querySelector('ul>li') as HTMLLIElement, 'outer', 'height') * this.options.maxHeight;
       }
       this.ulElm ??= this.dropElm.querySelector('ul');
       if (this.ulElm) {
@@ -1898,7 +1898,7 @@ export class MultipleSelectInstance {
 
     if (this.dropElm && this.parentElm) {
       const { bottom: spaceBottom, top: spaceTop } = calculateAvailableSpace(this.dropElm);
-      const { top: selectOffsetTop, left: selectOffsetLeft } = getElementOffset(this.parentElm) as HtmlElementPosition;
+      const { top: selectOffsetTop, left: selectOffsetLeft } = getOffset(this.parentElm) as HtmlElementPosition;
       const msDropHeight = this.dropElm.getBoundingClientRect().height;
       const msDropWidth = this.dropElm.getBoundingClientRect().width;
       const windowWidth = document.body.offsetWidth || window.innerWidth;

packages/multiple-select-vanilla/src/index.ts

@@ -12,8 +12,8 @@ export {
   createDomStructure,
   emptyElement,
   findParent,
-  getElementOffset,
-  getElementSize,
+  getOffset,
+  getSize,
   insertAfter,
   omitProp,
   toggleElement,

packages/multiple-select-vanilla/src/services/binding-event.service.ts

@@ -35,27 +35,12 @@ export class BindingEventService {
 
     if (typeof (elementOrElements as NodeListOf<H>)?.forEach === 'function') {
       // multiple elements to bind to
-      (elementOrElements as NodeListOf<H>).forEach(element => {
-        for (const eventName of eventNames) {
-          if (!this._distinctEvent || (this._distinctEvent && !this.hasBinding(element, eventName))) {
-            element.addEventListener(eventName, listener as EventListener, listenerOptions);
-            this._boundedEvents.push({ element, eventName, listener: listener as EventListener, groupName });
-          }
-        }
-      });
+      (elementOrElements as NodeListOf<H>).forEach(element =>
+        this.bindElementEvents(element, eventNames, listener, listenerOptions, groupName),
+      );
     } else {
       // single elements to bind to
-      for (const eventName of eventNames) {
-        if (!this._distinctEvent || (this._distinctEvent && !this.hasBinding(elementOrElements as H, eventName))) {
-          (elementOrElements as H).addEventListener(eventName, listener as EventListener, listenerOptions);
-          this._boundedEvents.push({
-            element: elementOrElements as H,
-            eventName,
-            listener: listener as EventListener,
-            groupName,
-          });
-        }
-      }
+      this.bindElementEvents(elementOrElements as H, eventNames, listener, listenerOptions, groupName);
     }
   }
 
@@ -115,4 +100,23 @@ export class BindingEventService {
       }
     }
   }
+
+  // --
+  // private functions
+
+  /** bind all event(s) to the element */
+  private bindElementEvents(
+    element: HTMLElement,
+    eventNames: Array<keyof HTMLElementEventMap>,
+    listener: EventListener,
+    listenerOptions?: boolean | AddEventListenerOptions,
+    groupName = '',
+  ) {
+    for (const eventName of eventNames) {
+      if (!this._distinctEvent || (this._distinctEvent && !this.hasBinding(element, eventName))) {
+        element.addEventListener(eventName, listener as EventListener, listenerOptions);
+        this._boundedEvents.push({ element, eventName, listener: listener as EventListener, groupName });
+      }
+    }
+  }
 }

packages/multiple-select-vanilla/src/services/virtual-scroll.ts

@@ -1,6 +1,6 @@
 import Constants from '../constants.js';
 import type { HtmlStruct, VirtualCache, VirtualScrollOption } from '../models/interfaces.js';
-import { convertItemRowToHtml, emptyElement } from '../utils/domUtils.js';
+import { convertItemRowToHtml, createDomElement, emptyElement } from '../utils/domUtils.js';
 
 export class VirtualScroll {
   protected clusterRows?: number;
@@ -157,8 +157,7 @@ export class VirtualScroll {
   }
 
   protected getExtra(className: string, height: number) {
-    const tag = document.createElement('li');
-    tag.className = `virtual-scroll-${className}`;
+    const tag = createDomElement('li', { className: `virtual-scroll-${className}` });
     if (height) {
       tag.style.height = `${height}px`;
     }

packages/multiple-select-vanilla/src/utils/domUtils.ts

@@ -8,30 +8,18 @@ export interface HtmlElementPosition {
   right: number;
 }
 
-/** calculate available space for each side of the DOM element */
-export function calculateAvailableSpace(element: HTMLElement): { top: number; bottom: number; left: number; right: number } {
-  let bottom = 0;
-  let top = 0;
-  let left = 0;
-  let right = 0;
+/** Calculate available space for each side of the DOM element */
+export function calculateAvailableSpace(elm: HTMLElement): { top: number; bottom: number; left: number; right: number } {
+  const { innerHeight: windowHeight = 0, innerWidth: windowWidth = 0 } = window;
+  const { top: pageScrollTop, left: pageScrollLeft } = windowScrollPosition();
+  const { top = 0, left = 0 } = getOffset(elm) || {};
 
-  const windowHeight = window.innerHeight ?? 0;
-  const windowWidth = window.innerWidth ?? 0;
-  const scrollPosition = windowScrollPosition();
-  const pageScrollTop = scrollPosition.top;
-  const pageScrollLeft = scrollPosition.left;
-  const elmOffset = getElementOffset(element);
-
-  if (elmOffset) {
-    const elementOffsetTop = elmOffset.top ?? 0;
-    const elementOffsetLeft = elmOffset.left ?? 0;
-    top = elementOffsetTop - pageScrollTop;
-    bottom = windowHeight - (elementOffsetTop - pageScrollTop);
-    left = elementOffsetLeft - pageScrollLeft;
-    right = windowWidth - (elementOffsetLeft - pageScrollLeft);
-  }
-
-  return { top, bottom, left, right };
+  return {
+    top: top - pageScrollTop,
+    bottom: windowHeight - (top - pageScrollTop),
+    left: left - pageScrollLeft,
+    right: windowWidth - (left - pageScrollLeft),
+  };
 }
 
 /**
@@ -72,9 +60,7 @@ export function createDomElement<T extends keyof HTMLElementTagNameMap, K extend
       }
     });
   }
-  if (appendToParent?.appendChild) {
-    appendToParent.appendChild(elm);
-  }
+  appendToParent?.appendChild(elm);
   return elm;
 }
 
@@ -128,53 +114,48 @@ export function convertItemRowToHtml(item: HtmlStruct): HTMLElement {
  * Empty a DOM element by removing all of its DOM element children leaving with an empty element (basically an empty shell)
  * @return {object} element - updated element
  */
-export function emptyElement<T extends Element = Element>(element?: T | null): T | undefined | null {
-  while (element?.firstChild) {
-    if (element.lastChild) {
-      element.removeChild(element.lastChild);
+export function emptyElement<T extends Element = Element>(elm?: T | null): T | undefined | null {
+  while (elm?.firstChild) {
+    if (elm.lastChild) {
+      elm.removeChild(elm.lastChild);
     }
   }
-  return element;
+  return elm;
 }
 
 /** Get HTML element offset with pure JS */
-export function getElementOffset(element?: HTMLElement): HtmlElementPosition | undefined {
-  if (!element) {
-    return undefined;
-  }
-  const rect = element?.getBoundingClientRect?.();
-  let top = 0;
-  let left = 0;
-  let bottom = 0;
-  let right = 0;
-
-  if (rect?.top !== undefined && rect.left !== undefined) {
-    top = rect.top + window.pageYOffset;
-    left = rect.left + window.pageXOffset;
-    right = rect.right;
-    bottom = rect.bottom;
-  }
-  return { top, left, bottom, right };
+export function getOffset(element?: HTMLElement): HtmlElementPosition | undefined {
+  if (element) {
+    const { top, left, bottom, right } = element.getBoundingClientRect();
+    return {
+      top: top + window.pageYOffset,
+      left: left + window.pageXOffset,
+      bottom,
+      right,
+    };
+  }
+  return undefined;
 }
 
-export function getElementSize(elm: HTMLElement | undefined, mode: 'inner' | 'outer' | 'scroll', type: 'height' | 'width') {
+export function getSize(elm: HTMLElement | undefined, mode: 'inner' | 'outer' | 'scroll', type: 'height' | 'width') {
   if (!elm) {
     return 0;
   }
 
   // first try defined style width or offsetWidth (which include scroll & padding)
   let size = Number.parseFloat(elm.style[type]);
   if (!size || Number.isNaN(size)) {
+    const pascalType = type === 'height' ? 'Height' : 'Width';
     switch (mode) {
       case 'outer':
-        size = elm[type === 'width' ? 'offsetWidth' : 'offsetHeight'];
+        size = elm[`offset${pascalType}`];
         break;
       case 'scroll':
-        size = elm[type === 'width' ? 'scrollWidth' : 'scrollHeight'];
+        size = elm[`scroll${pascalType}`];
         break;
       case 'inner':
       default:
-        size = elm[type === 'width' ? 'clientWidth' : 'clientHeight'];
+        size = elm[`client${pascalType}`];
         break;
     }
     size = elm.getBoundingClientRect()[type];

packages/multiple-select-vanilla/src/utils/utils.ts

@@ -16,6 +16,7 @@ export function compareObjects(objectA: any, objectB: any, compareLength = false
   return true;
 }
 
+/** make deep copy clone of an object */
 export function deepCopy(obj: any): any {
   if (typeof obj !== 'object' || obj === null) {
     return obj;