vcc-ui/_src/helpers.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

/**
 * Detect type of device
 * From stackoverflow: https://stackoverflow.com/a/4819886
 *
 * @returns bool
 */
export const isTouchDevice = () => {
  const prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
  const matchedQueries = query => {
    return window.matchMedia(query).matches;
  };

  if (
    'ontouchstart' in window ||
    (window.DocumentTouch && document instanceof window.DocumentTouch)
  ) {
    return true;
  }

  // include the 'heartz' as a way to have a non matching MQ to help terminate the join
  // https://git.io/vznFH
  const query = ['(', prefixes.join('touch-enabled),('), 'heartz', ')'].join(
    ''
  );
  return matchedQueries(query);
};

/**
 * Takes link component props and returns a recommended `rel` value.
 *
 * @see https://developers.google.com/web/tools/lighthouse/audits/noopener
 */
export const getLinkRel = ({ href, target, rel }) => {
  if (!href || target !== '_blank') {
    return rel;
  }
  let isCrossOrigin;
  try {
    // Fails in environments without URL support (like IE11 and in SSR)
    isCrossOrigin = new URL(href).host !== window.location.host;
  } catch {
    isCrossOrigin = /^http/i.test(href);
  }
  const needsNoopener =
    isCrossOrigin &&
    !/\bopener\b/.test(rel) &&
    !/no(opener|referrer)/.test(rel);
  return needsNoopener ? `${rel || ''} noopener`.trim() : rel;
};