stylus/js/dom.js

/* global FIREFOX */// toolbox.js
/* global prefs */
'use strict';

/* exported
  $createLink
  $isTextInput
  $remove
  $$remove
  animateElement
  focusAccessibility
  getEventKeyName
  messageBoxProxy
  moveFocus
  onDOMready
  scrollElementIntoView
  setupLivePrefs
  showSpinner
  toggleDataset
  waitForSheet
*/

Object.assign(EventTarget.prototype, {
  on: addEventListener,
  off: removeEventListener,
});

//#region Exports

// Makes the focus outline appear on keyboard tabbing, but not on mouse clicks.
const focusAccessibility = {
  // last event's focusedViaClick
  lastFocusedViaClick: false,
  // to avoid a full layout recalc due to changes on body/root
  // we modify the closest focusable element (like input or button or anything with tabindex=0)
  closest(el) {
    let labelSeen;
    for (; el; el = el.parentElement) {
      if (el.localName === 'label' && el.control && !labelSeen) {
        el = el.control;
        labelSeen = true;
      }
      if (el.tabIndex >= 0) return el;
    }
  },
};

/**
 * Autoloads message-box.js
 * @alias messageBox
 */
window.messageBoxProxy = new Proxy({}, {
  get(_, name) {
    return async (...args) => {
      await require([
        '/js/dlg/message-box', /* global messageBox */
        '/js/dlg/message-box.css',
      ]);
      window.messageBoxProxy = messageBox;
      return messageBox[name](...args);
    };
  },
});

function $(selector, base = document) {
  // we have ids with . like #manage.onlyEnabled which looks like #id.class
  // so since getElementById is superfast we'll try it anyway
  const byId = selector.startsWith('#') && document.getElementById(selector.slice(1));
  return byId || base.querySelector(selector);
}

function $$(selector, base = document) {
  return [...base.querySelectorAll(selector)];
}

function $isTextInput(el = {}) {
  return el.localName === 'textarea' ||
    el.localName === 'input' && /^(text|search|number)$/.test(el.type);
}

function $remove(selector, base = document) {
  const el = selector && typeof selector === 'string' ? $(selector, base) : selector;
  if (el) {
    el.remove();
  }
}

function $$remove(selector, base = document) {
  for (const el of base.querySelectorAll(selector)) {
    el.remove();
  }
}

/*
 $create('tag#id.class.class', ?[children])
 $create('tag#id.class.class', ?textContentOrChildNode)
 $create('tag#id.class.class', {properties}, ?[children])
 $create('tag#id.class.class', {properties}, ?textContentOrChildNode)
 tag is 'div' by default, #id and .class are optional

 $create([children])

 $create({propertiesAndOptions})
 $create({propertiesAndOptions}, ?[children])
 tag:              string, default 'div'
 appendChild:      element/string or an array of elements/strings
 dataset:          object
 any DOM property: assigned as is

 tag may include namespace like 'ns:tag'
 */
