vuikit/lib/margin.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 { warn } from './util/debug';
import { isRtl } from './util/env';
import { isVisible } from './util/filter';
import { toggleClass } from './util/class';
import { isObject, noop, assign } from './util/lang';

var NAMESPACE = '__vkMargin';
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 items = el.children;
  if (!items.length || !isVisible(el)) {
    return
  }
  var data = getRows(items);
  data.rows.forEach(function (row, i) { return row.forEach(function (el, j) {
      toggleClass(el, opts.margin, i !== 0);
      toggleClass(el, opts.firstColumn, j === 0);
    }); }
  );
  opts.onUpdate(el, data);
}
function getOptions (ctx) {
  var ref = ctx.binding;
  var value = ref.value;
  if (process.env.NODE_ENV !== 'production' && value && !isObject(value)) {
    warn('v-vk-magin -> Object expected as configuration', ctx.vnode.context);
  }
  var options = assign({
    onUpdate: noop,
    margin: 'uk-margin-small-top',
    firstColumn: 'uk-first-column'
  }, value);
  return options
}
function getRows (items) {
  var data = {};
  var rows = [[]];
  data.stacks = true;
  for (var i = 0; i < items.length; i++) {
    var el = items[i];
    var dim = el.getBoundingClientRect();
    if (!dim.height) {
      continue
    }
    for (var j = rows.length - 1; j >= 0; j--) {
      var row = rows[j];
      if (!row[0]) {
        row.push(el);
        break
      }
      var leftDim = row[0].getBoundingClientRect();
      if (dim.top >= Math.floor(leftDim.bottom)) {
        rows.push([el]);
        break
      }
      if (Math.floor(dim.bottom) > leftDim.top) {
        data.stacks = false;
        if (dim.left < leftDim.left && !isRtl) {
          row.unshift(el);
          break
        }
        row.push(el);
        break
      }
      if (j === 0) {
        rows.unshift([el]);
        break
      }
    }
  }
  data.rows = rows;
  return data
}

export default index;