vuikit/lib/core/v-position.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 { css } from '../util/style';
import { warn } from '../util/debug';
import { toggleClass } from '../util/class';
import { trigger } from '../util/event';
import { positionAt, flipPosition } from '../util/dimensions';
import { assign, isObject, isUndefined } from '../util/lang';

var BEFORE_POSITION = 'v-vk-position:before';
var AFTER_POSITION = 'v-vk-position:after';

var Directive = {
  inserted: function inserted (el, binding, vnode) {
    var ctx = getContext(el, binding, vnode);
    if (ctx) {
      position(ctx);
    }
  },
  componentUpdated: function componentUpdated (el, binding, vnode) {
    var ctx = getContext(el, binding, vnode);
    if (ctx) {
      position(ctx);
    }
  }
}
function position (ctx) {
  var el = ctx.el;
  var props = ctx.props;
  var vnode = ctx.vnode;
  var target = props.target;
  var position = props.position;
  var offset = props.offset;
  var boundary = props.boundary;
  var flip = props.flip;
  var mainClass = props.mainClass;
  if (process.env.NODE_ENV !== 'production' && !position.match(/^((top|bottom)-(left|center|right))|((left|right)-(top|center|bottom))$/)) {
    warn(("v-position -> '" + position + "' -> no valid position"), vnode);
  }
  if (process.env.NODE_ENV !== 'production' && (!target || !target.tagName)) {
    warn("v-position -> no valid target", vnode);
  }
  var ref = position.split('-');
  var dir = ref[0];
  var align = ref[1];
  trigger(el, BEFORE_POSITION);
  var classesRx = new RegExp((mainClass + "-(top|bottom|left|right)(-[a-z]+)?"));
  el.className = el.className.replace(classesRx, '');
  css(el, { top: '', left: '' });
  var axis = getPositionAxis(position);
  var elAttach = axis === 'x'
    ? ((flipPosition(dir)) + " " + align)
    : (align + " " + (flipPosition(dir)));
  var targetAttach = axis === 'x'
    ? (dir + " " + align)
    : (align + " " + dir);
  var elOffset = axis === 'x'
    ? ("" + (dir === 'left' ? -1 * offset : offset))
    : (" " + (dir === 'top' ? -1 * offset : offset));
  var targetOffset = null;
  var ref$1 = positionAt(
    el,
    target,
    elAttach,
    targetAttach,
    elOffset,
    targetOffset,
    flip,
    boundary
  ).target;
  var x = ref$1.x;
  var y = ref$1.y;
  dir = axis === 'x' ? x : y;
  align = axis === 'x' ? y : x;
  toggleClass(el, (mainClass + "-" + dir + "-" + align), offset === false);
  trigger(el, AFTER_POSITION);
}
function getOptions (ctx) {
  var vnode = ctx.vnode;
  var ref = ctx.binding;
  var value = ref.value;
  if (process.env.NODE_ENV !== 'production' && (isUndefined(value) || !isObject(value))) {
    warn('v-position -> configuration is missing or is not an Object', vnode.context);
  }
  var options = assign({
    target: null,
    position: 'top-center',
    boundary: window,
    flip: true,
    offset: false,
    mainClass: ''
  }, value);
  return options
}
function getContext (el, binding, vnode) {
  var ctx = { el: el, binding: binding, vnode: vnode };
  ctx.props = getOptions(ctx);
  if (!ctx.props) {
    binding.def.unbind(el, binding);
    return
  }
  return ctx
}
function getPositionAxis (position) {
  var ref = position.split('-');
  var dir = ref[0];
  return dir === 'top' || dir === 'bottom'
    ? 'y'
    : 'x'
}

export default Directive;
export { BEFORE_POSITION, AFTER_POSITION };