function $create(selector = 'div', properties, children) {
  let ns, tag, opt;
  if (typeof selector === 'string') {
    if (Array.isArray(properties) ||
        properties instanceof Node ||
        typeof properties !== 'object') {
      opt = {};
      children = properties;
    } else {
      opt = properties || {};
      children = children || opt.appendChild;
    }
    const idStart = (selector.indexOf('#') + 1 || selector.length + 1) - 1;
    const classStart = (selector.indexOf('.') + 1 || selector.length + 1) - 1;
    const id = selector.slice(idStart + 1, classStart);
    if (id) {
      opt.id = id;
    }
    const cls = selector.slice(classStart + 1);
    if (cls) {
      opt[selector.includes(':') ? 'class' : 'className'] =
        cls.includes('.') ? cls.replace(/\./g, ' ') : cls;
    }
    tag = selector.slice(0, Math.min(idStart, classStart));
  } else if (Array.isArray(selector)) {
    tag = 'div';
    opt = {};
    children = selector;
  } else {
    opt = selector;
    tag = opt.tag;
    children = opt.appendChild || properties;
  }
  if (tag && tag.includes(':')) {
    [ns, tag] = tag.split(':');
    if (ns === 'SVG' || ns === 'svg') {
      ns = 'http://www.w3.org/2000/svg';
    }
  }
  const element = ns ? document.createElementNS(ns, tag) :
    tag === 'fragment' ? document.createDocumentFragment() :
      document.createElement(tag || 'div');
  for (const child of Array.isArray(children) ? children : [children]) {
    if (child) {
      element.appendChild(child instanceof Node ? child : document.createTextNode(child));
    }
  }
  for (const [key, val] of Object.entries(opt)) {
    switch (key) {
      case 'dataset':
        Object.assign(element.dataset, val);
        break;
      case 'attributes':
        Object.entries(val).forEach(attr => element.setAttribute(...attr));
        break;
      case 'style': {
        const t = typeof val;
        if (t === 'string') element.style.cssText = val;
        if (t === 'object') Object.assign(element.style, val);
        break;
      }
      case 'tag':
      case 'appendChild':
        break;
      default: {
        if (ns) {
          const i = key.indexOf(':') + 1;
          const attrNS = i && `http://www.w3.org/1999/${key.slice(0, i - 1)}`;
          element.setAttributeNS(attrNS || null, key, val);
        } else {
          element[key] = val;
        }
      }
    }
  }
  return element;
}

function $createLink(href = '', content) {
  const opt = {
    tag: 'a',
    target: '_blank',
    rel: 'noopener',
  };
  if (typeof href === 'object') {
    Object.assign(opt, href);
  } else {
    opt.href = href;
  }
  opt.appendChild = opt.appendChild || content;
  return $create(opt);
}

/**
 * @param {HTMLElement} el
 * @param {string} [cls] - class name that defines or starts an animation
 * @param [removeExtraClasses] - class names to remove at animation end in the *same* paint frame,
 *        which is needed in e.g. Firefox as it may call resolve() in the next frame
 * @returns {Promise<void>}
 */
function animateElement(el, cls = 'highlight', ...removeExtraClasses) {
  return !el ? Promise.resolve(el) : new Promise(resolve => {
    let onDone = () => {
      el.classList.remove(cls, ...removeExtraClasses);
      onDone = null;
      resolve();
    };
    requestAnimationFrame(() => {
      if (onDone) {
        const style = getComputedStyle(el);
        if (style.animationName === 'none' || !parseFloat(style.animationDuration)) {
          el.off('animationend', onDone);
          onDone();
        }
      }
    });
    el.on('animationend', onDone, {once: true});
    el.classList.add(cls);
  });
}

function getEventKeyName(e, letterAsCode) {
  const mods =
    (e.shiftKey ? 'Shift-' : '') +
    (e.ctrlKey ? 'Ctrl-' : '') +
    (e.altKey ? 'Alt-' : '') +
    (e.metaKey ? 'Meta-' : '');
  return `${
    mods === e.key + '-' ? '' : mods
  }${
    e.key
      ? e.key.length === 1 && letterAsCode ? e.code : e.key
      : 'Mouse' + ('LMR'[e.button] || e.button)
  }`;
}

/**
 * Switches to the next/previous keyboard-focusable element.
 * Doesn't check `visibility` or `display` via getComputedStyle for simplicity.
 * @param {HTMLElement} rootElement
 * @param {Number} step - for exmaple 1 or -1 (or 0 to focus the first focusable el in the box)
 * @returns {HTMLElement|false|undefined} -
 *   HTMLElement: focus changed,
 *   false: focus unchanged,
 *   undefined: nothing to focus
 */
function moveFocus(rootElement, step) {
  const elements = [...rootElement.getElementsByTagName('*')];
  const activeEl = document.activeElement;
  const activeIndex = step ? Math.max(step < 0 ? 0 : -1, elements.indexOf(activeEl)) : -1;
  const num = elements.length;
  if (!step) step = 1;
  for (let i = 1; i <= num; i++) {
    const el = elements[(activeIndex + i * step + num) % num];
    if (!el.disabled && el.tabIndex >= 0) {
      el.focus();
      return activeEl !== el && el;
    }
  }
}

