why-cant-we-deploy-today/js/utils/util.js

/**
 * Extend object a with the properties of object b.
 * If there's a conflict, object b takes precedence.
 *
 * @param {object} a
 * @param {object} b
 */
export const extend = (a, b) => {
  for (let i in b) {
    a[i] = b[i];
  }

  return a;
};

/**
 * querySelectorAll but returns an Array.
 */
export const queryAll = (el, selector) => {
  return Array.from(el.querySelectorAll(selector));
};

/**
 * classList.toggle() with cross browser support
 */
export const toggleClass = (el, className, value) => {
  if (value) {
    el.classList.add(className);
  } else {
    el.classList.remove(className);
  }
};

/**
 * Utility for deserializing a value.
 *
 * @param {*} value
 * @return {*}
 */
export const deserialize = (value) => {
  if (typeof value === "string") {
    if (value === "null") return null;
    else if (value === "true") return true;
    else if (value === "false") return false;
    else if (value.match(/^-?[\d\.]+$/)) return parseFloat(value);
  }

  return value;
};

/**
 * Measures the distance in pixels between point a
 * and point b.
 *
 * @param {object} a point with x/y properties
 * @param {object} b point with x/y properties
 *
 * @return {number}
 */
export const distanceBetween = (a, b) => {
  let dx = a.x - b.x,
    dy = a.y - b.y;

  return Math.sqrt(dx * dx + dy * dy);
};

/**
 * Applies a CSS transform to the target element.
 *
 * @param {HTMLElement} element
 * @param {string} transform
 */
export const transformElement = (element, transform) => {
  element.style.transform = transform;
};

/**
 * Element.matches with IE support.
 *
 * @param {HTMLElement} target The element to match
 * @param {String} selector The CSS selector to match
 * the element against
 *
 * @return {Boolean}
 */
export const matches = (target, selector) => {
  let matchesMethod =
    target.matches || target.matchesSelector || target.msMatchesSelector;

  return !!(matchesMethod && matchesMethod.call(target, selector));
};

/**
 * Find the closest parent that matches the given
 * selector.
 *
 * @param {HTMLElement} target The child element
 * @param {String} selector The CSS selector to match
 * the parents against
 *
 * @return {HTMLElement} The matched parent or null
 * if no matching parent was found
 */
export const closest = (target, selector) => {
  // Native Element.closest
  if (typeof target.closest === "function") {
    return target.closest(selector);
  }

  // Polyfill
  while (target) {
    if (matches(target, selector)) {
      return target;
    }

    // Keep searching
    target = target.parentNode;
  }

  return null;
};

/**
 * Handling the fullscreen functionality via the fullscreen API
 *
 * @see http://fullscreen.spec.whatwg.org/
 * @see https://developer.mozilla.org/en-US/docs/DOM/Using_fullscreen_mode
 */
export const enterFullscreen = (element) => {
  element = element || document.documentElement;

  // Check which implementation is available
  let requestMethod =
    element.requestFullscreen ||
    element.webkitRequestFullscreen ||
    element.webkitRequestFullScreen ||
    element.mozRequestFullScreen ||
    element.msRequestFullscreen;

  if (requestMethod) {
    requestMethod.apply(element);
  }
};

/**
 * Creates an HTML element and returns a reference to it.
 * If the element already exists the existing instance will
 * be returned.
 *
 * @param {HTMLElement} container
 * @param {string} tagname
 * @param {string} classname
 * @param {string} innerHTML
 *
 * @return {HTMLElement}
 */
export const createSingletonNode = (
  container,
  tagname,
  classname,
  innerHTML = ""
) => {
  // Find all nodes matching the description
  let nodes = container.querySelectorAll("." + classname);

  // Check all matches to find one which is a direct child of
  // the specified container
  for (let i = 0; i < nodes.length; i++) {
    let testNode = nodes[i];
    if (testNode.parentNode === container) {
      return testNode;
    }
  }

  // If no node was found, create it now
  let node = document.createElement(tagname);
  node.className = classname;
  node.innerHTML = innerHTML;
  container.appendChild(node);

  return node;
};

/**
 * Injects the given CSS styles into the DOM.
 *
 * @param {string} value
 */
export const createStyleSheet = (value) => {
  let tag = document.createElement("style");
  tag.type = "text/css";

  if (value && value.length > 0) {
    if (tag.styleSheet) {
      tag.styleSheet.cssText = value;
    } else {
      tag.appendChild(document.createTextNode(value));
    }
  }

  document.head.appendChild(tag);

  return tag;
};

/**
 * Returns a key:value hash of all query params.
 */
export const getQueryHash = () => {
  let query = {};

  location.search.replace(/[A-Z0-9]+?=([\w\.%-]*)/gi, (a) => {
    query[a.split("=").shift()] = a.split("=").pop();
  });

  // Basic deserialization
  for (let i in query) {
    let value = query[i];

    query[i] = deserialize(unescape(value));
  }

  // Do not accept new dependencies via query config to avoid
  // the potential of malicious script injection
  if (typeof query["dependencies"] !== "undefined")
    delete query["dependencies"];

  return query;
};

/**
 * Returns the remaining height within the parent of the
 * target element.
 *
 * remaining height = [ configured parent height ] - [ current parent height ]
 *
 * @param {HTMLElement} element
 * @param {number} [height]
 */
export const getRemainingHeight = (element, height = 0) => {
  if (element) {
    let newHeight,
      oldHeight = element.style.height;

    // Change the .stretch element height to 0 in order find the height of all
    // the other elements
    element.style.height = "0px";

    // In Overview mode, the parent (.slide) height is set of 700px.
    // Restore it temporarily to its natural height.
    element.parentNode.style.height = "auto";

    newHeight = height - element.parentNode.offsetHeight;

    // Restore the old height, just in case
    element.style.height = oldHeight + "px";

    // Clear the parent (.slide) height. .removeProperty works in IE9+
    element.parentNode.style.removeProperty("height");

    return newHeight;
  }

  return height;
};

const fileExtensionToMimeMap = {
  mp4: "video/mp4",
  m4a: "video/mp4",
  ogv: "video/ogg",
  mpeg: "video/mpeg",
  webm: "video/webm",
};

/**
 * Guess the MIME type for common file formats.
 */
export const getMimeTypeFromFile = (filename = "") => {
  return fileExtensionToMimeMap[filename.split(".").pop()];
};

/**
 * Encodes a string for RFC3986-compliant URL format.
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI#encoding_for_rfc3986
 *
 * @param {string} url
 */
export const encodeRFC3986URI = (url = "") => {
  return encodeURI(url)
    .replace(/%5B/g, "[")
    .replace(/%5D/g, "]")
    .replace(
      /[!'()*]/g,
      (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`
    );
};