vuikit/lib/height-viewport.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 { on } from './util/event';
import { css } from './util/style';
import { warn } from './util/debug';
import { query } from './util/selector';
import { height, offset } from './util/dimensions';
import { isObject, isNumeric, isString, toFloat, assign, endsWith } from './util/lang';

var NAMESPACE = '__vkHeightViewport';
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 getOptions (ctx) {
  var ref = ctx.binding;
  var value = ref.value;
  var modifiers = ref.modifiers;
  if (process.env.NODE_ENV !== 'production' && value && !isObject(value)) {
    warn('v-vk-height-viewport -> Object expected as configuration', ctx.vnode.context);
  }
  var options = assign({
    minHeight: 0,
    expand: false,
    offsetTop: false,
    offsetBottom: false
  }, modifiers, value);
  return options
}
function update (el, ctx) {
  var opts = getOptions(ctx);
  css(el, 'boxSizing', 'border-box');
  var viewport = height(window);
  var minHeight;
  var offsetTop = 0;
  if (opts.expand) {
    css(el, {height: '', minHeight: ''});
    var diff = viewport - offsetHeight(document.documentElement);
    if (diff > 0) {
      minHeight = offsetHeight(el) + diff;
    }
  } else {
    var ref = offset(el);
    var top = ref.top;
    if (top < viewport / 2 && opts.offsetTop) {
      offsetTop += top;
    }
    if (opts.offsetBottom === true) {
      offsetTop += offsetHeight(el.nextElementSibling);
    } else if (isNumeric(opts.offsetBottom)) {
      offsetTop += (viewport / 100) * opts.offsetBottom;
    } else if (opts.offsetBottom && endsWith(opts.offsetBottom, 'px')) {
      offsetTop += toFloat(opts.offsetBottom);
    } else if (isString(opts.offsetBottom)) {
      offsetTop += offsetHeight(query(opts.offsetBottom, el));
    }
    minHeight = offsetTop ? ("calc(100vh - " + offsetTop + "px)") : '100vh';
  }
  if (!minHeight) {
    return
  }
  css(el, { height: '', minHeight: minHeight });
  var elHeight = el.offsetHeight;
  if (opts.minHeight && opts.minHeight > elHeight) {
    css(el, 'minHeight', opts.minHeight);
  }
  if (viewport - offsetTop >= elHeight) {
    css(el, 'height', minHeight);
  }
}
function offsetHeight (el) {
  return el && (el.offsetHeight || 0)
}

export default index;