function onDOMready() {
  return document.readyState !== 'loading'
    ? Promise.resolve()
    : new Promise(resolve => document.on('DOMContentLoaded', resolve, {once: true}));
}

function scrollElementIntoView(element, {invalidMarginRatio = 0} = {}) {
  // align to the top/bottom of the visible area if wasn't visible
  if (!element.parentNode) return;
  const {top, height} = element.getBoundingClientRect();
  const {top: parentTop, bottom: parentBottom} = element.parentNode.getBoundingClientRect();
  const windowHeight = window.innerHeight;
  if (top < Math.max(parentTop, windowHeight * invalidMarginRatio) ||
      top > Math.min(parentBottom, windowHeight) - height - windowHeight * invalidMarginRatio) {
    window.scrollBy(0, top - windowHeight / 2 + height);
  }
}

/**
 * Accepts an array of pref names (values are fetched via prefs.get)
 * and establishes a two-way connection between the document elements and the actual prefs
 */
function setupLivePrefs(ids = prefs.knownKeys.filter(id => $(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`))) {
  let forceUpdate = true;
  prefs.subscribe(ids, updateElement, {runNow: true});
  forceUpdate = false;

  for (const id of ids) {
    const elements = $$(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`);
    for (const element of elements) {
      element.addEventListener('change', onChange);
    }
  }

  function onChange() {
    if (!this.checkValidity()) {
      return;
    }
    if (this.type === 'radio' && !this.checked) {
      return;
    }
    prefs.set(this.id || this.name, getValue(this));
  }

  function getValue(el) {
    const type = el.dataset.valueType || el.type;
    return type === 'checkbox' ? el.checked :
      // https://stackoverflow.com/questions/18062069/why-does-valueasnumber-return-nan-as-a-value
      // valueAsNumber is not applicable for input[text/radio] or select
      type === 'number' ? Number(el.value) :
      el.value;
  }

  function isSame(el, oldValue, value) {
    return oldValue === value ||
      typeof value === 'boolean' &&
      el.tagName === 'SELECT' &&
      oldValue === `${value}` ||
      el.type === 'radio' && (oldValue === value) === el.checked;
  }

  function updateElement(id, value) {
    const els = $$(`#${CSS.escape(id)}, [name=${CSS.escape(id)}]`);
    if (!els.length) {
      // FIXME: why do we unsub all ids when a single id is missing from the page
      prefs.unsubscribe(ids, updateElement);
      return;
    }
    for (const el of els) {
      const oldValue = getValue(el);
      if (!isSame(el, oldValue, value) || forceUpdate) {
        if (el.type === 'radio') {
          el.checked = value === oldValue;
        } else if (el.type === 'checkbox') {
          el.checked = value;
        } else {
          el.value = value;
        }
        el.dispatchEvent(new Event('change', {bubbles: true}));
      }
    }
  }
}

/** @param {string|Node} parent - selector or DOM node */
async function showSpinner(parent) {
  await require(['/spinner.css']);
  parent = parent instanceof Node ? parent : $(parent);
  parent.appendChild($create('.lds-spinner',
    new Array(12).fill($create('div')).map(e => e.cloneNode())));
}

function toggleDataset(el, prop, state) {
  const wasEnabled = el.dataset[prop] != null; // avoids mutating DOM unnecessarily
  if (state) {
    if (!wasEnabled) el.dataset[prop] = '';
  } else {
    if (wasEnabled) delete el.dataset[prop];
  }
}

/**
 * @param {string} selector - beware of $ quirks with `#dotted.id` that won't work with $$
 * @param {Object} [opt]
 * @param {function(HTMLElement, HTMLElement[]):boolean} [opt.recur] - called on each match
   with (firstMatchingElement, allMatchingElements) parameters until stopOnDomReady,
   you can also return `false` to disconnect the observer
 * @param {boolean} [opt.stopOnDomReady] - stop observing on DOM ready
 * @returns {Promise<HTMLElement>} - resolves on first match
 */
