Module: Capybara::Selenium::Node::Html5Drag

<<~JS
  (function(){
    var input = document.createElement('INPUT');
    input.type = "file";
    input.id = "_capybara_drop_file";
    input.multiple = true;
    document.body.appendChild(input);
    return input;
  })()
JS

<<~JS
  var el = arguments[0],
      input = arguments[1],
      files = input.files,
      dt = new DataTransfer(),
      opts = { cancelable: true, bubbles: true, dataTransfer: dt };
  input.parentElement.removeChild(input);
  if (dt.items){
    for (var i=0; i<files.length; i++){
      dt.items.add(files[i]);
    }
  } else {
    Object.defineProperty(dt, "files", {
      value: files,
      writable: false
    });
  }
  var dropEvent = new DragEvent('drop', opts);
  el.dispatchEvent(dropEvent);
JS

<<~JS
  var strings = arguments[0],
      el = arguments[1],
      dt = new DataTransfer(),
      opts = { cancelable: true, bubbles: true, dataTransfer: dt };
  for (var i=0; i < strings.length; i++){
    if (dt.items) {
      dt.items.add(strings[i]['data'], strings[i]['type']);
    } else {
      dt.setData(strings[i]['type'], strings[i]['data']);
    }
  }
  var dropEvent = new DragEvent('drop', opts);
  el.dispatchEvent(dropEvent);
JS

<<~JS
  function rectCenter(rect){
    return new DOMPoint(
      (rect.left + rect.right)/2,
      (rect.top + rect.bottom)/2
    );
  }

  function pointOnRect(pt, rect) {
  	var rectPt = rectCenter(rect);
  	var slope = (rectPt.y - pt.y) / (rectPt.x - pt.x);

  	if (pt.x <= rectPt.x) { // left side
  		var minXy = slope * (rect.left - pt.x) + pt.y;
  		if (rect.top <= minXy && minXy <= rect.bottom)
        return new DOMPoint(rect.left, minXy);
  	}

  	if (pt.x >= rectPt.x) { // right side
  		var maxXy = slope * (rect.right - pt.x) + pt.y;
  		if (rect.top <= maxXy && maxXy <= rect.bottom)
        return new DOMPoint(rect.right, maxXy);
  	}

  	if (pt.y <= rectPt.y) { // top side
  		var minYx = (rectPt.top - pt.y) / slope + pt.x;
  		if (rect.left <= minYx && minYx <= rect.right)
        return new DOMPoint(minYx, rect.top);
  	}

  	if (pt.y >= rectPt.y) { // bottom side
  		var maxYx = (rect.bottom - pt.y) / slope + pt.x;
  		if (rect.left <= maxYx && maxYx <= rect.right)
        return new DOMPoint(maxYx, rect.bottom);
  	}

    return new DOMPoint(pt.x,pt.y);
  }

  function dragEnterTarget() {
    target.scrollIntoView({behavior: 'instant', block: 'center', inline: 'center'});
    var targetRect = target.getBoundingClientRect();
    var sourceCenter = rectCenter(source.getBoundingClientRect());

    for (var i = 0; i < drop_modifier_keys.length; i++) {
      key = drop_modifier_keys[i];
      if (key == "control"){
        key = "ctrl"
      }
      opts[key + 'Key'] = true;
    }

    var dragEnterEvent = new DragEvent('dragenter', opts);
    target.dispatchEvent(dragEnterEvent);

    // fire 2 dragover events to simulate dragging with a direction
    var entryPoint = pointOnRect(sourceCenter, targetRect)
    var dragOverOpts = Object.assign({clientX: entryPoint.x, clientY: entryPoint.y}, opts);
    var dragOverEvent = new DragEvent('dragover', dragOverOpts);
    target.dispatchEvent(dragOverEvent);
    window.setTimeout(dragOnTarget, step_delay);
  }

  function dragOnTarget() {
    var targetCenter = rectCenter(target.getBoundingClientRect());
    var dragOverOpts = Object.assign({clientX: targetCenter.x, clientY: targetCenter.y}, opts);
    var dragOverEvent = new DragEvent('dragover', dragOverOpts);
    target.dispatchEvent(dragOverEvent);
    window.setTimeout(dragLeave, step_delay, dragOverEvent.defaultPrevented, dragOverOpts);
  }

  function dragLeave(drop, dragOverOpts) {
    var dragLeaveOptions = Object.assign({}, opts, dragOverOpts);
    var dragLeaveEvent = new DragEvent('dragleave', dragLeaveOptions);
    target.dispatchEvent(dragLeaveEvent);
    if (drop) {
      var dropEvent = new DragEvent('drop', dragLeaveOptions);
      target.dispatchEvent(dropEvent);
    }
    var dragEndEvent = new DragEvent('dragend', dragLeaveOptions);
    source.dispatchEvent(dragEndEvent);
    callback.call(true);
  }

  var source = arguments[0],
      target = arguments[1],
      step_delay = arguments[2],
      drop_modifier_keys = arguments[3],
      callback = arguments[4];

  var dt = new DataTransfer();
  var opts = { cancelable: true, bubbles: true, dataTransfer: dt };

  while (source && !source.draggable) {
    source = source.parentElement;
  }

  if (source.tagName == 'A'){
    dt.setData('text/uri-list', source.href);
    dt.setData('text', source.href);
  }
  if (source.tagName == 'IMG'){
    dt.setData('text/uri-list', source.src);
    dt.setData('text', source.src);
  }

  var dragEvent = new DragEvent('dragstart', opts);
  source.dispatchEvent(dragEvent);

  window.setTimeout(dragEnterTarget, step_delay);
JS

<<~JS
  (function(el){
    if ([true, null].indexOf(window.capybara_mousedown_prevented) >= 0){
      return true;
    }

    do {
      if (el.draggable) return false;
    } while (el = el.parentElement );
    return true;
  })(arguments[0])
JS

<<~JS
  window.capybara_mousedown_prevented = null;
  document.addEventListener('mousedown', ev => {
    window.capybara_mousedown_prevented = ev.defaultPrevented;
  }, { once: true, passive: true })
JS