@progress/kendo-ui/js/kendo.reorderable.js

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

Object.defineProperties(exports, {
	__esModule: { value: true },
	[Symbol.toStringTag]: { value: "Module" }
});
require("./kendo.core-kmRaf_Lg.js");
require("./kendo.icons.js");
require("./kendo.draganddrop.js");
//#region ../src/kendo.reorderable.js
const __meta__ = {
	id: "reorderable",
	name: "Reorderable",
	category: "framework",
	depends: [
		"core",
		"draganddrop",
		"icons"
	],
	advanced: true
};
(function($, undefined) {
	var kendo = window.kendo, outerWidth = kendo._outerWidth, outerHeight = kendo._outerHeight, getOffset = kendo.getOffset, Widget = kendo.ui.Widget, CHANGE = "change";
	var Reorderable = Widget.extend({
		init: function(element, options) {
			var that = this;
			Widget.fn.init.call(that, element, options);
			element = that.element;
			options = that.options;
			that._isRtl = kendo.support.isRtl(element);
			that._cueUpdatedByDrag = false;
			that._initDraggable();
			if (!that.options.dropFilter) that.options.dropFilter = that.draggable.options.filter;
			that.reorderDropCue = that.options.reorderDropCue;
			if (that.reorderDropCue) that.reorderDropCue.css("pointer-events", "none");
			element.find(options.dropFilter).kendoDropTarget({
				group: that.draggable.options.group,
				dragenter: function(e) {
					var externalDraggableInstance = that._externalDraggable(e);
					that._cueUpdatedByDrag = false;
					if (!that._draggable && !externalDraggableInstance) return;
					if (externalDraggableInstance) that._handleExternalDraggable(externalDraggableInstance);
					var dropTarget = this.element, offset;
					var denied = that._isPartOfSortable(that._draggable) ? !that._dropTargetAllowed(dropTarget) || that._isLastDraggable() : false;
					that.toggleHintClass(e.draggable.hint, denied);
					if (!denied) {
						offset = getOffset(dropTarget);
						var cueOffset = {
							top: offset.top,
							left: offset.left
						};
						var isHorizontal = options.orientation === "horizontal";
						if (!options.smartPosition || options.inSameContainer && !options.inSameContainer({
							source: dropTarget,
							target: that._draggable,
							sourceIndex: that._index(dropTarget),
							targetIndex: that._index(that._draggable)
						})) that._dropTarget = dropTarget;
						else if ((isHorizontal && that._isRtl ? that._index(dropTarget) < that._index(that._draggable) : that._index(dropTarget) > that._index(that._draggable)) && options.smartPosition) cueOffset[isHorizontal ? "left" : "top"] += isHorizontal ? outerWidth(dropTarget) : outerHeight(dropTarget);
						that._normalizeCueOffset(cueOffset, dropTarget, isHorizontal);
						that.reorderDropCue.css({
							height: outerHeight(dropTarget),
							top: cueOffset.top,
							left: cueOffset.left,
							zIndex: 19e3
						});
						if (options.positionDropCue) options.positionDropCue(that.reorderDropCue, dropTarget);
						that.reorderDropCue.appendTo(document.body);
					}
				},
				dragleave: function(e) {
					that._dropTarget = null;
				},
				drop: function() {
					that._dropTarget = null;
					if (!that._draggable) return;
					const dropTarget = this.element;
					const draggable = that._draggable;
					let dropIndex = that._index(dropTarget);
					const dropTargetOffset = getOffset(dropTarget);
					that._normalizeCueOffset(dropTargetOffset, dropTarget, options.orientation === "horizontal");
					const reorderCueOffset = getOffset(that.reorderDropCue);
					const horizontalMidPoint = dropTargetOffset.left + outerWidth(dropTarget) / 2;
					const verticalMidPoint = dropTargetOffset.top + outerHeight(dropTarget) / 2;
					const horizontalOffset = that._isRtl ? reorderCueOffset.left <= horizontalMidPoint : reorderCueOffset.left > horizontalMidPoint;
					const reorderCueVerticalMiddlePoint = reorderCueOffset.top + outerHeight(that.reorderDropCue) / 2;
					const isAfter = that.options.orientation === "horizontal" ? horizontalOffset : reorderCueVerticalMiddlePoint > verticalMidPoint;
					dropIndex = isAfter ? dropIndex + 1 : dropIndex;
					if (that._dropTargetAllowed(dropTarget) && !that._isLastDraggable() && (that._index(draggable) !== dropIndex || that.options.allowDropAfterLastItem)) that.trigger(CHANGE, {
						element: that._draggable,
						target: dropTarget,
						oldIndex: that._index(draggable),
						newIndex: that._index(dropTarget),
						position: isAfter ? "after" : "before"
					});
					if (that.reorderDropCue) that.reorderDropCue.remove();
				}
			});
			that.draggable.bind([
				"dragcancel",
				"dragend",
				"dragstart",
				"drag"
			], {
				dragcancel: that._dragcancel.bind(that),
				dragend: that._dragend.bind(that),
				dragstart: that._dragstart.bind(that),
				drag: that._drag.bind(that)
			});
			Widget.fn.endInit.call(that);
		},
		options: {
			name: "Reorderable",
			filter: "*",
			orientation: "horizontal",
			deniedIcon: "cancel",
			allowIcon: "plus",
			reorderDropCue: $("<div class=\"k-reorder-cue\"></div></div>"),
			smartPosition: true
		},
		events: [CHANGE],
		toggleHintClass: function(hint, denied) {
			var options = this.options, status;
			hint = $(hint);
			if (hint.find(".k-drag-status").length > 0) {
				status = hint.find(".k-drag-status").eq(0);
				kendo.ui.icon(status, { icon: denied ? options.deniedIcon : options.allowIcon });
				if (denied) status.attr("ref-reorderable-denied", true);
				else status.removeAttr("ref-reorderable-denied");
			}
		},
		_initDraggable: function() {
			let that = this, options = that.options;
			that.draggable = options.draggable || new kendo.ui.Draggable(that.element, {
				group: kendo.guid() + "-reorderable",
				autoScroll: true,
				filter: options.filter,
				hint: options.hint
			});
			let elementUnderCursorFunc = that.draggable._elementUnderCursor;
			that.draggable._elementUnderCursor = function(e) {
				let shouldModifyCue = that.reorderDropCue && that.reorderDropCue.is(":visible");
				if (shouldModifyCue) that.reorderDropCue.hide();
				let element = elementUnderCursorFunc.call(that.draggable, e);
				if (shouldModifyCue) that.reorderDropCue.show();
				return element;
			};
		},
		_normalizeCueOffset: function(cueOffset, dropTarget, isHorizontal) {
			const header = dropTarget.closest(".k-grid-header-locked,.k-grid-header-wrap");
			if (!header.length) return;
			const gridOffset = getOffset(header);
			if (isHorizontal) {
				if (cueOffset.left < gridOffset.left && this._isRtl) cueOffset.left = gridOffset.left;
				if (cueOffset.left > gridOffset.left + outerWidth(header) && !this._isRtl) cueOffset.left = gridOffset.left + outerWidth(header);
			}
		},
		_handleExternalDraggable: function(draggable) {
			var that = this;
			var draggableFilter = that.options.dropFilter.trimStart();
			if (draggableFilter && draggableFilter[0] == ">") draggableFilter = draggableFilter.substring(1);
			that._dragcancelHandler = that._dragcancel.bind(that);
			that._dragendHandler = that._dragend.bind(that);
			that._dragstartHandler = that._dragstart.bind(that);
			that._dragHandler = that._drag.bind(that);
			that._draggable = draggable.currentTarget.closest(draggableFilter);
			that._draggableInstance = draggable;
			that._elements = that.element.find(that.options.dropFilter);
			draggable.bind([
				"dragcancel",
				"dragend",
				"dragstart",
				"drag"
			], {
				dragcancel: that._dragcancelHandler,
				dragend: that._dragendHandler,
				dragstart: that._dragstartHandler,
				drag: that._dragHandler
			});
		},
		_dragcancel: function() {
			var that = this;
			if (that._draggableInstance && (that._dragcancelHandler || that._dragendHandler || that._dragstartHandler || that._dragHandler)) that._draggableInstance.unbind({
				dragcancel: that._dragcancelHandler,
				dragend: that._dragendHandler,
				dragstart: that._dragstartHandler,
				drag: that._dragHandler
			});
			if (that.reorderDropCue) that.reorderDropCue.remove();
			that._draggable = null;
			that._elements = null;
		},
		_dragend: function() {
			var that = this;
			if (that._draggableInstance && (that._dragcancelHandler || that._dragendHandler || that._dragstartHandler || that._dragHandler)) that._draggableInstance.unbind({
				dragcancel: that._dragcancelHandler,
				dragend: that._dragendHandler,
				dragstart: that._dragstartHandler,
				drag: that._dragHandler
			});
			if (that.reorderDropCue) that.reorderDropCue.remove();
			that._draggable = null;
			that._elements = null;
		},
		_dragstart: function(e) {
			var that = this;
			var target = $(e.currentTarget);
			var draggableFilter = that.options.dropFilter.trimStart();
			if (draggableFilter && draggableFilter[0] == ">") draggableFilter = draggableFilter.substring(1);
			that._draggable = target.is(draggableFilter) ? target : target.closest(draggableFilter);
			that._elements = that.element.find(that.options.dropFilter);
		},
		_drag: function(e) {
			var that = this, dropIndex, sourceIndex, denied, offset = {}, target, draggableFilter = that.options.dropFilter.trimStart();
			if (draggableFilter && draggableFilter[0] == ">") draggableFilter = draggableFilter.substring(1);
			target = $(e.currentTarget).closest(draggableFilter);
			if (!that._dropTarget || that.options.smartPosition && e.sender.hint.find("[ref-reorderable-denied]").length) return;
			dropIndex = that._index(that._dropTarget);
			sourceIndex = that._index(target);
			sourceIndex = dropIndex > sourceIndex ? sourceIndex + 1 : sourceIndex;
			if (that.options.orientation === "horizontal") {
				var dropStartOffset = getOffset(that._dropTarget).left;
				var width = outerWidth(that._dropTarget);
				var pastMidpoint = e.pageX > dropStartOffset + width / 2;
				if (that._isRtl) if (pastMidpoint) offset.left = dropStartOffset + width;
				else {
					offset.left = dropStartOffset;
					dropIndex += 1;
				}
				else if (pastMidpoint) {
					offset.left = dropStartOffset + width;
					dropIndex += 1;
				} else offset.left = dropStartOffset;
			} else {
				var dropStartTop = getOffset(that._dropTarget).top;
				var height = outerHeight(that._dropTarget);
				if (e.pageY > dropStartTop + height / 2) {
					offset.top = dropStartTop + height;
					dropIndex += 1;
				} else offset.top = dropStartTop;
			}
			that.reorderDropCue.css(offset);
			that._cueUpdatedByDrag = true;
			if (that.options.positionDropCue) that.options.positionDropCue(that.reorderDropCue, that._dropTarget);
			if (that._isPartOfSortable(target)) {
				denied = sourceIndex === dropIndex && !that.options.allowDropAfterLastItem || that.options.dragOverContainers && !that.options.dragOverContainers(sourceIndex, dropIndex);
				that.toggleHintClass(e.sender.hint, denied);
			}
		},
		_isPartOfSortable: function(draggable) {
			return this._elements.index(draggable) >= 0;
		},
		_externalDraggable: function(e) {
			var that = this, options = that.options;
			if (!that._draggable && options.externalDraggable) return options.externalDraggable(e);
			return null;
		},
		_isLastDraggable: function() {
			var inSameContainer = this.options.inSameContainer, draggable = this._draggable[0], elements = this._elements.get(), found = false, item;
			if (!inSameContainer) return false;
			while (!found && elements.length > 0) {
				item = elements.pop();
				found = draggable !== item && inSameContainer({
					source: draggable,
					target: item,
					sourceIndex: this._index(draggable),
					targetIndex: this._index(item)
				});
			}
			return !found;
		},
		_dropTargetAllowed: function(dropTarget) {
			var inSameContainer = this.options.inSameContainer, dragOverContainers = this.options.dragOverContainers, draggable = this._draggable;
			if (draggable[0] === dropTarget[0]) return false;
			if (!inSameContainer || !dragOverContainers) return true;
			if (inSameContainer({
				source: draggable,
				target: dropTarget,
				sourceIndex: this._index(draggable),
				targetIndex: this._index(dropTarget)
			})) return true;
			return dragOverContainers(this._index(draggable), this._index(dropTarget));
		},
		_index: function(element) {
			return this._elements.index(element);
		},
		destroy: function() {
			var that = this;
			Widget.fn.destroy.call(that);
			that.element.find(that.options.dropFilter).each(function() {
				var item = $(this);
				if (item.data("kendoDropTarget")) item.data("kendoDropTarget").destroy();
			});
			if (that.draggable) {
				that.draggable.destroy();
				that.draggable.element = that.draggable = null;
			}
			that.reorderDropCue.remove();
			that.elements = that.reorderDropCue = that._elements = that._draggable = null;
		}
	});
	kendo.ui.plugin(Reorderable);
})(window.kendo.jQuery);
var kendo_reorderable_default = kendo;
//#endregion
exports.__meta__ = __meta__;
exports.default = kendo_reorderable_default;