2073 lines
79 KiB
JavaScript
2073 lines
79 KiB
JavaScript
/* eslint-disable */
|
|
import './reflect-metadata';
|
|
import { Vue, Component, Prop } from './vue-property-decorator';
|
|
|
|
/*! *****************************************************************************
|
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
this file except in compliance with the License. You may obtain a copy of the
|
|
License at http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
|
|
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
|
|
MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
|
|
See the Apache Version 2.0 License for specific language governing permissions
|
|
and limitations under the License.
|
|
***************************************************************************** */
|
|
/* global Reflect, Promise */
|
|
|
|
var extendStatics = function(d, b) {
|
|
extendStatics = Object.setPrototypeOf ||
|
|
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
return extendStatics(d, b);
|
|
};
|
|
|
|
function __extends(d, b) {
|
|
extendStatics(d, b);
|
|
function __() { this.constructor = d; }
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
}
|
|
|
|
var __assign = function() {
|
|
__assign = Object.assign || function __assign(t) {
|
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
s = arguments[i];
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
}
|
|
return t;
|
|
};
|
|
return __assign.apply(this, arguments);
|
|
};
|
|
|
|
function __decorate(decorators, target, key, desc) {
|
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
}
|
|
|
|
function __metadata(metadataKey, metadataValue) {
|
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
|
|
}
|
|
|
|
function __values(o) {
|
|
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
|
|
if (m) return m.call(o);
|
|
return {
|
|
next: function () {
|
|
if (o && i >= o.length) o = void 0;
|
|
return { value: o && o[i++], done: !o };
|
|
}
|
|
};
|
|
}
|
|
|
|
function __read(o, n) {
|
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
if (!m) return o;
|
|
var i = m.call(o), r, ar = [], e;
|
|
try {
|
|
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
}
|
|
catch (error) { e = { error: error }; }
|
|
finally {
|
|
try {
|
|
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
}
|
|
finally { if (e) throw e.error; }
|
|
}
|
|
return ar;
|
|
}
|
|
|
|
function __spread() {
|
|
for (var ar = [], i = 0; i < arguments.length; i++)
|
|
ar = ar.concat(__read(arguments[i]));
|
|
return ar;
|
|
}
|
|
|
|
/**
|
|
* This is the class of the global object that holds the state of the drag and drop during its progress. It emits events
|
|
* reporting its state evolution during the progress of the drag and drop. Its data is reactive and listeners can be
|
|
* attachted to it using the method on.
|
|
*/
|
|
var DnD = /** @class */ (function () {
|
|
function DnD() {
|
|
this.inProgress = false;
|
|
this.type = null;
|
|
this.data = null;
|
|
this.source = null;
|
|
this.top = null;
|
|
this.position = null;
|
|
this.eventBus = new Vue();
|
|
this.sourceListeners = null;
|
|
this.success = null;
|
|
}
|
|
DnD.prototype.startDrag = function (source, event, x, y, type, data) {
|
|
this.type = type;
|
|
this.data = data;
|
|
this.source = source;
|
|
this.position = { x: x, y: y };
|
|
this.top = null;
|
|
this.sourceListeners = source.$listeners;
|
|
this.inProgress = true;
|
|
this.emit(event, "dragstart");
|
|
this.emit(event, "dragtopchanged", { previousTop: null });
|
|
};
|
|
DnD.prototype.resetVariables = function () {
|
|
this.inProgress = false;
|
|
this.data = null;
|
|
this.source = null;
|
|
this.position = null;
|
|
this.success = null;
|
|
};
|
|
DnD.prototype.stopDrag = function (event) {
|
|
this.success = this.top !== null && this.top['compatibleMode'] && this.top['dropAllowed'];
|
|
if (this.top !== null) {
|
|
this.emit(event, "drop");
|
|
}
|
|
this.emit(event, "dragend");
|
|
this.resetVariables();
|
|
};
|
|
DnD.prototype.cancelDrag = function (event) {
|
|
this.success = false;
|
|
this.emit(event, "dragend");
|
|
this.resetVariables();
|
|
};
|
|
DnD.prototype.mouseMove = function (event, comp) {
|
|
if (this.inProgress) {
|
|
var prevent = false;
|
|
var previousTop = this.top;
|
|
if (comp === null) {
|
|
// The mouse move event reached the top of the document without hitting a drop component.
|
|
this.top = null;
|
|
prevent = true;
|
|
}
|
|
else if (comp['isDropMask']) {
|
|
// The mouse move event bubbled until it reached a drop mask.
|
|
this.top = null;
|
|
prevent = true;
|
|
}
|
|
else if (comp['candidate'](this.type, this.data, this.source)) {
|
|
// The mouse move event bubbled until it reached a drop component that participates in the current drag operation.
|
|
this.top = comp;
|
|
prevent = true;
|
|
}
|
|
if (prevent) {
|
|
// We prevent the mouse move event from bubbling further up the tree because it reached the foremost drop component and that component is all that matters.
|
|
event.stopPropagation();
|
|
}
|
|
if (this.top !== previousTop) {
|
|
this.emit(event.detail.native, 'dragtopchanged', { previousTop: previousTop });
|
|
}
|
|
this.position = {
|
|
x: event.detail.x,
|
|
y: event.detail.y
|
|
};
|
|
this.emit(event.detail.native, 'dragpositionchanged');
|
|
}
|
|
};
|
|
DnD.prototype.emit = function (native, event, data) {
|
|
this.eventBus.$emit(event, __assign({ type: this.type, data: this.data, top: this.top, source: this.source, position: this.position, success: this.success, native: native }, data));
|
|
};
|
|
DnD.prototype.on = function (event, callback) {
|
|
this.eventBus.$on(event, callback);
|
|
};
|
|
DnD.prototype.off = function (event, callback) {
|
|
this.eventBus.$off(event, callback);
|
|
};
|
|
return DnD;
|
|
}());
|
|
var dnd = new DnD();
|
|
dnd = Vue.observable(dnd);
|
|
|
|
var DragAwareMixin = /** @class */ (function (_super) {
|
|
__extends(DragAwareMixin, _super);
|
|
function DragAwareMixin() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Object.defineProperty(DragAwareMixin.prototype, "dragInProgress", {
|
|
get: function () {
|
|
return dnd.inProgress;
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DragAwareMixin.prototype, "dragData", {
|
|
get: function () {
|
|
return dnd.data;
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DragAwareMixin.prototype, "dragType", {
|
|
get: function () {
|
|
return dnd.type;
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DragAwareMixin.prototype, "dragPosition", {
|
|
get: function () {
|
|
return dnd.position;
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DragAwareMixin.prototype, "dragSource", {
|
|
get: function () {
|
|
return dnd.source;
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DragAwareMixin.prototype, "dragTop", {
|
|
get: function () {
|
|
return dnd.top;
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
DragAwareMixin = __decorate([
|
|
Component({})
|
|
], DragAwareMixin);
|
|
return DragAwareMixin;
|
|
}(Vue));
|
|
|
|
/**
|
|
* This files contains the primitives required to create drag images from HTML elements that serve as models. A snapshot
|
|
* of the computed styles of the model elements is taken when creating the drag image, so that it will look the same as
|
|
* the model, no matter where the drag images is grafted into the DOM.
|
|
*/
|
|
/**
|
|
* Creates a drag image using the given element as model.
|
|
*/
|
|
function createDragImage(el) {
|
|
var clone = deepClone(el);
|
|
clone.style.position = 'fixed';
|
|
clone.style.margin = '0';
|
|
clone.style["z-index"] = '1000';
|
|
clone.style.transition = 'opacity 0.2s';
|
|
return clone;
|
|
}
|
|
/**
|
|
* Clones the given element and all its descendants.
|
|
*/
|
|
function deepClone(el) {
|
|
var clone = el.cloneNode(true);
|
|
copyStyle(el, clone);
|
|
var vSrcElements = el.getElementsByTagName("*");
|
|
var vDstElements = clone.getElementsByTagName("*");
|
|
for (var i = vSrcElements.length; i--;) {
|
|
var vSrcElement = vSrcElements[i];
|
|
var vDstElement = vDstElements[i];
|
|
copyStyle(vSrcElement, vDstElement);
|
|
}
|
|
return clone;
|
|
}
|
|
/**
|
|
* Copy the computed styles from src to destination.
|
|
*/
|
|
function copyStyle(src, destination) {
|
|
var e_1, _a;
|
|
var computedStyle = window.getComputedStyle(src);
|
|
try {
|
|
for (var computedStyle_1 = __values(computedStyle), computedStyle_1_1 = computedStyle_1.next(); !computedStyle_1_1.done; computedStyle_1_1 = computedStyle_1.next()) {
|
|
var key = computedStyle_1_1.value;
|
|
if (key === 'width') {
|
|
// IE11
|
|
var width = computedStyle.getPropertyValue("box-sizing") === 'border-box' ?
|
|
src.clientWidth :
|
|
src.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight);
|
|
destination.style.setProperty("width", width + "px");
|
|
}
|
|
else if (key === 'height') {
|
|
// IE11
|
|
var height = computedStyle.getPropertyValue("box-sizing") === 'border-box' ?
|
|
src.clientHeight :
|
|
src.clientHeight - parseFloat(computedStyle.paddingTop) - parseFloat(computedStyle.paddingBottom);
|
|
destination.style.setProperty("height", height + "px");
|
|
}
|
|
else {
|
|
destination.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key));
|
|
}
|
|
}
|
|
}
|
|
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
finally {
|
|
try {
|
|
if (computedStyle_1_1 && !computedStyle_1_1.done && (_a = computedStyle_1.return)) { _a.call(computedStyle_1); }
|
|
}
|
|
finally { if (e_1) { throw e_1.error; } }
|
|
}
|
|
destination.style.pointerEvents = 'none';
|
|
}
|
|
|
|
// Forked from https://gist.github.com/gre/296291b8ce0d8fe6e1c3ea4f1d1c5c3b
|
|
var regex = /(auto|scroll)/;
|
|
|
|
var style = function (node, prop) { return getComputedStyle(node, null).getPropertyValue(prop); };
|
|
|
|
var scroll = function (node) { return regex.test(
|
|
style(node, "overflow") +
|
|
style(node, "overflow-y") +
|
|
style(node, "overflow-x")); };
|
|
|
|
var scrollparent = function (node) { return !node || node===document.body
|
|
? document.body
|
|
: scroll(node)
|
|
? node
|
|
: scrollparent(node.parentNode); };
|
|
|
|
// Forked from https://github.com/bennadel/JavaScript-Demos/blob/master/demos/window-edge-scrolling/index.htm
|
|
// Code was altered to work with scrollable containers
|
|
|
|
var timer = null;
|
|
|
|
function cancelScrollAction () {
|
|
clearTimeout(timer);
|
|
}
|
|
|
|
function performEdgeScroll(event, container, clientX, clientY, edgeSize) {
|
|
if (!container || !edgeSize) {
|
|
cancelScrollAction();
|
|
return false;
|
|
}
|
|
|
|
// NOTE: Much of the information here, with regard to document dimensions,
|
|
// viewport dimensions, and window scrolling is derived from JavaScript.info.
|
|
// I am consuming it here primarily as NOTE TO SELF.
|
|
// --
|
|
// Read More: https://javascript.info/size-and-scroll-window
|
|
// --
|
|
// CAUTION: The viewport and document dimensions can all be CACHED and then
|
|
// recalculated on window-resize events (for the most part). I am keeping it
|
|
// all here in the mousemove event handler to remove as many of the moving
|
|
// parts as possible and keep the demo as simple as possible.
|
|
|
|
// Get the viewport-relative coordinates of the mousemove event.
|
|
var rect = container.getBoundingClientRect();
|
|
var isBody = container === document.body;
|
|
|
|
var viewportX = clientX - rect.left;
|
|
var viewportY = clientY - rect.top;
|
|
if (isBody) {
|
|
viewportX = clientX;
|
|
viewportY = clientY;
|
|
}
|
|
|
|
// Get the viewport dimensions.
|
|
var viewportWidth = rect.width;
|
|
var viewportHeight = rect.height;
|
|
if (isBody) {
|
|
viewportWidth = document.documentElement.clientWidth;
|
|
viewportHeight = document.documentElement.clientHeight;
|
|
}
|
|
|
|
// Next, we need to determine if the mouse is within the "edge" of the
|
|
// viewport, which may require scrolling the window. To do this, we need to
|
|
// calculate the boundaries of the edge in the viewport (these coordinates
|
|
// are relative to the viewport grid system).
|
|
var edgeTop = edgeSize;
|
|
var edgeLeft = edgeSize;
|
|
var edgeBottom = ( viewportHeight - edgeSize );
|
|
var edgeRight = ( viewportWidth - edgeSize );
|
|
|
|
var isInLeftEdge = ( viewportX < edgeLeft );
|
|
var isInRightEdge = ( viewportX > edgeRight );
|
|
var isInTopEdge = ( viewportY < edgeTop );
|
|
var isInBottomEdge = ( viewportY > edgeBottom );
|
|
|
|
// If the mouse is not in the viewport edge, there's no need to calculate
|
|
// anything else.
|
|
if (!(isInLeftEdge || isInRightEdge || isInTopEdge || isInBottomEdge)) {
|
|
cancelScrollAction();
|
|
return false;
|
|
}
|
|
|
|
// If we made it this far, the user's mouse is located within the edge of the
|
|
// viewport. As such, we need to check to see if scrolling needs to be done.
|
|
|
|
// Get the document dimensions.
|
|
var documentWidth = Math.max(
|
|
container.scrollWidth,
|
|
container.offsetWidth,
|
|
container.clientWidth
|
|
);
|
|
var documentHeight = Math.max(
|
|
container.scrollHeight,
|
|
container.offsetHeight,
|
|
container.clientHeight
|
|
);
|
|
|
|
// Calculate the maximum scroll offset in each direction. Since you can only
|
|
// scroll the overflow portion of the document, the maximum represents the
|
|
// length of the document that is NOT in the viewport.
|
|
var maxScrollX = (documentWidth - viewportWidth);
|
|
var maxScrollY = (documentHeight - viewportHeight);
|
|
|
|
// As we examine the mousemove event, we want to adjust the window scroll in
|
|
// immediate response to the event; but, we also want to continue adjusting
|
|
// the window scroll if the user rests their mouse in the edge boundary. To
|
|
// do this, we'll invoke the adjustment logic immediately. Then, we'll setup
|
|
// a timer that continues to invoke the adjustment logic while the window can
|
|
// still be scrolled in a particular direction.
|
|
(function checkForWindowScroll() {
|
|
cancelScrollAction();
|
|
|
|
if (adjustWindowScroll()) {
|
|
timer = setTimeout( checkForWindowScroll, 30 );
|
|
}
|
|
})();
|
|
|
|
// Adjust the window scroll based on the user's mouse position. Returns True
|
|
// or False depending on whether or not the window scroll was changed.
|
|
function adjustWindowScroll() {
|
|
// Get the current scroll position of the document.
|
|
var currentScrollX = container.scrollLeft;
|
|
var currentScrollY = container.scrollTop;
|
|
if (isBody) {
|
|
currentScrollX = window.pageXOffset;
|
|
currentScrollY = window.pageYOffset;
|
|
}
|
|
|
|
// Determine if the window can be scrolled in any particular direction.
|
|
var canScrollUp = (currentScrollY > 0);
|
|
var canScrollDown = (currentScrollY < maxScrollY);
|
|
var canScrollLeft = (currentScrollX > 0);
|
|
var canScrollRight = (currentScrollX < maxScrollX);
|
|
|
|
// Since we can potentially scroll in two directions at the same time,
|
|
// let's keep track of the next scroll, starting with the current scroll.
|
|
// Each of these values can then be adjusted independently in the logic
|
|
// below.
|
|
var nextScrollX = currentScrollX;
|
|
var nextScrollY = currentScrollY;
|
|
|
|
// As we examine the mouse position within the edge, we want to make the
|
|
// incremental scroll changes more "intense" the closer that the user
|
|
// gets the viewport edge. As such, we'll calculate the percentage that
|
|
// the user has made it "through the edge" when calculating the delta.
|
|
// Then, that use that percentage to back-off from the "max" step value.
|
|
var maxStep = 50;
|
|
|
|
// Should we scroll left?
|
|
if (isInLeftEdge && canScrollLeft) {
|
|
var intensity = ((edgeLeft - viewportX) / edgeSize);
|
|
nextScrollX = (nextScrollX - (maxStep * intensity));
|
|
}
|
|
// Should we scroll right?
|
|
else if (isInRightEdge && canScrollRight) {
|
|
var intensity = ((viewportX - edgeRight) / edgeSize);
|
|
nextScrollX = (nextScrollX + (maxStep * intensity));
|
|
}
|
|
|
|
// Should we scroll up?
|
|
if (isInTopEdge && canScrollUp) {
|
|
var intensity = ((edgeTop - viewportY) / edgeSize);
|
|
nextScrollY = (nextScrollY - (maxStep * intensity));
|
|
}
|
|
// Should we scroll down?
|
|
else if (isInBottomEdge && canScrollDown) {
|
|
var intensity = ((viewportY - edgeBottom) / edgeSize);
|
|
nextScrollY = (nextScrollY + (maxStep * intensity));
|
|
}
|
|
|
|
// Sanitize invalid maximums. An invalid scroll offset won't break the
|
|
// subsequent .scrollTo() call; however, it will make it harder to
|
|
// determine if the .scrollTo() method should have been called in the
|
|
// first place.
|
|
nextScrollX = Math.max(0, Math.min(maxScrollX, nextScrollX));
|
|
nextScrollY = Math.max(0, Math.min(maxScrollY, nextScrollY));
|
|
|
|
if (
|
|
(nextScrollX !== currentScrollX) ||
|
|
(nextScrollY !== currentScrollY)
|
|
) {
|
|
(isBody ? window : container).scrollTo(nextScrollX, nextScrollY);
|
|
return true;
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
var DragMixin = /** @class */ (function (_super) {
|
|
__extends(DragMixin, _super);
|
|
function DragMixin() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.dragInitialised = false;
|
|
_this.dragStarted = false;
|
|
_this.ignoreNextClick = false;
|
|
_this.initialUserSelect = null;
|
|
_this.downEvent = null;
|
|
_this.startPosition = null;
|
|
_this.delayTimer = null;
|
|
_this.scrollContainer = null;
|
|
return _this;
|
|
}
|
|
DragMixin.prototype.onSelectStart = function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
};
|
|
DragMixin.prototype.performVibration = function () {
|
|
// If browser can perform vibration and user has defined a vibration, perform it
|
|
if (this.vibration > 0 && window.navigator && window.navigator.vibrate) {
|
|
window.navigator.vibrate(this.vibration);
|
|
}
|
|
};
|
|
DragMixin.prototype.onMouseDown = function (e) {
|
|
var _this = this;
|
|
var target;
|
|
var goodButton;
|
|
if (e.type === 'mousedown') {
|
|
var mouse = e;
|
|
target = e.target;
|
|
goodButton = mouse.buttons === 1;
|
|
}
|
|
else {
|
|
var touch = e;
|
|
target = touch.touches[0].target;
|
|
goodButton = true;
|
|
}
|
|
if (this.disabled || this.downEvent !== null || !goodButton) {
|
|
return;
|
|
}
|
|
// Check that the target element is eligible for starting a drag
|
|
// Includes checking against the handle selector
|
|
// or whether the element contains 'dnd-no-drag' class (which should disable dragging from that
|
|
// sub-element of a draggable parent)
|
|
var goodTarget = !target.matches('.dnd-no-drag, .dnd-no-drag *') &&
|
|
(!this.handle ||
|
|
target.matches(this.handle + ', ' + this.handle + ' *'));
|
|
if (!goodTarget) {
|
|
return;
|
|
}
|
|
this.scrollContainer = scrollparent(target);
|
|
this.initialUserSelect = document.body.style.userSelect;
|
|
document.documentElement.style.userSelect = 'none'; // Permet au drag de se poursuivre normalement même
|
|
// quand on quitte un élémént avec overflow: hidden.
|
|
this.dragStarted = false;
|
|
this.downEvent = e;
|
|
if (this.downEvent.type === 'mousedown') {
|
|
var mouse = event;
|
|
this.startPosition = {
|
|
x: mouse.clientX,
|
|
y: mouse.clientY
|
|
};
|
|
}
|
|
else {
|
|
var touch = event;
|
|
this.startPosition = {
|
|
x: touch.touches[0].clientX,
|
|
y: touch.touches[0].clientY
|
|
};
|
|
}
|
|
if (!!this.delay) {
|
|
this.dragInitialised = false;
|
|
clearTimeout(this.delayTimer);
|
|
this.delayTimer = setTimeout(function () {
|
|
_this.dragInitialised = true;
|
|
_this.performVibration();
|
|
}, this.delay);
|
|
}
|
|
else {
|
|
this.dragInitialised = true;
|
|
this.performVibration();
|
|
}
|
|
document.addEventListener('click', this.onMouseClick, true);
|
|
document.addEventListener('mouseup', this.onMouseUp);
|
|
document.addEventListener('touchend', this.onMouseUp);
|
|
document.addEventListener('selectstart', this.onSelectStart);
|
|
document.addEventListener('keyup', this.onKeyUp);
|
|
setTimeout(function () {
|
|
document.addEventListener('mousemove', _this.onMouseMove);
|
|
document.addEventListener('touchmove', _this.onMouseMove, { passive: false });
|
|
document.addEventListener('easy-dnd-move', _this.onEasyDnDMove);
|
|
}, 0);
|
|
// Prevents event from bubbling to ancestor drag components and initiate several drags at the same time
|
|
e.stopPropagation();
|
|
};
|
|
// Prevent the user from accidentally causing a click event
|
|
// if they have just attempted a drag event
|
|
DragMixin.prototype.onMouseClick = function (e) {
|
|
if (this.ignoreNextClick) {
|
|
e.preventDefault();
|
|
e.stopPropagation && e.stopPropagation();
|
|
e.stopImmediatePropagation && e.stopImmediatePropagation();
|
|
this.ignoreNextClick = false;
|
|
return false;
|
|
}
|
|
};
|
|
DragMixin.prototype.onMouseMove = function (e) {
|
|
// We ignore the mousemove event that follows touchend :
|
|
if (this.downEvent === null)
|
|
{ return; }
|
|
// On touch devices, we ignore fake mouse events and deal with touch events only.
|
|
if (this.downEvent.type === 'touchstart' && e.type === 'mousemove')
|
|
{ return; }
|
|
// Find out event target and pointer position :
|
|
var target;
|
|
var x;
|
|
var y;
|
|
if (e.type === 'touchmove') {
|
|
var touch = e;
|
|
x = touch.touches[0].clientX;
|
|
y = touch.touches[0].clientY;
|
|
target = document.elementFromPoint(x, y);
|
|
if (!target) {
|
|
// Mouse going off screen. Ignore event.
|
|
return;
|
|
}
|
|
}
|
|
else {
|
|
var mouse = e;
|
|
x = mouse.clientX;
|
|
y = mouse.clientY;
|
|
target = mouse.target;
|
|
}
|
|
// Distance between current event and start position :
|
|
var dist = Math.sqrt(Math.pow(this.startPosition.x - x, 2) + Math.pow(this.startPosition.y - y, 2));
|
|
// If the drag has not begun yet and distance from initial point is greater than delta, we start the drag :
|
|
if (!this.dragStarted && dist > this.delta) {
|
|
// If they have dragged greater than the delta before the delay period has ended,
|
|
// It means that they attempted to perform another action (such as scrolling) on the page
|
|
if (!this.dragInitialised) {
|
|
clearTimeout(this.delayTimer);
|
|
}
|
|
else {
|
|
this.ignoreNextClick = true;
|
|
this.dragStarted = true;
|
|
dnd.startDrag(this, this.downEvent, this.startPosition.x, this.startPosition.y, this.type, this.data);
|
|
document.documentElement.classList.add('drag-in-progress');
|
|
}
|
|
}
|
|
// Dispatch custom easy-dnd-move event :
|
|
if (this.dragStarted) {
|
|
// If cursor/touch is at edge of container, perform scroll if available
|
|
// If this.dragTop is defined, it means they are dragging on top of another DropList/EasyDnd component
|
|
// if dropTop is a DropList, use the scrollingEdgeSize of that container if it exists, otherwise use the scrollingEdgeSize of the Drag component
|
|
var currEdgeSize = this.dragTop && this.dragTop.$props.scrollingEdgeSize !== undefined ?
|
|
this.dragTop.$props.scrollingEdgeSize :
|
|
this.scrollingEdgeSize;
|
|
if (!!currEdgeSize) {
|
|
var currScrollContainer = this.dragTop ? scrollparent(this.dragTop.$el) : this.scrollContainer;
|
|
performEdgeScroll(e, currScrollContainer, x, y, currEdgeSize);
|
|
}
|
|
else {
|
|
cancelScrollAction();
|
|
}
|
|
var custom = new CustomEvent("easy-dnd-move", {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
detail: {
|
|
x: x,
|
|
y: y,
|
|
native: e
|
|
}
|
|
});
|
|
target.dispatchEvent(custom);
|
|
}
|
|
// Prevent scroll on touch devices if they were performing a drag
|
|
if (this.dragInitialised && e.cancelable) {
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
DragMixin.prototype.onEasyDnDMove = function (e) {
|
|
dnd.mouseMove(e, null);
|
|
};
|
|
DragMixin.prototype.onMouseUp = function (e) {
|
|
var _this = this;
|
|
// On touch devices, we ignore fake mouse events and deal with touch events only.
|
|
if (this.downEvent.type === 'touchstart' && e.type === 'mouseup')
|
|
{ return; }
|
|
// This delay makes sure that when the click event that results from the mouseup is produced, the drag is
|
|
// still in progress. So by checking the flag dnd.inProgress, one can tell apart true clicks from drag and
|
|
// drop artefacts.
|
|
setTimeout(function () {
|
|
_this.cancelDragActions();
|
|
if (_this.dragStarted) {
|
|
dnd.stopDrag(e);
|
|
}
|
|
_this.finishDrag();
|
|
}, 0);
|
|
};
|
|
DragMixin.prototype.onKeyUp = function (e) {
|
|
var _this = this;
|
|
// If ESC is pressed, cancel the drag
|
|
if (e.key === 'Escape') {
|
|
this.cancelDragActions();
|
|
setTimeout(function () {
|
|
dnd.cancelDrag(e);
|
|
_this.finishDrag();
|
|
}, 0);
|
|
}
|
|
};
|
|
DragMixin.prototype.cancelDragActions = function () {
|
|
this.dragInitialised = false;
|
|
clearTimeout(this.delayTimer);
|
|
cancelScrollAction();
|
|
};
|
|
DragMixin.prototype.finishDrag = function () {
|
|
this.downEvent = null;
|
|
this.scrollContainer = null;
|
|
if (this.dragStarted) {
|
|
document.documentElement.classList.remove('drag-in-progress');
|
|
}
|
|
document.removeEventListener('click', this.onMouseClick, true);
|
|
document.removeEventListener('mousemove', this.onMouseMove);
|
|
document.removeEventListener('touchmove', this.onMouseMove);
|
|
document.removeEventListener('easy-dnd-move', this.onEasyDnDMove);
|
|
document.removeEventListener('mouseup', this.onMouseUp);
|
|
document.removeEventListener('touchend', this.onMouseUp);
|
|
document.removeEventListener('selectstart', this.onSelectStart);
|
|
document.removeEventListener('keyup', this.onKeyUp);
|
|
document.documentElement.style.userSelect = this.initialUserSelect;
|
|
};
|
|
DragMixin.prototype.dndDragStart = function (ev) {
|
|
if (ev.source === this) {
|
|
this.$emit('dragstart', ev);
|
|
}
|
|
};
|
|
DragMixin.prototype.dndDragEnd = function (ev) {
|
|
if (ev.source === this) {
|
|
this.$emit('dragend', ev);
|
|
}
|
|
};
|
|
DragMixin.prototype.created = function () {
|
|
dnd.on('dragstart', this.dndDragStart);
|
|
dnd.on('dragend', this.dndDragEnd);
|
|
};
|
|
DragMixin.prototype.mounted = function () {
|
|
this.$el.addEventListener('mousedown', this.onMouseDown);
|
|
this.$el.addEventListener('touchstart', this.onMouseDown);
|
|
};
|
|
DragMixin.prototype.beforeDestroy = function () {
|
|
dnd.off('dragstart', this.dndDragStart);
|
|
dnd.off('dragend', this.dndDragEnd);
|
|
this.$el.removeEventListener('mousedown', this.onMouseDown);
|
|
this.$el.removeEventListener('touchstart', this.onMouseDown);
|
|
};
|
|
Object.defineProperty(DragMixin.prototype, "cssClasses", {
|
|
get: function () {
|
|
var clazz = {
|
|
'dnd-drag': true
|
|
};
|
|
if (!this.disabled) {
|
|
return __assign(__assign({}, clazz), { 'drag-source': this.dragInProgress && this.dragSource === this, 'drag-mode-copy': this.currentDropMode === 'copy', 'drag-mode-cut': this.currentDropMode === 'cut', 'drag-mode-reordering': this.currentDropMode === 'reordering', 'drag-no-handle': !this.handle });
|
|
}
|
|
else {
|
|
return clazz;
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DragMixin.prototype, "currentDropMode", {
|
|
get: function () {
|
|
if (this.dragInProgress && this.dragSource === this) {
|
|
if (this.dragTop && this.dragTop['dropAllowed']) {
|
|
if (this.dragTop['reordering'])
|
|
{ return 'reordering'; }
|
|
else
|
|
{ return this.dragTop['mode']; }
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
DragMixin.prototype.createDragImage = function (selfTransform) {
|
|
var image;
|
|
if (this.$scopedSlots['drag-image']) {
|
|
var el = this.$refs['drag-image'] || document.createElement('div');
|
|
if (el.childElementCount !== 1) {
|
|
image = createDragImage(el);
|
|
}
|
|
else {
|
|
image = createDragImage(el.children.item(0));
|
|
}
|
|
}
|
|
else {
|
|
image = createDragImage(this.$el);
|
|
image.style.transform = selfTransform;
|
|
}
|
|
if (this.dragClass) {
|
|
image.classList.add(this.dragClass);
|
|
}
|
|
image.classList.add('dnd-ghost');
|
|
image['__opacity'] = this.dragImageOpacity;
|
|
return image;
|
|
};
|
|
__decorate([
|
|
Prop({ default: null, type: null }),
|
|
__metadata("design:type", String)
|
|
], DragMixin.prototype, "type", void 0);
|
|
__decorate([
|
|
Prop({ default: null, type: null }),
|
|
__metadata("design:type", Object)
|
|
], DragMixin.prototype, "data", void 0);
|
|
__decorate([
|
|
Prop({ default: 0.7, type: Number }),
|
|
__metadata("design:type", Object)
|
|
], DragMixin.prototype, "dragImageOpacity", void 0);
|
|
__decorate([
|
|
Prop({ default: false, type: Boolean }),
|
|
__metadata("design:type", Boolean)
|
|
], DragMixin.prototype, "disabled", void 0);
|
|
__decorate([
|
|
Prop({ default: false, type: Boolean }),
|
|
__metadata("design:type", Boolean)
|
|
], DragMixin.prototype, "goBack", void 0);
|
|
__decorate([
|
|
Prop({ required: false, type: String }),
|
|
__metadata("design:type", String)
|
|
], DragMixin.prototype, "handle", void 0);
|
|
__decorate([
|
|
Prop({ type: Number, default: 3 }),
|
|
__metadata("design:type", Number)
|
|
], DragMixin.prototype, "delta", void 0);
|
|
__decorate([
|
|
Prop({ type: Number, default: 0 }),
|
|
__metadata("design:type", Number)
|
|
], DragMixin.prototype, "delay", void 0);
|
|
__decorate([
|
|
Prop({ type: String, default: null }),
|
|
__metadata("design:type", String)
|
|
], DragMixin.prototype, "dragClass", void 0);
|
|
__decorate([
|
|
Prop({ type: Number, default: 0 }),
|
|
__metadata("design:type", Number)
|
|
], DragMixin.prototype, "vibration", void 0);
|
|
__decorate([
|
|
Prop({ type: Number, default: 100 }),
|
|
__metadata("design:type", Number)
|
|
], DragMixin.prototype, "scrollingEdgeSize", void 0);
|
|
DragMixin = __decorate([
|
|
Component({})
|
|
], DragMixin);
|
|
return DragMixin;
|
|
}(DragAwareMixin));
|
|
|
|
var Drag = /** @class */ (function (_super) {
|
|
__extends(Drag, _super);
|
|
function Drag() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
__decorate([
|
|
Prop({ default: 'div', type: [String, Object, Function] }),
|
|
__metadata("design:type", Object)
|
|
], Drag.prototype, "tag", void 0);
|
|
Drag = __decorate([
|
|
Component({})
|
|
], Drag);
|
|
return Drag;
|
|
}(DragMixin));
|
|
|
|
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
|
|
/* server only */
|
|
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
|
if (typeof shadowMode !== 'boolean') {
|
|
createInjectorSSR = createInjector;
|
|
createInjector = shadowMode;
|
|
shadowMode = false;
|
|
} // Vue.extend constructor export interop.
|
|
|
|
|
|
var options = typeof script === 'function' ? script.options : script; // render functions
|
|
|
|
if (template && template.render) {
|
|
options.render = template.render;
|
|
options.staticRenderFns = template.staticRenderFns;
|
|
options._compiled = true; // functional template
|
|
|
|
if (isFunctionalTemplate) {
|
|
options.functional = true;
|
|
}
|
|
} // scopedId
|
|
|
|
|
|
if (scopeId) {
|
|
options._scopeId = scopeId;
|
|
}
|
|
|
|
var hook;
|
|
|
|
if (moduleIdentifier) {
|
|
// server build
|
|
hook = function hook(context) {
|
|
// 2.3 injection
|
|
context = context || // cached call
|
|
this.$vnode && this.$vnode.ssrContext || // stateful
|
|
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
|
|
// 2.2 with runInNewContext: true
|
|
|
|
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
|
context = __VUE_SSR_CONTEXT__;
|
|
} // inject component styles
|
|
|
|
|
|
if (style) {
|
|
style.call(this, createInjectorSSR(context));
|
|
} // register component module identifier for async chunk inference
|
|
|
|
|
|
if (context && context._registeredComponents) {
|
|
context._registeredComponents.add(moduleIdentifier);
|
|
}
|
|
}; // used by ssr in case component is cached and beforeCreate
|
|
// never gets called
|
|
|
|
|
|
options._ssrRegister = hook;
|
|
} else if (style) {
|
|
hook = shadowMode ? function () {
|
|
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
|
|
} : function (context) {
|
|
style.call(this, createInjector(context));
|
|
};
|
|
}
|
|
|
|
if (hook) {
|
|
if (options.functional) {
|
|
// register for functional component in vue file
|
|
var originalRender = options.render;
|
|
|
|
options.render = function renderWithStyleInjection(h, context) {
|
|
hook.call(context);
|
|
return originalRender(h, context);
|
|
};
|
|
} else {
|
|
// inject component registration as beforeCreate hook
|
|
var existing = options.beforeCreate;
|
|
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
|
}
|
|
}
|
|
|
|
return script;
|
|
}
|
|
|
|
var normalizeComponent_1 = normalizeComponent;
|
|
|
|
var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
|
|
function createInjector(context) {
|
|
return function (id, style) {
|
|
return addStyle(id, style);
|
|
};
|
|
}
|
|
var HEAD;
|
|
var styles = {};
|
|
|
|
function addStyle(id, css) {
|
|
var group = isOldIE ? css.media || 'default' : id;
|
|
var style = styles[group] || (styles[group] = {
|
|
ids: new Set(),
|
|
styles: []
|
|
});
|
|
|
|
if (!style.ids.has(id)) {
|
|
style.ids.add(id);
|
|
var code = css.source;
|
|
|
|
if (css.map) {
|
|
// https://developer.chrome.com/devtools/docs/javascript-debugging
|
|
// this makes source maps inside style tags work properly in Chrome
|
|
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
|
|
|
|
code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
|
|
}
|
|
|
|
if (!style.element) {
|
|
style.element = document.createElement('style');
|
|
style.element.type = 'text/css';
|
|
if (css.media) { style.element.setAttribute('media', css.media); }
|
|
|
|
if (HEAD === undefined) {
|
|
HEAD = document.head || document.getElementsByTagName('head')[0];
|
|
}
|
|
|
|
HEAD.appendChild(style.element);
|
|
}
|
|
|
|
if ('styleSheet' in style.element) {
|
|
style.styles.push(code);
|
|
style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
|
|
} else {
|
|
var index = style.ids.size - 1;
|
|
var textNode = document.createTextNode(code);
|
|
var nodes = style.element.childNodes;
|
|
if (nodes[index]) { style.element.removeChild(nodes[index]); }
|
|
if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }else { style.element.appendChild(textNode); }
|
|
}
|
|
}
|
|
}
|
|
|
|
var browser = createInjector;
|
|
|
|
/* script */
|
|
var __vue_script__ = Drag;
|
|
|
|
/* template */
|
|
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.tag,_vm._g(_vm._b({tag:"component",class:_vm.cssClasses,scopedSlots:_vm._u([_vm._l((_vm.$scopedSlots),function(_,slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'component',_vm.$attrs,false),_vm.$listeners),[_vm._t("default"),_vm._v(" "),_vm._v(" "),(_vm.dragInitialised)?_c('div',{ref:"drag-image",staticClass:"__drag-image"},[_vm._t("drag-image")],2):_vm._e()],2)};
|
|
var __vue_staticRenderFns__ = [];
|
|
|
|
/* style */
|
|
var __vue_inject_styles__ = function (inject) {
|
|
if (!inject) { return }
|
|
inject("data-v-fb811e22_0", { source: ".drop-allowed.drop-in *{cursor:inherit!important}.drop-forbidden.drop-in,.drop-forbidden.drop-in *{cursor:no-drop!important}.drag-no-handle:hover{cursor:move;cursor:grab}", map: undefined, media: undefined })
|
|
,inject("data-v-fb811e22_1", { source: "html.drag-in-progress *{cursor:move!important;cursor:grabbing!important}", map: undefined, media: undefined })
|
|
,inject("data-v-fb811e22_2", { source: ".__drag-image[data-v-fb811e22]{position:fixed;top:-10000px;left:-10000px;will-change:left,top}", map: undefined, media: undefined });
|
|
|
|
};
|
|
/* scoped */
|
|
var __vue_scope_id__ = "data-v-fb811e22";
|
|
/* module identifier */
|
|
var __vue_module_identifier__ = undefined;
|
|
/* functional template */
|
|
var __vue_is_functional_template__ = false;
|
|
/* style inject SSR */
|
|
|
|
|
|
|
|
var Drag$1 = normalizeComponent_1(
|
|
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
|
__vue_inject_styles__,
|
|
__vue_script__,
|
|
__vue_scope_id__,
|
|
__vue_is_functional_template__,
|
|
__vue_module_identifier__,
|
|
browser,
|
|
undefined
|
|
);
|
|
|
|
var DropMixin = /** @class */ (function (_super) {
|
|
__extends(DropMixin, _super);
|
|
function DropMixin() {
|
|
var _this = _super.call(this) || this;
|
|
_this.isDrop = true;
|
|
return _this;
|
|
}
|
|
DropMixin.prototype.effectiveAcceptsType = function (type) {
|
|
if (this.acceptsType === null)
|
|
{ return true; }
|
|
else if (typeof (this.acceptsType) === 'string')
|
|
{ return this.acceptsType === type; }
|
|
else if (typeof (this.acceptsType) === 'object' && Array.isArray(this.acceptsType)) {
|
|
return this.acceptsType.includes(type);
|
|
}
|
|
else {
|
|
return this.acceptsType(type);
|
|
}
|
|
};
|
|
DropMixin.prototype.effectiveAcceptsData = function (data, type) {
|
|
return this.acceptsData(data, type);
|
|
};
|
|
DropMixin.prototype.created = function () {
|
|
dnd.on("dragpositionchanged", this.onDragPositionChanged);
|
|
dnd.on("dragtopchanged", this.onDragTopChanged);
|
|
dnd.on("drop", this.onDrop);
|
|
dnd.on("dragend", this.onDragEnd);
|
|
};
|
|
DropMixin.prototype.beforeDestroy = function () {
|
|
dnd.off("dragpositionchanged", this.onDragPositionChanged);
|
|
dnd.off("dragtopchanged", this.onDragTopChanged);
|
|
dnd.off("drop", this.onDrop);
|
|
dnd.off("dragend", this.onDragEnd);
|
|
};
|
|
DropMixin.prototype.onDragPositionChanged = function (event) {
|
|
if (this === event.top) {
|
|
this.$emit("dragover", event);
|
|
}
|
|
};
|
|
DropMixin.prototype.onDragTopChanged = function (event) {
|
|
if (this === event.top) {
|
|
this.$emit("dragenter", event);
|
|
}
|
|
if (this === event.previousTop) {
|
|
this.$emit("dragleave", event);
|
|
}
|
|
};
|
|
DropMixin.prototype.onDragEnd = function (event) {
|
|
if (this === event.top) {
|
|
this.$emit('dragend', event);
|
|
}
|
|
};
|
|
DropMixin.prototype.onDrop = function (event) {
|
|
if (this.dropIn && this.compatibleMode && this.dropAllowed) {
|
|
this.doDrop(event);
|
|
}
|
|
};
|
|
DropMixin.prototype.doDrop = function (event) {
|
|
this.$emit('drop', event);
|
|
event.source.$emit(this.mode, event);
|
|
};
|
|
DropMixin.prototype.mounted = function () {
|
|
var el = this.$el;
|
|
var comp = this;
|
|
el.addEventListener('easy-dnd-move', onMouseMove);
|
|
function onMouseMove(e) {
|
|
dnd.mouseMove(e, comp);
|
|
}
|
|
};
|
|
Object.defineProperty(DropMixin.prototype, "compatibleMode", {
|
|
get: function () {
|
|
if (this.dragInProgress) {
|
|
return this.mode === 'copy' || dnd.sourceListeners.hasOwnProperty(this.mode);
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropMixin.prototype, "dropIn", {
|
|
get: function () {
|
|
if (this.dragInProgress) {
|
|
return this.dragTop === this;
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropMixin.prototype, "typeAllowed", {
|
|
get: function () {
|
|
if (this.dragInProgress) {
|
|
return this.effectiveAcceptsType(this.dragType);
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropMixin.prototype, "dropAllowed", {
|
|
get: function () {
|
|
if (this.dragInProgress) {
|
|
if (this.typeAllowed) {
|
|
return this.compatibleMode && this.effectiveAcceptsData(this.dragData, this.dragType);
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropMixin.prototype, "cssClasses", {
|
|
get: function () {
|
|
var clazz = {
|
|
'dnd-drop': true
|
|
};
|
|
if (this.dropIn !== null) {
|
|
clazz['drop-in'] = this.dropIn;
|
|
clazz['drop-out'] = !this.dropIn;
|
|
}
|
|
if (this.typeAllowed !== null) {
|
|
clazz['type-allowed'] = this.typeAllowed;
|
|
clazz['type-forbidden'] = !this.typeAllowed;
|
|
}
|
|
if (this.dropAllowed !== null) {
|
|
clazz['drop-allowed'] = this.dropAllowed;
|
|
clazz['drop-forbidden'] = !this.dropAllowed;
|
|
}
|
|
return clazz;
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropMixin.prototype, "cssStyle", {
|
|
get: function () {
|
|
return {};
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
/**
|
|
* Returns true if the current drop area participates in the current drag operation.
|
|
*/
|
|
DropMixin.prototype.candidate = function (type, data, source) {
|
|
return this.effectiveAcceptsType(type);
|
|
};
|
|
DropMixin.prototype.createDragImage = function () {
|
|
var image;
|
|
if (this.$refs['drag-image']) {
|
|
var el = this.$refs['drag-image'];
|
|
if (el.childElementCount !== 1) {
|
|
image = createDragImage(el);
|
|
}
|
|
else {
|
|
image = createDragImage(el.children.item(0));
|
|
}
|
|
image['__opacity'] = this.dragImageOpacity;
|
|
image.classList.add('dnd-ghost');
|
|
}
|
|
else {
|
|
image = 'source';
|
|
}
|
|
return image;
|
|
};
|
|
__decorate([
|
|
Prop({ default: function () { return function () { return true; }; }, type: [String, Array, Function] }),
|
|
__metadata("design:type", Object)
|
|
], DropMixin.prototype, "acceptsType", void 0);
|
|
__decorate([
|
|
Prop({ default: function () { return true; }, type: Function }),
|
|
__metadata("design:type", Object)
|
|
], DropMixin.prototype, "acceptsData", void 0);
|
|
__decorate([
|
|
Prop({ default: 'copy' }),
|
|
__metadata("design:type", String)
|
|
], DropMixin.prototype, "mode", void 0);
|
|
__decorate([
|
|
Prop({ default: 0.7, type: Number }),
|
|
__metadata("design:type", Object)
|
|
], DropMixin.prototype, "dragImageOpacity", void 0);
|
|
DropMixin = __decorate([
|
|
Component({}),
|
|
__metadata("design:paramtypes", [])
|
|
], DropMixin);
|
|
return DropMixin;
|
|
}(DragAwareMixin));
|
|
|
|
var Drop = /** @class */ (function (_super) {
|
|
__extends(Drop, _super);
|
|
function Drop() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
Object.defineProperty(Drop.prototype, "showDragImage", {
|
|
get: function () {
|
|
return this.dragInProgress && this.typeAllowed && this.$scopedSlots['drag-image'];
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
__decorate([
|
|
Prop({ default: 'div', type: [String, Object, Function] }),
|
|
__metadata("design:type", Object)
|
|
], Drop.prototype, "tag", void 0);
|
|
Drop = __decorate([
|
|
Component({})
|
|
], Drop);
|
|
return Drop;
|
|
}(DropMixin));
|
|
|
|
/* script */
|
|
var __vue_script__$1 = Drop;
|
|
|
|
/* template */
|
|
var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.tag,_vm._g(_vm._b({tag:"component",class:_vm.cssClasses,style:(_vm.cssStyle),scopedSlots:_vm._u([_vm._l((_vm.$scopedSlots),function(_,slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'component',_vm.$attrs,false),_vm.$listeners),[_vm._t("default"),_vm._v(" "),_vm._v(" "),(_vm.showDragImage)?_c('div',{ref:"drag-image",staticClass:"__drag-image"},[_vm._t("drag-image",null,{"type":_vm.dragType,"data":_vm.dragData})],2):_vm._e()],2)};
|
|
var __vue_staticRenderFns__$1 = [];
|
|
|
|
/* style */
|
|
var __vue_inject_styles__$1 = function (inject) {
|
|
if (!inject) { return }
|
|
inject("data-v-1d9169a9_0", { source: ".drop-allowed.drop-in,.drop-allowed.drop-in *{cursor:pointer!important}.drop-forbidden.drop-in,.drop-forbidden.drop-in *{cursor:no-drop!important}", map: undefined, media: undefined })
|
|
,inject("data-v-1d9169a9_1", { source: ".__drag-image[data-v-1d9169a9]{position:fixed;top:-10000px;left:-10000px;will-change:left,top}", map: undefined, media: undefined });
|
|
|
|
};
|
|
/* scoped */
|
|
var __vue_scope_id__$1 = "data-v-1d9169a9";
|
|
/* module identifier */
|
|
var __vue_module_identifier__$1 = undefined;
|
|
/* functional template */
|
|
var __vue_is_functional_template__$1 = false;
|
|
/* style inject SSR */
|
|
|
|
|
|
|
|
var Drop$1 = normalizeComponent_1(
|
|
{ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
|
|
__vue_inject_styles__$1,
|
|
__vue_script__$1,
|
|
__vue_scope_id__$1,
|
|
__vue_is_functional_template__$1,
|
|
__vue_module_identifier__$1,
|
|
browser,
|
|
undefined
|
|
);
|
|
|
|
var DropMask = /** @class */ (function (_super) {
|
|
__extends(DropMask, _super);
|
|
function DropMask() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.isDropMask = true;
|
|
return _this;
|
|
}
|
|
DropMask.prototype.mounted = function () {
|
|
var el = this.$el;
|
|
var comp = this;
|
|
el.addEventListener('easy-dnd-move', onMouseMove);
|
|
function onMouseMove(e) {
|
|
dnd.mouseMove(e, comp);
|
|
}
|
|
};
|
|
DropMask.prototype.createDragImage = function () {
|
|
return 'source';
|
|
};
|
|
__decorate([
|
|
Prop({ default: 'div', type: [String, Object, Function] }),
|
|
__metadata("design:type", Object)
|
|
], DropMask.prototype, "tag", void 0);
|
|
DropMask = __decorate([
|
|
Component({})
|
|
], DropMask);
|
|
return DropMask;
|
|
}(DragAwareMixin));
|
|
|
|
/* script */
|
|
var __vue_script__$2 = DropMask;
|
|
|
|
/* template */
|
|
var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.tag,_vm._g(_vm._b({tag:"component",scopedSlots:_vm._u([_vm._l((_vm.$scopedSlots),function(_,slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'component',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
|
|
var __vue_staticRenderFns__$2 = [];
|
|
|
|
/* style */
|
|
var __vue_inject_styles__$2 = undefined;
|
|
/* scoped */
|
|
var __vue_scope_id__$2 = undefined;
|
|
/* module identifier */
|
|
var __vue_module_identifier__$2 = undefined;
|
|
/* functional template */
|
|
var __vue_is_functional_template__$2 = false;
|
|
/* style inject */
|
|
|
|
/* style inject SSR */
|
|
|
|
|
|
|
|
var DropMask$1 = normalizeComponent_1(
|
|
{ render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
|
|
__vue_inject_styles__$2,
|
|
__vue_script__$2,
|
|
__vue_scope_id__$2,
|
|
__vue_is_functional_template__$2,
|
|
__vue_module_identifier__$2,
|
|
undefined,
|
|
undefined
|
|
);
|
|
|
|
/**
|
|
* This class reacts to drag events emitted by the dnd object to manage a sequence of drag images and fade from one to the
|
|
* other as the drag progresses.
|
|
*/
|
|
var DragImagesManager = /** @class */ (function (_super) {
|
|
__extends(DragImagesManager, _super);
|
|
function DragImagesManager() {
|
|
var _this = _super.call(this) || this;
|
|
_this.selfTransform = null;
|
|
_this.clones = null;
|
|
_this.source = null;
|
|
_this.sourcePos = null;
|
|
_this.sourceClone = null;
|
|
dnd.on('dragstart', _this.onDragStart);
|
|
dnd.on('dragtopchanged', _this.onDragTopChanged);
|
|
dnd.on('dragpositionchanged', _this.onDragPositionChanged);
|
|
dnd.on('dragend', _this.onDragEnd);
|
|
return _this;
|
|
}
|
|
DragImagesManager.prototype.onDragStart = function (event) {
|
|
// If go-back=true and it is still animating while they attempt another drag,
|
|
// it will bug out. Best to clean up any existing elements on the page before
|
|
// attempting to start the next animation
|
|
this.cleanUp();
|
|
this.sourcePos = {
|
|
x: event.source.$el.getBoundingClientRect().left,
|
|
y: event.source.$el.getBoundingClientRect().top
|
|
};
|
|
this.selfTransform = "translate(-" + (event.position.x - this.sourcePos.x) + "px, -" + (event.position.y - this.sourcePos.y) + "px)";
|
|
this.clones = new Map();
|
|
this.source = event.source;
|
|
};
|
|
DragImagesManager.prototype.onDragEnd = function (event) {
|
|
var _this = this;
|
|
Vue.nextTick(function () {
|
|
if (!event.success && _this.source && _this.source['goBack']) {
|
|
// Restore the drag image that is active when hovering outside any drop zone :
|
|
var img_1 = _this.switch(null);
|
|
// Move it back to its original place :
|
|
window.requestAnimationFrame(function () {
|
|
img_1.style.transition = "all 0.5s";
|
|
window.requestAnimationFrame(function () {
|
|
img_1.style.left = _this.sourcePos.x + "px";
|
|
img_1.style.top = _this.sourcePos.y + "px";
|
|
img_1.style.transform = "translate(0,0)";
|
|
var handler = function () {
|
|
_this.cleanUp();
|
|
img_1.removeEventListener("transitionend", handler);
|
|
};
|
|
img_1.addEventListener("transitionend", handler);
|
|
});
|
|
});
|
|
}
|
|
else {
|
|
_this.cleanUp();
|
|
}
|
|
});
|
|
};
|
|
DragImagesManager.prototype.cleanUp = function () {
|
|
if (this.clones) {
|
|
this.clones.forEach(function (clone) {
|
|
if (clone.parentNode === document.body) {
|
|
document.body.removeChild(clone);
|
|
}
|
|
});
|
|
}
|
|
if (this.sourceClone !== null) {
|
|
if (this.sourceClone.parentNode === document.body) {
|
|
document.body.removeChild(this.sourceClone);
|
|
}
|
|
}
|
|
this.selfTransform = null;
|
|
this.clones = null;
|
|
this.source = null;
|
|
this.sourceClone = null;
|
|
this.sourcePos = null;
|
|
};
|
|
DragImagesManager.prototype.onDragTopChanged = function (event) {
|
|
this.switch(event.top);
|
|
};
|
|
DragImagesManager.prototype.switch = function (top) {
|
|
this.clones.forEach(function (clone) {
|
|
clone.style.opacity = "0";
|
|
});
|
|
if (this.sourceClone) {
|
|
this.sourceClone.style.opacity = "0";
|
|
}
|
|
var activeClone;
|
|
if (top === null) {
|
|
activeClone = this.getSourceClone();
|
|
}
|
|
else {
|
|
if (!this.clones.has(top)) {
|
|
var clone = top['createDragImage'](this.selfTransform);
|
|
if (clone === 'source') {
|
|
clone = this.getSourceClone();
|
|
}
|
|
else if (clone !== null) {
|
|
clone.style.opacity = '0';
|
|
document.body.appendChild(clone);
|
|
}
|
|
this.clones.set(top, clone);
|
|
}
|
|
activeClone = this.clones.get(top);
|
|
}
|
|
if (activeClone !== null) {
|
|
activeClone.offsetWidth; // Forces browser reflow
|
|
activeClone.style.opacity = activeClone['__opacity'];
|
|
activeClone.style.visibility = 'visible';
|
|
}
|
|
return activeClone;
|
|
};
|
|
DragImagesManager.prototype.getSourceClone = function () {
|
|
if (this.sourceClone === null) {
|
|
this.sourceClone = this.source['createDragImage'](this.selfTransform);
|
|
this.sourceClone.style.opacity = '0';
|
|
document.body.appendChild(this.sourceClone);
|
|
}
|
|
return this.sourceClone;
|
|
};
|
|
DragImagesManager.prototype.onDragPositionChanged = function (event) {
|
|
this.clones.forEach(function (clone) {
|
|
clone.style.left = dnd.position.x + "px";
|
|
clone.style.top = dnd.position.y + "px";
|
|
});
|
|
if (this.sourceClone) {
|
|
this.sourceClone.style.left = dnd.position.x + "px";
|
|
this.sourceClone.style.top = dnd.position.y + "px";
|
|
}
|
|
};
|
|
DragImagesManager = __decorate([
|
|
Component({}) // Necessary to set proper "this" context in event listeners.
|
|
,
|
|
__metadata("design:paramtypes", [])
|
|
], DragImagesManager);
|
|
return DragImagesManager;
|
|
}(Vue));
|
|
new DragImagesManager();
|
|
|
|
var DragFeedback = /** @class */ (function (_super) {
|
|
__extends(DragFeedback, _super);
|
|
function DragFeedback() {
|
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
}
|
|
DragFeedback = __decorate([
|
|
Component({})
|
|
], DragFeedback);
|
|
return DragFeedback;
|
|
}(Vue));
|
|
|
|
/* script */
|
|
var __vue_script__$3 = DragFeedback;
|
|
|
|
/* template */
|
|
var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"DragFeedback"},[_vm._t("default")],2)};
|
|
var __vue_staticRenderFns__$3 = [];
|
|
|
|
/* style */
|
|
var __vue_inject_styles__$3 = undefined;
|
|
/* scoped */
|
|
var __vue_scope_id__$3 = "data-v-0589f3cb";
|
|
/* module identifier */
|
|
var __vue_module_identifier__$3 = undefined;
|
|
/* functional template */
|
|
var __vue_is_functional_template__$3 = false;
|
|
/* style inject */
|
|
|
|
/* style inject SSR */
|
|
|
|
|
|
|
|
var DragFeedback$1 = normalizeComponent_1(
|
|
{ render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
|
|
__vue_inject_styles__$3,
|
|
__vue_script__$3,
|
|
__vue_scope_id__$3,
|
|
__vue_is_functional_template__$3,
|
|
__vue_module_identifier__$3,
|
|
undefined,
|
|
undefined
|
|
);
|
|
|
|
var Grid = /** @class */ (function () {
|
|
function Grid(collection, upToIndex, row, fromIndex) {
|
|
var e_1, _a;
|
|
this.magnets = [];
|
|
this.reference = collection.item(0).parentNode;
|
|
this.referenceOriginalPosition = {
|
|
x: this.reference.getBoundingClientRect().left - this.reference.scrollLeft,
|
|
y: this.reference.getBoundingClientRect().top - this.reference.scrollTop,
|
|
};
|
|
var index = 0;
|
|
try {
|
|
for (var collection_1 = __values(collection), collection_1_1 = collection_1.next(); !collection_1_1.done; collection_1_1 = collection_1.next()) {
|
|
var child = collection_1_1.value;
|
|
if (index > upToIndex)
|
|
{ break; }
|
|
var rect = child.getBoundingClientRect();
|
|
var hasNestedDrop = child.classList.contains("dnd-drop") || child.getElementsByClassName("dnd-drop").length > 0;
|
|
var horizontal = null;
|
|
if (hasNestedDrop) {
|
|
if (row === 'auto') {
|
|
// Auto mode not supported for now. Row or column must be defined explicitly if there are nested drop lists.
|
|
throw new Error("Easy-DnD error : a drop list is missing one of these attributes : 'row' or 'column'.");
|
|
}
|
|
else {
|
|
horizontal = row === 'row';
|
|
}
|
|
}
|
|
if (fromIndex === null) {
|
|
// Inserting mode.
|
|
this.magnets.push(hasNestedDrop ? this.before(rect, horizontal) : this.center(rect));
|
|
}
|
|
else {
|
|
// Reordering mode.
|
|
this.magnets.push(hasNestedDrop ? (fromIndex < index ? this.after : this.before)(rect, horizontal) : this.center(rect));
|
|
}
|
|
// Debug : show magnets :
|
|
//document.body.insertAdjacentHTML("beforeend", "<div style='background-color: red; position: fixed; width: 1px; height: 1px; top:" + this.magnets[index].y + "px; left:" + this.magnets[index].x + "px;' ></div>")
|
|
index++;
|
|
}
|
|
}
|
|
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
finally {
|
|
try {
|
|
if (collection_1_1 && !collection_1_1.done && (_a = collection_1.return)) { _a.call(collection_1); }
|
|
}
|
|
finally { if (e_1) { throw e_1.error; } }
|
|
}
|
|
}
|
|
/**
|
|
* Returns the center of the rectangle.
|
|
*/
|
|
Grid.prototype.center = function (rect) {
|
|
return {
|
|
x: rect.left + rect.width / 2,
|
|
y: rect.top + rect.height / 2
|
|
};
|
|
};
|
|
/**
|
|
* When horizontal is true / false, returns middle of the left / top side of the rectangle.
|
|
*/
|
|
Grid.prototype.before = function (rect, horizontal) {
|
|
return horizontal ? {
|
|
x: rect.left,
|
|
y: rect.top + rect.height / 2
|
|
} : {
|
|
x: rect.left + rect.width / 2,
|
|
y: rect.top
|
|
};
|
|
};
|
|
/**
|
|
* When horizontal is true / false, returns middle of the right / bottom side of the rectangle.
|
|
*/
|
|
Grid.prototype.after = function (rect, horizontal) {
|
|
return horizontal ? {
|
|
x: rect.left + rect.width,
|
|
y: rect.top + rect.height / 2
|
|
} : {
|
|
x: rect.left + rect.width / 2,
|
|
y: rect.top + rect.height
|
|
};
|
|
};
|
|
/**
|
|
* In case the user scrolls during the drag, the position of the magnets are not what they used to be when the drag
|
|
* started. A correction must be applied that takes into account the amount of scroll. This correction is the
|
|
* difference between the current position of the parent element and its position when the drag started.
|
|
*/
|
|
Grid.prototype.correction = function () {
|
|
return {
|
|
x: this.reference.getBoundingClientRect().left - this.reference.scrollLeft - this.referenceOriginalPosition.x,
|
|
y: this.reference.getBoundingClientRect().top - this.reference.scrollTop - this.referenceOriginalPosition.y,
|
|
};
|
|
};
|
|
Grid.prototype.closestIndex = function (position) {
|
|
var x = position.x - this.correction().x;
|
|
var y = position.y - this.correction().y;
|
|
var minDist = 999999;
|
|
var index = -1;
|
|
for (var i = 0; i < this.magnets.length; i++) {
|
|
var magnet = this.magnets[i];
|
|
var dist = Math.sqrt(Math.pow(magnet.x - x, 2) + Math.pow(magnet.y - y, 2));
|
|
if (dist < minDist) {
|
|
minDist = dist;
|
|
index = i;
|
|
}
|
|
}
|
|
return index;
|
|
};
|
|
return Grid;
|
|
}());
|
|
|
|
var DnDEvent = /** @class */ (function () {
|
|
function DnDEvent() {
|
|
}
|
|
return DnDEvent;
|
|
}());
|
|
var ReorderEvent = /** @class */ (function () {
|
|
function ReorderEvent(from, to) {
|
|
this.from = from;
|
|
this.to = to;
|
|
}
|
|
ReorderEvent.prototype.apply = function (array) {
|
|
var tmp = array[this.from];
|
|
array.splice(this.from, 1);
|
|
array.splice(this.to, 0, tmp);
|
|
};
|
|
return ReorderEvent;
|
|
}());
|
|
var InsertEvent = /** @class */ (function () {
|
|
function InsertEvent(type, data, index) {
|
|
this.type = type;
|
|
this.data = data;
|
|
this.index = index;
|
|
}
|
|
return InsertEvent;
|
|
}());
|
|
|
|
var DropList = /** @class */ (function (_super) {
|
|
__extends(DropList, _super);
|
|
function DropList() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this.grid = null;
|
|
_this.forbiddenKeys = [];
|
|
_this.feedbackKey = null;
|
|
_this.fromIndex = null;
|
|
return _this;
|
|
}
|
|
Object.defineProperty(DropList.prototype, "rootTag", {
|
|
get: function () {
|
|
if (this.noAnimations) {
|
|
return this.tag ? this.tag : 'div';
|
|
}
|
|
else {
|
|
return "transition-group";
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "rootProps", {
|
|
get: function () {
|
|
if (this.noAnimations) {
|
|
return this.$attrs;
|
|
}
|
|
else {
|
|
return {
|
|
tag: this.tag,
|
|
duration: { enter: 0, leave: 0 },
|
|
css: false
|
|
};
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "rootListeners", {
|
|
get: function () {
|
|
if (this.noAnimations) {
|
|
return this.$listeners;
|
|
}
|
|
else {
|
|
return {};
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
DropList.prototype.created = function () {
|
|
dnd.on("dragstart", this.onDragStart);
|
|
dnd.on("dragend", this.onDragEnd);
|
|
};
|
|
Object.defineProperty(DropList.prototype, "direction", {
|
|
get: function () {
|
|
if (this.row)
|
|
{ return 'row'; }
|
|
if (this.column)
|
|
{ return 'column'; }
|
|
return 'auto';
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
DropList.prototype.beforeDestroy = function () {
|
|
dnd.off("dragstart", this.onDragStart);
|
|
dnd.off("dragend", this.onDragEnd);
|
|
};
|
|
// Presence of feedback node in the DOM and of keys in the virtual DOM required => delayed until what
|
|
// depends on drag data has been processed.
|
|
DropList.prototype.refresh = function () {
|
|
var _this = this;
|
|
this.$nextTick(function () {
|
|
_this.grid = _this.computeInsertingGrid();
|
|
_this.feedbackKey = _this.computeFeedbackKey();
|
|
_this.forbiddenKeys = _this.computeForbiddenKeys();
|
|
});
|
|
};
|
|
DropList.prototype.onDragStart = function (event) {
|
|
if (this.candidate(dnd.type, dnd.data, dnd.source)) {
|
|
if (this.reordering) {
|
|
this.fromIndex = Array.prototype.indexOf.call(event.source.$el.parentElement.children, event.source.$el);
|
|
this.grid = this.computeReorderingGrid();
|
|
}
|
|
else {
|
|
this.refresh();
|
|
}
|
|
}
|
|
};
|
|
DropList.prototype.onDragEnd = function () {
|
|
this.fromIndex = null;
|
|
this.feedbackKey = null;
|
|
this.forbiddenKeys = null;
|
|
this.grid = null;
|
|
};
|
|
Object.defineProperty(DropList.prototype, "reordering", {
|
|
get: function () {
|
|
if (dnd.inProgress) {
|
|
return dnd.source.$el.parentElement === this.$el && this.$listeners.hasOwnProperty('reorder');
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "closestIndex", {
|
|
get: function () {
|
|
if (this.grid) {
|
|
return this.grid.closestIndex(dnd.position);
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "dropAllowed", {
|
|
get: function () {
|
|
if (this.dragInProgress) {
|
|
if (this.reordering) {
|
|
return this.items.length > 1;
|
|
}
|
|
else {
|
|
var superDropAllowed = DropMixin['options'].computed.dropAllowed.get.call(this);
|
|
if (!superDropAllowed) {
|
|
return false;
|
|
}
|
|
else {
|
|
if (this.forbiddenKeys !== null && this.feedbackKey !== null) {
|
|
return !this.forbiddenKeys.includes(this.feedbackKey);
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
return null;
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "itemsBeforeFeedback", {
|
|
get: function () {
|
|
if (this.closestIndex === 0) {
|
|
return [];
|
|
}
|
|
else {
|
|
return this.items.slice(0, this.closestIndex);
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "itemsAfterFeedback", {
|
|
get: function () {
|
|
if (this.closestIndex === this.items.length) {
|
|
return [];
|
|
}
|
|
else {
|
|
return this.items.slice(this.closestIndex);
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "itemsBeforeReorderingFeedback", {
|
|
get: function () {
|
|
if (this.closestIndex <= this.fromIndex) {
|
|
return this.items.slice(0, this.closestIndex);
|
|
}
|
|
else {
|
|
return this.items.slice(0, this.closestIndex + 1);
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "itemsAfterReorderingFeedback", {
|
|
get: function () {
|
|
if (this.closestIndex <= this.fromIndex) {
|
|
return this.items.slice(this.closestIndex);
|
|
}
|
|
else {
|
|
return this.items.slice(this.closestIndex + 1);
|
|
}
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "reorderedItems", {
|
|
get: function () {
|
|
var toIndex = this.closestIndex;
|
|
var reordered = __spread(this.items);
|
|
var temp = reordered[this.fromIndex];
|
|
reordered.splice(this.fromIndex, 1);
|
|
reordered.splice(toIndex, 0, temp);
|
|
return reordered;
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "clazz", {
|
|
get: function () {
|
|
return __assign({ 'drop-list': true, 'reordering': this.reordering === true, 'inserting': this.reordering === false }, (this.reordering === false ? this.cssClasses : { 'dnd-drop': true }));
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "style", {
|
|
get: function () {
|
|
return __assign({}, (this.reordering === false ? this.cssStyle : {}));
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "showDragFeedback", {
|
|
get: function () {
|
|
return this.dragInProgress && this.typeAllowed && !this.reordering;
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "showInsertingDragImage", {
|
|
get: function () {
|
|
return this.dragInProgress && this.typeAllowed && !this.reordering && this.$scopedSlots.hasOwnProperty("drag-image");
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(DropList.prototype, "showReorderingDragImage", {
|
|
get: function () {
|
|
return this.dragInProgress && this.reordering && this.$scopedSlots.hasOwnProperty("reordering-drag-image");
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
DropList.prototype.doDrop = function (event) {
|
|
if (this.reordering) {
|
|
if (this.fromIndex !== this.closestIndex) {
|
|
this.$emit('reorder', new ReorderEvent(this.fromIndex, this.closestIndex));
|
|
}
|
|
}
|
|
else {
|
|
DropMixin['options'].methods.doDrop.call(this, event);
|
|
this.$emit('insert', new InsertEvent(event.type, event.data, this.closestIndex));
|
|
}
|
|
};
|
|
DropList.prototype.candidate = function (type, data, source) {
|
|
var _a;
|
|
var superCandidate = (_a = DropMixin['options'].methods.candidate).call.apply(_a, __spread([this], arguments));
|
|
return (superCandidate && (this.$listeners.hasOwnProperty("insert") || this.$listeners.hasOwnProperty("drop"))) || this.reordering;
|
|
};
|
|
DropList.prototype.computeForbiddenKeys = function () {
|
|
var vnodes = this.noAnimations ? [] : this.$children[0].$vnode.context.$children[0].$slots.default;
|
|
return vnodes
|
|
.map(function (vn) { return vn.key; })
|
|
.filter(function (k) { return k !== undefined && k !== 'drag-image' && k !== 'drag-feedback'; });
|
|
};
|
|
DropList.prototype.computeFeedbackKey = function () {
|
|
return this.$refs['feedback']['$slots']['default'][0]['key'];
|
|
};
|
|
Object.defineProperty(DropList.prototype, "hasReorderingFeedback", {
|
|
get: function () {
|
|
return this.$scopedSlots.hasOwnProperty("reordering-feedback");
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
DropList.prototype.computeInsertingGrid = function () {
|
|
var feedbackParent = this.$refs['feedback']['$el'];
|
|
var feedback = feedbackParent.children[0];
|
|
var clone = feedback.cloneNode(true);
|
|
var tg = this.$el;
|
|
if (tg.children.length > this.items.length) {
|
|
tg.insertBefore(clone, tg.children[this.items.length]);
|
|
}
|
|
else {
|
|
tg.appendChild(clone);
|
|
}
|
|
var grid = new Grid(tg.children, this.items.length, this.direction, null);
|
|
tg.removeChild(clone);
|
|
return grid;
|
|
};
|
|
DropList.prototype.computeReorderingGrid = function () {
|
|
var tg = this.$el;
|
|
return new Grid(tg.children, this.items.length - 1, this.direction, this.fromIndex);
|
|
};
|
|
DropList.prototype.createDragImage = function () {
|
|
var image;
|
|
if (this.$refs['drag-image']) {
|
|
var el = this.$refs['drag-image'];
|
|
var model = void 0;
|
|
if (el.childElementCount !== 1) {
|
|
model = el;
|
|
}
|
|
else {
|
|
model = el.children.item(0);
|
|
}
|
|
var clone = model.cloneNode(true);
|
|
var tg = this.$el;
|
|
tg.appendChild(clone);
|
|
image = createDragImage(clone);
|
|
tg.removeChild(clone);
|
|
image['__opacity'] = this.dragImageOpacity;
|
|
image.classList.add('dnd-ghost');
|
|
}
|
|
else {
|
|
image = 'source';
|
|
}
|
|
return image;
|
|
};
|
|
__decorate([
|
|
Prop({ default: 'div', type: [String, Object, Function] }),
|
|
__metadata("design:type", Object)
|
|
], DropList.prototype, "tag", void 0);
|
|
__decorate([
|
|
Prop(),
|
|
__metadata("design:type", Array)
|
|
], DropList.prototype, "items", void 0);
|
|
__decorate([
|
|
Prop({ default: null }),
|
|
__metadata("design:type", Boolean)
|
|
], DropList.prototype, "row", void 0);
|
|
__decorate([
|
|
Prop({ default: null, type: Boolean }),
|
|
__metadata("design:type", Boolean)
|
|
], DropList.prototype, "column", void 0);
|
|
__decorate([
|
|
Prop({ default: false, type: Boolean }),
|
|
__metadata("design:type", Boolean)
|
|
], DropList.prototype, "noAnimations", void 0);
|
|
__decorate([
|
|
Prop({ type: Number, default: undefined }),
|
|
__metadata("design:type", Number)
|
|
], DropList.prototype, "scrollingEdgeSize", void 0);
|
|
DropList = __decorate([
|
|
Component({
|
|
components: { DragFeedback: DragFeedback$1 },
|
|
inheritAttrs: false
|
|
})
|
|
], DropList);
|
|
return DropList;
|
|
}(DropMixin));
|
|
|
|
/* script */
|
|
var __vue_script__$4 = DropList;
|
|
|
|
/* template */
|
|
var __vue_render__$4 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.rootTag,_vm._g(_vm._b({tag:"component",class:_vm.clazz,style:(_vm.style)},'component',_vm.rootProps,false),_vm.rootListeners),[(_vm.dropIn && _vm.dropAllowed)?[(_vm.reordering)?[(_vm.hasReorderingFeedback)?[_vm._l((_vm.itemsBeforeReorderingFeedback),function(item,index){return _vm._t("item",null,{"item":item,"index":index})}),_vm._v(" "),_vm._t("reordering-feedback",null,{"item":_vm.items[_vm.fromIndex]}),_vm._v(" "),_vm._l((_vm.itemsAfterReorderingFeedback),function(item,index){return _vm._t("item",null,{"item":item,"index":_vm.itemsBeforeReorderingFeedback.length + index})})]:[_vm._l((_vm.reorderedItems),function(item,index){return _vm._t("item",null,{"item":item,"index":index,"reorder":index === _vm.closestIndex})})]]:[_vm._l((_vm.itemsBeforeFeedback),function(item,index){return _vm._t("item",null,{"item":item,"reorder":false,"index":index})}),_vm._v(" "),_vm._t("feedback",null,{"data":_vm.dragData,"type":_vm.dragType}),_vm._v(" "),_vm._l((_vm.itemsAfterFeedback),function(item,index){return _vm._t("item",null,{"item":item,"reorder":false,"index":_vm.itemsBeforeFeedback.length + index})})]]:[_vm._l((_vm.items),function(item,index){return _vm._t("item",null,{"item":item,"reorder":false,"index":index})}),_vm._v(" "),(_vm.items.length < 1)?_vm._t("empty"):_vm._e()],_vm._v(" "),(_vm.showDragFeedback)?_c('drag-feedback',{key:"drag-feedback",ref:"feedback",staticClass:"__feedback"},[_vm._t("feedback",null,{"data":_vm.dragData,"type":_vm.dragType})],2):_vm._e(),_vm._v(" "),(_vm.showInsertingDragImage)?_c('div',{key:"inserting-drag-image",ref:"drag-image",staticClass:"__drag-image"},[_vm._t("drag-image",null,{"type":_vm.dragType,"data":_vm.dragData})],2):_vm._e(),_vm._v(" "),(_vm.showReorderingDragImage)?_c('div',{key:"reordering-drag-image",ref:"drag-image",staticClass:"__drag-image"},[_vm._t("reordering-drag-image",null,{"item":_vm.items[_vm.fromIndex]})],2):_vm._e(),_vm._v(" "),_vm._t("default")],2)};
|
|
var __vue_staticRenderFns__$4 = [];
|
|
|
|
/* style */
|
|
var __vue_inject_styles__$4 = function (inject) {
|
|
if (!inject) { return }
|
|
inject("data-v-228404f8_0", { source: ".drop-list[data-v-228404f8]>*{transition:transform .2s}.__feedback[data-v-228404f8]{display:none}.__drag-image[data-v-228404f8]{position:fixed;top:-10000px;left:-10000px;will-change:left,top}", map: undefined, media: undefined })
|
|
,inject("data-v-228404f8_1", { source: ".drop-allowed.drop-in *{cursor:inherit!important}.drop-forbidden.drop-in,.drop-forbidden.drop-in *{cursor:no-drop!important}", map: undefined, media: undefined });
|
|
|
|
};
|
|
/* scoped */
|
|
var __vue_scope_id__$4 = "data-v-228404f8";
|
|
/* module identifier */
|
|
var __vue_module_identifier__$4 = undefined;
|
|
/* functional template */
|
|
var __vue_is_functional_template__$4 = false;
|
|
/* style inject SSR */
|
|
|
|
|
|
|
|
var DropList$1 = normalizeComponent_1(
|
|
{ render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
|
|
__vue_inject_styles__$4,
|
|
__vue_script__$4,
|
|
__vue_scope_id__$4,
|
|
__vue_is_functional_template__$4,
|
|
__vue_module_identifier__$4,
|
|
browser,
|
|
undefined
|
|
);
|
|
|
|
export { DnDEvent, Drag$1 as Drag, DragAwareMixin, DragImagesManager, DragMixin, Drop$1 as Drop, DropList$1 as DropList, DropMask$1 as DropMask, DropMixin, InsertEvent, ReorderEvent, createDragImage, dnd };
|