New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
dragsterjs
Advanced tools
dragsterjs - npm Package Compare versions
Comparing version 1.4.2 to 1.5.0
| { | ||
| "name": "dragsterjs", | ||
| "version": "1.4.2", | ||
| "version": "1.5.0", | ||
| "homepage": "https://github.com/sunpietro/dragster", | ||
@@ -5,0 +5,0 @@ "authors": [ |
1583
dragster.js
| /*@preserve | ||
| * Dragster - drag'n'drop library v1.4.2 | ||
| * Dragster - drag'n'drop library v1.5.0 | ||
| * https://github.com/sunpietro/dragster | ||
@@ -11,911 +11,942 @@ * | ||
| * | ||
| * Date: 2017-03-30T16:30Z | ||
| * Date: 2017-05-06T22:30Z | ||
| */ | ||
| (function (window, document) { | ||
| ;(function (root, moduleName, factory) { | ||
| 'use strict'; | ||
| window.Dragster = function (params) { | ||
| var PREFIX_CLASS_DRAGSTER = 'dragster-', | ||
| CLASS_DRAGGING = 'is-dragging', | ||
| CLASS_DRAGOVER = 'is-drag-over', | ||
| CLASS_DRAGGABLE = PREFIX_CLASS_DRAGSTER + 'draggable', | ||
| CLASS_REGION = PREFIX_CLASS_DRAGSTER + 'drag-region', | ||
| CLASS_PLACEHOLDER = PREFIX_CLASS_DRAGSTER + 'drop-placeholder', | ||
| CLASS_TEMP_ELEMENT = PREFIX_CLASS_DRAGSTER + 'temp', | ||
| CLASS_TEMP_CONTAINER = CLASS_TEMP_ELEMENT + '-container', | ||
| CLASS_HIDDEN = PREFIX_CLASS_DRAGSTER + 'is-hidden', | ||
| CLASS_REPLACABLE = PREFIX_CLASS_DRAGSTER + 'replacable', | ||
| EVT_TOUCHSTART = 'touchstart', | ||
| EVT_TOUCHMOVE = 'touchmove', | ||
| EVT_TOUCHEND = 'touchend', | ||
| EVT_MOUSEDOWN = 'mousedown', | ||
| EVT_MOUSEMOVE = 'mousemove', | ||
| EVT_MOUSEUP = 'mouseup', | ||
| POS_TOP = 'top', | ||
| POS_BOTTOM = 'bottom', | ||
| UNIT = 'px', | ||
| DIV = 'div', | ||
| FALSE = false, | ||
| TRUE = true, | ||
| NULL = null, | ||
| dummyCallback = function () {}, | ||
| finalParams = { | ||
| elementSelector: '.dragster-block', | ||
| regionSelector: '.dragster-region', | ||
| dragHandleCssClass: FALSE, | ||
| dragOnlyRegionCssClass: PREFIX_CLASS_DRAGSTER + 'region--drag-only', | ||
| replaceElements: FALSE, | ||
| updateRegionsHeight: TRUE, | ||
| minimumRegionHeight: 60, | ||
| onBeforeDragStart: dummyCallback, | ||
| onAfterDragStart: dummyCallback, | ||
| onBeforeDragMove: dummyCallback, | ||
| onAfterDragMove: dummyCallback, | ||
| onBeforeDragEnd: dummyCallback, | ||
| onAfterDragEnd: dummyCallback, | ||
| onAfterDragDrop: dummyCallback, | ||
| scrollWindowOnDrag: FALSE, | ||
| dragOnlyRegionsEnabled: FALSE, | ||
| cloneElements: FALSE, | ||
| wrapDraggableElements: TRUE, | ||
| shadowElementUnderMouse: FALSE, | ||
| if (typeof define === 'function' && define.amd) { | ||
| define(moduleName, factory); | ||
| } else if (typeof exports === 'object') { | ||
| exports = module.exports = factory(); | ||
| } else { | ||
| root[moduleName] = factory(); | ||
| } | ||
| })(this, 'Dragster', function () { | ||
| 'use strict'; | ||
| var Dragster = function (params) { | ||
| var PREFIX_CLASS_DRAGSTER = 'dragster-', | ||
| CLASS_DRAGGING = 'is-dragging', | ||
| CLASS_DRAGOVER = 'is-drag-over', | ||
| CLASS_DRAGGABLE = PREFIX_CLASS_DRAGSTER + 'draggable', | ||
| CLASS_REGION = PREFIX_CLASS_DRAGSTER + 'drag-region', | ||
| CLASS_PLACEHOLDER = PREFIX_CLASS_DRAGSTER + 'drop-placeholder', | ||
| CLASS_TEMP_ELEMENT = PREFIX_CLASS_DRAGSTER + 'temp', | ||
| CLASS_TEMP_CONTAINER = CLASS_TEMP_ELEMENT + '-container', | ||
| CLASS_HIDDEN = PREFIX_CLASS_DRAGSTER + 'is-hidden', | ||
| CLASS_REPLACABLE = PREFIX_CLASS_DRAGSTER + 'replacable', | ||
| EVT_TOUCHSTART = 'touchstart', | ||
| EVT_TOUCHMOVE = 'touchmove', | ||
| EVT_TOUCHEND = 'touchend', | ||
| EVT_MOUSEDOWN = 'mousedown', | ||
| EVT_MOUSEMOVE = 'mousemove', | ||
| EVT_MOUSEUP = 'mouseup', | ||
| POS_TOP = 'top', | ||
| POS_BOTTOM = 'bottom', | ||
| UNIT = 'px', | ||
| DIV = 'div', | ||
| FALSE = false, | ||
| TRUE = true, | ||
| NULL = null, | ||
| dummyCallback = function () {}, | ||
| finalParams = { | ||
| elementSelector: '.dragster-block', | ||
| regionSelector: '.dragster-region', | ||
| dragHandleCssClass: FALSE, | ||
| dragOnlyRegionCssClass: PREFIX_CLASS_DRAGSTER + 'region--drag-only', | ||
| replaceElements: FALSE, | ||
| updateRegionsHeight: TRUE, | ||
| minimumRegionHeight: 60, | ||
| onBeforeDragStart: dummyCallback, | ||
| onAfterDragStart: dummyCallback, | ||
| onBeforeDragMove: dummyCallback, | ||
| onAfterDragMove: dummyCallback, | ||
| onBeforeDragEnd: dummyCallback, | ||
| onAfterDragEnd: dummyCallback, | ||
| onAfterDragDrop: dummyCallback, | ||
| scrollWindowOnDrag: FALSE, | ||
| dragOnlyRegionsEnabled: FALSE, | ||
| cloneElements: FALSE, | ||
| wrapDraggableElements: TRUE, | ||
| shadowElementUnderMouse: FALSE, | ||
| }, | ||
| visiblePlaceholder = { | ||
| top: FALSE, | ||
| bottom: FALSE, | ||
| }, | ||
| defaultDragsterEventInfo = { | ||
| drag: { | ||
| /** | ||
| * Contains drag node reference | ||
| * | ||
| * @property node | ||
| * @type {HTMLElement} | ||
| */ | ||
| node: NULL, | ||
| }, | ||
| visiblePlaceholder = { | ||
| top: FALSE, | ||
| bottom: FALSE, | ||
| }, | ||
| defaultDragsterEventInfo = { | ||
| drag: { | ||
| /** | ||
| * Contains drag node reference | ||
| * | ||
| * @property node | ||
| * @type {HTMLElement} | ||
| */ | ||
| node: NULL, | ||
| }, | ||
| drop: { | ||
| /** | ||
| * Contains drop node reference | ||
| * | ||
| * @property node | ||
| * @type {HTMLElement} | ||
| */ | ||
| node: NULL, | ||
| }, | ||
| shadow: { | ||
| /** | ||
| * Contains shadow element node reference | ||
| * | ||
| * @property node | ||
| * @type {HTMLElement} | ||
| */ | ||
| node: NULL, | ||
| /** | ||
| * Contains top position value of shadow element | ||
| * | ||
| * @property top | ||
| * @type {Number} | ||
| */ | ||
| top: 0, | ||
| /** | ||
| * Contains left position value of shadow element | ||
| * | ||
| * @property left | ||
| * @type {Number} | ||
| */ | ||
| left: 0 | ||
| }, | ||
| placeholder: { | ||
| /** | ||
| * Contains placeholder node reference | ||
| * | ||
| * @property node | ||
| * @type {HTMLElement} | ||
| */ | ||
| node: NULL, | ||
| /** | ||
| * Contains position type of placeholder | ||
| * | ||
| * @property position | ||
| * @type {String} | ||
| * @example 'top' or 'bottom' | ||
| */ | ||
| position: NULL, | ||
| }, | ||
| drop: { | ||
| /** | ||
| * Reference to dropped element | ||
| * Contains drop node reference | ||
| * | ||
| * @property dropped | ||
| * @property node | ||
| * @type {HTMLElement} | ||
| */ | ||
| dropped: NULL, | ||
| node: NULL, | ||
| }, | ||
| shadow: { | ||
| /** | ||
| * Reference to cloned element | ||
| * Contains shadow element node reference | ||
| * | ||
| * @property clonedFrom | ||
| * @property node | ||
| * @type {HTMLElement} | ||
| */ | ||
| clonedFrom: NULL, | ||
| node: NULL, | ||
| /** | ||
| * Reference to dropped cloned element | ||
| * Contains top position value of shadow element | ||
| * | ||
| * @property clonedTo | ||
| * @property top | ||
| * @type {Number} | ||
| */ | ||
| top: 0, | ||
| /** | ||
| * Contains left position value of shadow element | ||
| * | ||
| * @property left | ||
| * @type {Number} | ||
| */ | ||
| left: 0 | ||
| }, | ||
| placeholder: { | ||
| /** | ||
| * Contains placeholder node reference | ||
| * | ||
| * @property node | ||
| * @type {HTMLElement} | ||
| */ | ||
| clonedTo: NULL, | ||
| node: NULL, | ||
| /** | ||
| * Contains position type of placeholder | ||
| * | ||
| * @property position | ||
| * @type {String} | ||
| * @example 'top' or 'bottom' | ||
| */ | ||
| position: NULL, | ||
| }, | ||
| dragsterEventInfo = {}, | ||
| key, | ||
| regions, | ||
| getElement, | ||
| shadowElement, | ||
| shadowElementRegion, | ||
| tempContainer, | ||
| draggedElement, | ||
| draggableElements, | ||
| regionEventHandlers, | ||
| isPlaceholderCallback, | ||
| isDraggableCallback, | ||
| isInDragOnlyRegionCallback, | ||
| insertAfter, | ||
| insertBefore, | ||
| createElementWrapper, | ||
| createShadowElement, | ||
| createPlaceholder, | ||
| hideShadowElementTimeout, | ||
| removeElements, | ||
| cleanWorkspace, | ||
| cleanReplacables, | ||
| findDraggableElements, | ||
| wrapDraggableElements, | ||
| updateRegionsHeight, | ||
| scrollWindow, | ||
| discoverWindowHeight, | ||
| resetDragsterWorkspace, | ||
| dropActions, | ||
| moveActions, | ||
| shadowElementPositionXDiff, | ||
| shadowElementPositionYDiff, | ||
| windowHeight = window.innerHeight, | ||
| dragsterId = Math.floor((1 + Math.random()) * 0x10000).toString(16); | ||
| /** | ||
| * Reference to dropped element | ||
| * | ||
| * @property dropped | ||
| * @type {HTMLElement} | ||
| */ | ||
| dropped: NULL, | ||
| /** | ||
| * Reference to cloned element | ||
| * | ||
| * @property clonedFrom | ||
| * @type {HTMLElement} | ||
| */ | ||
| clonedFrom: NULL, | ||
| /** | ||
| * Reference to dropped cloned element | ||
| * | ||
| * @property clonedTo | ||
| * @type {HTMLElement} | ||
| */ | ||
| clonedTo: NULL, | ||
| }, | ||
| dragsterEventInfo = {}, | ||
| key, | ||
| regions, | ||
| getElement, | ||
| shadowElement, | ||
| shadowElementRegion, | ||
| tempContainer, | ||
| draggedElement, | ||
| draggableElements, | ||
| regionEventHandlers, | ||
| isPlaceholderCallback, | ||
| isDraggableCallback, | ||
| isInDragOnlyRegionCallback, | ||
| insertAfter, | ||
| insertBefore, | ||
| createElementWrapper, | ||
| createShadowElement, | ||
| createPlaceholder, | ||
| hideShadowElementTimeout, | ||
| removeElements, | ||
| cleanWorkspace, | ||
| cleanReplacables, | ||
| findDraggableElements, | ||
| findRegionElements, | ||
| wrapDraggableElements, | ||
| updateRegionsHeight, | ||
| scrollWindow, | ||
| discoverWindowHeight, | ||
| resetDragsterWorkspace, | ||
| dropActions, | ||
| moveActions, | ||
| shadowElementPositionXDiff, | ||
| shadowElementPositionYDiff, | ||
| addEventListenersToRegions, | ||
| windowHeight = window.innerHeight, | ||
| dragsterId = Math.floor((1 + Math.random()) * 0x10000).toString(16); | ||
| // merge the object with default config with an object with params provided by a developer | ||
| for (key in params) { | ||
| if (params.hasOwnProperty(key)) { | ||
| finalParams[key] = params[key]; | ||
| } | ||
| // merge the object with default config with an object with params provided by a developer | ||
| for (key in params) { | ||
| if (params.hasOwnProperty(key)) { | ||
| finalParams[key] = params[key]; | ||
| } | ||
| } | ||
| /* | ||
| * Find all draggable elements on the page | ||
| * | ||
| * @private | ||
| * @method findDraggableElements | ||
| * @return {Array} | ||
| */ | ||
| findDraggableElements = function () { | ||
| return [].slice.call(document.querySelectorAll(finalParams.elementSelector)); | ||
| }; | ||
| /* | ||
| * Find all draggable elements on the page | ||
| * | ||
| * @private | ||
| * @method findDraggableElements | ||
| * @return {Array} | ||
| */ | ||
| findDraggableElements = function () { | ||
| return [].slice.call(document.querySelectorAll(finalParams.elementSelector)); | ||
| }; | ||
| /* | ||
| * Wrap all elements from the `elements` param with a draggable wrapper | ||
| * | ||
| * @private | ||
| * @method findDraggableElements | ||
| * @param elements {Array} | ||
| * @return {Array} | ||
| */ | ||
| wrapDraggableElements = function (elements) { | ||
| 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' + | ||
| '\n' + | ||
| 'More info: https://github.com/sunpietro/dragster/blob/master/README.md#user-content-wrapdraggableelements---boolean' | ||
| ); | ||
| /* | ||
| * Find all regions elements on the page | ||
| * | ||
| * @private | ||
| * @method findRegionElements | ||
| * @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} | ||
| */ | ||
| wrapDraggableElements = function (elements) { | ||
| 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' + | ||
| '\n' + | ||
| 'More info: https://github.com/sunpietro/dragster/blob/master/README.md#user-content-wrapdraggableelements---boolean' | ||
| ); | ||
| return FALSE; | ||
| } | ||
| elements.forEach(function (draggableElement) { | ||
| var wrapper = createElementWrapper(), | ||
| draggableParent = draggableElement.parentNode; | ||
| if (draggableParent.classList.contains(CLASS_DRAGGABLE)) { | ||
| return FALSE; | ||
| } | ||
| elements.forEach(function (draggableElement) { | ||
| var wrapper = createElementWrapper(), | ||
| draggableParent = draggableElement.parentNode; | ||
| draggableParent.insertBefore(wrapper, draggableElement); | ||
| draggableParent.removeChild(draggableElement); | ||
| wrapper.appendChild(draggableElement); | ||
| }); | ||
| }; | ||
| if (draggableParent.classList.contains(CLASS_DRAGGABLE)) { | ||
| return FALSE; | ||
| } | ||
| draggableElements = findDraggableElements(); | ||
| regions = findRegionElements(); | ||
| draggableParent.insertBefore(wrapper, draggableElement); | ||
| draggableParent.removeChild(draggableElement); | ||
| wrapper.appendChild(draggableElement); | ||
| }); | ||
| }; | ||
| if (finalParams.replaceElements) { | ||
| tempContainer = document.createElement(DIV); | ||
| draggableElements = findDraggableElements(); | ||
| regions = [].slice.call(document.querySelectorAll(finalParams.regionSelector)); | ||
| tempContainer.classList.add(CLASS_HIDDEN); | ||
| tempContainer.classList.add(CLASS_TEMP_CONTAINER); | ||
| if (finalParams.replaceElements) { | ||
| tempContainer = document.createElement(DIV); | ||
| document.body.appendChild(tempContainer); | ||
| } | ||
| tempContainer.classList.add(CLASS_HIDDEN); | ||
| tempContainer.classList.add(CLASS_TEMP_CONTAINER); | ||
| /* | ||
| * 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. | ||
| * 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} | ||
| */ | ||
| getElement = function (element, callback) { | ||
| var parent = element.parentNode; | ||
| document.body.appendChild(tempContainer); | ||
| } | ||
| if (!parent || | ||
| (element.classList && | ||
| element.classList.contains(CLASS_REGION) && | ||
| !element.classList.contains(finalParams.dragOnlyRegionCssClass)) | ||
| ) { return undefined; } | ||
| /* | ||
| * 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. | ||
| * 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} | ||
| */ | ||
| getElement = function (element, callback) { | ||
| var parent = element.parentNode; | ||
| if (callback(element)) { return element; } | ||
| if (!parent || | ||
| (element.classList && | ||
| element.classList.contains(CLASS_REGION) && | ||
| !element.classList.contains(finalParams.dragOnlyRegionCssClass)) | ||
| ) { return undefined; } | ||
| return callback(parent) ? parent : getElement(parent, callback); | ||
| }; | ||
| if (callback(element)) { return element; } | ||
| /* | ||
| * Removes all elements defined by a selector from the DOM | ||
| * | ||
| * @private | ||
| * @method removeElements | ||
| * @param element {HTMLElement} DOM element | ||
| */ | ||
| removeElements = function (selector) { | ||
| var elements = [].slice.call(document.getElementsByClassName(selector)); | ||
| return callback(parent) ? parent : getElement(parent, callback); | ||
| }; | ||
| elements.forEach(function (element) { | ||
| if (element.dataset.dragsterId !== dragsterId) { | ||
| return; | ||
| } | ||
| element.parentNode.removeChild(element); | ||
| }); | ||
| }; | ||
| /* | ||
| * Removes all elements defined by a selector from the DOM | ||
| * | ||
| * @private | ||
| * @method removeElements | ||
| * @param element {HTMLElement} DOM element | ||
| */ | ||
| removeElements = function (selector) { | ||
| var elements = [].slice.call(document.getElementsByClassName(selector)); | ||
| elements.forEach(function (element) { | ||
| if (element.dataset.dragsterId !== dragsterId) { | ||
| return; | ||
| } | ||
| element.parentNode.removeChild(element); | ||
| /* | ||
| * 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 | ||
| */ | ||
| cleanWorkspace = function (element, eventName) { | ||
| if (eventName) { | ||
| regions.forEach(function (region) { | ||
| region.removeEventListener(eventName, regionEventHandlers.mousemove); | ||
| }); | ||
| }; | ||
| /* | ||
| * 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 | ||
| */ | ||
| cleanWorkspace = function (element, eventName) { | ||
| if (eventName) { | ||
| regions.forEach(function (region) { | ||
| region.removeEventListener(eventName, regionEventHandlers.mousemove); | ||
| }); | ||
| document.body.removeEventListener(eventName, regionEventHandlers.mousemove); | ||
| } | ||
| document.body.removeEventListener(eventName, regionEventHandlers.mousemove); | ||
| } | ||
| if (element) { | ||
| element.classList.remove(CLASS_DRAGGING); | ||
| } | ||
| if (element) { | ||
| element.classList.remove(CLASS_DRAGGING); | ||
| // remove all empty draggable nodes | ||
| [].slice.call(document.getElementsByClassName(CLASS_DRAGGABLE)).forEach(function (dragEl) { | ||
| if (!dragEl.firstChild) { | ||
| dragEl.parentNode.removeChild(dragEl); | ||
| } | ||
| }); | ||
| // remove all empty draggable nodes | ||
| [].slice.call(document.getElementsByClassName(CLASS_DRAGGABLE)).forEach(function (dragEl) { | ||
| if (!dragEl.firstChild) { | ||
| dragEl.parentNode.removeChild(dragEl); | ||
| } | ||
| }); | ||
| removeElements(CLASS_PLACEHOLDER); | ||
| removeElements(CLASS_TEMP_ELEMENT); | ||
| updateRegionsHeight(); | ||
| }; | ||
| removeElements(CLASS_PLACEHOLDER); | ||
| removeElements(CLASS_TEMP_ELEMENT); | ||
| updateRegionsHeight(); | ||
| }; | ||
| /* | ||
| * Removes replacable classname from all replacable elements | ||
| * | ||
| * @private | ||
| * @method cleanReplacables | ||
| */ | ||
| cleanReplacables = function () { | ||
| ([].slice.call(document.getElementsByClassName(CLASS_REPLACABLE))).forEach(function (elem) { | ||
| elem.classList.remove(CLASS_REPLACABLE); | ||
| }); | ||
| }; | ||
| /* | ||
| * Removes replacable classname from all replacable elements | ||
| * | ||
| * @private | ||
| * @method cleanReplacables | ||
| */ | ||
| cleanReplacables = function () { | ||
| ([].slice.call(document.getElementsByClassName(CLASS_REPLACABLE))).forEach(function (elem) { | ||
| elem.classList.remove(CLASS_REPLACABLE); | ||
| }); | ||
| }; | ||
| /* | ||
| * Creates a wrapper for a draggable element | ||
| * | ||
| * @private | ||
| * @method createElementWrapper | ||
| * @return {HTMLElement} DOM element | ||
| */ | ||
| createElementWrapper = function () { | ||
| var wrapper = document.createElement(DIV); | ||
| /* | ||
| * Creates a wrapper for a draggable element | ||
| * | ||
| * @private | ||
| * @method createElementWrapper | ||
| * @return {HTMLElement} DOM element | ||
| */ | ||
| createElementWrapper = function () { | ||
| var wrapper = document.createElement(DIV); | ||
| wrapper.classList.add(CLASS_DRAGGABLE); | ||
| wrapper.dataset.dragsterId = dragsterId; | ||
| wrapper.classList.add(CLASS_DRAGGABLE); | ||
| wrapper.dataset.dragsterId = dragsterId; | ||
| return wrapper; | ||
| }; | ||
| return wrapper; | ||
| }; | ||
| /* | ||
| * Creates a placeholder where dragged element can be dropped into | ||
| * | ||
| * @private | ||
| * @method createPlaceholder | ||
| * @return {HTMLElement} DOM element | ||
| */ | ||
| createPlaceholder = function () { | ||
| var placeholder = document.createElement(DIV); | ||
| /* | ||
| * Creates a placeholder where dragged element can be dropped into | ||
| * | ||
| * @private | ||
| * @method createPlaceholder | ||
| * @return {HTMLElement} DOM element | ||
| */ | ||
| createPlaceholder = function () { | ||
| var placeholder = document.createElement(DIV); | ||
| placeholder.classList.add(CLASS_PLACEHOLDER); | ||
| placeholder.dataset.dragsterId = dragsterId; | ||
| placeholder.classList.add(CLASS_PLACEHOLDER); | ||
| placeholder.dataset.dragsterId = dragsterId; | ||
| return placeholder; | ||
| }; | ||
| return placeholder; | ||
| }; | ||
| /* | ||
| * Creates a copy of dragged element that follows the cursor movement | ||
| * | ||
| * @private | ||
| * @method createShadowElement | ||
| * @return {HTMLElement} DOM element | ||
| */ | ||
| createShadowElement = function () { | ||
| var element = document.createElement(DIV); | ||
| /* | ||
| * Creates a copy of dragged element that follows the cursor movement | ||
| * | ||
| * @private | ||
| * @method createShadowElement | ||
| * @return {HTMLElement} DOM element | ||
| */ | ||
| createShadowElement = function () { | ||
| var element = document.createElement(DIV); | ||
| element.classList.add(CLASS_TEMP_ELEMENT); | ||
| element.classList.add(CLASS_HIDDEN); | ||
| element.classList.add(CLASS_TEMP_ELEMENT); | ||
| element.classList.add(CLASS_HIDDEN); | ||
| element.style.position = 'fixed'; | ||
| element.dataset.dragsterId = dragsterId; | ||
| element.style.position = 'fixed'; | ||
| element.dataset.dragsterId = dragsterId; | ||
| document.body.appendChild(element); | ||
| document.body.appendChild(element); | ||
| return element; | ||
| }; | ||
| 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 | ||
| */ | ||
| insertAfter = function (elementTarget, elementAfter) { | ||
| if (elementTarget && elementTarget.parentNode) { | ||
| var refChild = finalParams.wrapDraggableElements === FALSE ? elementTarget : elementTarget.nextSibling; | ||
| /* | ||
| * 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 | ||
| */ | ||
| insertAfter = function (elementTarget, elementAfter) { | ||
| if (elementTarget && elementTarget.parentNode) { | ||
| var refChild = finalParams.wrapDraggableElements === FALSE ? elementTarget : elementTarget.nextSibling; | ||
| elementTarget.parentNode.insertBefore(elementAfter, refChild); | ||
| } | ||
| }; | ||
| 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 | ||
| */ | ||
| insertBefore = function (elementTarget, elementBefore) { | ||
| if (elementTarget && elementTarget.parentNode) { | ||
| elementTarget.parentNode.insertBefore(elementBefore, elementTarget); | ||
| } | ||
| }; | ||
| /* | ||
| * 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 | ||
| */ | ||
| insertBefore = function (elementTarget, elementBefore) { | ||
| if (elementTarget && elementTarget.parentNode) { | ||
| elementTarget.parentNode.insertBefore(elementBefore, elementTarget); | ||
| } | ||
| }; | ||
| /* | ||
| * Test whether an element is a draggable element | ||
| * | ||
| * @private | ||
| * @method isDraggableCallback | ||
| * @param element {HTMLElement} | ||
| * @return {Boolean} | ||
| */ | ||
| isDraggableCallback = function (element) { | ||
| return ( | ||
| (element.classList && element.classList.contains(CLASS_DRAGGABLE)) && | ||
| element.dataset.dragsterId === dragsterId | ||
| ); | ||
| }; | ||
| /* | ||
| * Test whether an element is a draggable element | ||
| * | ||
| * @private | ||
| * @method isDraggableCallback | ||
| * @param element {HTMLElement} | ||
| * @return {Boolean} | ||
| */ | ||
| isDraggableCallback = function (element) { | ||
| return ( | ||
| (element.classList && element.classList.contains(CLASS_DRAGGABLE)) && | ||
| element.dataset.dragsterId === dragsterId | ||
| ); | ||
| }; | ||
| /* | ||
| * Test whether an element is a placeholder where a user can drop a dragged element | ||
| * | ||
| * @private | ||
| * @method isPlaceholderCallback | ||
| * @param element {HTMLElement} | ||
| * @return {Boolean} | ||
| */ | ||
| isPlaceholderCallback = function (element) { return (element.classList && element.classList.contains(CLASS_PLACEHOLDER)); }; | ||
| /* | ||
| * Test whether an element is a placeholder where a user can drop a dragged element | ||
| * | ||
| * @private | ||
| * @method isPlaceholderCallback | ||
| * @param element {HTMLElement} | ||
| * @return {Boolean} | ||
| */ | ||
| isPlaceholderCallback = function (element) { return (element.classList && element.classList.contains(CLASS_PLACEHOLDER)); }; | ||
| /* | ||
| * Test whether an element belongs to drag only region | ||
| * | ||
| * @private | ||
| * @method isInDragOnlyRegionCallback | ||
| * @param element {HTMLElement} | ||
| * @return {Boolean} | ||
| */ | ||
| isInDragOnlyRegionCallback = function (element) { return (element.classList && element.classList.contains(finalParams.dragOnlyRegionCssClass)); }; //jshint ignore:line | ||
| /* | ||
| * Test whether an element belongs to drag only region | ||
| * | ||
| * @private | ||
| * @method isInDragOnlyRegionCallback | ||
| * @param element {HTMLElement} | ||
| * @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 isPlaceholderCallback | ||
| * @param element {HTMLElement} | ||
| * @return {Boolean} | ||
| */ | ||
| updateRegionsHeight = function () { | ||
| if (finalParams.updateRegionsHeight) { | ||
| var regions = [].slice.call(document.getElementsByClassName(CLASS_REGION)); | ||
| /* | ||
| * Update the height of the regions dynamically | ||
| * | ||
| * @private | ||
| * @method isPlaceholderCallback | ||
| * @param element {HTMLElement} | ||
| * @return {Boolean} | ||
| */ | ||
| updateRegionsHeight = function () { | ||
| if (finalParams.updateRegionsHeight) { | ||
| var regions = [].slice.call(document.getElementsByClassName(CLASS_REGION)); | ||
| regions.forEach(function (region) { | ||
| var elements = [].slice.call(region.querySelectorAll(finalParams.elementSelector)), | ||
| regionHeight = finalParams.minimumRegionHeight; | ||
| regions.forEach(function (region) { | ||
| var elements = [].slice.call(region.querySelectorAll(finalParams.elementSelector)), | ||
| regionHeight = finalParams.minimumRegionHeight; | ||
| if (!elements.length) { | ||
| return; | ||
| } | ||
| if (!elements.length) { | ||
| return; | ||
| } | ||
| elements.forEach(function (element) { | ||
| var styles = window.getComputedStyle(element); | ||
| elements.forEach(function (element) { | ||
| var styles = window.getComputedStyle(element); | ||
| regionHeight += element.offsetHeight + parseInt(styles.marginTop, 10) + parseInt(styles.marginBottom, 10); | ||
| }); | ||
| regionHeight += element.offsetHeight + parseInt(styles.marginTop, 10) + parseInt(styles.marginBottom, 10); | ||
| }); | ||
| region.style.height = regionHeight + UNIT; | ||
| }); | ||
| } | ||
| }; | ||
| region.style.height = regionHeight + UNIT; | ||
| }); | ||
| } | ||
| }; | ||
| /** | ||
| * Resets DragsterJS workspace by removing mouseup/touchend event listeners | ||
| * | ||
| * @method resetDragsterWorkspace | ||
| * @private | ||
| * @param moveEvent {String} move event name (either mousemove or touchmove) | ||
| * @param upEvent {String} up event name (either mouseup or touchend) | ||
| */ | ||
| resetDragsterWorkspace = function (moveEvent, upEvent) { | ||
| cleanWorkspace(draggedElement, moveEvent); | ||
| cleanWorkspace(draggedElement, upEvent); | ||
| }; | ||
| /** | ||
| * Resets DragsterJS workspace by removing mouseup/touchend event listeners | ||
| regionEventHandlers = { | ||
| /* | ||
| * `mousedown` or `touchstart` event handler. | ||
| * When user starts dragging an element the function adds a listener to either `mousemove` or `touchmove` | ||
| * events. Creates a shadow element that follows a movement of the cursor. | ||
| * | ||
| * @method resetDragsterWorkspace | ||
| * @private | ||
| * @param moveEvent {String} move event name (either mousemove or touchmove) | ||
| * @param upEvent {String} up event name (either mouseup or touchend) | ||
| * @method regionEventHandlers.mousedown | ||
| * @param event {Object} event object | ||
| */ | ||
| resetDragsterWorkspace = function (moveEvent, upEvent) { | ||
| cleanWorkspace(draggedElement, moveEvent); | ||
| cleanWorkspace(draggedElement, upEvent); | ||
| }; | ||
| mousedown: function (event) { | ||
| if (finalParams.dragHandleCssClass && | ||
| (typeof finalParams.dragHandleCssClass !== 'string' || | ||
| !event.target.classList.contains(finalParams.dragHandleCssClass))) { | ||
| return FALSE; | ||
| } | ||
| regionEventHandlers = { | ||
| /* | ||
| * `mousedown` or `touchstart` event handler. | ||
| * When user starts dragging an element the function adds a listener to either `mousemove` or `touchmove` | ||
| * events. Creates a shadow element that follows a movement of the cursor. | ||
| * | ||
| * @private | ||
| * @method regionEventHandlers.mousedown | ||
| * @param event {Object} event object | ||
| */ | ||
| mousedown: function (event) { | ||
| if (finalParams.dragHandleCssClass && | ||
| (typeof finalParams.dragHandleCssClass !== 'string' || | ||
| !event.target.classList.contains(finalParams.dragHandleCssClass))) { | ||
| return FALSE; | ||
| } | ||
| var targetRegion, | ||
| moveEvent, | ||
| upEvent, | ||
| isTouch = event.type === EVT_TOUCHSTART, | ||
| eventObject = event.changedTouches ? event.changedTouches[0] : event; | ||
| var targetRegion, | ||
| moveEvent, | ||
| upEvent, | ||
| isTouch = event.type === EVT_TOUCHSTART, | ||
| eventObject = event.changedTouches ? event.changedTouches[0] : event; | ||
| dragsterEventInfo = JSON.parse(JSON.stringify(defaultDragsterEventInfo)); | ||
| event.dragster = dragsterEventInfo; | ||
| 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(); | ||
| event.preventDefault(); | ||
| draggedElement = getElement(event.target, isDraggableCallback); | ||
| draggedElement = getElement(event.target, isDraggableCallback); | ||
| if (!draggedElement) { | ||
| return FALSE; | ||
| } | ||
| if (!draggedElement) { | ||
| return FALSE; | ||
| } | ||
| moveEvent = isTouch ? EVT_TOUCHMOVE : EVT_MOUSEMOVE; | ||
| upEvent = isTouch ? EVT_TOUCHEND : EVT_MOUSEUP; | ||
| 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); | ||
| }); | ||
| regions.forEach(function (region) { | ||
| region.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE); | ||
| region.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE); | ||
| }); | ||
| document.body.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE); | ||
| document.body.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE); | ||
| document.body.addEventListener(moveEvent, regionEventHandlers.mousemove, FALSE); | ||
| document.body.addEventListener(upEvent, regionEventHandlers.mouseup, FALSE); | ||
| targetRegion = draggedElement.getBoundingClientRect(); | ||
| targetRegion = draggedElement.getBoundingClientRect(); | ||
| shadowElementPositionXDiff = targetRegion.left - eventObject.clientX; | ||
| shadowElementPositionYDiff = targetRegion.top - eventObject.clientY; | ||
| shadowElementPositionXDiff = targetRegion.left - eventObject.clientX; | ||
| shadowElementPositionYDiff = targetRegion.top - eventObject.clientY; | ||
| shadowElement = createShadowElement(); | ||
| shadowElement.innerHTML = draggedElement.innerHTML; | ||
| shadowElement.style.width = targetRegion.width + UNIT; | ||
| shadowElement.style.height = targetRegion.height + UNIT; | ||
| shadowElement.dataset.dragsterId = dragsterId; | ||
| shadowElementRegion = shadowElement.getBoundingClientRect(); | ||
| shadowElement = createShadowElement(); | ||
| shadowElement.innerHTML = draggedElement.innerHTML; | ||
| shadowElement.style.width = targetRegion.width + UNIT; | ||
| shadowElement.style.height = targetRegion.height + UNIT; | ||
| shadowElement.dataset.dragsterId = dragsterId; | ||
| shadowElementRegion = shadowElement.getBoundingClientRect(); | ||
| draggedElement.classList.add(CLASS_DRAGGING); | ||
| draggedElement.classList.add(CLASS_DRAGGING); | ||
| dragsterEventInfo.drag.node = draggedElement; | ||
| dragsterEventInfo.shadow.node = shadowElement; | ||
| dragsterEventInfo.drag.node = draggedElement; | ||
| dragsterEventInfo.shadow.node = shadowElement; | ||
| event.dragster = dragsterEventInfo; | ||
| event.dragster = dragsterEventInfo; | ||
| finalParams.onAfterDragStart(event); | ||
| }, | ||
| /* | ||
| * `mousemove` or `touchmove` event handler. | ||
| * When user is moving an element the function checks whether the element is above any other draggable element. | ||
| * In case when it is above any draggable element, the function adds a temporary placeholder before or after the given element, | ||
| * so a user is able to drop a dragged element onto the placeholder. | ||
| * In case when in a region there's no draggable element it just adds a placeholder to the region. | ||
| * Updates a position of shadow element following the cursor. | ||
| * | ||
| * @private | ||
| * @method regionEventHandlers.mousemove | ||
| * @param event {Object} event object | ||
| */ | ||
| mousemove: function (event) { | ||
| event.dragster = dragsterEventInfo; | ||
| finalParams.onAfterDragStart(event); | ||
| }, | ||
| /* | ||
| * `mousemove` or `touchmove` event handler. | ||
| * When user is moving an element the function checks whether the element is above any other draggable element. | ||
| * In case when it is above any draggable element, the function adds a temporary placeholder before or after the given element, | ||
| * so a user is able to drop a dragged element onto the placeholder. | ||
| * In case when in a region there's no draggable element it just adds a placeholder to the region. | ||
| * Updates a position of shadow element following the cursor. | ||
| * | ||
| * @private | ||
| * @method regionEventHandlers.mousemove | ||
| * @param event {Object} event object | ||
| */ | ||
| mousemove: function (event) { | ||
| event.dragster = dragsterEventInfo; | ||
| if (finalParams.onBeforeDragMove(event) === FALSE || !shadowElementRegion) { | ||
| return FALSE; | ||
| } | ||
| if (finalParams.onBeforeDragMove(event) === FALSE || !shadowElementRegion) { | ||
| return FALSE; | ||
| } | ||
| event.preventDefault(); | ||
| event.preventDefault(); | ||
| var eventObject = event.changedTouches ? event.changedTouches[0] : event, | ||
| pageXOffset = eventObject.view ? eventObject.view.pageXOffset : 0, | ||
| pageYOffset = eventObject.view ? eventObject.view.pageYOffset : 0, | ||
| elementPositionY = eventObject.clientY + pageYOffset, | ||
| elementPositionX = eventObject.clientX + pageXOffset, | ||
| unknownTarget = document.elementFromPoint(eventObject.clientX, eventObject.clientY), | ||
| dropTarget = getElement(unknownTarget, isDraggableCallback), | ||
| top = finalParams.shadowElementUnderMouse ? eventObject.clientY + shadowElementPositionYDiff : eventObject.clientY, | ||
| left = finalParams.shadowElementUnderMouse ? | ||
| elementPositionX + shadowElementPositionXDiff : | ||
| elementPositionX - (shadowElementRegion.width / 2), | ||
| isDragNodeAvailable = dragsterEventInfo.drag.node && dragsterEventInfo.drag.node.dataset, | ||
| isInDragOnlyRegion = !!(dropTarget && getElement(dropTarget, isInDragOnlyRegionCallback)), | ||
| isAllowedTarget = unknownTarget.dataset.dragsterId === dragsterId, | ||
| isTargetRegion = unknownTarget.classList.contains(CLASS_REGION) && isAllowedTarget, | ||
| isTargetRegionDragOnly = unknownTarget.classList.contains(finalParams.dragOnlyRegionCssClass) && isAllowedTarget, | ||
| isTargetPlaceholder = unknownTarget.classList.contains(CLASS_PLACEHOLDER), | ||
| hasTargetDraggaBleElements = unknownTarget.getElementsByClassName(CLASS_DRAGGABLE).length > 0, | ||
| hasTargetPlaceholders = unknownTarget.getElementsByClassName(CLASS_PLACEHOLDER).length > 0; | ||
| var eventObject = event.changedTouches ? event.changedTouches[0] : event, | ||
| pageXOffset = eventObject.view ? eventObject.view.pageXOffset : 0, | ||
| pageYOffset = eventObject.view ? eventObject.view.pageYOffset : 0, | ||
| elementPositionY = eventObject.clientY + pageYOffset, | ||
| elementPositionX = eventObject.clientX + pageXOffset, | ||
| unknownTarget = document.elementFromPoint(eventObject.clientX, eventObject.clientY), | ||
| dropTarget = getElement(unknownTarget, isDraggableCallback), | ||
| top = finalParams.shadowElementUnderMouse ? eventObject.clientY + shadowElementPositionYDiff : eventObject.clientY, | ||
| left = finalParams.shadowElementUnderMouse ? | ||
| elementPositionX + shadowElementPositionXDiff : | ||
| elementPositionX - (shadowElementRegion.width / 2), | ||
| isDragNodeAvailable = dragsterEventInfo.drag.node && dragsterEventInfo.drag.node.dataset, | ||
| isInDragOnlyRegion = !!(dropTarget && getElement(dropTarget, isInDragOnlyRegionCallback)), | ||
| isAllowedTarget = unknownTarget.dataset.dragsterId === dragsterId, | ||
| isTargetRegion = unknownTarget.classList.contains(CLASS_REGION) && isAllowedTarget, | ||
| isTargetRegionDragOnly = unknownTarget.classList.contains(finalParams.dragOnlyRegionCssClass) && isAllowedTarget, | ||
| isTargetPlaceholder = unknownTarget.classList.contains(CLASS_PLACEHOLDER), | ||
| hasTargetDraggaBleElements = unknownTarget.getElementsByClassName(CLASS_DRAGGABLE).length > 0, | ||
| hasTargetPlaceholders = unknownTarget.getElementsByClassName(CLASS_PLACEHOLDER).length > 0; | ||
| clearTimeout(hideShadowElementTimeout); | ||
| clearTimeout(hideShadowElementTimeout); | ||
| shadowElement.style.top = top + UNIT; | ||
| shadowElement.style.left = left + UNIT; | ||
| shadowElement.classList.remove(CLASS_HIDDEN); | ||
| shadowElement.style.top = top + UNIT; | ||
| shadowElement.style.left = left + UNIT; | ||
| shadowElement.classList.remove(CLASS_HIDDEN); | ||
| dragsterEventInfo.shadow.top = top; | ||
| dragsterEventInfo.shadow.left = left; | ||
| dragsterEventInfo.shadow.top = top; | ||
| dragsterEventInfo.shadow.left = left; | ||
| if (!isDragNodeAvailable && !isTargetRegion && !isTargetPlaceholder) { | ||
| moveActions.removePlaceholders(); | ||
| } else if (dropTarget && dropTarget !== draggedElement && !isInDragOnlyRegion) { | ||
| moveActions.removePlaceholders(); | ||
| moveActions.addPlaceholderOnTarget(dropTarget, elementPositionY, pageYOffset); | ||
| } else if (isTargetRegion && !isTargetRegionDragOnly && !hasTargetDraggaBleElements && !hasTargetPlaceholders) { | ||
| moveActions.removePlaceholders(); | ||
| moveActions.addPlaceholderInRegion(unknownTarget); | ||
| } else if (isTargetRegion && !isTargetRegionDragOnly && hasTargetDraggaBleElements && !hasTargetPlaceholders) { | ||
| moveActions.removePlaceholders(); | ||
| moveActions.addPlaceholderInRegionBelowTargets(unknownTarget); | ||
| } | ||
| if (!isDragNodeAvailable && !isTargetRegion && !isTargetPlaceholder) { | ||
| moveActions.removePlaceholders(); | ||
| } else if (dropTarget && dropTarget !== draggedElement && !isInDragOnlyRegion) { | ||
| moveActions.removePlaceholders(); | ||
| moveActions.addPlaceholderOnTarget(dropTarget, elementPositionY, pageYOffset); | ||
| } else if (isTargetRegion && !isTargetRegionDragOnly && !hasTargetDraggaBleElements && !hasTargetPlaceholders) { | ||
| moveActions.removePlaceholders(); | ||
| moveActions.addPlaceholderInRegion(unknownTarget); | ||
| } else if (isTargetRegion && !isTargetRegionDragOnly && hasTargetDraggaBleElements && !hasTargetPlaceholders) { | ||
| moveActions.removePlaceholders(); | ||
| moveActions.addPlaceholderInRegionBelowTargets(unknownTarget); | ||
| } | ||
| if (finalParams.scrollWindowOnDrag) { | ||
| scrollWindow(event); | ||
| } | ||
| if (finalParams.scrollWindowOnDrag) { | ||
| scrollWindow(event); | ||
| } | ||
| updateRegionsHeight(); | ||
| finalParams.onAfterDragMove(event); | ||
| }, | ||
| /* | ||
| * `mouseup` or `touchend` event handler. | ||
| * When user is dropping an element, the function checks whether the element is above any other draggable element. | ||
| * In case when it is above any draggable element, the function places the dragged element before of after the element below. | ||
| * Removes a listener to either `mousemove` or `touchmove` event. | ||
| * Removes placeholders. | ||
| * Removes a shadow element. | ||
| * | ||
| * @private | ||
| * @method regionEventHandlers.mouseup | ||
| * @param event {Object} event object | ||
| */ | ||
| mouseup: function (event) { | ||
| event.dragster = dragsterEventInfo; | ||
| updateRegionsHeight(); | ||
| finalParams.onAfterDragMove(event); | ||
| }, | ||
| /* | ||
| * `mouseup` or `touchend` event handler. | ||
| * When user is dropping an element, the function checks whether the element is above any other draggable element. | ||
| * In case when it is above any draggable element, the function places the dragged element before of after the element below. | ||
| * Removes a listener to either `mousemove` or `touchmove` event. | ||
| * Removes placeholders. | ||
| * Removes a shadow element. | ||
| * | ||
| * @private | ||
| * @method regionEventHandlers.mouseup | ||
| * @param event {Object} event object | ||
| */ | ||
| mouseup: function (event) { | ||
| event.dragster = dragsterEventInfo; | ||
| var isTouch = event.type === EVT_TOUCHSTART, | ||
| moveEvent = isTouch ? EVT_TOUCHMOVE : EVT_MOUSEMOVE, | ||
| upEvent = isTouch ? EVT_TOUCHEND : EVT_MOUSEUP, | ||
| findByClass, | ||
| dropTarget, | ||
| dropDraggableTarget, | ||
| isFromDragOnlyRegion, | ||
| canBeCloned; | ||
| var isTouch = event.type === EVT_TOUCHSTART, | ||
| moveEvent = isTouch ? EVT_TOUCHMOVE : EVT_MOUSEMOVE, | ||
| upEvent = isTouch ? EVT_TOUCHEND : EVT_MOUSEUP, | ||
| findByClass, | ||
| dropTarget, | ||
| dropDraggableTarget, | ||
| isFromDragOnlyRegion, | ||
| canBeCloned; | ||
| if (finalParams.onBeforeDragEnd(event) === FALSE) { | ||
| resetDragsterWorkspace(moveEvent, upEvent); | ||
| if (finalParams.onBeforeDragEnd(event) === FALSE) { | ||
| resetDragsterWorkspace(moveEvent, upEvent); | ||
| return FALSE; | ||
| } | ||
| return FALSE; | ||
| } | ||
| findByClass = finalParams.replaceElements ? CLASS_REPLACABLE : CLASS_PLACEHOLDER; | ||
| dropTarget = document.getElementsByClassName(findByClass)[0]; | ||
| isFromDragOnlyRegion = !!(draggedElement && getElement(draggedElement, isInDragOnlyRegionCallback)), | ||
| canBeCloned = finalParams.cloneElements && isFromDragOnlyRegion; | ||
| findByClass = finalParams.replaceElements ? CLASS_REPLACABLE : CLASS_PLACEHOLDER; | ||
| dropTarget = document.getElementsByClassName(findByClass)[0]; | ||
| isFromDragOnlyRegion = !!(draggedElement && getElement(draggedElement, isInDragOnlyRegionCallback)), | ||
| canBeCloned = finalParams.cloneElements && isFromDragOnlyRegion; | ||
| hideShadowElementTimeout = setTimeout(resetDragsterWorkspace, 200); | ||
| hideShadowElementTimeout = setTimeout(resetDragsterWorkspace, 200); | ||
| cleanReplacables(); | ||
| cleanReplacables(); | ||
| if (!draggedElement || !dropTarget) { | ||
| resetDragsterWorkspace(moveEvent, upEvent); | ||
| return FALSE; | ||
| } | ||
| dropDraggableTarget = getElement(dropTarget, isDraggableCallback); | ||
| dropDraggableTarget = dropDraggableTarget || dropTarget; | ||
| if (draggedElement !== dropDraggableTarget) { | ||
| if (!finalParams.replaceElements && !canBeCloned) { | ||
| event.dragster = dropActions.moveElement(event.dragster, dropTarget, dropDraggableTarget); | ||
| finalParams.onAfterDragDrop(event); | ||
| } else if (finalParams.replaceElements && !canBeCloned) { | ||
| event.dragster = dropActions.replaceElements(event.dragster, dropDraggableTarget); | ||
| finalParams.onAfterDragDrop(event); | ||
| } else if (!finalParams.replaceElements && canBeCloned) { | ||
| event.dragster = dropActions.cloneElements(event.dragster, dropTarget, dropDraggableTarget); | ||
| finalParams.onAfterDragDrop(event); | ||
| } | ||
| dropDraggableTarget.classList.remove(CLASS_DRAGOVER); | ||
| } | ||
| if (!draggedElement || !dropTarget) { | ||
| resetDragsterWorkspace(moveEvent, upEvent); | ||
| finalParams.onAfterDragEnd(event); | ||
| return FALSE; | ||
| } | ||
| }; | ||
| moveActions = { | ||
| /** | ||
| * Adds a new placeholder in relation to drop target | ||
| * | ||
| * @method moveActions.addPlaceholderOnTarget | ||
| * @private | ||
| * @param dropTarget {HTMLElement} a drop target element | ||
| * @param elementPositionY {Number} position Y of dragged element | ||
| * @param pageYOffset {Number} position of the scroll bar | ||
| */ | ||
| addPlaceholderOnTarget: function (dropTarget, elementPositionY, pageYOffset) { | ||
| var dropTargetRegion = dropTarget.getBoundingClientRect(), | ||
| placeholder = createPlaceholder(), | ||
| maxDistance = dropTargetRegion.height / 2; | ||
| dropDraggableTarget = getElement(dropTarget, isDraggableCallback); | ||
| dropDraggableTarget = dropDraggableTarget || dropTarget; | ||
| cleanReplacables(); | ||
| if (draggedElement !== dropDraggableTarget) { | ||
| if (!finalParams.replaceElements && !canBeCloned) { | ||
| event.dragster = dropActions.moveElement(event.dragster, dropTarget, dropDraggableTarget); | ||
| if (!finalParams.replaceElements) { | ||
| if ((elementPositionY - pageYOffset - dropTargetRegion.top) < maxDistance && !visiblePlaceholder.top) { | ||
| removeElements(CLASS_PLACEHOLDER); | ||
| placeholder.dataset.placeholderPosition = POS_TOP; | ||
| insertBefore(dropTarget.firstChild, placeholder); | ||
| finalParams.onAfterDragDrop(event); | ||
| } else if (finalParams.replaceElements && !canBeCloned) { | ||
| event.dragster = dropActions.replaceElements(event.dragster, dropDraggableTarget); | ||
| dragsterEventInfo.placeholder.position = POS_TOP; | ||
| } else if ((dropTargetRegion.bottom - (elementPositionY - pageYOffset)) < maxDistance && !visiblePlaceholder.bottom) { | ||
| removeElements(CLASS_PLACEHOLDER); | ||
| placeholder.dataset.placeholderPosition = POS_BOTTOM; | ||
| dropTarget.appendChild(placeholder); | ||
| finalParams.onAfterDragDrop(event); | ||
| } else if (!finalParams.replaceElements && canBeCloned) { | ||
| event.dragster = dropActions.cloneElements(event.dragster, dropTarget, dropDraggableTarget); | ||
| dragsterEventInfo.placeholder.position = POS_BOTTOM; | ||
| } | ||
| } else { | ||
| dropTarget.classList.add(CLASS_REPLACABLE); | ||
| finalParams.onAfterDragDrop(event); | ||
| } | ||
| dragsterEventInfo.placeholder.node = placeholder; | ||
| dragsterEventInfo.drop.node = dropTarget; | ||
| }, | ||
| dropDraggableTarget.classList.remove(CLASS_DRAGOVER); | ||
| } | ||
| /** | ||
| * Adds a new placeholder in an empty region | ||
| * | ||
| * @method moveActions.addPlaceholderInRegion | ||
| * @private | ||
| * @param regionTarget {HTMLElement} a region drop target | ||
| */ | ||
| addPlaceholderInRegion: function (regionTarget) { | ||
| var placeholder = createPlaceholder(); | ||
| resetDragsterWorkspace(moveEvent, upEvent); | ||
| regionTarget.appendChild(placeholder); | ||
| finalParams.onAfterDragEnd(event); | ||
| } | ||
| }; | ||
| dragsterEventInfo.placeholder.position = POS_BOTTOM; | ||
| dragsterEventInfo.placeholder.node = placeholder; | ||
| dragsterEventInfo.drop.node = regionTarget; | ||
| }, | ||
| moveActions = { | ||
| /** | ||
| * Adds a new placeholder in relation to drop target | ||
| * | ||
| * @method moveActions.addPlaceholderOnTarget | ||
| * @private | ||
| * @param dropTarget {HTMLElement} a drop target element | ||
| * @param elementPositionY {Number} position Y of dragged element | ||
| * @param pageYOffset {Number} position of the scroll bar | ||
| */ | ||
| addPlaceholderOnTarget: function (dropTarget, elementPositionY, pageYOffset) { | ||
| var dropTargetRegion = dropTarget.getBoundingClientRect(), | ||
| placeholder = createPlaceholder(), | ||
| maxDistance = dropTargetRegion.height / 2; | ||
| /** | ||
| * Adds a new placeholder in an empty region | ||
| * | ||
| * @method moveActions.addPlaceholderInRegion | ||
| * @private | ||
| * @param regionTarget {HTMLElement} a region drop target | ||
| */ | ||
| addPlaceholderInRegionBelowTargets: function (regionTarget) { | ||
| var elementsInRegion = [].slice.call(regionTarget.getElementsByClassName(CLASS_DRAGGABLE)), | ||
| filteredElements = elementsInRegion.filter(function (elementInRegion) { | ||
| return elementInRegion.dataset.dragsterId === dragsterId; | ||
| }), | ||
| dropTarget = filteredElements[filteredElements.length - 1], | ||
| placeholder = createPlaceholder(); | ||
| cleanReplacables(); | ||
| placeholder.dataset.placeholderPosition = POS_BOTTOM; | ||
| removeElements(CLASS_PLACEHOLDER); | ||
| dropTarget.appendChild(placeholder); | ||
| if (!finalParams.replaceElements) { | ||
| if ((elementPositionY - pageYOffset - dropTargetRegion.top) < maxDistance && !visiblePlaceholder.top) { | ||
| removeElements(CLASS_PLACEHOLDER); | ||
| placeholder.dataset.placeholderPosition = POS_TOP; | ||
| insertBefore(dropTarget.firstChild, placeholder); | ||
| dragsterEventInfo.placeholder.position = POS_BOTTOM; | ||
| dragsterEventInfo.placeholder.node = placeholder; | ||
| dragsterEventInfo.drop.node = dropTarget; | ||
| }, | ||
| dragsterEventInfo.placeholder.position = POS_TOP; | ||
| } else if ((dropTargetRegion.bottom - (elementPositionY - pageYOffset)) < maxDistance && !visiblePlaceholder.bottom) { | ||
| removeElements(CLASS_PLACEHOLDER); | ||
| placeholder.dataset.placeholderPosition = POS_BOTTOM; | ||
| dropTarget.appendChild(placeholder); | ||
| /** | ||
| * Removes all placeholders from regions | ||
| * | ||
| * @method moveActions.removePlaceholders | ||
| * @private | ||
| */ | ||
| removePlaceholders: function () { | ||
| if (!finalParams.replaceElements) { | ||
| removeElements(CLASS_PLACEHOLDER); | ||
| } else { | ||
| cleanReplacables(); | ||
| dragsterEventInfo.placeholder.position = POS_BOTTOM; | ||
| } | ||
| }, | ||
| }; | ||
| } else { | ||
| dropTarget.classList.add(CLASS_REPLACABLE); | ||
| } | ||
| dropActions = { | ||
| /** | ||
| * Moves element to the final position on drop | ||
| * | ||
| * @method dropActions.moveElement | ||
| * @private | ||
| * @param dragsterEvent {Object} dragster properties from event | ||
| * @param dropTarget {HTMLElement} region where dragged element will be placed after drop | ||
| * @param dropDraggableTarget {HTMLElement} final destination of dragged element | ||
| * @return {Object} updated event info | ||
| */ | ||
| moveElement: function (dragsterEvent, dropTarget, dropDraggableTarget) { | ||
| var dropTemp = finalParams.wrapDraggableElements === FALSE ? draggedElement : createElementWrapper(), | ||
| placeholderPosition = dropTarget.dataset.placeholderPosition; | ||
| dragsterEventInfo.placeholder.node = placeholder; | ||
| dragsterEventInfo.drop.node = dropTarget; | ||
| }, | ||
| if (placeholderPosition === POS_TOP) { | ||
| insertBefore(dropDraggableTarget, dropTemp); | ||
| } else { | ||
| if (finalParams.wrapDraggableElements === FALSE) { | ||
| insertAfter(dropTemp, dropDraggableTarget); | ||
| } else { | ||
| insertAfter(dropDraggableTarget, dropTemp); | ||
| } | ||
| } | ||
| /** | ||
| * Adds a new placeholder in an empty region | ||
| * | ||
| * @method moveActions.addPlaceholderInRegion | ||
| * @private | ||
| * @param regionTarget {HTMLElement} a region drop target | ||
| */ | ||
| addPlaceholderInRegion: function (regionTarget) { | ||
| var placeholder = createPlaceholder(); | ||
| if (draggedElement.firstChild && finalParams.wrapDraggableElements === TRUE) { | ||
| dropTemp.appendChild(draggedElement.firstChild); | ||
| } | ||
| regionTarget.appendChild(placeholder); | ||
| dragsterEvent.dropped = dropTemp; | ||
| dragsterEventInfo.placeholder.position = POS_BOTTOM; | ||
| dragsterEventInfo.placeholder.node = placeholder; | ||
| dragsterEventInfo.drop.node = regionTarget; | ||
| }, | ||
| return dragsterEvent; | ||
| }, | ||
| /** | ||
| * Adds a new placeholder in an empty region | ||
| * | ||
| * @method moveActions.addPlaceholderInRegion | ||
| * @private | ||
| * @param regionTarget {HTMLElement} a region drop target | ||
| */ | ||
| addPlaceholderInRegionBelowTargets: function (regionTarget) { | ||
| var elementsInRegion = [].slice.call(regionTarget.getElementsByClassName(CLASS_DRAGGABLE)), | ||
| filteredElements = elementsInRegion.filter(function (elementInRegion) { | ||
| return elementInRegion.dataset.dragsterId === dragsterId; | ||
| }), | ||
| dropTarget = filteredElements[filteredElements.length - 1], | ||
| placeholder = createPlaceholder(); | ||
| /** | ||
| * Replaces element with target element on drop | ||
| * | ||
| * @method dropActions.replaceElements | ||
| * @private | ||
| * @param dragsterEvent {Object} dragster properties from event | ||
| * @param dropDraggableTarget {HTMLElement} final destination of dragged element | ||
| * @return {Object} updated event info | ||
| */ | ||
| replaceElements: function (dragsterEvent, dropDraggableTarget) { | ||
| var dropTemp = document.getElementsByClassName(CLASS_TEMP_CONTAINER)[0]; | ||
| placeholder.dataset.placeholderPosition = POS_BOTTOM; | ||
| removeElements(CLASS_PLACEHOLDER); | ||
| dropTarget.appendChild(placeholder); | ||
| dropTemp.innerHTML = draggedElement.innerHTML; | ||
| dragsterEventInfo.placeholder.position = POS_BOTTOM; | ||
| dragsterEventInfo.placeholder.node = placeholder; | ||
| dragsterEventInfo.drop.node = dropTarget; | ||
| }, | ||
| draggedElement.innerHTML = dropDraggableTarget.innerHTML; | ||
| dropDraggableTarget.innerHTML = dropTemp.innerHTML; | ||
| dropTemp.innerHTML = ''; | ||
| dragsterEvent.dropped = dropTemp; | ||
| /** | ||
| * Removes all placeholders from regions | ||
| * | ||
| * @method moveActions.removePlaceholders | ||
| * @private | ||
| */ | ||
| removePlaceholders: function () { | ||
| if (!finalParams.replaceElements) { | ||
| removeElements(CLASS_PLACEHOLDER); | ||
| } else { | ||
| cleanReplacables(); | ||
| } | ||
| }, | ||
| }; | ||
| return dragsterEvent; | ||
| }, | ||
| dropActions = { | ||
| /** | ||
| * Moves element to the final position on drop | ||
| * | ||
| * @method dropActions.moveElement | ||
| * @private | ||
| * @param dragsterEvent {Object} dragster properties from event | ||
| * @param dropTarget {HTMLElement} region where dragged element will be placed after drop | ||
| * @param dropDraggableTarget {HTMLElement} final destination of dragged element | ||
| * @return {Object} updated event info | ||
| */ | ||
| moveElement: function (dragsterEvent, dropTarget, dropDraggableTarget) { | ||
| var dropTemp = finalParams.wrapDraggableElements === FALSE ? draggedElement : createElementWrapper(), | ||
| placeholderPosition = dropTarget.dataset.placeholderPosition; | ||
| /** | ||
| * Clones element to the final position on drop | ||
| * | ||
| * @method dropActions.cloneElements | ||
| * @private | ||
| * @param dragsterEvent {Object} dragster properties from event | ||
| * @param dropTarget {HTMLElement} region where dragged element will be placed after drop | ||
| * @param dropDraggableTarget {HTMLElement} final destination of dragged element | ||
| * @return {Object} updated event info | ||
| */ | ||
| cloneElements: function (dragsterEvent, dropTarget, dropDraggableTarget) { | ||
| var dropTemp = draggedElement.cloneNode(true), | ||
| placeholderPosition = dropTarget.dataset.placeholderPosition; | ||
| if (placeholderPosition === POS_TOP) { | ||
| insertBefore(dropDraggableTarget, dropTemp); | ||
| if (placeholderPosition === POS_TOP) { | ||
| insertBefore(dropDraggableTarget, dropTemp); | ||
| } else { | ||
| if (finalParams.wrapDraggableElements === FALSE) { | ||
| insertAfter(dropTemp, dropDraggableTarget); | ||
| } else { | ||
| insertAfter(dropDraggableTarget, dropTemp); | ||
| } | ||
| } | ||
| cleanWorkspace(dropTemp); | ||
| if (draggedElement.firstChild && finalParams.wrapDraggableElements === TRUE) { | ||
| dropTemp.appendChild(draggedElement.firstChild); | ||
| } | ||
| dragsterEvent.clonedFrom = draggedElement; | ||
| dragsterEvent.clonedTo = dropTemp; | ||
| dragsterEvent.dropped = dropTemp; | ||
| return dragsterEvent; | ||
| }, | ||
| }; | ||
| return dragsterEvent; | ||
| }, | ||
| /** | ||
| * Scrolls window while dragging an element | ||
| * Replaces element with target element on drop | ||
| * | ||
| * @method scrollWindow | ||
| * @method dropActions.replaceElements | ||
| * @private | ||
| * @param event {Object} event object | ||
| * @param dragsterEvent {Object} dragster properties from event | ||
| * @param dropDraggableTarget {HTMLElement} final destination of dragged element | ||
| * @return {Object} updated event info | ||
| */ | ||
| scrollWindow = function (event) { | ||
| var eventObject = event.changedTouches ? event.changedTouches[0] : event, | ||
| diffSize = 60; | ||
| replaceElements: function (dragsterEvent, dropDraggableTarget) { | ||
| var dropTemp = document.getElementsByClassName(CLASS_TEMP_CONTAINER)[0]; | ||
| if (windowHeight - eventObject.clientY < diffSize) { | ||
| window.scrollBy(0, 10); | ||
| } else if (eventObject.clientY < diffSize) { | ||
| window.scrollBy(0, -10); | ||
| } | ||
| }; | ||
| dropTemp.innerHTML = draggedElement.innerHTML; | ||
| draggedElement.innerHTML = dropDraggableTarget.innerHTML; | ||
| dropDraggableTarget.innerHTML = dropTemp.innerHTML; | ||
| dropTemp.innerHTML = ''; | ||
| dragsterEvent.dropped = dropTemp; | ||
| return dragsterEvent; | ||
| }, | ||
| /** | ||
| * Discovers window height | ||
| * Clones element to the final position on drop | ||
| * | ||
| * @method discoverWindowHeight | ||
| * @method dropActions.cloneElements | ||
| * @private | ||
| * @param dragsterEvent {Object} dragster properties from event | ||
| * @param dropTarget {HTMLElement} region where dragged element will be placed after drop | ||
| * @param dropDraggableTarget {HTMLElement} final destination of dragged element | ||
| * @return {Object} updated event info | ||
| */ | ||
| discoverWindowHeight = function () { | ||
| windowHeight = window.innerHeight; | ||
| }; | ||
| cloneElements: function (dragsterEvent, dropTarget, dropDraggableTarget) { | ||
| var dropTemp = draggedElement.cloneNode(true), | ||
| placeholderPosition = dropTarget.dataset.placeholderPosition; | ||
| wrapDraggableElements(draggableElements); | ||
| if (placeholderPosition === POS_TOP) { | ||
| insertBefore(dropDraggableTarget, dropTemp); | ||
| } else { | ||
| insertAfter(dropDraggableTarget, dropTemp); | ||
| } | ||
| cleanWorkspace(dropTemp); | ||
| dragsterEvent.clonedFrom = draggedElement; | ||
| dragsterEvent.clonedTo = dropTemp; | ||
| return dragsterEvent; | ||
| }, | ||
| }; | ||
| /** | ||
| * Scrolls window while dragging an element | ||
| * | ||
| * @method scrollWindow | ||
| * @private | ||
| * @param event {Object} event object | ||
| */ | ||
| scrollWindow = function (event) { | ||
| var eventObject = event.changedTouches ? event.changedTouches[0] : event, | ||
| diffSize = 60; | ||
| if (windowHeight - eventObject.clientY < diffSize) { | ||
| window.scrollBy(0, 10); | ||
| } else if (eventObject.clientY < diffSize) { | ||
| window.scrollBy(0, -10); | ||
| } | ||
| }; | ||
| /** | ||
| * Discovers window height | ||
| * | ||
| * @method discoverWindowHeight | ||
| * @private | ||
| */ | ||
| discoverWindowHeight = function () { | ||
| windowHeight = window.innerHeight; | ||
| }; | ||
| wrapDraggableElements(draggableElements); | ||
| /** | ||
| * Adds event listeners to the regions | ||
| * | ||
| * @method addEventListenersToRegions | ||
| * @private | ||
| */ | ||
| addEventListenersToRegions = function () { | ||
| // add `mousedown`/`touchstart` and `mouseup`/`touchend` event listeners to regions | ||
@@ -928,17 +959,27 @@ regions.forEach(function (region) { | ||
| region.addEventListener(EVT_TOUCHSTART, regionEventHandlers.mousedown, FALSE); | ||
| }); | ||
| }; | ||
| window.addEventListener('resize', discoverWindowHeight, false); | ||
| addEventListenersToRegions(); | ||
| return { | ||
| update: function () { | ||
| draggableElements = findDraggableElements(); | ||
| window.addEventListener('resize', discoverWindowHeight, false); | ||
| wrapDraggableElements(draggableElements); | ||
| updateRegionsHeight(); | ||
| discoverWindowHeight(); | ||
| } | ||
| }; | ||
| return { | ||
| update: function () { | ||
| draggableElements = findDraggableElements(); | ||
| wrapDraggableElements(draggableElements); | ||
| updateRegionsHeight(); | ||
| discoverWindowHeight(); | ||
| }, | ||
| updateRegions: function () { | ||
| regions = findRegionElements(); | ||
| addEventListenersToRegions(); | ||
| } | ||
| }; | ||
| })(window, window.document); | ||
| }; | ||
| return Dragster; | ||
| }); |
| /*@preserve | ||
| * Dragster - drag'n'drop library v1.4.2 | ||
| * Dragster - drag'n'drop library v1.5.0 | ||
| * https://github.com/sunpietro/dragster | ||
@@ -11,4 +11,4 @@ * | ||
| * | ||
| * Date: 2017-03-30T16:30Z | ||
| * Date: 2017-05-06T22:30Z | ||
| */ | ||
| !function(e,t){"use strict";e.Dragster=function(n){var r,a,o,s,l,d,i,c,g,u,m,p,h,f,v,E,L,C,y,w,D,b,B,T,H,M,N,P,R,S,I,A="dragster-",O="is-dragging",Y="is-drag-over",X=A+"draggable",q=A+"drag-region",x=A+"drop-placeholder",F=A+"temp",U=F+"-container",k=A+"is-hidden",J=A+"replacable",W="touchstart",j="touchmove",z="touchend",G="mousedown",K="mousemove",Q="mouseup",V="top",Z="bottom",$="px",_="div",ee=!1,te=!0,ne=null,re=function(){},ae={elementSelector:".dragster-block",regionSelector:".dragster-region",dragHandleCssClass:ee,dragOnlyRegionCssClass:A+"region--drag-only",replaceElements:ee,updateRegionsHeight:te,minimumRegionHeight:60,onBeforeDragStart:re,onAfterDragStart:re,onBeforeDragMove:re,onAfterDragMove:re,onBeforeDragEnd:re,onAfterDragEnd:re,onAfterDragDrop:re,scrollWindowOnDrag:ee,dragOnlyRegionsEnabled:ee,cloneElements:ee,wrapDraggableElements:te,shadowElementUnderMouse:ee},oe={top:ee,bottom:ee},se={drag:{node:ne},drop:{node:ne},shadow:{node:ne,top:0,left:0},placeholder:{node:ne,position:ne},dropped:ne,clonedFrom:ne,clonedTo:ne},le={},de=e.innerHeight,ie=Math.floor(65536*(1+Math.random())).toString(16);for(r in n)n.hasOwnProperty(r)&&(ae[r]=n[r]);return b=function(){return[].slice.call(t.querySelectorAll(ae.elementSelector))},B=function(e){return ae.wrapDraggableElements===ee?(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"),ee):void e.forEach(function(e){var t=v(),n=e.parentNode;return n.classList.contains(X)?ee:(n.insertBefore(t,e),n.removeChild(e),void t.appendChild(e))})},c=b(),a=[].slice.call(t.querySelectorAll(ae.regionSelector)),ae.replaceElements&&(d=t.createElement(_),d.classList.add(k),d.classList.add(U),t.body.appendChild(d)),o=function(e,t){var n=e.parentNode;if(n&&(!e.classList||!e.classList.contains(q)||e.classList.contains(ae.dragOnlyRegionCssClass)))return t(e)?e:t(n)?n:o(n,t)},y=function(e){var n=[].slice.call(t.getElementsByClassName(e));n.forEach(function(e){e.dataset.dragsterId===ie&&e.parentNode.removeChild(e)})},w=function(e,n){n&&(a.forEach(function(e){e.removeEventListener(n,g.mousemove)}),t.body.removeEventListener(n,g.mousemove)),e&&e.classList.remove(O),[].slice.call(t.getElementsByClassName(X)).forEach(function(e){e.firstChild||e.parentNode.removeChild(e)}),y(x),y(F),T()},D=function(){[].slice.call(t.getElementsByClassName(J)).forEach(function(e){e.classList.remove(J)})},v=function(){var e=t.createElement(_);return e.classList.add(X),e.dataset.dragsterId=ie,e},L=function(){var e=t.createElement(_);return e.classList.add(x),e.dataset.dragsterId=ie,e},E=function(){var e=t.createElement(_);return e.classList.add(F),e.classList.add(k),e.style.position="fixed",e.dataset.dragsterId=ie,t.body.appendChild(e),e},h=function(e,t){if(e&&e.parentNode){var n=ae.wrapDraggableElements===ee?e:e.nextSibling;e.parentNode.insertBefore(t,n)}},f=function(e,t){e&&e.parentNode&&e.parentNode.insertBefore(t,e)},m=function(e){return e.classList&&e.classList.contains(X)&&e.dataset.dragsterId===ie},u=function(e){return e.classList&&e.classList.contains(x)},p=function(e){return e.classList&&e.classList.contains(ae.dragOnlyRegionCssClass)},T=function(){if(ae.updateRegionsHeight){var n=[].slice.call(t.getElementsByClassName(q));n.forEach(function(t){var n=[].slice.call(t.querySelectorAll(ae.elementSelector)),r=ae.minimumRegionHeight;n.length&&(n.forEach(function(t){var n=e.getComputedStyle(t);r+=t.offsetHeight+parseInt(n.marginTop,10)+parseInt(n.marginBottom,10)}),t.style.height=r+$)})}},N=function(e,t){w(i,e),w(i,t)},g={mousedown:function(e){if(ae.dragHandleCssClass&&("string"!=typeof ae.dragHandleCssClass||!e.target.classList.contains(ae.dragHandleCssClass)))return ee;var n,r,d,c=e.type===W,u=e.changedTouches?e.changedTouches[0]:e;return le=JSON.parse(JSON.stringify(se)),e.dragster=le,ae.onBeforeDragStart(e)===ee||3===e.which?ee:(e.preventDefault(),(i=o(e.target,m))?(r=c?j:K,d=c?z:Q,a.forEach(function(e){e.addEventListener(r,g.mousemove,ee),e.addEventListener(d,g.mouseup,ee)}),t.body.addEventListener(r,g.mousemove,ee),t.body.addEventListener(d,g.mouseup,ee),n=i.getBoundingClientRect(),S=n.left-u.clientX,I=n.top-u.clientY,s=E(),s.innerHTML=i.innerHTML,s.style.width=n.width+$,s.style.height=n.height+$,s.dataset.dragsterId=ie,l=s.getBoundingClientRect(),i.classList.add(O),le.drag.node=i,le.shadow.node=s,e.dragster=le,void ae.onAfterDragStart(e)):ee)},mousemove:function(e){if(e.dragster=le,ae.onBeforeDragMove(e)===ee||!l)return ee;e.preventDefault();var n=e.changedTouches?e.changedTouches[0]:e,r=n.view?n.view.pageXOffset:0,a=n.view?n.view.pageYOffset:0,d=n.clientY+a,c=n.clientX+r,g=t.elementFromPoint(n.clientX,n.clientY),u=o(g,m),h=ae.shadowElementUnderMouse?n.clientY+I:n.clientY,f=ae.shadowElementUnderMouse?c+S:c-l.width/2,v=le.drag.node&&le.drag.node.dataset,E=!(!u||!o(u,p)),L=g.dataset.dragsterId===ie,y=g.classList.contains(q)&&L,w=g.classList.contains(ae.dragOnlyRegionCssClass)&&L,D=g.classList.contains(x),b=g.getElementsByClassName(X).length>0,B=g.getElementsByClassName(x).length>0;clearTimeout(C),s.style.top=h+$,s.style.left=f+$,s.classList.remove(k),le.shadow.top=h,le.shadow.left=f,v||y||D?u&&u!==i&&!E?(R.removePlaceholders(),R.addPlaceholderOnTarget(u,d,a)):!y||w||b||B?y&&!w&&b&&!B&&(R.removePlaceholders(),R.addPlaceholderInRegionBelowTargets(g)):(R.removePlaceholders(),R.addPlaceholderInRegion(g)):R.removePlaceholders(),ae.scrollWindowOnDrag&&H(e),T(),ae.onAfterDragMove(e)},mouseup:function(e){e.dragster=le;var n,r,a,s,l,d=e.type===W,c=d?j:K,g=d?z:Q;return ae.onBeforeDragEnd(e)===ee?(N(c,g),ee):(n=ae.replaceElements?J:x,r=t.getElementsByClassName(n)[0],s=!(!i||!o(i,p)),l=ae.cloneElements&&s,C=setTimeout(N,200),D(),i&&r?(a=o(r,m),a=a||r,i!==a&&(ae.replaceElements||l?ae.replaceElements&&!l?(e.dragster=P.replaceElements(e.dragster,a),ae.onAfterDragDrop(e)):!ae.replaceElements&&l&&(e.dragster=P.cloneElements(e.dragster,r,a),ae.onAfterDragDrop(e)):(e.dragster=P.moveElement(e.dragster,r,a),ae.onAfterDragDrop(e)),a.classList.remove(Y)),N(c,g),void ae.onAfterDragEnd(e)):(N(c,g),ee))}},R={addPlaceholderOnTarget:function(e,t,n){var r=e.getBoundingClientRect(),a=L(),o=r.height/2;D(),ae.replaceElements?e.classList.add(J):t-n-r.top<o&&!oe.top?(y(x),a.dataset.placeholderPosition=V,f(e.firstChild,a),le.placeholder.position=V):r.bottom-(t-n)<o&&!oe.bottom&&(y(x),a.dataset.placeholderPosition=Z,e.appendChild(a),le.placeholder.position=Z),le.placeholder.node=a,le.drop.node=e},addPlaceholderInRegion:function(e){var t=L();e.appendChild(t),le.placeholder.position=Z,le.placeholder.node=t,le.drop.node=e},addPlaceholderInRegionBelowTargets:function(e){var t=[].slice.call(e.getElementsByClassName(X)),n=t.filter(function(e){return e.dataset.dragsterId===ie}),r=n[n.length-1],a=L();a.dataset.placeholderPosition=Z,y(x),r.appendChild(a),le.placeholder.position=Z,le.placeholder.node=a,le.drop.node=r},removePlaceholders:function(){ae.replaceElements?D():y(x)}},P={moveElement:function(e,t,n){var r=ae.wrapDraggableElements===ee?i:v(),a=t.dataset.placeholderPosition;return a===V?f(n,r):ae.wrapDraggableElements===ee?h(r,n):h(n,r),i.firstChild&&ae.wrapDraggableElements===te&&r.appendChild(i.firstChild),e.dropped=r,e},replaceElements:function(e,n){var r=t.getElementsByClassName(U)[0];return r.innerHTML=i.innerHTML,i.innerHTML=n.innerHTML,n.innerHTML=r.innerHTML,r.innerHTML="",e.dropped=r,e},cloneElements:function(e,t,n){var r=i.cloneNode(!0),a=t.dataset.placeholderPosition;return a===V?f(n,r):h(n,r),w(r),e.clonedFrom=i,e.clonedTo=r,e}},H=function(t){var n=t.changedTouches?t.changedTouches[0]:t,r=60;de-n.clientY<r?e.scrollBy(0,10):n.clientY<r&&e.scrollBy(0,-10)},M=function(){de=e.innerHeight},B(c),a.forEach(function(e){e.classList.add(q),e.dataset.dragsterId=ie,e.addEventListener(G,g.mousedown,ee),e.addEventListener(W,g.mousedown,ee)}),e.addEventListener("resize",M,!1),{update:function(){c=b(),B(c),T(),M()}}}}(window,window.document); | ||
| !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";var e=function(e){var t,n,o,r,a,s,l,d,i,c,g,u,m,p,f,h,v,E,w,L,y,C,D,b,B,T,H,M,N,P,R,S,I,A="dragster-",O="is-dragging",Y="is-drag-over",x=A+"draggable",X=A+"drag-region",q=A+"drop-placeholder",F=A+"temp",U=F+"-container",j=A+"is-hidden",k=A+"replacable",J="touchstart",W="touchmove",z="touchend",G="mousedown",K="mousemove",Q="mouseup",V="top",Z="bottom",$="px",_="div",ee=!1,te=!0,ne=null,oe=function(){},re={elementSelector:".dragster-block",regionSelector:".dragster-region",dragHandleCssClass:ee,dragOnlyRegionCssClass:A+"region--drag-only",replaceElements:ee,updateRegionsHeight:te,minimumRegionHeight:60,onBeforeDragStart:oe,onAfterDragStart:oe,onBeforeDragMove:oe,onAfterDragMove:oe,onBeforeDragEnd:oe,onAfterDragEnd:oe,onAfterDragDrop:oe,scrollWindowOnDrag:ee,dragOnlyRegionsEnabled:ee,cloneElements:ee,wrapDraggableElements:te,shadowElementUnderMouse:ee},ae={top:ee,bottom:ee},se={drag:{node:ne},drop:{node:ne},shadow:{node:ne,top:0,left:0},placeholder:{node:ne,position:ne},dropped:ne,clonedFrom:ne,clonedTo:ne},le={},de=window.innerHeight,ie=Math.floor(65536*(1+Math.random())).toString(16);for(t in e)e.hasOwnProperty(t)&&(re[t]=e[t]);return C=function(){return[].slice.call(document.querySelectorAll(re.elementSelector))},D=function(){return[].slice.call(document.querySelectorAll(re.regionSelector))},b=function(e){return re.wrapDraggableElements===ee?(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"),ee):void e.forEach(function(e){var t=f(),n=e.parentNode;return n.classList.contains(x)?ee:(n.insertBefore(t,e),n.removeChild(e),void t.appendChild(e))})},d=C(),n=D(),re.replaceElements&&(s=document.createElement(_),s.classList.add(j),s.classList.add(U),document.body.appendChild(s)),o=function(e,t){var n=e.parentNode;if(n&&(!e.classList||!e.classList.contains(X)||e.classList.contains(re.dragOnlyRegionCssClass)))return t(e)?e:t(n)?n:o(n,t)},w=function(e){var t=[].slice.call(document.getElementsByClassName(e));t.forEach(function(e){e.dataset.dragsterId===ie&&e.parentNode.removeChild(e)})},L=function(e,t){t&&(n.forEach(function(e){e.removeEventListener(t,i.mousemove)}),document.body.removeEventListener(t,i.mousemove)),e&&e.classList.remove(O),[].slice.call(document.getElementsByClassName(x)).forEach(function(e){e.firstChild||e.parentNode.removeChild(e)}),w(q),w(F),B()},y=function(){[].slice.call(document.getElementsByClassName(k)).forEach(function(e){e.classList.remove(k)})},f=function(){var e=document.createElement(_);return e.classList.add(x),e.dataset.dragsterId=ie,e},v=function(){var e=document.createElement(_);return e.classList.add(q),e.dataset.dragsterId=ie,e},h=function(){var e=document.createElement(_);return e.classList.add(F),e.classList.add(j),e.style.position="fixed",e.dataset.dragsterId=ie,document.body.appendChild(e),e},m=function(e,t){if(e&&e.parentNode){var n=re.wrapDraggableElements===ee?e:e.nextSibling;e.parentNode.insertBefore(t,n)}},p=function(e,t){e&&e.parentNode&&e.parentNode.insertBefore(t,e)},g=function(e){return e.classList&&e.classList.contains(x)&&e.dataset.dragsterId===ie},c=function(e){return e.classList&&e.classList.contains(q)},u=function(e){return e.classList&&e.classList.contains(re.dragOnlyRegionCssClass)},B=function(){if(re.updateRegionsHeight){var e=[].slice.call(document.getElementsByClassName(X));e.forEach(function(e){var t=[].slice.call(e.querySelectorAll(re.elementSelector)),n=re.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+$)})}},M=function(e,t){L(l,e),L(l,t)},i={mousedown:function(e){if(re.dragHandleCssClass&&("string"!=typeof re.dragHandleCssClass||!e.target.classList.contains(re.dragHandleCssClass)))return ee;var t,s,d,c=e.type===J,u=e.changedTouches?e.changedTouches[0]:e;return le=JSON.parse(JSON.stringify(se)),e.dragster=le,re.onBeforeDragStart(e)===ee||3===e.which?ee:(e.preventDefault(),(l=o(e.target,g))?(s=c?W:K,d=c?z:Q,n.forEach(function(e){e.addEventListener(s,i.mousemove,ee),e.addEventListener(d,i.mouseup,ee)}),document.body.addEventListener(s,i.mousemove,ee),document.body.addEventListener(d,i.mouseup,ee),t=l.getBoundingClientRect(),R=t.left-u.clientX,S=t.top-u.clientY,r=h(),r.innerHTML=l.innerHTML,r.style.width=t.width+$,r.style.height=t.height+$,r.dataset.dragsterId=ie,a=r.getBoundingClientRect(),l.classList.add(O),le.drag.node=l,le.shadow.node=r,e.dragster=le,void re.onAfterDragStart(e)):ee)},mousemove:function(e){if(e.dragster=le,re.onBeforeDragMove(e)===ee||!a)return ee;e.preventDefault();var t=e.changedTouches?e.changedTouches[0]:e,n=t.view?t.view.pageXOffset:0,s=t.view?t.view.pageYOffset:0,d=t.clientY+s,i=t.clientX+n,c=document.elementFromPoint(t.clientX,t.clientY),m=o(c,g),p=re.shadowElementUnderMouse?t.clientY+S:t.clientY,f=re.shadowElementUnderMouse?i+R:i-a.width/2,h=le.drag.node&&le.drag.node.dataset,v=!(!m||!o(m,u)),w=c.dataset.dragsterId===ie,L=c.classList.contains(X)&&w,y=c.classList.contains(re.dragOnlyRegionCssClass)&&w,C=c.classList.contains(q),D=c.getElementsByClassName(x).length>0,b=c.getElementsByClassName(q).length>0;clearTimeout(E),r.style.top=p+$,r.style.left=f+$,r.classList.remove(j),le.shadow.top=p,le.shadow.left=f,h||L||C?m&&m!==l&&!v?(P.removePlaceholders(),P.addPlaceholderOnTarget(m,d,s)):!L||y||D||b?L&&!y&&D&&!b&&(P.removePlaceholders(),P.addPlaceholderInRegionBelowTargets(c)):(P.removePlaceholders(),P.addPlaceholderInRegion(c)):P.removePlaceholders(),re.scrollWindowOnDrag&&T(e),B(),re.onAfterDragMove(e)},mouseup:function(e){e.dragster=le;var t,n,r,a,s,d=e.type===J,i=d?W:K,c=d?z:Q;return re.onBeforeDragEnd(e)===ee?(M(i,c),ee):(t=re.replaceElements?k:q,n=document.getElementsByClassName(t)[0],a=!(!l||!o(l,u)),s=re.cloneElements&&a,E=setTimeout(M,200),y(),l&&n?(r=o(n,g),r=r||n,l!==r&&(re.replaceElements||s?re.replaceElements&&!s?(e.dragster=N.replaceElements(e.dragster,r),re.onAfterDragDrop(e)):!re.replaceElements&&s&&(e.dragster=N.cloneElements(e.dragster,n,r),re.onAfterDragDrop(e)):(e.dragster=N.moveElement(e.dragster,n,r),re.onAfterDragDrop(e)),r.classList.remove(Y)),M(i,c),void re.onAfterDragEnd(e)):(M(i,c),ee))}},P={addPlaceholderOnTarget:function(e,t,n){var o=e.getBoundingClientRect(),r=v(),a=o.height/2;y(),re.replaceElements?e.classList.add(k):t-n-o.top<a&&!ae.top?(w(q),r.dataset.placeholderPosition=V,p(e.firstChild,r),le.placeholder.position=V):o.bottom-(t-n)<a&&!ae.bottom&&(w(q),r.dataset.placeholderPosition=Z,e.appendChild(r),le.placeholder.position=Z),le.placeholder.node=r,le.drop.node=e},addPlaceholderInRegion:function(e){var t=v();e.appendChild(t),le.placeholder.position=Z,le.placeholder.node=t,le.drop.node=e},addPlaceholderInRegionBelowTargets:function(e){var t=[].slice.call(e.getElementsByClassName(x)),n=t.filter(function(e){return e.dataset.dragsterId===ie}),o=n[n.length-1],r=v();r.dataset.placeholderPosition=Z,w(q),o.appendChild(r),le.placeholder.position=Z,le.placeholder.node=r,le.drop.node=o},removePlaceholders:function(){re.replaceElements?y():w(q)}},N={moveElement:function(e,t,n){var o=re.wrapDraggableElements===ee?l:f(),r=t.dataset.placeholderPosition;return r===V?p(n,o):re.wrapDraggableElements===ee?m(o,n):m(n,o),l.firstChild&&re.wrapDraggableElements===te&&o.appendChild(l.firstChild),e.dropped=o,e},replaceElements:function(e,t){var n=document.getElementsByClassName(U)[0];return n.innerHTML=l.innerHTML,l.innerHTML=t.innerHTML,t.innerHTML=n.innerHTML,n.innerHTML="",e.dropped=n,e},cloneElements:function(e,t,n){var o=l.cloneNode(!0),r=t.dataset.placeholderPosition;return r===V?p(n,o):m(n,o),L(o),e.clonedFrom=l,e.clonedTo=o,e}},T=function(e){var t=e.changedTouches?e.changedTouches[0]:e,n=60;de-t.clientY<n?window.scrollBy(0,10):t.clientY<n&&window.scrollBy(0,-10)},H=function(){de=window.innerHeight},b(d),I=function(){n.forEach(function(e){e.classList.add(X),e.dataset.dragsterId=ie,e.addEventListener(G,i.mousedown,ee),e.addEventListener(J,i.mousedown,ee)})},I(),window.addEventListener("resize",H,!1),{update:function(){d=C(),b(d),B(),H()},updateRegions:function(){n=D(),I()}}};return e}); |
| { | ||
| "name": "dragsterjs", | ||
| "version": "1.4.2", | ||
| "version": "1.5.0", | ||
| "description": "Tiny vanilla JS plugin that enables drag'n'drop interactions to a user of your website", | ||
| "main": "dragster.js", | ||
| "scripts": { | ||
| "generate-modules": "node module-generator.js", | ||
| "minify": "uglifyjs dragster.js --mangle --compress --comments --output dragster.min.js", | ||
| "gzip": "gzip -c dragster.min.js > dragster.min.js.gz" | ||
| "gzip": "gzip -c dragster.min.js > dragster.min.js.gz", | ||
| "deploy": "npm run generate-modules && npm run minify && npm run gzip" | ||
| }, | ||
@@ -10,0 +12,0 @@ "repository": { |
| # dragster.js | ||
| [](https://badge.fury.io/js/dragsterjs) | ||
| Tiny vanilla JS library that enables drag'n'drop interactions to a user of your website. | ||
@@ -45,2 +47,12 @@ By implementing this library a user is able to drag'n'drop elements on user-defined drop regions. | ||
| If you would like to use DragsterJS as ES6 module in the browser: | ||
| ```html | ||
| <script type="module"> | ||
| import Dragster from './dragster.es6.js'; | ||
| const dragster = Dragster(); | ||
| </script> | ||
| ``` | ||
| And start having fun with dragging elements on the website. | ||
@@ -47,0 +59,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by53.67%
194878
- Number of package files
- increased by41.67%
17
- Lines of code
- increased by189.32%
2763
- Number of lines in readme file
- increased by7.95%
163
Worsened metrics
- Number of low supply chain risk alerts
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes