From 9e31e737abfce9e5bc2cdd87c5506d85f00f27b8 Mon Sep 17 00:00:00 2001 From: Piotr Nalepa Date: Sun, 2 Mar 2025 14:20:03 +0100 Subject: [PATCH] fixes done by copilot --- dragster-script.js | 197 ++++++++++++++++++++++--------------------- dragster.es6.js | 205 +++++++++++++++++++++++---------------------- dragster.js | 197 ++++++++++++++++++++++--------------------- dragster.min.js | 2 +- dragster.min.js.gz | Bin 3046 -> 3069 bytes 5 files changed, 305 insertions(+), 296 deletions(-) diff --git a/dragster-script.js b/dragster-script.js index c7e1472..b647b35 100644 --- a/dragster-script.js +++ b/dragster-script.js @@ -22,17 +22,14 @@ const Dragster = function (params = {}) { POS_BOTTOM = 'bottom', UNIT = 'px', DIV = 'div', - FALSE = false, - TRUE = true, - NULL = null, dummyCallback = function () {}, finalParams = { elementSelector: '.dragster-block', regionSelector: '.dragster-region', - dragHandleCssClass: FALSE, + dragHandleCssClass: false, dragOnlyRegionCssClass: PREFIX_CLASS_DRAGSTER + 'region--drag-only', - replaceElements: FALSE, - updateRegionsHeight: TRUE, + replaceElements: false, + updateRegionsHeight: true, minimumRegionHeight: 60, onBeforeDragStart: dummyCallback, onAfterDragStart: dummyCallback, @@ -41,15 +38,15 @@ const Dragster = function (params = {}) { onBeforeDragEnd: dummyCallback, onAfterDragEnd: dummyCallback, onAfterDragDrop: dummyCallback, - scrollWindowOnDrag: FALSE, - dragOnlyRegionsEnabled: FALSE, - cloneElements: FALSE, - wrapDraggableElements: TRUE, - shadowElementUnderMouse: FALSE, + scrollWindowOnDrag: false, + dragOnlyRegionsEnabled: false, + cloneElements: false, + wrapDraggableElements: true, + shadowElementUnderMouse: false, }, visiblePlaceholder = { - top: FALSE, - bottom: FALSE, + top: false, + bottom: false, }, defaultDragsterEventInfo = { drag: { @@ -59,7 +56,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, }, drop: { /** @@ -68,7 +65,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, }, shadow: { /** @@ -77,7 +74,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, /** * Contains top position value of shadow element * @@ -100,7 +97,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, /** * Contains position type of placeholder * @@ -108,7 +105,7 @@ const Dragster = function (params = {}) { * @type {String} * @example 'top' or 'bottom' */ - position: NULL, + position: null, }, /** * Reference to dropped element @@ -116,21 +113,21 @@ const Dragster = function (params = {}) { * @property dropped * @type {HTMLElement} */ - dropped: NULL, + dropped: null, /** * Reference to cloned element * * @property clonedFrom * @type {HTMLElement} */ - clonedFrom: NULL, + clonedFrom: null, /** * Reference to dropped cloned element * * @property clonedTo * @type {HTMLElement} */ - clonedTo: NULL, + clonedTo: null, }, dragsterEventInfo = {}, key, @@ -170,45 +167,45 @@ const Dragster = function (params = {}) { // merge the object with default config with an object with params provided by a developer for (key in params) { - if (Object.prototype.hasOwnProperty.call(params, 'key')) { + if (Object.prototype.hasOwnProperty.call(params, key)) { finalParams[key] = params[key]; } } finalParams = { ...finalParams, ...params }; - /* + /** * Find all draggable elements on the page * * @private * @method findDraggableElements - * @return {Array} + * @return {Array} */ findDraggableElements = function () { return [].slice.call(document.querySelectorAll(finalParams.elementSelector)); }; - /* - * Find all regions elements on the page + /** + * Find all region elements on the page * * @private * @method findRegionElements - * @return {Array} + * @return {Array} */ findRegionElements = function () { return [].slice.call(document.querySelectorAll(finalParams.regionSelector)); }; - /* + /** * Wrap all elements from the `elements` param with a draggable wrapper * * @private - * @method findDraggableElements - * @param elements {Array} - * @return {Array} + * @method wrapDraggableElements + * @param {Array} elements + * @return {boolean|undefined} */ wrapDraggableElements = function (elements) { - if (finalParams.wrapDraggableElements === FALSE) { + if (finalParams.wrapDraggableElements === false) { console.warn( 'You have disabled the default behavior of wrapping the draggable elements. ' + 'If you want Dragster.js to work properly you still will have to do this manually.\n' + @@ -216,7 +213,7 @@ const Dragster = function (params = {}) { 'More info: https://github.com/sunpietro/dragster/blob/master/README.md#user-content-wrapdraggableelements---boolean', ); - return FALSE; + return false; } elements.forEach(function (draggableElement) { @@ -224,7 +221,7 @@ const Dragster = function (params = {}) { draggableParent = draggableElement.parentNode; if (draggableParent.classList.contains(CLASS_DRAGGABLE)) { - return FALSE; + return false; } draggableParent.insertBefore(wrapper, draggableElement); @@ -245,17 +242,17 @@ const Dragster = function (params = {}) { document.body.appendChild(tempContainer); } - /* + /** * Check whether a given element meets the requirements from the callback. - * The callback should always return Boolean value - true or false. - * The function allows to find a correct element within the DOM. + * The callback should always return a boolean value - true or false. + * The function allows finding the correct element within the DOM. * If the element doesn't meet the requirements then the function tests its parent node. * * @private * @method getElement - * @param element {HTMLElement} DOM element - * @param callback {Function} testing function - * @return {HTMLElement} + * @param {HTMLElement} element - DOM element + * @param {Function} callback - testing function + * @return {HTMLElement|undefined} */ getElement = function (element, callback) { var parent = element.parentNode; @@ -276,12 +273,12 @@ const Dragster = function (params = {}) { return callback(parent) ? parent : getElement(parent, callback); }; - /* + /** * Removes all elements defined by a selector from the DOM * * @private * @method removeElements - * @param element {HTMLElement} DOM element + * @param {string} selector - CSS selector */ removeElements = function (selector) { var elements = [].slice.call(document.getElementsByClassName(selector)); @@ -294,14 +291,14 @@ const Dragster = function (params = {}) { }); }; - /* + /** * Removes all visible placeholders, shadow elements, empty draggable nodes * and removes `mousemove` event listeners from regions * * @private * @method cleanWorkspace - * @param element {HTMLElement} DOM element - * @param eventName {String} name of the event to stop listening to + * @param {HTMLElement} element - DOM element + * @param {string} eventName - name of the event to stop listening to */ cleanWorkspace = function (element, eventName) { if (eventName) { @@ -328,7 +325,7 @@ const Dragster = function (params = {}) { updateRegionsHeight(); }; - /* + /** * Removes replacable classname from all replacable elements * * @private @@ -340,7 +337,7 @@ const Dragster = function (params = {}) { }); }; - /* + /** * Creates a wrapper for a draggable element * * @private @@ -356,7 +353,7 @@ const Dragster = function (params = {}) { return wrapper; }; - /* + /** * Creates a placeholder where dragged element can be dropped into * * @private @@ -372,7 +369,7 @@ const Dragster = function (params = {}) { return placeholder; }; - /* + /** * Creates a copy of dragged element that follows the cursor movement * * @private @@ -393,29 +390,29 @@ const Dragster = function (params = {}) { return element; }; - /* + /** * Insert an element after a selected element * * @private * @method insertAfter - * @param elementTarget {HTMLElement} dragged element - * @param elementAfter {HTMLElement} dragged element will be placed after this element + * @param {HTMLElement} elementTarget - dragged element + * @param {HTMLElement} elementAfter - dragged element will be placed after this element */ insertAfter = function (elementTarget, elementAfter) { if (elementTarget && elementTarget.parentNode) { - var refChild = finalParams.wrapDraggableElements === FALSE ? elementTarget : elementTarget.nextSibling; + var refChild = finalParams.wrapDraggableElements === false ? elementTarget : elementTarget.nextSibling; elementTarget.parentNode.insertBefore(elementAfter, refChild); } }; - /* + /** * Insert an element before a selected element * * @private * @method insertBefore - * @param elementTarget {HTMLElement} dragged element - * @param elementBefore {HTMLElement} dragged element will be placed before this element + * @param {HTMLElement} elementTarget - dragged element + * @param {HTMLElement} elementBefore - dragged element will be placed before this element */ insertBefore = function (elementTarget, elementBefore) { if (elementTarget && elementTarget.parentNode) { @@ -423,13 +420,13 @@ const Dragster = function (params = {}) { } }; - /* + /** * Test whether an element is a draggable element * * @private * @method isDraggableCallback - * @param element {HTMLElement} - * @return {Boolean} + * @param {HTMLElement} element + * @return {boolean} */ isDraggableCallback = function (element) { return ( @@ -439,25 +436,23 @@ const Dragster = function (params = {}) { ); }; - /* + /** * Test whether an element belongs to drag only region * * @private * @method isInDragOnlyRegionCallback - * @param element {HTMLElement} - * @return {Boolean} + * @param {HTMLElement} element + * @return {boolean} */ isInDragOnlyRegionCallback = function (element) { return element.classList && element.classList.contains(finalParams.dragOnlyRegionCssClass); - }; //jshint ignore:line + }; - /* + /** * Update the height of the regions dynamically * * @private * @method updateRegionsHeight - * @param element {HTMLElement} - * @return {Boolean} */ updateRegionsHeight = function () { if (finalParams.updateRegionsHeight) { @@ -488,14 +483,22 @@ const Dragster = function (params = {}) { * * @method resetDragsterWorkspace * @private - * @param moveEvent {String} move event name (either mousemove or touchmove) - * @param upEvent {String} up event name (either mouseup or touchend) + * @param {string} moveEvent - move event name (either mousemove or touchmove) + * @param {string} upEvent - up event name (either mouseup or touchend) */ resetDragsterWorkspace = function (moveEvent, upEvent) { cleanWorkspace(draggedElement, moveEvent); cleanWorkspace(draggedElement, upEvent); }; + const addEventListeners = (element, events, handler) => { + events.forEach(event => element.addEventListener(event, handler, false)); + }; + + const removeEventListeners = (element, events, handler) => { + events.forEach(event => element.removeEventListener(event, handler, false)); + }; + regionEventHandlers = { /* * `mousedown` or `touchstart` event handler. @@ -512,7 +515,7 @@ const Dragster = function (params = {}) { (typeof finalParams.dragHandleCssClass !== 'string' || !event.target.classList.contains(finalParams.dragHandleCssClass)) ) { - return FALSE; + return false; } var targetRegion, @@ -524,8 +527,8 @@ const Dragster = function (params = {}) { dragsterEventInfo = JSON.parse(JSON.stringify(defaultDragsterEventInfo)); event.dragster = dragsterEventInfo; - if (finalParams.onBeforeDragStart(event) === FALSE || event.which === 3 /* detect right click */) { - return FALSE; + if (finalParams.onBeforeDragStart(event) === false || event.which === 3 /* detect right click */) { + return false; } event.preventDefault(); @@ -533,19 +536,19 @@ const Dragster = function (params = {}) { draggedElement = getElement(event.target, isDraggableCallback); if (!draggedElement) { - return FALSE; + return false; } moveEvent = isTouch ? EVT_TOUCHMOVE : EVT_MOUSEMOVE; upEvent = isTouch ? EVT_TOUCHEND : EVT_MOUSEUP; regions.forEach(function (region) { - region.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE); - region.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE); + addEventListeners(region, [moveEvent, upEvent], regionEventHandlers.mousemove); + addEventListeners(region, [moveEvent, upEvent], regionEventHandlers.mouseup); }); - document.body.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE); - document.body.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE); + addEventListeners(document.body, [moveEvent, upEvent], regionEventHandlers.mousemove); + addEventListeners(document.body, [moveEvent, upEvent], regionEventHandlers.mouseup); targetRegion = draggedElement.getBoundingClientRect(); @@ -583,8 +586,8 @@ const Dragster = function (params = {}) { mousemove: function (event) { event.dragster = dragsterEventInfo; - if (finalParams.onBeforeDragMove(event) === FALSE || !shadowElementRegion) { - return FALSE; + if (finalParams.onBeforeDragMove(event) === false || !shadowElementRegion) { + return false; } event.preventDefault(); @@ -675,10 +678,10 @@ const Dragster = function (params = {}) { isFromDragOnlyRegion, canBeCloned; - if (finalParams.onBeforeDragEnd(event) === FALSE) { + if (finalParams.onBeforeDragEnd(event) === false) { resetDragsterWorkspace(moveEvent, upEvent); - return FALSE; + return false; } findByClass = finalParams.replaceElements ? CLASS_REPLACABLE : CLASS_PLACEHOLDER; @@ -693,7 +696,7 @@ const Dragster = function (params = {}) { if (!draggedElement || !dropTarget) { resetDragsterWorkspace(moveEvent, upEvent); - return FALSE; + return false; } dropDraggableTarget = getElement(dropTarget, isDraggableCallback); @@ -833,20 +836,20 @@ const Dragster = function (params = {}) { * @return {Object} updated event info */ moveElement: function (dragsterEvent, dropTarget, dropDraggableTarget) { - var dropTemp = finalParams.wrapDraggableElements === FALSE ? draggedElement : createElementWrapper(), + var dropTemp = finalParams.wrapDraggableElements === false ? draggedElement : createElementWrapper(), placeholderPosition = dropTarget.dataset.placeholderPosition; if (placeholderPosition === POS_TOP) { insertBefore(dropDraggableTarget, dropTemp); } else { - if (finalParams.wrapDraggableElements === FALSE) { + if (finalParams.wrapDraggableElements === false) { insertAfter(dropTemp, dropDraggableTarget); } else { insertAfter(dropDraggableTarget, dropTemp); } } - if (draggedElement.firstChild && finalParams.wrapDraggableElements === TRUE) { + if (draggedElement.firstChild && finalParams.wrapDraggableElements === true) { dropTemp.appendChild(draggedElement.firstChild); } @@ -911,7 +914,7 @@ const Dragster = function (params = {}) { * * @method scrollWindow * @private - * @param event {Object} event object + * @param {Object} event - event object */ scrollWindow = function (event) { var eventObject = event.changedTouches ? event.changedTouches[0] : event, @@ -948,8 +951,8 @@ const Dragster = function (params = {}) { region.classList.add(CLASS_REGION); region.dataset.dragsterId = dragsterId; - region.addEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, FALSE); - region.addEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, FALSE); + region.addEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, false); + region.addEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, false); }); }; @@ -974,19 +977,19 @@ const Dragster = function (params = {}) { regions.forEach(function (region) { region.classList.remove(CLASS_REGION); - region.removeEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, FALSE); - region.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, FALSE); - region.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, FALSE); + region.removeEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, false); + region.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, false); + region.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, false); - region.removeEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, FALSE); - region.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, FALSE); - region.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, FALSE); + region.removeEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, false); + region.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, false); + region.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, false); }); - document.body.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, FALSE); - document.body.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, FALSE); - document.body.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, FALSE); - document.body.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, FALSE); + document.body.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, false); + document.body.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, false); + document.body.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, false); + document.body.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, false); window.removeEventListener('resize', discoverWindowHeight, false); }, diff --git a/dragster.es6.js b/dragster.es6.js index f88fdf5..88a2fd4 100644 --- a/dragster.es6.js +++ b/dragster.es6.js @@ -10,12 +10,12 @@ * * Date: 2017-06-28T22:30Z */ -//jshint ignore:line + //jshint ignore:line /* eslint-env browser */ // eslint-disable-next-line const Dragster = function (params = {}) { - let PREFIX_CLASS_DRAGSTER = 'dragster-', + var PREFIX_CLASS_DRAGSTER = 'dragster-', CLASS_DRAGGING = 'is-dragging', CLASS_DRAGOVER = 'is-drag-over', CLASS_DRAGGABLE = PREFIX_CLASS_DRAGSTER + 'draggable', @@ -35,17 +35,14 @@ const Dragster = function (params = {}) { POS_BOTTOM = 'bottom', UNIT = 'px', DIV = 'div', - FALSE = false, - TRUE = true, - NULL = null, - dummyCallback = () => undefined, + dummyCallback = function () {}, finalParams = { elementSelector: '.dragster-block', regionSelector: '.dragster-region', - dragHandleCssClass: FALSE, + dragHandleCssClass: false, dragOnlyRegionCssClass: PREFIX_CLASS_DRAGSTER + 'region--drag-only', - replaceElements: FALSE, - updateRegionsHeight: TRUE, + replaceElements: false, + updateRegionsHeight: true, minimumRegionHeight: 60, onBeforeDragStart: dummyCallback, onAfterDragStart: dummyCallback, @@ -54,15 +51,15 @@ const Dragster = function (params = {}) { onBeforeDragEnd: dummyCallback, onAfterDragEnd: dummyCallback, onAfterDragDrop: dummyCallback, - scrollWindowOnDrag: FALSE, - dragOnlyRegionsEnabled: FALSE, - cloneElements: FALSE, - wrapDraggableElements: TRUE, - shadowElementUnderMouse: FALSE, + scrollWindowOnDrag: false, + dragOnlyRegionsEnabled: false, + cloneElements: false, + wrapDraggableElements: true, + shadowElementUnderMouse: false, }, visiblePlaceholder = { - top: FALSE, - bottom: FALSE, + top: false, + bottom: false, }, defaultDragsterEventInfo = { drag: { @@ -72,7 +69,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, }, drop: { /** @@ -81,7 +78,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, }, shadow: { /** @@ -90,7 +87,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, /** * Contains top position value of shadow element * @@ -113,7 +110,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, /** * Contains position type of placeholder * @@ -121,7 +118,7 @@ const Dragster = function (params = {}) { * @type {String} * @example 'top' or 'bottom' */ - position: NULL, + position: null, }, /** * Reference to dropped element @@ -129,21 +126,21 @@ const Dragster = function (params = {}) { * @property dropped * @type {HTMLElement} */ - dropped: NULL, + dropped: null, /** * Reference to cloned element * * @property clonedFrom * @type {HTMLElement} */ - clonedFrom: NULL, + clonedFrom: null, /** * Reference to dropped cloned element * * @property clonedTo * @type {HTMLElement} */ - clonedTo: NULL, + clonedTo: null, }, dragsterEventInfo = {}, key, @@ -183,45 +180,45 @@ const Dragster = function (params = {}) { // merge the object with default config with an object with params provided by a developer for (key in params) { - if (Object.prototype.hasOwnProperty.call(params, 'key')) { + if (Object.prototype.hasOwnProperty.call(params, key)) { finalParams[key] = params[key]; } } finalParams = { ...finalParams, ...params }; - /* + /** * Find all draggable elements on the page * * @private * @method findDraggableElements - * @return {Array} + * @return {Array} */ findDraggableElements = function () { return [].slice.call(document.querySelectorAll(finalParams.elementSelector)); }; - /* - * Find all regions elements on the page + /** + * Find all region elements on the page * * @private * @method findRegionElements - * @return {Array} + * @return {Array} */ findRegionElements = function () { return [].slice.call(document.querySelectorAll(finalParams.regionSelector)); }; - /* + /** * Wrap all elements from the `elements` param with a draggable wrapper * * @private - * @method findDraggableElements - * @param elements {Array} - * @return {Array} + * @method wrapDraggableElements + * @param {Array} elements + * @return {boolean|undefined} */ wrapDraggableElements = function (elements) { - if (finalParams.wrapDraggableElements === FALSE) { + if (finalParams.wrapDraggableElements === false) { console.warn( 'You have disabled the default behavior of wrapping the draggable elements. ' + 'If you want Dragster.js to work properly you still will have to do this manually.\n' + @@ -229,7 +226,7 @@ const Dragster = function (params = {}) { 'More info: https://github.com/sunpietro/dragster/blob/master/README.md#user-content-wrapdraggableelements---boolean', ); - return FALSE; + return false; } elements.forEach(function (draggableElement) { @@ -237,7 +234,7 @@ const Dragster = function (params = {}) { draggableParent = draggableElement.parentNode; if (draggableParent.classList.contains(CLASS_DRAGGABLE)) { - return FALSE; + return false; } draggableParent.insertBefore(wrapper, draggableElement); @@ -258,17 +255,17 @@ const Dragster = function (params = {}) { document.body.appendChild(tempContainer); } - /* + /** * Check whether a given element meets the requirements from the callback. - * The callback should always return Boolean value - true or false. - * The function allows to find a correct element within the DOM. + * The callback should always return a boolean value - true or false. + * The function allows finding the correct element within the DOM. * If the element doesn't meet the requirements then the function tests its parent node. * * @private * @method getElement - * @param element {HTMLElement} DOM element - * @param callback {Function} testing function - * @return {HTMLElement} + * @param {HTMLElement} element - DOM element + * @param {Function} callback - testing function + * @return {HTMLElement|undefined} */ getElement = function (element, callback) { var parent = element.parentNode; @@ -289,12 +286,12 @@ const Dragster = function (params = {}) { return callback(parent) ? parent : getElement(parent, callback); }; - /* + /** * Removes all elements defined by a selector from the DOM * * @private * @method removeElements - * @param element {HTMLElement} DOM element + * @param {string} selector - CSS selector */ removeElements = function (selector) { var elements = [].slice.call(document.getElementsByClassName(selector)); @@ -307,14 +304,14 @@ const Dragster = function (params = {}) { }); }; - /* + /** * Removes all visible placeholders, shadow elements, empty draggable nodes * and removes `mousemove` event listeners from regions * * @private * @method cleanWorkspace - * @param element {HTMLElement} DOM element - * @param eventName {String} name of the event to stop listening to + * @param {HTMLElement} element - DOM element + * @param {string} eventName - name of the event to stop listening to */ cleanWorkspace = function (element, eventName) { if (eventName) { @@ -341,7 +338,7 @@ const Dragster = function (params = {}) { updateRegionsHeight(); }; - /* + /** * Removes replacable classname from all replacable elements * * @private @@ -353,7 +350,7 @@ const Dragster = function (params = {}) { }); }; - /* + /** * Creates a wrapper for a draggable element * * @private @@ -369,7 +366,7 @@ const Dragster = function (params = {}) { return wrapper; }; - /* + /** * Creates a placeholder where dragged element can be dropped into * * @private @@ -385,7 +382,7 @@ const Dragster = function (params = {}) { return placeholder; }; - /* + /** * Creates a copy of dragged element that follows the cursor movement * * @private @@ -406,29 +403,29 @@ const Dragster = function (params = {}) { return element; }; - /* + /** * Insert an element after a selected element * * @private * @method insertAfter - * @param elementTarget {HTMLElement} dragged element - * @param elementAfter {HTMLElement} dragged element will be placed after this element + * @param {HTMLElement} elementTarget - dragged element + * @param {HTMLElement} elementAfter - dragged element will be placed after this element */ insertAfter = function (elementTarget, elementAfter) { if (elementTarget && elementTarget.parentNode) { - var refChild = finalParams.wrapDraggableElements === FALSE ? elementTarget : elementTarget.nextSibling; + var refChild = finalParams.wrapDraggableElements === false ? elementTarget : elementTarget.nextSibling; elementTarget.parentNode.insertBefore(elementAfter, refChild); } }; - /* + /** * Insert an element before a selected element * * @private * @method insertBefore - * @param elementTarget {HTMLElement} dragged element - * @param elementBefore {HTMLElement} dragged element will be placed before this element + * @param {HTMLElement} elementTarget - dragged element + * @param {HTMLElement} elementBefore - dragged element will be placed before this element */ insertBefore = function (elementTarget, elementBefore) { if (elementTarget && elementTarget.parentNode) { @@ -436,13 +433,13 @@ const Dragster = function (params = {}) { } }; - /* + /** * Test whether an element is a draggable element * * @private * @method isDraggableCallback - * @param element {HTMLElement} - * @return {Boolean} + * @param {HTMLElement} element + * @return {boolean} */ isDraggableCallback = function (element) { return ( @@ -452,25 +449,23 @@ const Dragster = function (params = {}) { ); }; - /* + /** * Test whether an element belongs to drag only region * * @private * @method isInDragOnlyRegionCallback - * @param element {HTMLElement} - * @return {Boolean} + * @param {HTMLElement} element + * @return {boolean} */ isInDragOnlyRegionCallback = function (element) { return element.classList && element.classList.contains(finalParams.dragOnlyRegionCssClass); - }; //jshint ignore:line + }; - /* + /** * Update the height of the regions dynamically * * @private * @method updateRegionsHeight - * @param element {HTMLElement} - * @return {Boolean} */ updateRegionsHeight = function () { if (finalParams.updateRegionsHeight) { @@ -501,14 +496,22 @@ const Dragster = function (params = {}) { * * @method resetDragsterWorkspace * @private - * @param moveEvent {String} move event name (either mousemove or touchmove) - * @param upEvent {String} up event name (either mouseup or touchend) + * @param {string} moveEvent - move event name (either mousemove or touchmove) + * @param {string} upEvent - up event name (either mouseup or touchend) */ resetDragsterWorkspace = function (moveEvent, upEvent) { cleanWorkspace(draggedElement, moveEvent); cleanWorkspace(draggedElement, upEvent); }; + const addEventListeners = (element, events, handler) => { + events.forEach(event => element.addEventListener(event, handler, false)); + }; + + const removeEventListeners = (element, events, handler) => { + events.forEach(event => element.removeEventListener(event, handler, false)); + }; + regionEventHandlers = { /* * `mousedown` or `touchstart` event handler. @@ -525,7 +528,7 @@ const Dragster = function (params = {}) { (typeof finalParams.dragHandleCssClass !== 'string' || !event.target.classList.contains(finalParams.dragHandleCssClass)) ) { - return FALSE; + return false; } var targetRegion, @@ -537,8 +540,8 @@ const Dragster = function (params = {}) { dragsterEventInfo = JSON.parse(JSON.stringify(defaultDragsterEventInfo)); event.dragster = dragsterEventInfo; - if (finalParams.onBeforeDragStart(event) === FALSE || event.which === 3 /* detect right click */) { - return FALSE; + if (finalParams.onBeforeDragStart(event) === false || event.which === 3 /* detect right click */) { + return false; } event.preventDefault(); @@ -546,19 +549,19 @@ const Dragster = function (params = {}) { draggedElement = getElement(event.target, isDraggableCallback); if (!draggedElement) { - return FALSE; + return false; } moveEvent = isTouch ? EVT_TOUCHMOVE : EVT_MOUSEMOVE; upEvent = isTouch ? EVT_TOUCHEND : EVT_MOUSEUP; regions.forEach(function (region) { - region.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE); - region.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE); + addEventListeners(region, [moveEvent, upEvent], regionEventHandlers.mousemove); + addEventListeners(region, [moveEvent, upEvent], regionEventHandlers.mouseup); }); - document.body.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE); - document.body.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE); + addEventListeners(document.body, [moveEvent, upEvent], regionEventHandlers.mousemove); + addEventListeners(document.body, [moveEvent, upEvent], regionEventHandlers.mouseup); targetRegion = draggedElement.getBoundingClientRect(); @@ -596,8 +599,8 @@ const Dragster = function (params = {}) { mousemove: function (event) { event.dragster = dragsterEventInfo; - if (finalParams.onBeforeDragMove(event) === FALSE || !shadowElementRegion) { - return FALSE; + if (finalParams.onBeforeDragMove(event) === false || !shadowElementRegion) { + return false; } event.preventDefault(); @@ -688,10 +691,10 @@ const Dragster = function (params = {}) { isFromDragOnlyRegion, canBeCloned; - if (finalParams.onBeforeDragEnd(event) === FALSE) { + if (finalParams.onBeforeDragEnd(event) === false) { resetDragsterWorkspace(moveEvent, upEvent); - return FALSE; + return false; } findByClass = finalParams.replaceElements ? CLASS_REPLACABLE : CLASS_PLACEHOLDER; @@ -706,7 +709,7 @@ const Dragster = function (params = {}) { if (!draggedElement || !dropTarget) { resetDragsterWorkspace(moveEvent, upEvent); - return FALSE; + return false; } dropDraggableTarget = getElement(dropTarget, isDraggableCallback); @@ -846,20 +849,20 @@ const Dragster = function (params = {}) { * @return {Object} updated event info */ moveElement: function (dragsterEvent, dropTarget, dropDraggableTarget) { - var dropTemp = finalParams.wrapDraggableElements === FALSE ? draggedElement : createElementWrapper(), + var dropTemp = finalParams.wrapDraggableElements === false ? draggedElement : createElementWrapper(), placeholderPosition = dropTarget.dataset.placeholderPosition; if (placeholderPosition === POS_TOP) { insertBefore(dropDraggableTarget, dropTemp); } else { - if (finalParams.wrapDraggableElements === FALSE) { + if (finalParams.wrapDraggableElements === false) { insertAfter(dropTemp, dropDraggableTarget); } else { insertAfter(dropDraggableTarget, dropTemp); } } - if (draggedElement.firstChild && finalParams.wrapDraggableElements === TRUE) { + if (draggedElement.firstChild && finalParams.wrapDraggableElements === true) { dropTemp.appendChild(draggedElement.firstChild); } @@ -924,7 +927,7 @@ const Dragster = function (params = {}) { * * @method scrollWindow * @private - * @param event {Object} event object + * @param {Object} event - event object */ scrollWindow = function (event) { var eventObject = event.changedTouches ? event.changedTouches[0] : event, @@ -961,8 +964,8 @@ const Dragster = function (params = {}) { region.classList.add(CLASS_REGION); region.dataset.dragsterId = dragsterId; - region.addEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, FALSE); - region.addEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, FALSE); + region.addEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, false); + region.addEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, false); }); }; @@ -987,24 +990,24 @@ const Dragster = function (params = {}) { regions.forEach(function (region) { region.classList.remove(CLASS_REGION); - region.removeEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, FALSE); - region.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, FALSE); - region.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, FALSE); + region.removeEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, false); + region.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, false); + region.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, false); - region.removeEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, FALSE); - region.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, FALSE); - region.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, FALSE); + region.removeEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, false); + region.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, false); + region.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, false); }); - document.body.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, FALSE); - document.body.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, FALSE); - document.body.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, FALSE); - document.body.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, FALSE); + document.body.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, false); + document.body.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, false); + document.body.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, false); + document.body.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, false); window.removeEventListener('resize', discoverWindowHeight, false); }, }; }; -//jshint ignore:line + //jshint ignore:line export default Dragster; diff --git a/dragster.js b/dragster.js index 4e58892..791b16d 100644 --- a/dragster.js +++ b/dragster.js @@ -48,17 +48,14 @@ const Dragster = function (params = {}) { POS_BOTTOM = 'bottom', UNIT = 'px', DIV = 'div', - FALSE = false, - TRUE = true, - NULL = null, dummyCallback = function () {}, finalParams = { elementSelector: '.dragster-block', regionSelector: '.dragster-region', - dragHandleCssClass: FALSE, + dragHandleCssClass: false, dragOnlyRegionCssClass: PREFIX_CLASS_DRAGSTER + 'region--drag-only', - replaceElements: FALSE, - updateRegionsHeight: TRUE, + replaceElements: false, + updateRegionsHeight: true, minimumRegionHeight: 60, onBeforeDragStart: dummyCallback, onAfterDragStart: dummyCallback, @@ -67,15 +64,15 @@ const Dragster = function (params = {}) { onBeforeDragEnd: dummyCallback, onAfterDragEnd: dummyCallback, onAfterDragDrop: dummyCallback, - scrollWindowOnDrag: FALSE, - dragOnlyRegionsEnabled: FALSE, - cloneElements: FALSE, - wrapDraggableElements: TRUE, - shadowElementUnderMouse: FALSE, + scrollWindowOnDrag: false, + dragOnlyRegionsEnabled: false, + cloneElements: false, + wrapDraggableElements: true, + shadowElementUnderMouse: false, }, visiblePlaceholder = { - top: FALSE, - bottom: FALSE, + top: false, + bottom: false, }, defaultDragsterEventInfo = { drag: { @@ -85,7 +82,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, }, drop: { /** @@ -94,7 +91,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, }, shadow: { /** @@ -103,7 +100,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, /** * Contains top position value of shadow element * @@ -126,7 +123,7 @@ const Dragster = function (params = {}) { * @property node * @type {HTMLElement} */ - node: NULL, + node: null, /** * Contains position type of placeholder * @@ -134,7 +131,7 @@ const Dragster = function (params = {}) { * @type {String} * @example 'top' or 'bottom' */ - position: NULL, + position: null, }, /** * Reference to dropped element @@ -142,21 +139,21 @@ const Dragster = function (params = {}) { * @property dropped * @type {HTMLElement} */ - dropped: NULL, + dropped: null, /** * Reference to cloned element * * @property clonedFrom * @type {HTMLElement} */ - clonedFrom: NULL, + clonedFrom: null, /** * Reference to dropped cloned element * * @property clonedTo * @type {HTMLElement} */ - clonedTo: NULL, + clonedTo: null, }, dragsterEventInfo = {}, key, @@ -196,45 +193,45 @@ const Dragster = function (params = {}) { // merge the object with default config with an object with params provided by a developer for (key in params) { - if (Object.prototype.hasOwnProperty.call(params, 'key')) { + if (Object.prototype.hasOwnProperty.call(params, key)) { finalParams[key] = params[key]; } } finalParams = { ...finalParams, ...params }; - /* + /** * Find all draggable elements on the page * * @private * @method findDraggableElements - * @return {Array} + * @return {Array} */ findDraggableElements = function () { return [].slice.call(document.querySelectorAll(finalParams.elementSelector)); }; - /* - * Find all regions elements on the page + /** + * Find all region elements on the page * * @private * @method findRegionElements - * @return {Array} + * @return {Array} */ findRegionElements = function () { return [].slice.call(document.querySelectorAll(finalParams.regionSelector)); }; - /* + /** * Wrap all elements from the `elements` param with a draggable wrapper * * @private - * @method findDraggableElements - * @param elements {Array} - * @return {Array} + * @method wrapDraggableElements + * @param {Array} elements + * @return {boolean|undefined} */ wrapDraggableElements = function (elements) { - if (finalParams.wrapDraggableElements === FALSE) { + if (finalParams.wrapDraggableElements === false) { console.warn( 'You have disabled the default behavior of wrapping the draggable elements. ' + 'If you want Dragster.js to work properly you still will have to do this manually.\n' + @@ -242,7 +239,7 @@ const Dragster = function (params = {}) { 'More info: https://github.com/sunpietro/dragster/blob/master/README.md#user-content-wrapdraggableelements---boolean', ); - return FALSE; + return false; } elements.forEach(function (draggableElement) { @@ -250,7 +247,7 @@ const Dragster = function (params = {}) { draggableParent = draggableElement.parentNode; if (draggableParent.classList.contains(CLASS_DRAGGABLE)) { - return FALSE; + return false; } draggableParent.insertBefore(wrapper, draggableElement); @@ -271,17 +268,17 @@ const Dragster = function (params = {}) { document.body.appendChild(tempContainer); } - /* + /** * Check whether a given element meets the requirements from the callback. - * The callback should always return Boolean value - true or false. - * The function allows to find a correct element within the DOM. + * The callback should always return a boolean value - true or false. + * The function allows finding the correct element within the DOM. * If the element doesn't meet the requirements then the function tests its parent node. * * @private * @method getElement - * @param element {HTMLElement} DOM element - * @param callback {Function} testing function - * @return {HTMLElement} + * @param {HTMLElement} element - DOM element + * @param {Function} callback - testing function + * @return {HTMLElement|undefined} */ getElement = function (element, callback) { var parent = element.parentNode; @@ -302,12 +299,12 @@ const Dragster = function (params = {}) { return callback(parent) ? parent : getElement(parent, callback); }; - /* + /** * Removes all elements defined by a selector from the DOM * * @private * @method removeElements - * @param element {HTMLElement} DOM element + * @param {string} selector - CSS selector */ removeElements = function (selector) { var elements = [].slice.call(document.getElementsByClassName(selector)); @@ -320,14 +317,14 @@ const Dragster = function (params = {}) { }); }; - /* + /** * Removes all visible placeholders, shadow elements, empty draggable nodes * and removes `mousemove` event listeners from regions * * @private * @method cleanWorkspace - * @param element {HTMLElement} DOM element - * @param eventName {String} name of the event to stop listening to + * @param {HTMLElement} element - DOM element + * @param {string} eventName - name of the event to stop listening to */ cleanWorkspace = function (element, eventName) { if (eventName) { @@ -354,7 +351,7 @@ const Dragster = function (params = {}) { updateRegionsHeight(); }; - /* + /** * Removes replacable classname from all replacable elements * * @private @@ -366,7 +363,7 @@ const Dragster = function (params = {}) { }); }; - /* + /** * Creates a wrapper for a draggable element * * @private @@ -382,7 +379,7 @@ const Dragster = function (params = {}) { return wrapper; }; - /* + /** * Creates a placeholder where dragged element can be dropped into * * @private @@ -398,7 +395,7 @@ const Dragster = function (params = {}) { return placeholder; }; - /* + /** * Creates a copy of dragged element that follows the cursor movement * * @private @@ -419,29 +416,29 @@ const Dragster = function (params = {}) { return element; }; - /* + /** * Insert an element after a selected element * * @private * @method insertAfter - * @param elementTarget {HTMLElement} dragged element - * @param elementAfter {HTMLElement} dragged element will be placed after this element + * @param {HTMLElement} elementTarget - dragged element + * @param {HTMLElement} elementAfter - dragged element will be placed after this element */ insertAfter = function (elementTarget, elementAfter) { if (elementTarget && elementTarget.parentNode) { - var refChild = finalParams.wrapDraggableElements === FALSE ? elementTarget : elementTarget.nextSibling; + var refChild = finalParams.wrapDraggableElements === false ? elementTarget : elementTarget.nextSibling; elementTarget.parentNode.insertBefore(elementAfter, refChild); } }; - /* + /** * Insert an element before a selected element * * @private * @method insertBefore - * @param elementTarget {HTMLElement} dragged element - * @param elementBefore {HTMLElement} dragged element will be placed before this element + * @param {HTMLElement} elementTarget - dragged element + * @param {HTMLElement} elementBefore - dragged element will be placed before this element */ insertBefore = function (elementTarget, elementBefore) { if (elementTarget && elementTarget.parentNode) { @@ -449,13 +446,13 @@ const Dragster = function (params = {}) { } }; - /* + /** * Test whether an element is a draggable element * * @private * @method isDraggableCallback - * @param element {HTMLElement} - * @return {Boolean} + * @param {HTMLElement} element + * @return {boolean} */ isDraggableCallback = function (element) { return ( @@ -465,25 +462,23 @@ const Dragster = function (params = {}) { ); }; - /* + /** * Test whether an element belongs to drag only region * * @private * @method isInDragOnlyRegionCallback - * @param element {HTMLElement} - * @return {Boolean} + * @param {HTMLElement} element + * @return {boolean} */ isInDragOnlyRegionCallback = function (element) { return element.classList && element.classList.contains(finalParams.dragOnlyRegionCssClass); - }; //jshint ignore:line + }; - /* + /** * Update the height of the regions dynamically * * @private * @method updateRegionsHeight - * @param element {HTMLElement} - * @return {Boolean} */ updateRegionsHeight = function () { if (finalParams.updateRegionsHeight) { @@ -514,14 +509,22 @@ const Dragster = function (params = {}) { * * @method resetDragsterWorkspace * @private - * @param moveEvent {String} move event name (either mousemove or touchmove) - * @param upEvent {String} up event name (either mouseup or touchend) + * @param {string} moveEvent - move event name (either mousemove or touchmove) + * @param {string} upEvent - up event name (either mouseup or touchend) */ resetDragsterWorkspace = function (moveEvent, upEvent) { cleanWorkspace(draggedElement, moveEvent); cleanWorkspace(draggedElement, upEvent); }; + const addEventListeners = (element, events, handler) => { + events.forEach(event => element.addEventListener(event, handler, false)); + }; + + const removeEventListeners = (element, events, handler) => { + events.forEach(event => element.removeEventListener(event, handler, false)); + }; + regionEventHandlers = { /* * `mousedown` or `touchstart` event handler. @@ -538,7 +541,7 @@ const Dragster = function (params = {}) { (typeof finalParams.dragHandleCssClass !== 'string' || !event.target.classList.contains(finalParams.dragHandleCssClass)) ) { - return FALSE; + return false; } var targetRegion, @@ -550,8 +553,8 @@ const Dragster = function (params = {}) { dragsterEventInfo = JSON.parse(JSON.stringify(defaultDragsterEventInfo)); event.dragster = dragsterEventInfo; - if (finalParams.onBeforeDragStart(event) === FALSE || event.which === 3 /* detect right click */) { - return FALSE; + if (finalParams.onBeforeDragStart(event) === false || event.which === 3 /* detect right click */) { + return false; } event.preventDefault(); @@ -559,19 +562,19 @@ const Dragster = function (params = {}) { draggedElement = getElement(event.target, isDraggableCallback); if (!draggedElement) { - return FALSE; + return false; } moveEvent = isTouch ? EVT_TOUCHMOVE : EVT_MOUSEMOVE; upEvent = isTouch ? EVT_TOUCHEND : EVT_MOUSEUP; regions.forEach(function (region) { - region.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE); - region.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE); + addEventListeners(region, [moveEvent, upEvent], regionEventHandlers.mousemove); + addEventListeners(region, [moveEvent, upEvent], regionEventHandlers.mouseup); }); - document.body.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE); - document.body.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE); + addEventListeners(document.body, [moveEvent, upEvent], regionEventHandlers.mousemove); + addEventListeners(document.body, [moveEvent, upEvent], regionEventHandlers.mouseup); targetRegion = draggedElement.getBoundingClientRect(); @@ -609,8 +612,8 @@ const Dragster = function (params = {}) { mousemove: function (event) { event.dragster = dragsterEventInfo; - if (finalParams.onBeforeDragMove(event) === FALSE || !shadowElementRegion) { - return FALSE; + if (finalParams.onBeforeDragMove(event) === false || !shadowElementRegion) { + return false; } event.preventDefault(); @@ -701,10 +704,10 @@ const Dragster = function (params = {}) { isFromDragOnlyRegion, canBeCloned; - if (finalParams.onBeforeDragEnd(event) === FALSE) { + if (finalParams.onBeforeDragEnd(event) === false) { resetDragsterWorkspace(moveEvent, upEvent); - return FALSE; + return false; } findByClass = finalParams.replaceElements ? CLASS_REPLACABLE : CLASS_PLACEHOLDER; @@ -719,7 +722,7 @@ const Dragster = function (params = {}) { if (!draggedElement || !dropTarget) { resetDragsterWorkspace(moveEvent, upEvent); - return FALSE; + return false; } dropDraggableTarget = getElement(dropTarget, isDraggableCallback); @@ -859,20 +862,20 @@ const Dragster = function (params = {}) { * @return {Object} updated event info */ moveElement: function (dragsterEvent, dropTarget, dropDraggableTarget) { - var dropTemp = finalParams.wrapDraggableElements === FALSE ? draggedElement : createElementWrapper(), + var dropTemp = finalParams.wrapDraggableElements === false ? draggedElement : createElementWrapper(), placeholderPosition = dropTarget.dataset.placeholderPosition; if (placeholderPosition === POS_TOP) { insertBefore(dropDraggableTarget, dropTemp); } else { - if (finalParams.wrapDraggableElements === FALSE) { + if (finalParams.wrapDraggableElements === false) { insertAfter(dropTemp, dropDraggableTarget); } else { insertAfter(dropDraggableTarget, dropTemp); } } - if (draggedElement.firstChild && finalParams.wrapDraggableElements === TRUE) { + if (draggedElement.firstChild && finalParams.wrapDraggableElements === true) { dropTemp.appendChild(draggedElement.firstChild); } @@ -937,7 +940,7 @@ const Dragster = function (params = {}) { * * @method scrollWindow * @private - * @param event {Object} event object + * @param {Object} event - event object */ scrollWindow = function (event) { var eventObject = event.changedTouches ? event.changedTouches[0] : event, @@ -974,8 +977,8 @@ const Dragster = function (params = {}) { region.classList.add(CLASS_REGION); region.dataset.dragsterId = dragsterId; - region.addEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, FALSE); - region.addEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, FALSE); + region.addEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, false); + region.addEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, false); }); }; @@ -1000,19 +1003,19 @@ const Dragster = function (params = {}) { regions.forEach(function (region) { region.classList.remove(CLASS_REGION); - region.removeEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, FALSE); - region.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, FALSE); - region.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, FALSE); + region.removeEventListener(EVT_MOUSEDOWN, regionEventHandlers.mousedown, false); + region.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, false); + region.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, false); - region.removeEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, FALSE); - region.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, FALSE); - region.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, FALSE); + region.removeEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, false); + region.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, false); + region.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, false); }); - document.body.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, FALSE); - document.body.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, FALSE); - document.body.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, FALSE); - document.body.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, FALSE); + document.body.removeEventListener(EVT_MOUSEMOVE, regionEventHandlers.mousemove, false); + document.body.removeEventListener(EVT_TOUCHMOVE, regionEventHandlers.mousemove, false); + document.body.removeEventListener(EVT_MOUSEUP, regionEventHandlers.mouseup, false); + document.body.removeEventListener(EVT_TOUCHEND, regionEventHandlers.mouseup, false); window.removeEventListener('resize', discoverWindowHeight, false); }, diff --git a/dragster.min.js b/dragster.min.js index 3935e20..fe9f653 100644 --- a/dragster.min.js +++ b/dragster.min.js @@ -10,4 +10,4 @@ * * Date: 2017-06-28T22:30Z */ -!function(e,t,n){"use strict";"function"==typeof define&&define.amd?define(t,n):"object"==typeof exports?exports=module.exports=n():e[t]=n()}(this,"Dragster",function(){"use strict";return function(e={}){function t(){}var n,a,p,f,h,v,o,s,E,L,r,d,l,i,c,w,m,u,g,y,C,D,b,B,T,H,M,N,P,R,S,I="dragster-",O="is-dragging",A=I+"draggable",Y=I+"drag-region",x=I+"drop-placeholder",X=I+"temp",j=X+"-container",k=I+"is-hidden",q=I+"replacable",F="touchstart",U="touchmove",z="touchend",J="mousedown",W="mousemove",G="mouseup",K="top",Q="bottom",V="px",Z="div",$=!1,_=null,ee={elementSelector:".dragster-block",regionSelector:".dragster-region",dragHandleCssClass:$,dragOnlyRegionCssClass:I+"region--drag-only",replaceElements:$,updateRegionsHeight:!0,minimumRegionHeight:60,onBeforeDragStart:t,onAfterDragStart:t,onBeforeDragMove:t,onAfterDragMove:t,onBeforeDragEnd:t,onAfterDragEnd:t,onAfterDragDrop:t,scrollWindowOnDrag:$,dragOnlyRegionsEnabled:$,cloneElements:$,wrapDraggableElements:!0,shadowElementUnderMouse:$},te=$,ne=$,oe={drag:{node:_},drop:{node:_},shadow:{node:_,top:0,left:0},placeholder:{node:_,position:_},dropped:_,clonedFrom:_,clonedTo:_},re={},ae=window.innerHeight,se=Math.floor(65536*(1+Math.random())).toString(16);for(n in e)Object.prototype.hasOwnProperty.call(e,"key")&&(ee[n]=e[n]);return ee={...ee,...e},C=function(){return[].slice.call(document.querySelectorAll(ee.regionSelector))},D=function(e){if(ee.wrapDraggableElements===$)return console.warn("You have disabled the default behavior of wrapping the draggable elements. If you want Dragster.js to work properly you still will have to do this manually.\n\nMore info: https://github.com/sunpietro/dragster/blob/master/README.md#user-content-wrapdraggableelements---boolean"),$;e.forEach(function(e){var t=l(),n=e.parentNode;if(n.classList.contains(A))return $;n.insertBefore(t,e),n.removeChild(e),t.appendChild(e)})},o=(y=function(){return[].slice.call(document.querySelectorAll(ee.elementSelector))})(),a=C(),ee.replaceElements&&((_=document.createElement(Z)).classList.add(k),_.classList.add(j),document.body.appendChild(_)),p=function(e,t){var n=e.parentNode;if(n&&(!e.classList||!e.classList.contains(Y)||e.classList.contains(ee.dragOnlyRegionCssClass)))return t(e)?e:t(n)?n:p(n,t)},m=function(e){[].slice.call(document.getElementsByClassName(e)).forEach(function(e){e.dataset.dragsterId===se&&e.parentNode.removeChild(e)})},u=function(e,t){t&&(a.forEach(function(e){e.removeEventListener(t,s.mousemove)}),document.body.removeEventListener(t,s.mousemove)),e&&e.classList.remove(O),[].slice.call(document.getElementsByClassName(A)).forEach(function(e){e.firstChild||e.parentNode.removeChild(e)}),m(x),m(X),b()},g=function(){[].slice.call(document.getElementsByClassName(q)).forEach(function(e){e.classList.remove(q)})},l=function(){var e=document.createElement(Z);return e.classList.add(A),e.dataset.dragsterId=se,e},c=function(){var e=document.createElement(Z);return e.classList.add(x),e.dataset.dragsterId=se,e},i=function(){var e=document.createElement(Z);return e.classList.add(X),e.classList.add(k),e.style.position="fixed",e.dataset.dragsterId=se,document.body.appendChild(e),e},r=function(e,t){var n;e&&e.parentNode&&(n=ee.wrapDraggableElements===$?e:e.nextSibling,e.parentNode.insertBefore(t,n))},d=function(e,t){e&&e.parentNode&&e.parentNode.insertBefore(t,e)},E=function(e){return e.classList&&e.classList.contains(A)&&e.dataset.dragsterId===se},L=function(e){return e.classList&&e.classList.contains(ee.dragOnlyRegionCssClass)},b=function(){ee.updateRegionsHeight&&[].slice.call(document.getElementsByClassName(Y)).forEach(function(e){var t=[].slice.call(e.querySelectorAll(ee.elementSelector)),n=ee.minimumRegionHeight;t.length&&(t.forEach(function(e){var t=window.getComputedStyle(e);n+=e.offsetHeight+parseInt(t.marginTop,10)+parseInt(t.marginBottom,10)}),e.style.height=n+V)})},H=function(e,t){u(v,e),u(v,t)},s={mousedown:function(e){if(ee.dragHandleCssClass&&("string"!=typeof ee.dragHandleCssClass||!e.target.classList.contains(ee.dragHandleCssClass)))return $;var t,n,o=e.type===F,r=e.changedTouches?e.changedTouches[0]:e;return re=JSON.parse(JSON.stringify(oe)),e.dragster=re,ee.onBeforeDragStart(e)===$||3===e.which?$:(e.preventDefault(),(v=p(e.target,E))?(t=o?U:W,n=o?z:G,a.forEach(function(e){e.addEventListener(t,s.mousemove,$),e.addEventListener(n,s.mouseup,$)}),document.body.addEventListener(t,s.mousemove,$),document.body.addEventListener(n,s.mouseup,$),o=v.getBoundingClientRect(),P=o.left-r.clientX,R=o.top-r.clientY,(f=i()).innerHTML=v.innerHTML,f.style.width=o.width+V,f.style.height=o.height+V,f.dataset.dragsterId=se,h=f.getBoundingClientRect(),v.classList.add(O),re.drag.node=v,re.shadow.node=f,e.dragster=re,void ee.onAfterDragStart(e)):$)},mousemove:function(e){if(e.dragster=re,ee.onBeforeDragMove(e)===$||!h)return $;e.preventDefault();var t=e.changedTouches?e.changedTouches[0]:e,n=t.view?t.view.pageXOffset:0,o=t.view?t.view.pageYOffset:0,r=t.clientY+o,a=t.clientX+n,s=document.elementFromPoint(t.clientX,t.clientY),d=p(s,E),l=ee.shadowElementUnderMouse?t.clientY+R:t.clientY,i=ee.shadowElementUnderMouse?a+P:a-h.width/2,c=re.drag.node&&re.drag.node.dataset,m=!(!d||!p(d,L)),u=s.dataset.dragsterId===se,g=s.classList.contains(Y)&&u,n=s.classList.contains(ee.dragOnlyRegionCssClass)&&u,t=s.classList.contains(x),a=0{e.forEach(e=>t.addEventListener(e,n,!1))};var O={mousedown:function(e){var t,n,o,r;return!(R.dragHandleCssClass&&("string"!=typeof R.dragHandleCssClass||!e.target.classList.contains(R.dragHandleCssClass)))&&(o=e.type===C,r=e.changedTouches?e.changedTouches[0]:e,S=JSON.parse(JSON.stringify(ee)),e.dragster=S,!1!==R.onBeforeDragStart(e)&&3!==e.which&&(e.preventDefault(),!!(h=p(e.target,v))&&(t=o?D:B,n=o?b:T,a.forEach(function(e){ne(e,[t,n],O.mousemove),ne(e,[t,n],O.mouseup)}),ne(document.body,[t,n],O.mousemove),ne(document.body,[t,n],O.mouseup),o=h.getBoundingClientRect(),z=o.left-r.clientX,J=o.top-r.clientY,(f=j()).innerHTML=h.innerHTML,f.style.width=o.width+N,f.style.height=o.height+N,f.dataset.dragsterId=I,Y=f.getBoundingClientRect(),h.classList.add(G),S.drag.node=h,S.shadow.node=f,e.dragster=S,void R.onAfterDragStart(e))))},mousemove:function(e){if(e.dragster=S,!1===R.onBeforeDragMove(e)||!Y)return!1;e.preventDefault();var t=e.changedTouches?e.changedTouches[0]:e,n=t.view?t.view.pageXOffset:0,o=t.view?t.view.pageYOffset:0,r=t.clientY+o,n=t.clientX+n,a=document.elementFromPoint(t.clientX,t.clientY),s=p(a,v),t=R.shadowElementUnderMouse?t.clientY+J:t.clientY,n=R.shadowElementUnderMouse?n+z:n-Y.width/2,l=S.drag.node&&S.drag.node.dataset,d=!(!s||!p(s,x)),i=a.dataset.dragsterId===I,c=a.classList.contains(L)&&i,i=a.classList.contains(R.dragOnlyRegionCssClass)&&i,u=a.classList.contains(y),m=0G zr7XE)-x%K;hlw{zB}?*)O$~bkmw@0B2Cb!N& zjJMMXk3%LCvF+zn0H|OOL_ABvQ6P=o?#_=L{QYEHghD39nHRCxE9imTZ6roctk$?* za^ff_a>*j*rOY=b+y{R$V8-e3H8>kEp0X#iq;|O79((%zF#xQ|9ic=>;BOF154ZAw1yKtkfGofBa(3Y!JMSbNM#ZZq}elzRg+RVi{`O9o*|%tBWt zSu$7SD`9eyaAUA2rfOy4Qs!vHEa`vzRy5nq{azT_}MN8)RbZ} z2vX@K(jXLED!|`OC&F9m5 zT_X5C8;XP}!@5!;bS37V4Z&x1Y6W%*iB+MNGb^AY?pI;fCJtc-m`MkTh@v+khg#0L zT38oCdc>8oeYG-(1h1TTnt1VHVRfs8E=dCqH1nC)DuSFU6$58MzNNtYOZ_o8h}zA4 z;KFAvpG47uC>yOzWVA|C1SaBkNyLWI?Jh{kp36Y7NJHgzC9*M&q1W_5{O5@nm&ey4 zhrNQ|63OUPOU4N~+#ypNIi{zc44h#kL}Kmz_~Q?I-&;FddM<%EiLqtdwj;$ALINLI zJ9~ByYO%Nxa)a6DItn>)BBW4($O*jke9AAt8%yNO8F*2Ih{x@A+q!(m-&2M^y9b+h z9OshYk1fb+T8cke$a(kPNmXRd2>4fmTqZ~7LuyE2Ohxk1h_$GqnTASb7)8cZ{psxita%O;#MC-xGcp22Q=5I%PXD&(AmsdVyCoLW;mmpe#um?QX* znY$yqF_3{;RV+OS!pO%CL^=>N0&g*~fSv`lp8r3VQ;WJV9UCX`=xh8dyQ&03*snFF zOLBvRAui^N)&)FdbxP0ot>0}ju1)=BlO_7C@Mo11jcuF6v|J-(Qf-hYIBBsJ?fJYs zT8a3?p3fT>E}iD2U>7<;T4#12G1%gEpS!We!42X~#jQ4odBkKPvHh7Qd*+Q95bQ?7 zVGhy@iZZ#(XU9H#^|;+GAG>A@O7~$+RuWS2Hf)h$AKihPk_1ESgO!~-%Zv?*HPw6> z#U@NKxsq>&V*P59uM^F5qiBXXS zt%$efy_ChW%}!F3ldR?$QwX!k5RM6wL-a3fFner+5C6gjuha%>5r8?VoFS(aiJO|k z@SdS~+`!D{@PG&iPLrkp(PLF-fg^DGSjK~AGl#Q#c@^G9$XujiTeVosRYFZ``>yTy z7zG$8xvPYZbs1JYsgxzuLUV*zko$i|bYu8ikfX9CTsjT4Z@c|!AZb7RlJBH;; zXY3_t%&tXDcDnZZ!oKcp)Y@WY_kpHD`PP{Z6_c77g;t<)y?P+O^i%~V4bG@C8WW{@XipvPoIWgDGI#Cd02L(39k`X7LA7Cm=*(1?xn`?qtDE3- z%0({&A#S#?DhiS-s0#>K(S-pYz?-4?z~duTr>nLSo>`lC*M09Y6z?yu&d(ezb4$Nw zOoqdm#dIcG`Ubs%JX*^2*IF?MqTT)hYp8L9aG>l2ZksSA(8H{-McvbCSpki$;&|jv z^DU|9AG-UnJ<-2)uSs*J<**|14uXDP$&_S$eiAD)!F(m+ZNPm526Rvb2FjZE#f1A1 z%0UzY_7dKL(|o4FQB74Rfu7X-Tk;Z9=(d(KH^ds!59o37rs(?g1O%7wWSHCXH1uTv zT>acSTh8Y;F7g+>(iq%t=x`&SK`nQnh`7?&j_UqsfKk>nX5(R1<98zT4W;pFqpgZA z6}^|zbZc!<&1`7hY*Zr-P+0rTs#;&SnO+uHo@mURO6M+Q(|-1VRgc))a~*Wh0gHy! zo8@XkWudh#p(*8B-QpzG&P`?~+q)=VN}6o9OM}8pP*}IDmI^Adm6Ch-b4a}nSr4V1*Iewk+o8t$ znvAD#Ce1jgn8vjGv$wfw&C?ATJq9)_zKU9MDzJzKA-dv%2R|o1i6;qx1Qw$E>`y{DZK8P^0m_3IltCH4_Ziw zux+;mTH$;?p3g`90Z4`I_85;5BH|NC9`j7(`z#XEjCyK$ApNxjG|~nf7~|TtSG%1k z-&Oqpsf32ysq?TfiQQT|wu}h9Qr0Y|EsrKT7bJKh7ZeF~J?k8CU*{Z4IasZm?vLCV z9Pdlzle7^u5ES4af%cC;`-cF*%FSK7EyyPdcPR{PLUy}dn+#NJZMUV}M@<}CDxHx4 zjAF#+bEz+->a5M@qTkT{w?w}jFa@iFlvYu^RE4f?CsjChTMd+j&ctQPm9v%U%FUE( zBy{_lw=GX1K=``96*ux73=$JC6GY6!Zb&$puE9kPfud}&AkXMSvxm9$k0Hv|RB^N^ zK_)cPS2IPL-QMjDnr>~iVe7tV5+fM`tt_od9>vZ+_%>9^5XH+Q~IKxS_u1yR*#WP zETO(bCK?nK?8;eS{@u-p2zV92mNBzdMt|0zLf?4QzDPA)kbWtN{HBsfady6;%rCv8 ztX$2P-f0P!ln{)d39xCwYr6JtS2bPP3%nQp(V0=r{dcWI)!3* zEwluc2rKs_?1_bXPqGdxD&C*>y8Zm(AS*TYXI57=`)(Pe-Cl?3s2c&|vGUDI<9Db< zp`nlJP}Z9=!lsMeYN$Wie95=QxG{TjTPur&P4Oq^Gf ze8_H)%8oARa}dyHRHd26)O~H`qNxm>eT#UbV0?zAU(DRE5=)-PwPc#Ew40>R1h-#q z${&HdUNz>AK&^>&1Ki;gcfGCd`lQSJ^%H#=XPuuf8LAch@Jbe9;{^)TQYJuP9E}v`DU2EUklZ0a-!pPp)8Tn!y_pJe& z>_jmQeIhv9@lq~GC~1#bIOqOoEVRAu?#mAT{j6R2OmOYO4M^x_{E%HgU?VG(V^j@U zVURMpCIN9H;%PDUP(Cpx+WFZnN;V)gBF`2{uF&6^xa$4w+41Sc&1t&Ai7SXLMf|zb z-S6!E_jYg3e$o9ChjxBw4P!bGKBEQ!0n~id6R(%N8gja=v;Jp-Q*(Oq5Hc>JUix$<%!>nJWld_BHu)ev%9o`f#(o5Pc2+v% z!d2wrM8uqGE7_gLrTLgOHG%ZYsmnDAE`%_IF-(C$1gG#8ICv0%4+EIN1Y#J$9FE}x z`fvod@EXqH0d20fPe(c&I%nHzeB|~6qQiaG?r<`aDuail zhlQOma0g_}0#9!0PIe1233d4F+->Wf0i(i24dU1rIfl!Oea|Dv;;U?PBIhToymEBG z;=wo)E*CnyOPdom#ldfBi%?I8-yD6yP-z~UA*1(cDvlOVBg^or7U-?$j(uDWvaYqMRZENGEJ@H1R;Sv z(SWlcc<)m@p-U*lT*`i=%p>-vB}kmES_zY^4G0js3jrAlySsz}nsbVfMZUDXj8%w2e@cY* zUU4?b8@Ei7aA~pN5@)8iZ}}AApPUUu#5s4x*ct|maby4G%NP4U8N1u6k0WH*#4t_M z66^-O0Ua5;`{n^E-=LaLHDX>W2V{ku2_}7zHFl%R8NEWG2p4l};06IYJN*lp>t?%c z5b}Y3bmX6z`4tIr%d!Xo`M-o?r{IVZnhzhXNV@2RoyP{TRJZjtCVZaZ{!lJNtgWu`)*mxvg8&Y8=pq2IGu8@p4Yd48lIq5=ncVmA(i)+adT zGp?ZnmW)HxQ$mofpru9}S=!l9n9@6sOJh{V-1>|DMbFV1@H~dh{s-af`tXOB#zs-aG8PCYFifBhu|k*Q%nJnW0qUMw1LWNCpJ*|weY&1!d@X=A}J-GEE4bV!Dv% zwLzmONsFv_FBZktO3C-;V$nE&dut8_W_~OJb=*VOYf!UC?a-ho&Jrdi!&;;15fPcn zj^>K(g*zcQ!ED41%Hj%4&_o`@&OEfs2y>v~#w&o3=O0(JB~UN!nl+Nyr&Hu6bwSV_ zBGMu&58BAFayU;SpNkNT^NAv)rH#m>3W8@6Loirg|_c zTE_QD^L4E>wVi%d2N4w4l9(my%_NTj727yOWi}xpB7hNM@Gq?JuyFOgNweNZpd&<4d6SnosMrhI0(y=OaSyGVSd=`78^0f5{DKm^ zDlVDIuUQ zevMHjp|i}3JTF>-I^c%%`#@L$p(8Oy5Qq({rpX~ne9R_cEQog_k%|NdbQ{AC8xB$9 z3D0dj+K8MX{)IJhIo4>mEQH;zSsyr3WsV$MuFyYLTpYUnhjJOOD_Dw+sf_#bAp=e1 zJm$rfT~Frf)eY`ck5s;@xAM}siBJVgtUYkk8&FZ6V-~U%r8%IOd>|WK2SNA>EfP;| z?9!3Uzh!}l^?0S@L-(UiGRJ}G`ENIu7nV|;pOr6lkb`7Vd*)xR0dhhJ_2qD({X8#K7;wJjA z4G|Ewq@*<(n$g4|Qq%(L(>$M`FZ0Kvm`V&Ev6y!?_;^P~q^7IlA#)+exO z#6fX4kUeB%2Lr4q`K>=8EEdMh%#8^R(+LX3C2iO7RYxuP{9+btLQO2RlZh}`EJllk z=y~n7*K(X`yWN`fjEj`T)#|1tLL0o0mRIPzq_@gt;z@8|XhtpMMHdTqv50#kWQCQO zi;ozi&ofz`(M0J-Bw(|Idt_jMvA>srnzUw)#ANOAtKB}5`C~sBuiUZ85&}|}YFDbW zm2X%V{E|@OCZS|?$zxTn?NT?=GhQ1UToYZlo#d#MLc90Xen22Tl~GX>9SMqp_A*uW zGFA4XIF@en+HD3iG#8QK?KSLmyC#gJ+ikZ+&tT{RWMG6TVgy?ZA(Px)Rb|8T?=@Ww zv}mvBN6)Jig+WA8^s=t zI?|*E+YpM9<3};_vp1JZxNshuEzYifHj&7as9P64xie5#H(38^9eE>T}@A9TiAd72g}vW>#|h-!X7CQ!OMv z^E_vz-(`+fr~)@E^m}bcC0Lj=v1n>`Dt5g_K(!u}mlqqBZ(LnGbM>N6Y>=c{ zBW=1%@dL!2(O4I*t0NICj`)yOPMzJ4kZfK&aW<3WV&PxbP~ETF<&v}tYec&(MM0}N zm&H?V-|I|i)78M#4vhSkW3vJr=S|PUjGUSFMwZ-Q^7|!Mq?qll3Uyj6 z@u~U1ritH|cPmD#o1KpFjMK5XnP@#WSaL&^eKo?WB5U3-|lQfnqwKQFMH)x=V?0x-Spo#3)a_QboR8{C2vUks0^4sRy oh-Yo)=_xf~o}N