Skip to content

Commit e7c3ec8

Browse files
lukasoppermannlukasoppermann
committed
build
1 parent b93e36f commit e7c3ec8

8 files changed

+413
-158
lines changed

‎dist/html5sortable.amd.js

+82-31
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function removeData(element) {
3535
}
3636
}
3737

38-
function filter (nodes, selector) {
38+
function _filter (nodes, selector) {
3939
if (!(nodes instanceof NodeList || nodes instanceof HTMLCollection || nodes instanceof Array)) {
4040
throw new Error('You must provide a nodeList/HTMLCollection/Array of elements to be filtered.');
4141
}
@@ -332,7 +332,7 @@ function _serialize (sortableContainer, customItemSerializer, customContainerSer
332332
var options = addData(sortableContainer, 'opts');
333333
var item = options.items;
334334
// serialize container
335-
var items = filter(sortableContainer.children, item);
335+
var items = _filter(sortableContainer.children, item);
336336
var serializedItems = items.map(function (item) {
337337
return {
338338
parent: sortableContainer,
@@ -498,12 +498,78 @@ var defaultConfiguration = {
498498
draggingClass: 'sortable-dragging',
499499
hoverClass: false,
500500
debounce: 0,
501+
throttleTime: 100,
501502
maxItems: 0,
502503
itemSerializer: undefined,
503504
containerSerializer: undefined,
504505
customDragImage: null
505506
};
506507

508+
/**
509+
* make sure a function is only called once within the given amount of time
510+
* @param {Function} fn the function to throttle
511+
* @param {number} threshold time limit for throttling
512+
*/
513+
// must use function to keep this context
514+
function _throttle (fn, threshold) {
515+
var _this = this;
516+
if (threshold === void 0) { threshold = 250; }
517+
// check function
518+
if (typeof fn !== 'function') {
519+
throw new Error('You must provide a function as the first argument for throttle.');
520+
}
521+
// check threshold
522+
if (typeof threshold !== 'number') {
523+
throw new Error('You must provide a number as the second argument for throttle.');
524+
}
525+
var lastEventTimestamp = null;
526+
return function () {
527+
var args = [];
528+
for (var _i = 0; _i < arguments.length; _i++) {
529+
args[_i - 0] = arguments[_i];
530+
}
531+
var now = Date.now();
532+
if (lastEventTimestamp === null || now - lastEventTimestamp >= threshold) {
533+
lastEventTimestamp = now;
534+
fn.apply(_this, args);
535+
}
536+
};
537+
}
538+
539+
function enableHoverClass (sortableContainer, enable) {
540+
if (typeof store(sortableContainer).getConfig('hoverClass') === 'string') {
541+
var hoverClasses_1 = store(sortableContainer).getConfig('hoverClass').split(' ');
542+
// add class on hover
543+
if (enable === true) {
544+
addEventListener(sortableContainer, 'mousemove', _throttle(function (event) {
545+
// check of no mouse button was pressed when mousemove started == no drag
546+
if (event.buttons === 0) {
547+
_filter(sortableContainer.children, store(sortableContainer).getConfig('items')).forEach(function (item) {
548+
if (item !== event.target) {
549+
(_a = item.classList).remove.apply(_a, hoverClasses_1);
550+
}
551+
else {
552+
(_b = item.classList).add.apply(_b, hoverClasses_1);
553+
}
554+
var _a, _b;
555+
});
556+
}
557+
}, store(sortableContainer).getConfig('throttleTime')));
558+
// remove class on leave
559+
addEventListener(sortableContainer, 'mouseleave', function () {
560+
_filter(sortableContainer.children, store(sortableContainer).getConfig('items')).forEach(function (item) {
561+
(_a = item.classList).remove.apply(_a, hoverClasses_1);
562+
var _a;
563+
});
564+
});
565+
}
566+
else {
567+
removeEventListener(sortableContainer, 'mousemove');
568+
removeEventListener(sortableContainer, 'mouseleave');
569+
}
570+
}
571+
}
572+
507573
/* eslint-env browser */
508574
/*
509575
* variables global to the plugin
@@ -588,7 +654,7 @@ function findSortable(element) {
588654
*/
589655
function findDragElement(sortableElement, element) {
590656
var options = addData(sortableElement, 'opts');
591-
var items = filter(sortableElement.children, options.items);
657+
var items = _filter(sortableElement.children, options.items);
592658
var itemlist = items.filter(function (ele) {
593659
return ele.contains(element);
594660
});
@@ -600,7 +666,7 @@ function findDragElement(sortableElement, element) {
600666
*/
601667
var _destroySortable = function (sortableElement) {
602668
var opts = addData(sortableElement, 'opts') || {};
603-
var items = filter(sortableElement.children, opts.items);
669+
var items = _filter(sortableElement.children, opts.items);
604670
var handles = _getHandles(items, opts.handle);
605671
// remove event handlers & data from sortable
606672
removeEventListener(sortableElement, 'dragover');
@@ -619,7 +685,7 @@ var _destroySortable = function (sortableElement) {
619685
*/
620686
var _enableSortable = function (sortableElement) {
621687
var opts = addData(sortableElement, 'opts');
622-
var items = filter(sortableElement.children, opts.items);
688+
var items = _filter(sortableElement.children, opts.items);
623689
var handles = _getHandles(items, opts.handle);
624690
addAttribute(sortableElement, 'aria-dropeffect', 'move');
625691
addData(sortableElement, '_disabled', 'false');
@@ -652,7 +718,7 @@ var _enableSortable = function (sortableElement) {
652718
*/
653719
var _disableSortable = function (sortableElement) {
654720
var opts = addData(sortableElement, 'opts');
655-
var items = filter(sortableElement.children, opts.items);
721+
var items = _filter(sortableElement.children, opts.items);
656722
var handles = _getHandles(items, opts.handle);
657723
addAttribute(sortableElement, 'aria-dropeffect', 'none');
658724
addData(sortableElement, '_disabled', 'true');
@@ -666,7 +732,7 @@ var _disableSortable = function (sortableElement) {
666732
*/
667733
var _reloadSortable = function (sortableElement) {
668734
var opts = addData(sortableElement, 'opts');
669-
var items = filter(sortableElement.children, opts.items);
735+
var items = _filter(sortableElement.children, opts.items);
670736
var handles = _getHandles(items, opts.handle);
671737
addData(sortableElement, '_disabled', 'false');
672738
// remove event handlers from items
@@ -739,7 +805,7 @@ function sortable(sortableElements, options) {
739805
// reset sortable
740806
_reloadSortable(sortableElement);
741807
// initialize
742-
var listItems = filter(sortableElement.children, options.items);
808+
var listItems = _filter(sortableElement.children, options.items);
743809
// create element if user defined a placeholder element as a string
744810
var customPlaceholder;
745811
if (options.placeholder !== null && options.placeholder !== undefined) {
@@ -759,23 +825,8 @@ function sortable(sortableElements, options) {
759825
_enableSortable(sortableElement);
760826
addAttribute(listItems, 'role', 'option');
761827
addAttribute(listItems, 'aria-grabbed', 'false');
762-
// Mouse over class
763-
// TODO - only assign hoverClass if not dragging
764-
if (typeof options.hoverClass === 'string') {
765-
var hoverClasses_1 = options.hoverClass.split(' ');
766-
// add class on hover
767-
addEventListener(listItems, 'mouseenter', function (e) {
768-
if (!dragging) {
769-
(_a = e.target.classList).add.apply(_a, hoverClasses_1);
770-
}
771-
var _a;
772-
});
773-
// remove class on leave
774-
addEventListener(listItems, 'mouseleave', function (e) {
775-
(_a = e.target.classList).remove.apply(_a, hoverClasses_1);
776-
var _a;
777-
});
778-
}
828+
// enable hover class
829+
enableHoverClass(sortableElement, true);
779830
/*
780831
Handle drag events on draggable items
781832
Handle is set at the sortableElement level as it will bubble up
@@ -793,7 +844,7 @@ function sortable(sortableElements, options) {
793844
var sortableContainer = findSortable(e.target);
794845
var dragItem = findDragElement(sortableContainer, e.target);
795846
// grab values
796-
originItemsBeforeUpdate = filter(sortableContainer.children, options.items);
847+
originItemsBeforeUpdate = _filter(sortableContainer.children, options.items);
797848
originIndex = originItemsBeforeUpdate.indexOf(dragItem);
798849
originElementIndex = index(dragItem, sortableContainer.children);
799850
originContainer = sortableContainer;
@@ -824,7 +875,7 @@ function sortable(sortableElements, options) {
824875
return;
825876
}
826877
var sortableContainer = findSortable(e.target);
827-
destinationItemsBeforeUpdate = filter(sortableContainer.children, addData(sortableContainer, 'items'))
878+
destinationItemsBeforeUpdate = _filter(sortableContainer.children, addData(sortableContainer, 'items'))
828879
.filter(function (item) { return item !== store(sortableElement).placeholder; });
829880
});
830881
/*
@@ -898,10 +949,10 @@ function sortable(sortableElements, options) {
898949
}
899950
}));
900951
var placeholder = store(sortableElement).placeholder;
901-
var originItems = filter(originContainer.children, options.items)
952+
var originItems = _filter(originContainer.children, options.items)
902953
.filter(function (item) { return item !== placeholder; });
903954
var destinationContainer = this.isSortable === true ? this : this.parentElement;
904-
var destinationItems = filter(destinationContainer.children, addData(destinationContainer, 'items'))
955+
var destinationItems = _filter(destinationContainer.children, addData(destinationContainer, 'items'))
905956
.filter(function (item) { return item !== placeholder; });
906957
var destinationElementIndex = index(dragging, Array.from(dragging.parentElement.children)
907958
.filter(function (item) { return item !== placeholder; }));
@@ -988,7 +1039,7 @@ function sortable(sortableElements, options) {
9881039
return data.placeholder;
9891040
});
9901041
// check if element is not in placeholders
991-
if (placeholders.indexOf(element) === -1 && sortableElement === element && !filter(element.children, options.items).length) {
1042+
if (placeholders.indexOf(element) === -1 && sortableElement === element && !_filter(element.children, options.items).length) {
9921043
placeholders.forEach(function (element) { return element.remove(); });
9931044
element.appendChild(store(sortableElement).placeholder);
9941045
}
@@ -1003,7 +1054,7 @@ function sortable(sortableElements, options) {
10031054
return;
10041055
}
10051056
var options = addData(sortableElement, 'opts');
1006-
if (parseInt(options.maxItems) && filter(sortableElement.children, addData(sortableElement, 'items')).length >= parseInt(options.maxItems) && dragging.parentElement !== sortableElement) {
1057+
if (parseInt(options.maxItems) && _filter(sortableElement.children, addData(sortableElement, 'items')).length >= parseInt(options.maxItems) && dragging.parentElement !== sortableElement) {
10071058
return;
10081059
}
10091060
e.preventDefault();

0 commit comments

Comments
 (0)