function waitForSelector(selector, {recur, stopOnDomReady = true} = {}) {
  let el = $(selector);
  let elems, isResolved;
  return el && (!recur || recur(el, (elems = $$(selector))) === false)
    ? Promise.resolve(el)
    : new Promise(resolve => {
      const mo = new MutationObserver(() => {
        if (!el) el = $(selector);
        if (!el) return;
        if (!recur ||
            callRecur() === false ||
            stopOnDomReady && document.readyState === 'complete') {
          mo.disconnect();
        }
        if (!isResolved) {
          isResolved = true;
          resolve(el);
        }
      });
      mo.observe(document, {childList: true, subtree: true});
    });
  function callRecur() {
    const all = $$(selector); // simpler and faster than analyzing each node in `mutations`
    const added = !elems ? all : all.filter(el => !elems.includes(el));
    if (added.length) {
      elems = all;
      return recur(added[0], added);
    }
  }
}

/**
 * Forcing layout while the main stylesheet is still loading breaks page appearance
 * so we'll wait until it loads (0-1 frames in Chrome, Firefox occasionally needs 2-3).
 */
async function waitForSheet({
  href = location.pathname.replace('.html', '.css'),
  maxFrames = FIREFOX ? 10 : 1,
} = {}) {
  const el = $(`link[href$="${href}"]`);
  for (let i = 0; i < maxFrames && !el.sheet; i++) {
    await new Promise(requestAnimationFrame);
  }
}

//#endregion
//#region Internals

const dom = {};

(() => {

  const Collapsible = {
    bindEvents(_, elems) {
      const prefKeys = [];
      for (const el of elems) {
        prefKeys.push(el.dataset.pref);
        ($('h2', el) || el).on('click', Collapsible.saveOnClick);
      }
      prefs.subscribe(prefKeys, Collapsible.updateOnPrefChange, {runNow: true});
    },
    canSave(el) {
      return !el.matches('.compact-layout .ignore-pref-if-compact');
    },
    async saveOnClick(event) {
      if (event.target.closest('.intercepts-click')) {
        event.preventDefault();
      } else {
        const el = event.target.closest('details');
        await new Promise(setTimeout);
        if (Collapsible.canSave(el)) {
          prefs.set(el.dataset.pref, el.open);
        }
      }
    },
    updateOnPrefChange(key, value) {
      const el = $(`details[data-pref="${key}"]`);
      if (el.open !== value && Collapsible.canSave(el)) {
        el.open = value;
      }
    },
  };
  const lazyScripts = [
    '/js/dom-on-load',
  ];
  const elHtml = document.documentElement;
  if (!/^Win\d+/.test(navigator.platform)) {
    elHtml.classList.add('non-windows');
  }
  // set language for a) CSS :lang pseudo and b) hyphenation
  elHtml.setAttribute('lang', chrome.i18n.getUILanguage());
  // set up header width resizer
  const HW = 'headerWidth.';
  const HWprefId = HW + location.pathname.match(/^.(\w*)/)[1];
  if (prefs.knownKeys.includes(HWprefId)) {
    Object.assign(dom, {
      HW,
      HWprefId,
      setHWProp(width) {
        width = Math.round(Math.max(200, Math.min(innerWidth / 3, Number(width) || 0)));
        elHtml.style.setProperty('--header-width', width + 'px');
        return width;
      },
    });
    prefs.ready.then(() => dom.setHWProp(prefs.get(HWprefId)));
    lazyScripts.push('/js/header-resizer');
  }
  // add favicon in FF
  if (FIREFOX) {
    const iconset = ['', 'light/'][prefs.get('iconset')] || '';
    for (const size of [38, 32, 19, 16]) {
      document.head.appendChild($create('link', {
        rel: 'icon',
        href: `/images/icon/${iconset}${size}.png`,
        sizes: size + 'x' + size,
      }));
    }
  }
  prefs.ready.then(() => {
    waitForSelector('details[data-pref]', {recur: Collapsible.bindEvents});
  });
  window.on('load', () => {
    require(lazyScripts);
  }, {once: true});
})();

//#endregion