dragula.js

'use strict';

var emitter = require('contra.emitter');
var crossvent = require('crossvent');
var body = document.body;
var documentElement = document.documentElement;

function dragula (containers, options) {
  var _dragging; // are we dragging something?
  var _mirror; // mirror image
  var _source; // source container
  var _item; // item being dragged
  var _offsetX; // reference x
  var _offsetY; // reference y
  var _copy; // item used for copying
  var _clientX; // Latest client x
  var _clientY; // Latest client y

  var o = options || {};
  if (o.accepts === void 0) { o.accepts = always; }
  if (o.copy === void 0) { o.copy = false; }
  if (o.revertOnSpill === void 0) { o.revertOnSpill = false; }
  if (o.removeOnSpill === void 0) { o.removeOnSpill = false; }
  if (o.direction === void 0) { o.direction = 'vertical'; }

  var api = emitter({
    cancel: cancel,
    remove: remove,
    destroy: destroy
  });

  events();

  return api;

  function events (remove) {
    var op = remove ? 'remove' : 'add';
    crossvent[op](documentElement, 'mouseup', release);
    crossvent[op](documentElement, 'touchend', release);

    containers.forEach(track);

    function track (container) {
      crossvent[op](container, 'mousedown', grab);
      crossvent[op](container, 'touchstart', grab);
    }
  }

  function destroy () {
    events(true);
    release({});
  }

  function grab (e) {
    if ((e.which !== 0 && e.which !== 1) || e.metaKey || e.ctrlKey) {
      return; // we only care about honest-to-god left clicks & touches
    }
    if (_dragging) {
      return;
    }

    var item = e.target;
    if (containers.indexOf(item) !== -1) {
      return; // don't drag container itself
    }
    while (containers.indexOf(item.parentElement) === -1) {
      if (invalidTarget(item)) {
        return;
      }
      item = item.parentElement; // drag target should be a top element
    }
    if (invalidTarget(item)) {
      return;
    }

    e.preventDefault();

    var container = item.parentElement;
    var offset = getOffset(item);

    if (o.copy) {
      _copy = item.cloneNode(true);
      addClass(_copy, 'gu-transit');
    } else {
      addClass(item, 'gu-transit');
    }

    _source = container;
    _item = item;
    _offsetX = getPageX(e) - offset.left;
    _offsetY = getPageY(e) - offset.top;

    api.emit('drag', _item, _source);
    renderMirrorImage();
    drag(e);
  }

  function invalidTarget (el) {
    return el.tagName === 'A' || el.tagName === 'BUTTON';
  }

  function release (e) {
    if (!_dragging) {
      return;
    }

    var x = _clientX;
    var y = _clientY;
    var item = _copy || _item;
    var elementBehindCursor = getElementBehindPoint(_mirror, x, y);
    var dropTarget = findDropTarget(elementBehindCursor);
    if (dropTarget && (o.copy === false || dropTarget !== _source)) {
      drop();
    } else if (o.removeOnSpill) {
      remove();
    } else {
      cancel();
    }

    function drop () {
      var immediate = getImmediateChild(dropTarget, elementBehindCursor);
      var reference = getReference(dropTarget, immediate, x, y);
      dropTarget.insertBefore(item, reference);
      api.emit('drop', item, dropTarget);
      cleanup();
    }
  }

  function remove () {
    if (!_dragging) {
      return;
    }
    var item = _copy || _item;
    var parent = item.parentElement;
    if (parent) {
      parent.removeChild(item);
    }
    api.emit(o.copy ? 'cancel' : 'remove', item, parent);
    cleanup();
  }

  function cancel (revert) {
    if (!_dragging) {
      return;
    }
    var reverts = arguments.length > 0 ? revert : o.revertOnSpill;
    var item = _copy || _item;
    var parent = item.parentElement;
    if (parent === _source && o.copy) {
      parent.removeChild(_copy);
    }
    if (o.copy === false && reverts && parent !== _source) {
      _source.appendChild(item);
    }
    if (parent === _source || reverts) {
      api.emit('cancel', item, _source);
    } else {
      api.emit('drop', item, parent);
    }
    cleanup();
  }

  function cleanup () {
    var item = _copy || _item;
    removeMirrorImage();
    rmClass(item, 'gu-transit');
    _source = _item = _copy = null;
  }

  function findDropTarget (elementBehindCursor) {
    var target = elementBehindCursor;
    while (target && !accepted()) {
      target = target.parentElement;
    }
    return target;

    function accepted () {
      var droppable = containers.indexOf(target) !== -1;
      return droppable && o.accepts(_item, target, _source);
    }
  }

  function drag (e) {
    _clientX = (typeof e.clientX != "undefined" ? e.clientX :
                                                  e.targetTouches[0].clientX);
    _clientY = (typeof e.clientY != "undefined" ? e.clientY :
                                                  e.targetTouches[0].clientY);
    var x = _clientX - _offsetX
    var y = _clientY - _offsetY;
    _mirror.style.left = x + 'px';
    _mirror.style.top  = y + 'px';

    var elementBehindCursor = getElementBehindPoint(_mirror, _clientX, _clientY);
    var dropTarget = findDropTarget(elementBehindCursor);
    if (dropTarget === _source && o.copy) {
      return;
    }
    var item = _copy || _item;
    var immediate = getImmediateChild(dropTarget, elementBehindCursor);
    if (immediate === null) {
      return;
    }
    var reference = getReference(dropTarget, immediate, _clientX, _clientY);
    if (reference === null || reference !== item && reference !== nextEl(item)) {
      dropTarget.insertBefore(item, reference);
      api.emit('shadow', item, dropTarget);
    }
  }

  function renderMirrorImage () {
    var rect = _item.getBoundingClientRect();
    _dragging = true;
    _mirror = _item.cloneNode(true);
    _mirror.style.width = rect.width + 'px';
    _mirror.style.height = rect.height + 'px';
    rmClass(_mirror, 'gu-transit');
    addClass(_mirror, ' gu-mirror');
    body.appendChild(_mirror);
    crossvent.add(documentElement, 'mousemove', drag);
    crossvent.add(documentElement, 'touchmove', drag);
    addClass(body, 'gu-unselectable');
  }

  function removeMirrorImage () {
    if (_mirror) {
      rmClass(body, 'gu-unselectable');
      crossvent.remove(documentElement, 'mousemove', drag);
      crossvent.remove(documentElement, 'touchmove', drag);
      _mirror.parentElement.removeChild(_mirror);
      _mirror = null;
      _dragging = false;
    }
  }

  function getImmediateChild (dropTarget, target) {
    var immediate = target;
    while (immediate !== dropTarget && immediate.parentElement !== dropTarget) {
      immediate = immediate.parentElement;
    }
    if (immediate === documentElement) {
      return null;
    }
    return immediate;
  }

  function getReference (dropTarget, target, x, y) {
    var horizontal = o.direction === 'horizontal';
    var reference = target !== dropTarget ? inside() : outside();
    return reference;

    function outside () { // slower, but able to figure out any position
      var len = dropTarget.children.length;
      var i;
      var el;
      var rect;
      for (i = 0; i < len; i++) {
        el = dropTarget.children[i];
        rect = el.getBoundingClientRect();
        if (horizontal && rect.left > x) { return el; }
        if (!horizontal && rect.top > y) { return el; }
      }
      return null;
    }

    function inside () { // faster, but only available if dropped inside a child element
      var rect = target.getBoundingClientRect();
      if (horizontal) {
        return resolve(x > rect.left + rect.width / 2);
      }
      return resolve(y > rect.top + rect.height / 2);
    }

    function resolve (after) {
      return after ? nextEl(target) : target;
    }
  }
}

