@spaced-out/ui-design-system/lib/utils/dom/dom.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.cancelEvent = cancelEvent;
exports.checkDateInputSupport = checkDateInputSupport;
exports.createElement = createElement;
exports.forget = forget;
exports.getAnchorPosition = getAnchorPosition;
exports.getFixedAnchorPosition = getFixedAnchorPosition;
exports.getListPasteHandler = void 0;
exports.listen = listen;
exports.pageHeight = pageHeight;
exports.pxToNumber = pxToNumber;
exports.requestPointerLock = requestPointerLock;
exports.stopEvent = stopEvent;
exports.stopEventImmediately = stopEventImmediately;
function createElement(document, type, props) {
  const el = document.createElement(type);
  return Object.assign(el, props);
}
function pageHeight() {
  const {
    body,
    documentElement
  } = window.document;
  return Math.max(body.scrollHeight, body.clientHeight, documentElement.scrollHeight, documentElement.clientHeight);
}
function getFixedAnchorPosition(element) {
  let placement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
  let pad = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  let justify = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'center';
  const rect = element.getBoundingClientRect();
  const docX = rect.left;
  const docY = rect.top;
  let x;
  let y;
  switch (placement) {
    case 'bottom':
      y = docY + rect.height + pad;
      switch (justify) {
        case 'start':
          x = docX;
          break;
        case 'center':
          x = docX + rect.width / 2;
          break;
        case 'end':
        default:
          x = docX + rect.width;
          break;
      }
      break;
    case 'left':
      x = docX - pad;
      switch (justify) {
        case 'start':
          y = docY;
          break;
        case 'center':
          y = docY + rect.height / 2;
          break;
        case 'end':
        default:
          y = docY + rect.height;
          break;
      }
      break;
    case 'right':
      x = docX + rect.width + pad;
      y = docY + rect.height / 2;
      break;
    default:
      y = docY - pad;
      switch (justify) {
        case 'start':
          x = docX;
          break;
        case 'center':
          x = docX + rect.width / 2;
          break;
        case 'end':
        default:
          x = docX + rect.width;
          break;
      }
      break;
  }
  return {
    x,
    y,
    placement
  };
}
function getAnchorPosition(element) {
  let placement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'top';
  let pad = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  let justify = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'center';
  const position = getFixedAnchorPosition(element, placement, pad, justify);
  const documentStyle = window.document.documentElement.style;
  return {
    ...position,
    x: position.x + window.pageXOffset - pxToNumber(documentStyle.paddingLeft),
    y: position.y + window.pageYOffset - pxToNumber(documentStyle.paddingTop)
  };
}
function pxToNumber(px) {
  return parseFloat(px.replace('px', '') || '0');
}

// Map event name -> listener

function listen(target, handlers, options) {
  let hook = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'addEventListener';
  for (const eventName in handlers) {
    const handler = handlers[eventName];
    if (!handler) {
      continue;
    }
    if (hook === 'addEventListener') {
      target.addEventListener(eventName, handler, options);
    } else {
      target.removeEventListener(eventName, handler, options);
    }
  }
}
function forget(target, events, options) {
  return listen(target, events, options, 'removeEventListener');
}
function stopEvent(event) {
  event.stopPropagation();
}
function stopEventImmediately(event) {
  const nativeEvt = event.nativeEvent;
  if (typeof nativeEvt.stopImmediatePropagation === 'function') {
    nativeEvt.stopImmediatePropagation();
  }
}
function cancelEvent(event) {
  event.stopPropagation();
  event.preventDefault();
}
function requestPointerLock(element) {
  return new Promise((resolve, reject) => {
    const handleChange = () => {
      if (document.pointerLockElement === element) {
        resolve();
        removeHandlers();
      }
    };
    const handleError = () => {
      reject();
      removeHandlers();
    };
    const removeHandlers = () => {
      forget(document, {
        pointerlockchange: handleChange,
        pointerlockerror: handleError
      });
    };
    listen(document, {
      pointerlockchange: handleChange,
      pointerlockerror: handleError
    });
    element.requestPointerLock();
  });
}
function checkDateInputSupport() {
  const input = window.document.createElement('input');
  input.setAttribute('type', 'date');
  const notADateValue = 'not-a-date';
  input.setAttribute('value', notADateValue);
  return input.value !== notADateValue;
}

// reference: https://stackoverflow.com/a/10199306
const getListPasteHandler = _ref => {
  let {
    listItemSeparatorRegex = /[\,\n]/,
    handleValue
  } = _ref;
  const handlePaste = event => {
    const value = event.clipboardData?.getData('text');
    if (!value || !value.length) {
      return;
    }
    // do nothing if the copied string fails the regex test
    if (!listItemSeparatorRegex.test(value)) {
      return;
    }
    event.preventDefault();
    const parsedValues = value.split(listItemSeparatorRegex).reduce((acc, val) => {
      const newVal = val.trim();
      if (newVal.length && !acc.includes(newVal)) {
        acc.push(newVal);
      }
      return acc;
    }, []);
    handleValue?.(parsedValues);
  };
  return handlePaste;
};
exports.getListPasteHandler = getListPasteHandler;