fitty_mod-1.1.js

export default ((w) => {
  // no window, early exit
  if (!w) return;

  // node list to array helper method
  const toArray = (nl) => [].slice.call(nl);

  // states
  const DrawState = {
    IDLE: 0,
    DIRTY_CONTENT: 1,
    DIRTY_LAYOUT: 2,
    DIRTY: 3
  };

  // all active fitty elements
  let fitties = [];

  // group all redraw calls till next frame, we cancel each frame request when a new one comes in. If no support for request animation frame, this is an empty function and supports for fitty stops.
  let redrawFrame = null;
  const requestRedraw =
    "requestAnimationFrame" in w
      ? () => {
          w.cancelAnimationFrame(redrawFrame);
          redrawFrame = w.requestAnimationFrame(() =>
            redraw(fitties.filter((f) => f.dirty && f.active))
          );
        }
      : () => {};

  // sets all fitties to dirty so they are redrawn on the next redraw loop, then calls redraw
  const redrawAll = (type) => () => {
    fitties.forEach((f) => (f.dirty = type));
    requestRedraw();
  };

  // redraws fitties so they nicely fit their parent container
  const redraw = (fitties) => {
    // getting info from the DOM at this point should not trigger a reflow, let's gather as much intel as possible before triggering a reflow

    // check if styles of all fitties have been computed
    fitties
      .filter((f) => !f.styleComputed)
      .forEach((f) => {
        f.styleComputed = computeStyle(f);
      });

    // restyle elements that require pre-styling, this triggers a reflow, please try to prevent by adding CSS rules (see docs)
    fitties.filter(shouldPreStyle).forEach(applyStyle);

    // we now determine which fitties should be redrawn
    const fittiesToRedraw = fitties.filter(shouldRedraw);

    // we calculate final styles for these fitties
    fittiesToRedraw.forEach(calculateStyles);

    // now we apply the calculated styles from our previous loop
    fittiesToRedraw.forEach((f) => {
      applyStyle(f);
      markAsClean(f);
    });

    // now we dispatch events for all restyled fitties
    fittiesToRedraw.forEach(dispatchFitEvent);
  };

  const markAsClean = (f) => (f.dirty = DrawState.IDLE);

  const calculateStyles = (f) => {
    // get available width from parent node
    f.availableWidth = f.element.parentNode.clientWidth;

    // get available height from parent node
    f.availableHeight = f.element.parentNode.clientHeight;

    // the width our target element uses
    f.currentWidth = f.element.scrollWidth;

    // the height our target element uses
    f.currentHeight = f.element.scrollHeight;

    // remember current font size
    f.previousFontSize = f.currentFontSize;

    // let's calculate the new font size taking into account the width and
    // the height
    f.currentFontSize = Math.min(
      Math.min(
        Math.max(
          f.minSize,
          (f.availableWidth / f.currentWidth) * f.previousFontSize
        ),
        f.maxSize
      ),
      Math.min(
        Math.max(
          f.minSize,
          (f.availableHeight / f.currentHeight) * f.previousFontSize
        ),
        f.maxSize
      )
    );

    // if allows wrapping, only wrap when at minimum font size (otherwise would break container)
    f.whiteSpace =
      f.multiLine && f.currentFontSize === f.minSize ? "normal" : "nowrap";
  };

  // should always redraw if is not dirty layout, if is dirty layout, only redraw if size has changed
  const shouldRedraw = (f) =>
    f.dirty !== DrawState.DIRTY_LAYOUT ||
    (f.dirty === DrawState.DIRTY_LAYOUT &&
      (f.element.parentNode.clientWidth !== f.availableWidth ||
        f.element.parentNode.clientHeight !== f.availableHeight));

  // every fitty element is tested for invalid styles
  const computeStyle = (f) => {
    // get style properties
    const style = w.getComputedStyle(f.element, null);

    // get current font size in pixels (if we already calculated it, use the calculated version)
    f.currentFontSize = parseFloat(style.getPropertyValue("font-size"));

    // get display type and wrap mode
    f.display = style.getPropertyValue("display");
    f.whiteSpace = style.getPropertyValue("white-space");
  };

  // determines if this fitty requires initial styling, can be prevented by applying correct styles through CSS
  const shouldPreStyle = (f) => {
    let preStyle = false;

    // if we already tested for prestyling we don't have to do it again
    if (f.preStyleTestCompleted) return false;

    // should have an inline style, if not, apply
    if (!/inline-/.test(f.display)) {
      preStyle = true;
      f.display = "inline-block";
    }

    // to correctly calculate dimensions the element should have whiteSpace set to nowrap
    if (f.whiteSpace !== "nowrap") {
      preStyle = true;
      f.whiteSpace = "nowrap";
    }

    // we don't have to do this twice
    f.preStyleTestCompleted = true;

    return preStyle;
  };

  // apply styles to single fitty
  const applyStyle = (f) => {
    f.element.style.whiteSpace = f.whiteSpace;
    f.element.style.display = f.display;
    f.element.style.fontSize = f.currentFontSize + "px";
  };

  // dispatch a fit event on a fitty
  const dispatchFitEvent = (f) => {
    f.element.dispatchEvent(
      new CustomEvent("fit", {
        detail: {
          oldValue: f.previousFontSize,
          newValue: f.currentFontSize,
          scaleFactor: f.currentFontSize / f.previousFontSize
        }
      })
    );
  };

  // fit method, marks the fitty as dirty and requests a redraw (this will also redraw any other fitty marked as dirty)
  const fit = (f, type) => () => {
    f.dirty = type;
    if (!f.active) return;
    requestRedraw();
  };

  const init = (f) => {
    // save some of the original CSS properties before we change them
    f.originalStyle = {
      whiteSpace: f.element.style.whiteSpace,
      display: f.element.style.display,
      fontSize: f.element.style.fontSize
    };

    // should we observe DOM mutations
    observeMutations(f);

    // this is a new fitty so we need to validate if it's styles are in order
    f.newbie = true;

    // because it's a new fitty it should also be dirty, we want it to redraw on the first loop
    f.dirty = true;

    // we want to be able to update this fitty
    fitties.push(f);
  };

  const destroy = (f) => () => {
    // remove from fitties array
    fitties = fitties.filter((_) => _.element !== f.element);

    // stop observing DOM
    if (f.observeMutations) f.observer.disconnect();

    // reset the CSS properties we changes
    f.element.style.whiteSpace = f.originalStyle.whiteSpace;
    f.element.style.display = f.originalStyle.display;
    f.element.style.fontSize = f.originalStyle.fontSize;
  };

  // add a new fitty, does not redraw said fitty
  const subscribe = (f) => () => {
    if (f.active) return;
    f.active = true;
    requestRedraw();
  };

  // remove an existing fitty
  const unsubscribe = (f) => () => (f.active = false);

  const observeMutations = (f) => {
    // no observing?
    if (!f.observeMutations) return;

    // start observing mutations
    f.observer = new MutationObserver(fit(f, DrawState.DIRTY_CONTENT));

    // start observing
    f.observer.observe(f.element, f.observeMutations);
  };

  // default mutation observer settings
  const mutationObserverDefaultSetting = {
    subtree: true,
    childList: true,
    characterData: true
  };

  // default fitty options
  const defaultOptions = {
    minSize: 16,
    maxSize: 512,
    multiLine: true,
    observeMutations:
      "MutationObserver" in w ? mutationObserverDefaultSetting : false
  };

  // array of elements in, fitty instances out
  function fittyCreate(elements, options) {
    // set options object
    const fittyOptions = {
      // expand default options
      ...defaultOptions,

      // override with custom options
      ...options
    };

    // create fitties
    const publicFitties = elements.map((element) => {
      // create fitty instance
      const f = {
        // expand defaults
        ...fittyOptions,

        // internal options for this fitty
        element,
        active: true
      };

      // initialise this fitty
      init(f);

      // expose API
      return {
        element,
        fit: fit(f, DrawState.DIRTY),
        unfreeze: subscribe(f),
        freeze: unsubscribe(f),
        unsubscribe: destroy(f)
      };
    });

    // call redraw on newly initiated fitties
    requestRedraw();

    // expose fitties
    return publicFitties;
  }

  // fitty creation function
  function fitty(target, options = {}) {
    // if target is a string
    return typeof target === "string"
      ? // treat it as a querySelector
        fittyCreate(toArray(document.querySelectorAll(target)), options)
      : // create single fitty
        fittyCreate([target], options)[0];
  }

  // handles viewport changes, redraws all fitties, but only does so after a timeout
  let resizeDebounce = null;
  const onWindowResized = () => {
    w.clearTimeout(resizeDebounce);
    resizeDebounce = w.setTimeout(
      redrawAll(DrawState.DIRTY_LAYOUT),
      fitty.observeWindowDelay
    );
  };

  // define observe window property, so when we set it to true or false events are automatically added and removed
  const events = ["resize", "orientationchange"];
  Object.defineProperty(fitty, "observeWindow", {
    set: (enabled) => {
      const method = `${enabled ? "add" : "remove"}EventListener`;
      events.forEach((e) => {
        w[method](e, onWindowResized);
      });
    }
  });

  // fitty global properties (by setting observeWindow to true the events above get added)
  fitty.observeWindow = true;
  fitty.observeWindowDelay = 100;

  // public fit all method, will force redraw no matter what
  fitty.fitAll = redrawAll(DrawState.DIRTY);

  // export our fitty function, we don't want to keep it to our selves
  return fitty;
})(typeof window === "undefined" ? null : window);