vuikit/lib/height-match.js

A responsive Vue UI library for web site interfaces based on UIkit

/**
 * Vuikit 0.8.10
 * (c) 2018 Miljan Aleksic
 * @license MIT
**/

/* Substantial part of the code is adapted from UIkit,
  Copyright (c) 2013-2018 YOOtheme GmbH, getuikit.com */

import { $$ } from './util/core';
import { on } from './util/event';
import { css } from './util/style';
import { attr } from './util/attr';
import { isVisible } from './util/filter';
import { isUndefined, isString, assign } from './util/lang';

var NAMESPACE = '__vkHeightMatch';
var index = {
  bind: function bind (el, binding, vnode) {
    el[NAMESPACE] = {};
  },
  inserted: function inserted (el, binding, vnode) {
    vnode.context.$nextTick(function () { return update(el, { binding: binding, vnode: vnode }); }
    );
    el[NAMESPACE].unbind = on(window, 'resize', function () { return update(el, { binding: binding, vnode: vnode }); }
    );
  },
  componentUpdated: function componentUpdated (el, binding, vnode) {
    vnode.context.$nextTick(function () { return update(el, { binding: binding, vnode: vnode }); }
    );
  },
  unbind: function unbind (el) {
    if (!el[NAMESPACE]) {
      return
    }
    el[NAMESPACE].unbind();
    delete el[NAMESPACE];
  }
}
function update (el, ctx) {
  var opts = getOptions(ctx);
  var elements = $$(opts.target, el);
  css(elements, 'minHeight', '');
  var rows = getRows(elements, opts.row);
  rows.forEach(function (els) {
    var ref = match(els);
    var height = ref.height;
    var elements = ref.elements;
    css(elements, 'minHeight', height);
  });
}
function getOptions (ctx) {
  var ref = ctx.binding;
  var value = ref.value;
  if (isString(value)) {
    value = { target: value };
  }
  return assign({
    target: '> *',
    row: true
  }, value)
}
function getRows (elements, row) {
  if (!row) {
    return [ elements ]
  }
  var lastOffset = false;
  return elements.reduce(function (rows, el) {
    if (lastOffset !== el.offsetTop) {
      rows.push([el]);
    } else {
      rows[rows.length - 1].push(el);
    }
    lastOffset = el.offsetTop;
    return rows
  }, [])
}
function match (elements) {
  if (elements.length < 2) {
    return {}
  }
  var max = 0;
  var heights = [];
  elements.forEach(function (el) {
    var style;
    var hidden;
    if (!isVisible(el)) {
      style = attr(el, 'style');
      hidden = attr(el, 'hidden');
      attr(el, {
        style: ((style || '') + ";display:block !important;"),
        hidden: null
      });
    }
    max = Math.max(max, el.offsetHeight);
    heights.push(el.offsetHeight);
    if (!isUndefined(style)) {
      attr(el, {style: style, hidden: hidden});
    }
  });
  elements = elements.filter(function (el, i) { return heights[i] < max; });
  return { height: max, elements: elements }
}

export default index;