MaximizeElementHeight.js

/*
 * Maximizes the height of an element, using flex laytout,
 * by applying classes to the element and it's parents.
 * Warning: It breaks a lot of layouts and it is not a substitute for proper,
 * hand-crafted code. Also, it is not really tested!
 */

/** Shorthand for `toggleMaxHeightElem(..., isMaximize = true)` */
function maximizeElemHeight(elem, topParent = 'html') {
  toggleMaxHeightElem(elem, topParent, true);
}

/** Shorthand for `toggleMaxHeightElem(..., isMaximize = false)` */
function unmaximizeElemHeight(elem, topParent = 'html') {
  toggleMaxHeightElem(elem, topParent, false);
}

/**
 * (Un)maximizes the specified element.
 * The element will not be unmaximized, unless the count turns to `0`.
 * Trying to maximize an already maximized element, or the opposite, has no effect.
 */
function toggleMaxHeightElem(elem, topParent = 'html', isMaximize = null) {
  const $maxHeightElem = $(elem);
  const $topParent = $(topParent);
  const $maxHeightParents = $maxHeightElem
    .parentsUntil($topParent)
    .add($topParent);

  const isMaxHeight = $maxHeightElem.hasClass('hacky-max-height-elem');
  // decide right action
  if (isMaximize !== true && isMaximize !== false) {
    isMaximize = !isMaxHeight;
  }
  // already maximized - no need to repeat action
  if (isMaximize && isMaxHeight) {
    return;
  }
  // not maximized - no need to repeat action
  if (!isMaximize && !isMaxHeight) {
    return;
  }

  $maxHeightParents.each((i, el) => _toggleMaxHeightClass(el, 'max-height-parent', 'hacky-max-height-parent', isMaximize));
  $maxHeightElem.each((i, el) => _toggleMaxHeightClass(el, 'max-height-elem', 'hacky-max-height-elem', isMaximize));
}

/**
 * Toggles the specified class to a set of elements, while increasing/decreasing the count.
 * The class will not be removed from an element, unless the count turns to `0`.
 */
function _toggleMaxHeightClass(elem, countKey, className, isMaximize) {
  const $elem = $(elem);
  const count = parseInt($elem.data(countKey) || '0') + (isMaximize ? 1 : -1);
  $elem
    .data(countKey, count)
    .toggleClass(className, !!count);
}

// these can also be extracted to a CSS file
+function addStyles() {
  let style = document.createElement('style');
  // language=CSS
  style.innerHTML = `
    .hacky-max-height-elem {
      flex-grow: 1;
    }

    .hacky-max-height-parent {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .hacky-max-height-parent > *:not(.hacky-max-height-parent):not(.hacky-max-height-elem) {
      flex-grow: 0;
    }
  `;
  document.head.appendChild(style);
}();