function getOffset (el) {
  var rect = el.getBoundingClientRect();
  return {
    left: rect.left + body.scrollLeft,
    top: rect.top + body.scrollTop
  };
}

function getElementBehindPoint (behind, x, y) {
  if (!x && !y) {
    return null;
  }
  var state = behind.className;
  behind.className += ' gu-hide';
  var el = document.elementFromPoint(x, y);
  behind.className = state;
  return el;
}

function always () {
  return true;
}

function nextEl (el) {
  return el.nextElementSibling || manually();
  function manually () {
    var sibling = el;
    do {
      sibling = sibling.nextSibling;
    } while (sibling && sibling.nodeType !== 1);
    return sibling;
  }
}

function addClass (el, className) {
  if (el.className.indexOf(' ' + className) === -1) {
    el.className += ' ' + className;
  }
}

function rmClass (el, className) {
  el.className = el.className.replace(new RegExp(' ' + className, 'g'), '');
}

function getPageX (e) {
  if (typeof e.targetTouches == "undefined")
    return e.pageX;

  return e.targetTouches && e.targetTouches.length && e.targetTouches[0].pageX || 0;
}

function getPageY (e) {
  if (typeof e.targetTouches == "undefined")
    return e.pageY;

  return e.targetTouches && e.targetTouches.length && e.targetTouches[0].pageY || 0;
}

module.exports = dragula;