Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

dragselect

Package Overview
Dependencies
Maintainers
1
Versions
97
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dragselect - npm Package Compare versions

Comparing version 1.9.1 to 1.10.0

dragselect.gif
typewriter.gif

8

CHANGELOG.md

@@ -0,4 +1,10 @@

# 1.10.0
- Add touch device support (i.e. Mobile Phones)
- Preparations for modern code. I.e. ES6:
Usind Babel to transpile downwards to ES5. This should not result in any changes on your side.
# 1.9.1
- Dropped IE9 support. Oldest browser is now IE10
- Dropped IE9 support. Oldest browser is now IE10 (should still work on IE9. Just stopped testing that browser)
- Fix IE `document.documentElement` scrolling bug

@@ -5,0 +11,0 @@

4

CONTRIBUTING.md

@@ -23,7 +23,9 @@ # DragSelect Developers Guide

it will install `gulp` for later building & open `tests/quicktest.html` for your convenience.
it will install `gulp` & run it in dev mode (& on osx open `tests/quicktest.html` for your convenience).
*Note: opening quicktest will fail on other operating systems than Mac because I’m using the mac specific `open` command to open the file. However, that is not an issue and you can go on opening the file manually.*
Now whenever you make a change to the `DragSelect.js` in `/src` it will be transpiled and updated in `/dist` automatically. This is important since all test files use the `/dist` version.
## Testing

@@ -30,0 +32,0 @@

608

dist/DragSelect.js

@@ -1,2 +0,7 @@

// v 1.9.1
"use strict";
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
// v 1.10.0
/*

@@ -94,3 +99,2 @@ ____ _____ __ __

*/
// Setup

@@ -107,5 +111,14 @@ //////////////////////////////////////////////////////////////////////////////////////

this.multiSelectKeyPressed;
this.initialCursorPos = { x: 0, y: 0 };
this.newCursorPos = { x: 0, y: 0 };
this.previousCursorPos = { x: 0, y: 0 };
this.initialCursorPos = {
x: 0,
y: 0
};
this.newCursorPos = {
x: 0,
y: 0
};
this.previousCursorPos = {
x: 0,
y: 0
};
this.initialScroll;

@@ -116,10 +129,13 @@ this.selected = [];

this._createBindings();
this._setupOptions(options);
this.start();
}
/**
* Binds the `this` to the event listener functions
*/
DragSelect.prototype._createBindings = function() {
DragSelect.prototype._createBindings = function () {
this._startUp = this._startUp.bind(this);

@@ -130,7 +146,8 @@ this._handleMove = this._handleMove.bind(this);

};
/**
* Setup the options
*/
DragSelect.prototype._setupOptions = function(options) {
DragSelect.prototype._setupOptions = function (options) {
this.selectedClass = options.selectedClass || 'ds-selected';

@@ -140,39 +157,38 @@ this.hoverClass = options.hoverClass || 'ds-hover';

this.selectableClass = options.selectableClass || 'ds-selectable';
this.selectables = [];
this.selectables = [];
this._handleSelectables(this.toArray(options.selectables));
this.multiSelectKeys = options.multiSelectKeys || [
'ctrlKey',
'shiftKey',
'metaKey'
];
this.multiSelectKeys = options.multiSelectKeys || ['ctrlKey', 'shiftKey', 'metaKey'];
this.multiSelectMode = options.multiSelectMode || false;
this.autoScrollSpeed = options.autoScrollSpeed === 0 ? 0 : options.autoScrollSpeed || 1;
this.selectCallback = options.onElementSelect || function() {};
this.unselectCallback = options.onElementUnselect || function() {};
this.onDragStartBegin = options.onDragStartBegin || function() {};
this.moveStartCallback = options.onDragStart || function() {};
this.moveCallback = options.onDragMove || function() {};
this.callback = options.callback || function() {};
this.selectCallback = options.onElementSelect || function () {};
this.unselectCallback = options.onElementUnselect || function () {};
this.onDragStartBegin = options.onDragStartBegin || function () {};
this.moveStartCallback = options.onDragStart || function () {};
this.moveCallback = options.onDragMove || function () {};
this.callback = options.callback || function () {};
this.area = options.area || document;
this.customStyles = options.customStyles;
this.customStyles = options.customStyles; // Area has to have a special position attribute for calculations
// Area has to have a special position attribute for calculations
if (this.area !== document) {
var computedArea = getComputedStyle(this.area);
var isPositioned =
computedArea.position === 'absolute' ||
computedArea.position === 'relative' ||
computedArea.position === 'fixed';
var isPositioned = computedArea.position === 'absolute' || computedArea.position === 'relative' || computedArea.position === 'fixed';
if (!isPositioned) {
this.area.style.position = 'relative';
}
}
} // Selector
// Selector
this.selector = options.selector || this._createSelector();
this.addClass(this.selector, this.selectorClass);
};
/**

@@ -185,7 +201,5 @@ * Add/Remove Selectables also handles css classes and event listeners.

*/
DragSelect.prototype._handleSelectables = function(
selectables,
remove,
fromSelection
) {
DragSelect.prototype._handleSelectables = function (selectables, remove, fromSelection) {
for (var index = 0; index < selectables.length; index++) {

@@ -197,8 +211,6 @@ var selectable = selectables[index];

// add
this.addClass(selectable, this.selectableClass);
selectable.addEventListener('click', this._onClick);
this.selectables.push(selectable);
this.selectables.push(selectable); // also add to current selection
// also add to current selection
if (fromSelection && this.selected.indexOf(selectable) < 0) {

@@ -210,9 +222,7 @@ this.addClass(selectable, this.selectedClass);

// remove
this.removeClass(selectable, this.hoverClass);
this.removeClass(selectable, this.selectableClass);
selectable.removeEventListener('click', this._onClick);
this.selectables.splice(indexOf, 1);
this.selectables.splice(indexOf, 1); // also remove from current selection
// also remove from current selection
if (fromSelection && this.selected.indexOf(selectable) > -1) {

@@ -225,3 +235,2 @@ this.removeClass(selectable, this.selectedClass);

};
/**

@@ -237,7 +246,10 @@ * Triggers when a node is actively selected.

*/
DragSelect.prototype._onClick = function(event) {
DragSelect.prototype._onClick = function (event) {
if (this.mouseInteraction) {
return;
} // fix firefox doubleclick issue
if (this.isRightClick(event)) {

@@ -253,5 +265,6 @@ return;

else {
this._prevSelected = [];
} // #9
this._prevSelected = [];
} // #9
this.checkIfInsideSelection(true); // reset selection if no multiselectionkeypressed

@@ -265,3 +278,2 @@

};
/**

@@ -272,6 +284,8 @@ * Create the selector node when not provided by options object.

*/
DragSelect.prototype._createSelector = function() {
DragSelect.prototype._createSelector = function () {
var selector = document.createElement('div');
selector.style.position = 'absolute';
selector.style.position = 'absolute';
if (!this.customStyles) {

@@ -285,8 +299,7 @@ selector.style.background = 'rgba(0, 0, 255, 0.1)';

var _area = this.area === document ? document.body : this.area;
_area.appendChild(selector);
return selector;
};
// Start
}; // Start
//////////////////////////////////////////////////////////////////////////////////////

@@ -297,6 +310,10 @@

*/
DragSelect.prototype.start = function() {
DragSelect.prototype.start = function () {
this.area.addEventListener('mousedown', this._startUp);
this.area.addEventListener('touchstart', this._startUp, {
passive: false
});
};
/**

@@ -307,8 +324,15 @@ * Startup when the area is clicked.

*/
DragSelect.prototype._startUp = function(event) {
// callback
DragSelect.prototype._startUp = function (event) {
// touchmove handler
if (event.type === 'touchstart') // Call preventDefault() to prevent double click issue, see https://github.com/ThibaultJanBeyer/DragSelect/pull/29 & https://developer.mozilla.org/vi/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
event.preventDefault(); // callback
this.onDragStartBegin(event);
if (this._breaked) { return false; }
if (this._breaked) {
return false;
}
if (this.isRightClick(event)) {

@@ -325,21 +349,29 @@ return;

else {
this._prevSelected = [];
} // #9
this._prevSelected = [];
} // #9
// move element on location
// move element on location
this._getStartingPositions(event);
this.checkIfInsideSelection(true);
this.selector.style.display = 'none'; // hidden unless moved, fix for issue #8
// callback
// callback
this.moveStartCallback(event);
if (this._breaked) { return false; }
// event listeners
if (this._breaked) {
return false;
} // event listeners
this.area.removeEventListener('mousedown', this._startUp);
this.area.removeEventListener('touchstart', this._startUp, {
passive: false
});
this.area.addEventListener('mousemove', this._handleMove);
this.area.addEventListener('touchmove', this._handleMove);
document.addEventListener('mouseup', this.reset);
document.addEventListener('touchend', this.reset);
};
/**

@@ -351,3 +383,5 @@ * Check if some multiselection modifier key is pressed

*/
DragSelect.prototype.isMultiSelectKeyPressed = function(event) {
DragSelect.prototype.isMultiSelectKeyPressed = function (event) {
this.multiSelectKeyPressed = false;

@@ -360,2 +394,3 @@

var mKey = this.multiSelectKeys[index];
if (event[mKey]) {

@@ -369,3 +404,2 @@ this.multiSelectKeyPressed = true;

};
/**

@@ -376,9 +410,7 @@ * Grabs the starting position of all needed elements

*/
DragSelect.prototype._getStartingPositions = function(event) {
this.initialCursorPos = this.newCursorPos = this._getCursorPos(
event,
this.area
);
DragSelect.prototype._getStartingPositions = function (event) {
this.initialCursorPos = this.newCursorPos = this._getCursorPos(event, this.area);
this.initialScroll = this.getScroll(this.area);
var selectorPos = {};

@@ -390,5 +422,3 @@ selectorPos.x = this.initialCursorPos.x + this.initialScroll.x;

this.updatePos(this.selector, selectorPos);
};
// Movements/Sizing of selection
}; // Movements/Sizing of selection
//////////////////////////////////////////////////////////////////////////////////////

@@ -401,7 +431,9 @@

*/
DragSelect.prototype._handleMove = function(event) {
var selectorPos = this.getPosition(event);
// callback
DragSelect.prototype._handleMove = function (event) {
var selectorPos = this.getPosition(event); // callback
this.moveCallback(event);
if (this._breaked) {

@@ -412,11 +444,9 @@ return false;

this.selector.style.display = 'block'; // hidden unless moved, fix for issue #8
// move element on location
// move element on location
this.updatePos(this.selector, selectorPos);
this.checkIfInsideSelection();
this.checkIfInsideSelection(); // scroll area if area is scrollable
// scroll area if area is scrollable
this._autoScroll(event);
};
/**

@@ -427,10 +457,11 @@ * Calculates and returns the exact x,y w,h positions of the selector element

*/
DragSelect.prototype.getPosition = function(event) {
DragSelect.prototype.getPosition = function (event) {
var cursorPosNew = this._getCursorPos(event, this.area);
var scrollNew = this.getScroll(this.area);
// save for later retrieval
this.newCursorPos = cursorPosNew;
var scrollNew = this.getScroll(this.area); // save for later retrieval
// if area or document is scrolled those values have to be included aswell
this.newCursorPos = cursorPosNew; // if area or document is scrolled those values have to be included aswell
var scrollAmount = {

@@ -440,3 +471,2 @@ x: scrollNew.x - this.initialScroll.x,

};
/** check for direction

@@ -483,8 +513,9 @@ *

*/
var selectorPos = {};
// right
var selectorPos = {}; // right
if (cursorPosNew.x > this.initialCursorPos.x - scrollAmount.x) {
// 1.
selectorPos.x = this.initialCursorPos.x + this.initialScroll.x; // 2.
selectorPos.w = cursorPosNew.x - this.initialCursorPos.x + scrollAmount.x; // 3.

@@ -495,10 +526,10 @@ // left

selectorPos.x = cursorPosNew.x + scrollNew.x; // 2b.
selectorPos.w = this.initialCursorPos.x - cursorPosNew.x - scrollAmount.x; // 3b.
}
} // bottom
// bottom
if (cursorPosNew.y > this.initialCursorPos.y - scrollAmount.y) {
selectorPos.y = this.initialCursorPos.y + this.initialScroll.y;
selectorPos.h = cursorPosNew.y - this.initialCursorPos.y + scrollAmount.y;
// top
selectorPos.h = cursorPosNew.y - this.initialCursorPos.y + scrollAmount.y; // top
} else {

@@ -510,5 +541,3 @@ selectorPos.y = cursorPosNew.y + scrollNew.y;

return selectorPos;
};
// Colision detection
}; // Colision detection
//////////////////////////////////////////////////////////////////////////////////////

@@ -526,7 +555,9 @@

*/
DragSelect.prototype.checkIfInsideSelection = function(force) {
DragSelect.prototype.checkIfInsideSelection = function (force) {
var anyInside = false;
for( var i = 0, il = this.selectables.length; i < il; i++ ) {
for (var i = 0, il = this.selectables.length; i < il; i++) {
var selectable = this.selectables[i];
var scroll = this.getScroll(this.area);

@@ -540,12 +571,13 @@ var selectionRect = {

if( this._isElementTouching( selectable, selectionRect, scroll ) ) {
this._handleSelection( selectable, force );
if (this._isElementTouching(selectable, selectionRect, scroll)) {
this._handleSelection(selectable, force);
anyInside = true;
} else {
this._handleUnselection( selectable, force );
this._handleUnselection(selectable, force);
}
}
return anyInside;
};
/**

@@ -557,6 +589,9 @@ * Logic when an item is selected

*/
DragSelect.prototype._handleSelection = function(item, force) {
DragSelect.prototype._handleSelection = function (item, force) {
if (this.hasClass(item, this.hoverClass) && !force) {
return false;
}
var posInSelectedArray = this.selected.indexOf(item);

@@ -572,3 +607,2 @@

};
/**

@@ -580,7 +614,11 @@ * Logic when an item is de-selected

*/
DragSelect.prototype._handleUnselection = function(item, force) {
DragSelect.prototype._handleUnselection = function (item, force) {
if (!this.hasClass(item, this.hoverClass) && !force) {
return false;
}
var posInSelectedArray = this.selected.indexOf(item);
var isInPrevSelection = this._prevSelected.indexOf(item); // #9

@@ -595,2 +633,4 @@

*/
if (posInSelectedArray > -1 && isInPrevSelection < 0) {

@@ -604,3 +644,2 @@ this.unselect(item);

};
/**

@@ -612,3 +651,5 @@ * Adds an item to the selection.

*/
DragSelect.prototype.select = function(item) {
DragSelect.prototype.select = function (item) {
if (this.selected.indexOf(item) > -1) {

@@ -620,4 +661,4 @@ return false;

this.addClass(item, this.selectedClass);
this.selectCallback(item);
this.selectCallback(item);
if (this._breaked) {

@@ -629,3 +670,2 @@ return false;

};
/**

@@ -637,3 +677,5 @@ * Removes an item from the selection.

*/
DragSelect.prototype.unselect = function(item) {
DragSelect.prototype.unselect = function (item) {
if (this.selected.indexOf(item) < 0) {

@@ -645,4 +687,4 @@ return false;

this.removeClass(item, this.selectedClass);
this.unselectCallback(item);
this.unselectCallback(item);
if (this._breaked) {

@@ -654,3 +696,2 @@ return false;

};
/**

@@ -663,3 +704,5 @@ * Adds/Removes an item to the selection.

*/
DragSelect.prototype.toggle = function(item) {
DragSelect.prototype.toggle = function (item) {
if (this.selected.indexOf(item) > -1) {

@@ -673,3 +716,2 @@ this.unselect(item);

};
/**

@@ -689,7 +731,5 @@ * Checks if element is touched by the selector (and vice-versa)

*/
DragSelect.prototype._isElementTouching = function(
element,
selectionRect,
scroll
) {
DragSelect.prototype._isElementTouching = function (element, selectionRect, scroll) {
var elementRect = {

@@ -700,5 +740,3 @@ y: element.getBoundingClientRect().top + scroll.y,

w: element.offsetWidth || element.getBoundingClientRect().width
};
// Axis-Aligned Bounding Box Colision Detection.
}; // Axis-Aligned Bounding Box Colision Detection.
// Imagine following Example:

@@ -716,8 +754,4 @@ // b01

// See: https://en.wikipedia.org/wiki/Minimum_bounding_box#Axis-aligned_minimum_bounding_box and https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
if (
selectionRect.x < elementRect.x + elementRect.w &&
selectionRect.x + selectionRect.w > elementRect.x &&
selectionRect.y < elementRect.y + elementRect.h &&
selectionRect.h + selectionRect.y > elementRect.y
) {
if (selectionRect.x < elementRect.x + elementRect.w && selectionRect.x + selectionRect.w > elementRect.x && selectionRect.y < elementRect.y + elementRect.h && selectionRect.h + selectionRect.y > elementRect.y) {
return true; // collision detected!

@@ -727,5 +761,3 @@ } else {

}
};
// Autoscroll
}; // Autoscroll
//////////////////////////////////////////////////////////////////////////////////////

@@ -738,6 +770,8 @@

*/
DragSelect.prototype._autoScroll = function(event) {
DragSelect.prototype._autoScroll = function (event) {
var edge = this.isCursorNearEdge(event, this.area);
var docEl = document && document.documentElement && document.documentElement.scrollTop && document.documentElement;
var docEl = document && document.documentElement && document.documentElement.scrollTop && document.documentElement;
var _area = this.area === document ? docEl || document.body : this.area;

@@ -755,3 +789,2 @@

};
/**

@@ -764,6 +797,8 @@ * Check if the selector is near an edge of the area

*/
DragSelect.prototype.isCursorNearEdge = function(event, area) {
DragSelect.prototype.isCursorNearEdge = function (event, area) {
var cursorPosition = this._getCursorPos(event, area);
var areaRect = this.getAreaRect(area);
var tolerance = {

@@ -785,5 +820,3 @@ x: Math.max(areaRect.width / 10, 30),

return false;
};
// Ending
}; // Ending
//////////////////////////////////////////////////////////////////////////////////////

@@ -794,9 +827,16 @@

*/
DragSelect.prototype.reset = function(event) {
DragSelect.prototype.reset = function (event) {
this.previousCursorPos = this._getCursorPos(event, this.area);
document.removeEventListener('mouseup', this.reset);
document.removeEventListener('touchend', this.reset);
this.area.removeEventListener('mousemove', this._handleMove);
this.area.removeEventListener('touchmove', this._handleMove);
this.area.addEventListener('mousedown', this._startUp);
this.area.addEventListener('touchstart', this._startUp, {
passive: false
});
this.callback(this.selected, event);
this.callback(this.selected, event);
if (this._breaked) {

@@ -809,12 +849,7 @@ return false;

this.selector.style.display = 'none';
setTimeout(
function() {
// debounce in order "onClick" to work
this.mouseInteraction = false;
}.bind(this),
100
);
setTimeout(function () {
// debounce in order "onClick" to work
this.mouseInteraction = false;
}.bind(this), 100);
};
/**

@@ -825,23 +860,25 @@ * Function break: used in callbacks to stop break the code at the specific moment

*/
DragSelect.prototype.break = function() {
DragSelect.prototype.break = function () {
this._breaked = true;
setTimeout(
function() {
// debounce the break should only break once instantly after call
this._breaked = false;
}.bind(this),
100
);
setTimeout(function () {
// debounce the break should only break once instantly after call
this._breaked = false;
}.bind(this), 100);
};
/**
* Complete function teardown
*/
DragSelect.prototype.stop = function() {
DragSelect.prototype.stop = function () {
this.reset();
this.area.removeEventListener('mousedown', this._startUp);
this.area.removeEventListener('touchstart', this._startUp, {
passive: false
});
document.removeEventListener('mouseup', this.reset);
};
// Usefull methods for user
document.removeEventListener('touchend', this.reset);
}; // Usefull methods for user
//////////////////////////////////////////////////////////////////////////////////////

@@ -854,6 +891,7 @@

*/
DragSelect.prototype.getSelection = function() {
DragSelect.prototype.getSelection = function () {
return this.selected;
};
/**

@@ -868,3 +906,5 @@ * Returns cursor x, y position based on event object

*/
DragSelect.prototype.getCursorPos = function(event, _area, ignoreScroll) {
DragSelect.prototype.getCursorPos = function (event, _area, ignoreScroll) {
if (!event) {

@@ -874,6 +914,10 @@ return false;

var area = _area || (_area !== false && this.area);
var area = _area || _area !== false && this.area;
var pos = this._getCursorPos(event, area);
var scroll = ignoreScroll ? { x: 0, y: 0 } : this.getScroll(area);
var scroll = ignoreScroll ? {
x: 0,
y: 0
} : this.getScroll(area);
return {

@@ -884,3 +928,2 @@ x: pos.x + scroll.x,

};
/**

@@ -898,7 +941,5 @@ * Adds several items to the selection list

*/
DragSelect.prototype.addSelection = function(
_nodes,
_callback,
dontAddToSelectables
) {
DragSelect.prototype.addSelection = function (_nodes, _callback, dontAddToSelectables) {
var nodes = this.toArray(_nodes);

@@ -914,2 +955,3 @@

}
if (_callback) {

@@ -921,3 +963,2 @@ this.callback(this.selected, false);

};
/**

@@ -932,7 +973,5 @@ * Removes specific nodes from the selection

*/
DragSelect.prototype.removeSelection = function(
_nodes,
_callback,
removeFromSelectables
) {
DragSelect.prototype.removeSelection = function (_nodes, _callback, removeFromSelectables) {
var nodes = this.toArray(_nodes);

@@ -948,2 +987,3 @@

}
if (_callback) {

@@ -955,3 +995,2 @@ this.callback(this.selected, false);

};
/**

@@ -967,3 +1006,5 @@ * Toggles specific nodes from the selection:

*/
DragSelect.prototype.toggleSelection = function(_nodes, _callback, _special) {
DragSelect.prototype.toggleSelection = function (_nodes, _callback, _special) {
var nodes = this.toArray(_nodes);

@@ -983,3 +1024,2 @@

};
/**

@@ -993,13 +1033,9 @@ * Sets the current selected nodes and optionally run the callback

*/
DragSelect.prototype.setSelection = function(
_nodes,
runCallback,
dontAddToSelectables
) {
DragSelect.prototype.setSelection = function (_nodes, runCallback, dontAddToSelectables) {
this.clearSelection();
this.addSelection(_nodes, runCallback, dontAddToSelectables);
return this.selected;
};
/**

@@ -1011,4 +1047,7 @@ * Unselect / Deselect all current selected Nodes

*/
DragSelect.prototype.clearSelection = function(runCallback) {
DragSelect.prototype.clearSelection = function (runCallback) {
var selection = this.selected.slice();
for (var index = 0, il = selection.length; index < il; index++) {

@@ -1025,3 +1064,2 @@ var node = selection[index];

};
/**

@@ -1035,8 +1073,11 @@ * Add nodes that can be selected.

*/
DragSelect.prototype.addSelectables = function(_nodes, addToSelection) {
DragSelect.prototype.addSelectables = function (_nodes, addToSelection) {
var nodes = this.toArray(_nodes);
this._handleSelectables(nodes, false, addToSelection);
return _nodes;
};
/**

@@ -1047,6 +1088,7 @@ * Gets all nodes that can be selected

*/
DragSelect.prototype.getSelectables = function() {
DragSelect.prototype.getSelectables = function () {
return this.selectables;
};
/**

@@ -1063,11 +1105,8 @@ * Sets all elements that can be selected.

*/
DragSelect.prototype.setSelectables = function(
_nodes,
removeFromSelection,
addToSelection
) {
DragSelect.prototype.setSelectables = function (_nodes, removeFromSelection, addToSelection) {
this.removeSelectables(this.getSelectables(), removeFromSelection);
return this.addSelectables(_nodes, addToSelection);
};
/**

@@ -1080,9 +1119,11 @@ * Remove nodes from the nodes that can be selected.

*/
DragSelect.prototype.removeSelectables = function(_nodes, removeFromSelection) {
DragSelect.prototype.removeSelectables = function (_nodes, removeFromSelection) {
var nodes = this.toArray(_nodes);
this._handleSelectables(nodes, true, removeFromSelection);
return _nodes;
};
// Helpers
}; // Helpers
//////////////////////////////////////////////////////////////////////////////////////

@@ -1098,3 +1139,5 @@

*/
DragSelect.prototype.isRightClick = function(event) {
DragSelect.prototype.isRightClick = function (event) {
if (!event) {

@@ -1116,3 +1159,2 @@ return false;

};
/**

@@ -1127,3 +1169,5 @@ * Adds a class to an element

*/
DragSelect.prototype.addClass = function(element, classname) {
DragSelect.prototype.addClass = function (element, classname) {
if (element.classList) {

@@ -1134,12 +1178,16 @@ return element.classList.add(classname);

var cn = element.getAttribute('class') || '';
if (cn.indexOf(classname) !== -1) {
return element;
} // test for existance
if (cn !== '') {
classname = ' ' + classname;
} // add a space if the element already has class
element.setAttribute('class', cn + classname);
return element;
};
/**

@@ -1154,3 +1202,5 @@ * Removes a class of an element

*/
DragSelect.prototype.removeClass = function(element, classname) {
DragSelect.prototype.removeClass = function (element, classname) {
if (element.classList) {

@@ -1166,3 +1216,2 @@ return element.classList.remove(classname);

};
/**

@@ -1176,3 +1225,5 @@ * Checks if an element has a class

*/
DragSelect.prototype.hasClass = function(element, classname) {
DragSelect.prototype.hasClass = function (element, classname) {
if (element.classList) {

@@ -1183,2 +1234,3 @@ return element.classList.contains(classname);

var cn = element.getAttribute('class') || '';
if (cn.indexOf(classname) > -1) {

@@ -1190,3 +1242,2 @@ return true;

};
/**

@@ -1199,6 +1250,9 @@ * Transforms a nodelist or single node to an array

*/
DragSelect.prototype.toArray = function(nodes) {
DragSelect.prototype.toArray = function (nodes) {
if (!nodes) {
return false;
}
if (!nodes.length && this.isElement(nodes)) {

@@ -1209,2 +1263,3 @@ return [nodes];

var array = [];
for (var i = nodes.length - 1; i >= 0; i--) {

@@ -1216,3 +1271,2 @@ array[i] = nodes[i];

};
/**

@@ -1225,3 +1279,5 @@ * Checks if a node is of type element

*/
DragSelect.prototype.isElement = function(node) {
DragSelect.prototype.isElement = function (node) {
try {

@@ -1234,11 +1290,5 @@ // Using W3 DOM2 (works for FF, Opera and Chrome), also checking for SVGs

// properties that all elements have. (works even on IE7)
return (
typeof node === 'object' &&
node.nodeType === 1 &&
typeof node.style === 'object' &&
typeof node.ownerDocument === 'object'
);
return _typeof(node) === 'object' && node.nodeType === 1 && _typeof(node.style) === 'object' && _typeof(node.ownerDocument) === 'object';
}
};
/**

@@ -1254,7 +1304,20 @@ * Returns cursor x, y position based on event object

*/
DragSelect.prototype._getCursorPos = function(event, area) {
DragSelect.prototype._getCursorPos = function (event, area) {
if (!event) {
return { x: 0, y: 0 };
}
return {
x: 0,
y: 0
};
} // touchend has not touches. so we take the last toucb if a touchevent, we need to store the positions on the prototype
if (event.touches && event.type !== 'touchend') {
DragSelect.prototype.lastTouch = event;
} //if a touchevent, return the last touch rather than the regular event
// we need .touches[0] from that event instead
event = event.touches ? DragSelect.prototype.lastTouch.touches[0] : event;
var cPos = {

@@ -1265,3 +1328,2 @@ // event.clientX/Y fallback for <IE8

};
var areaRect = this.getAreaRect(area || document);

@@ -1276,3 +1338,2 @@ var docScroll = this.getScroll(); // needed when document is scrollable but area is not

};
/**

@@ -1283,6 +1344,7 @@ * Returns the starting/initial position of the cursor/selector

*/
DragSelect.prototype.getInitialCursorPosition = function() {
DragSelect.prototype.getInitialCursorPosition = function () {
return this.initialCursorPos;
};
/**

@@ -1293,6 +1355,7 @@ * Returns the last seen position of the cursor/selector

*/
DragSelect.prototype.getCurrentCursorPosition = function() {
DragSelect.prototype.getCurrentCursorPosition = function () {
return this.newCursorPos;
};
/**

@@ -1303,6 +1366,7 @@ * Returns the previous position of the cursor/selector

*/
DragSelect.prototype.getPreviousCursorPosition = function() {
DragSelect.prototype.getPreviousCursorPosition = function () {
return this.previousCursorPos;
};
/**

@@ -1316,10 +1380,7 @@ * Returns the cursor position difference between start and now

*/
DragSelect.prototype.getCursorPositionDifference = function(
usePreviousCursorDifference
) {
DragSelect.prototype.getCursorPositionDifference = function (usePreviousCursorDifference) {
var posA = this.getCurrentCursorPosition();
var posB = usePreviousCursorDifference
? this.getPreviousCursorPosition()
: this.getInitialCursorPosition();
var posB = usePreviousCursorDifference ? this.getPreviousCursorPosition() : this.getInitialCursorPosition();
return {

@@ -1330,3 +1391,2 @@ x: posA.x - posB.x,

};
/**

@@ -1339,14 +1399,9 @@ * Returns the current x, y scroll value of a container

*/
DragSelect.prototype.getScroll = function(area) {
DragSelect.prototype.getScroll = function (area) {
var body = {
top:
document.body.scrollTop > 0
? document.body.scrollTop
: document.documentElement.scrollTop,
left:
document.body.scrollLeft > 0
? document.body.scrollLeft
: document.documentElement.scrollLeft
top: document.body.scrollTop > 0 ? document.body.scrollTop : document.documentElement.scrollTop,
left: document.body.scrollLeft > 0 ? document.body.scrollLeft : document.documentElement.scrollLeft
};
var scroll = {

@@ -1357,6 +1412,4 @@ // when the rectangle is bound to the document, no scroll is needed

};
return scroll;
};
/**

@@ -1370,13 +1423,9 @@ * Returns the top/left/bottom/right/width/height

*/
DragSelect.prototype.getAreaRect = function(area) {
DragSelect.prototype.getAreaRect = function (area) {
if (area === document) {
var size = {
y:
area.documentElement.clientHeight > 0
? area.documentElement.clientHeight
: window.innerHeight,
x:
area.documentElement.clientWidth > 0
? area.documentElement.clientWidth
: window.innerWidth
y: area.documentElement.clientHeight > 0 ? area.documentElement.clientHeight : window.innerHeight,
x: area.documentElement.clientWidth > 0 ? area.documentElement.clientWidth : window.innerWidth
};

@@ -1402,3 +1451,2 @@ return {

};
/**

@@ -1413,3 +1461,5 @@ * Updates the node style left, top, width,

*/
DragSelect.prototype.updatePos = function(node, pos) {
DragSelect.prototype.updatePos = function (node, pos) {
node.style.left = pos.x + 'px';

@@ -1420,19 +1470,13 @@ node.style.top = pos.y + 'px';

return node;
};
}; // Make exportable
//////////////////////////////////////////////////////////////////////////////////////
// Make exportable
//////////////////////////////////////////////////////////////////////////////////////
/* eslint-disable no-undef */
// Module exporting
// Module exporting
if (typeof module !== 'undefined' && module !== null) {
module.exports = DragSelect;
// AMD Modules
} else if (
typeof define !== 'undefined' &&
typeof define === 'function' &&
define
) {
define(function() {
module.exports = DragSelect; // AMD Modules
} else if (typeof define !== 'undefined' && typeof define === 'function' && define) {
define(function () {
return DragSelect;

@@ -1442,2 +1486,2 @@ });

window.DragSelect = DragSelect;
}
}

2

dist/ds.min.js

@@ -1,1 +0,1 @@

function DragSelect(e){this.multiSelectKeyPressed,this.initialCursorPos={x:0,y:0},this.newCursorPos={x:0,y:0},this.previousCursorPos={x:0,y:0},this.initialScroll,this.selected=[],this._prevSelected=[],this._createBindings(),this._setupOptions(e),this.start()}DragSelect.prototype._createBindings=function(){this._startUp=this._startUp.bind(this),this._handleMove=this._handleMove.bind(this),this.reset=this.reset.bind(this),this._onClick=this._onClick.bind(this)},DragSelect.prototype._setupOptions=function(e){if(this.selectedClass=e.selectedClass||"ds-selected",this.hoverClass=e.hoverClass||"ds-hover",this.selectorClass=e.selectorClass||"ds-selector",this.selectableClass=e.selectableClass||"ds-selectable",this.selectables=[],this._handleSelectables(this.toArray(e.selectables)),this.multiSelectKeys=e.multiSelectKeys||["ctrlKey","shiftKey","metaKey"],this.multiSelectMode=e.multiSelectMode||!1,this.autoScrollSpeed=0===e.autoScrollSpeed?0:e.autoScrollSpeed||1,this.selectCallback=e.onElementSelect||function(){},this.unselectCallback=e.onElementUnselect||function(){},this.onDragStartBegin=e.onDragStartBegin||function(){},this.moveStartCallback=e.onDragStart||function(){},this.moveCallback=e.onDragMove||function(){},this.callback=e.callback||function(){},this.area=e.area||document,this.customStyles=e.customStyles,this.area!==document){var t=getComputedStyle(this.area);"absolute"===t.position||"relative"===t.position||"fixed"===t.position||(this.area.style.position="relative")}this.selector=e.selector||this._createSelector(),this.addClass(this.selector,this.selectorClass)},DragSelect.prototype._handleSelectables=function(e,t,s){for(var i=0;i<e.length;i++){var o=e[i],r=this.selectables.indexOf(o);r<0&&!t?(this.addClass(o,this.selectableClass),o.addEventListener("click",this._onClick),this.selectables.push(o),s&&this.selected.indexOf(o)<0&&(this.addClass(o,this.selectedClass),this.selected.push(o))):r>-1&&t&&(this.removeClass(o,this.hoverClass),this.removeClass(o,this.selectableClass),o.removeEventListener("click",this._onClick),this.selectables.splice(r,1),s&&this.selected.indexOf(o)>-1&&(this.removeClass(o,this.selectedClass),this.selected.splice(this.selected.indexOf(o),1)))}},DragSelect.prototype._onClick=function(e){if(!this.mouseInteraction&&!this.isRightClick(e)){var t=e.target;this.isMultiSelectKeyPressed(e)?this._prevSelected=this.selected.slice():this._prevSelected=[],this.checkIfInsideSelection(!0),this.selectables.indexOf(t)>-1&&this.toggle(t),this.reset()}},DragSelect.prototype._createSelector=function(){var e=document.createElement("div");return e.style.position="absolute",this.customStyles||(e.style.background="rgba(0, 0, 255, 0.1)",e.style.border="1px solid rgba(0, 0, 255, 0.45)",e.style.display="none",e.style.pointerEvents="none"),(this.area===document?document.body:this.area).appendChild(e),e},DragSelect.prototype.start=function(){this.area.addEventListener("mousedown",this._startUp)},DragSelect.prototype._startUp=function(e){if(this.onDragStartBegin(e),this._breaked)return!1;if(!this.isRightClick(e)){if(this.mouseInteraction=!0,this.selector.style.display="block",this.isMultiSelectKeyPressed(e)?this._prevSelected=this.selected.slice():this._prevSelected=[],this._getStartingPositions(e),this.checkIfInsideSelection(!0),this.selector.style.display="none",this.moveStartCallback(e),this._breaked)return!1;this.area.removeEventListener("mousedown",this._startUp),this.area.addEventListener("mousemove",this._handleMove),document.addEventListener("mouseup",this.reset)}},DragSelect.prototype.isMultiSelectKeyPressed=function(e){if(this.multiSelectKeyPressed=!1,this.multiSelectMode)this.multiSelectKeyPressed=!0;else for(var t=0;t<this.multiSelectKeys.length;t++){var s=this.multiSelectKeys[t];e[s]&&(this.multiSelectKeyPressed=!0)}return this.multiSelectKeyPressed},DragSelect.prototype._getStartingPositions=function(e){this.initialCursorPos=this.newCursorPos=this._getCursorPos(e,this.area),this.initialScroll=this.getScroll(this.area);var t={};t.x=this.initialCursorPos.x+this.initialScroll.x,t.y=this.initialCursorPos.y+this.initialScroll.y,t.w=0,t.h=0,this.updatePos(this.selector,t)},DragSelect.prototype._handleMove=function(e){var t=this.getPosition(e);if(this.moveCallback(e),this._breaked)return!1;this.selector.style.display="block",this.updatePos(this.selector,t),this.checkIfInsideSelection(),this._autoScroll(e)},DragSelect.prototype.getPosition=function(e){var t=this._getCursorPos(e,this.area),s=this.getScroll(this.area);this.newCursorPos=t;var i={x:s.x-this.initialScroll.x,y:s.y-this.initialScroll.y},o={};return t.x>this.initialCursorPos.x-i.x?(o.x=this.initialCursorPos.x+this.initialScroll.x,o.w=t.x-this.initialCursorPos.x+i.x):(o.x=t.x+s.x,o.w=this.initialCursorPos.x-t.x-i.x),t.y>this.initialCursorPos.y-i.y?(o.y=this.initialCursorPos.y+this.initialScroll.y,o.h=t.y-this.initialCursorPos.y+i.y):(o.y=t.y+s.y,o.h=this.initialCursorPos.y-t.y-i.y),o},DragSelect.prototype.checkIfInsideSelection=function(e){for(var t=!1,s=0,i=this.selectables.length;s<i;s++){var o=this.selectables[s],r=this.getScroll(this.area),l={y:this.selector.getBoundingClientRect().top+r.y,x:this.selector.getBoundingClientRect().left+r.x,h:this.selector.offsetHeight,w:this.selector.offsetWidth};this._isElementTouching(o,l,r)?(this._handleSelection(o,e),t=!0):this._handleUnselection(o,e)}return t},DragSelect.prototype._handleSelection=function(e,t){if(this.hasClass(e,this.hoverClass)&&!t)return!1;var s=this.selected.indexOf(e);s<0?this.select(e):s>-1&&this.multiSelectKeyPressed&&this.unselect(e),this.addClass(e,this.hoverClass)},DragSelect.prototype._handleUnselection=function(e,t){if(!this.hasClass(e,this.hoverClass)&&!t)return!1;var s=this.selected.indexOf(e),i=this._prevSelected.indexOf(e);s>-1&&i<0?this.unselect(e):s<0&&i>-1&&this.select(e),this.removeClass(e,this.hoverClass)},DragSelect.prototype.select=function(e){return!(this.selected.indexOf(e)>-1)&&(this.selected.push(e),this.addClass(e,this.selectedClass),this.selectCallback(e),!this._breaked&&e)},DragSelect.prototype.unselect=function(e){return!(this.selected.indexOf(e)<0)&&(this.selected.splice(this.selected.indexOf(e),1),this.removeClass(e,this.selectedClass),this.unselectCallback(e),!this._breaked&&e)},DragSelect.prototype.toggle=function(e){return this.selected.indexOf(e)>-1?this.unselect(e):this.select(e),e},DragSelect.prototype._isElementTouching=function(e,t,s){var i={y:e.getBoundingClientRect().top+s.y,x:e.getBoundingClientRect().left+s.x,h:e.offsetHeight||e.getBoundingClientRect().height,w:e.offsetWidth||e.getBoundingClientRect().width};return t.x<i.x+i.w&&t.x+t.w>i.x&&t.y<i.y+i.h&&t.h+t.y>i.y},DragSelect.prototype._autoScroll=function(e){var t=this.isCursorNearEdge(e,this.area),s=document&&document.documentElement&&document.documentElement.scrollTop&&document.documentElement,i=this.area===document?s||document.body:this.area;"top"===t&&i.scrollTop>0?i.scrollTop-=1*this.autoScrollSpeed:"bottom"===t?i.scrollTop+=1*this.autoScrollSpeed:"left"===t&&i.scrollLeft>0?i.scrollLeft-=1*this.autoScrollSpeed:"right"===t&&(i.scrollLeft+=1*this.autoScrollSpeed)},DragSelect.prototype.isCursorNearEdge=function(e,t){var s=this._getCursorPos(e,t),i=this.getAreaRect(t),o={x:Math.max(i.width/10,30),y:Math.max(i.height/10,30)};return s.y<o.y?"top":i.height-s.y<o.y?"bottom":i.width-s.x<o.x?"right":s.x<o.x&&"left"},DragSelect.prototype.reset=function(e){if(this.previousCursorPos=this._getCursorPos(e,this.area),document.removeEventListener("mouseup",this.reset),this.area.removeEventListener("mousemove",this._handleMove),this.area.addEventListener("mousedown",this._startUp),this.callback(this.selected,e),this._breaked)return!1;this.selector.style.width="0",this.selector.style.height="0",this.selector.style.display="none",setTimeout(function(){this.mouseInteraction=!1}.bind(this),100)},DragSelect.prototype.break=function(){this._breaked=!0,setTimeout(function(){this._breaked=!1}.bind(this),100)},DragSelect.prototype.stop=function(){this.reset(),this.area.removeEventListener("mousedown",this._startUp),document.removeEventListener("mouseup",this.reset)},DragSelect.prototype.getSelection=function(){return this.selected},DragSelect.prototype.getCursorPos=function(e,t,s){if(!e)return!1;var i=t||!1!==t&&this.area,o=this._getCursorPos(e,i),r=s?{x:0,y:0}:this.getScroll(i);return{x:o.x+r.x,y:o.y+r.y}},DragSelect.prototype.addSelection=function(e,t,s){for(var i=this.toArray(e),o=0,r=i.length;o<r;o++){var l=i[o];this.select(l)}return s||this.addSelectables(i),t&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.removeSelection=function(e,t,s){for(var i=this.toArray(e),o=0,r=i.length;o<r;o++){var l=i[o];this.unselect(l)}return s&&this.removeSelectables(i),t&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.toggleSelection=function(e,t,s){for(var i=this.toArray(e),o=0,r=i.length;o<r;o++){var l=i[o];this.selected.indexOf(l)<0?this.addSelection(l,t,s):this.removeSelection(l,t,s)}return this.selected},DragSelect.prototype.setSelection=function(e,t,s){return this.clearSelection(),this.addSelection(e,t,s),this.selected},DragSelect.prototype.clearSelection=function(e){for(var t=this.selected.slice(),s=0,i=t.length;s<i;s++){var o=t[s];this.unselect(o)}return e&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.addSelectables=function(e,t){var s=this.toArray(e);return this._handleSelectables(s,!1,t),e},DragSelect.prototype.getSelectables=function(){return this.selectables},DragSelect.prototype.setSelectables=function(e,t,s){return this.removeSelectables(this.getSelectables(),t),this.addSelectables(e,s)},DragSelect.prototype.removeSelectables=function(e,t){var s=this.toArray(e);return this._handleSelectables(s,!0,t),e},DragSelect.prototype.isRightClick=function(e){if(!e)return!1;var t=!1;return"which"in e?t=3===e.which:"button"in e&&(t=2===e.button),t},DragSelect.prototype.addClass=function(e,t){if(e.classList)return e.classList.add(t);var s=e.getAttribute("class")||"";return-1!==s.indexOf(t)?e:(""!==s&&(t=" "+t),e.setAttribute("class",s+t),e)},DragSelect.prototype.removeClass=function(e,t){if(e.classList)return e.classList.remove(t);var s=e.getAttribute("class")||"",i=new RegExp(t+"\\b","g");return s=s.replace(i,""),e.setAttribute("class",s),e},DragSelect.prototype.hasClass=function(e,t){return e.classList?e.classList.contains(t):(e.getAttribute("class")||"").indexOf(t)>-1},DragSelect.prototype.toArray=function(e){if(!e)return!1;if(!e.length&&this.isElement(e))return[e];for(var t=[],s=e.length-1;s>=0;s--)t[s]=e[s];return t},DragSelect.prototype.isElement=function(e){try{return e instanceof HTMLElement||e instanceof SVGElement}catch(t){return"object"==typeof e&&1===e.nodeType&&"object"==typeof e.style&&"object"==typeof e.ownerDocument}},DragSelect.prototype._getCursorPos=function(e,t){if(!e)return{x:0,y:0};var s={x:e.pageX||e.clientX,y:e.pageY||e.clientY},i=this.getAreaRect(t||document),o=this.getScroll();return{x:s.x-i.left-o.x,y:s.y-i.top-o.y}},DragSelect.prototype.getInitialCursorPosition=function(){return this.initialCursorPos},DragSelect.prototype.getCurrentCursorPosition=function(){return this.newCursorPos},DragSelect.prototype.getPreviousCursorPosition=function(){return this.previousCursorPos},DragSelect.prototype.getCursorPositionDifference=function(e){var t=this.getCurrentCursorPosition(),s=e?this.getPreviousCursorPosition():this.getInitialCursorPosition();return{x:t.x-s.x,y:t.y-s.y}},DragSelect.prototype.getScroll=function(e){var t={top:document.body.scrollTop>0?document.body.scrollTop:document.documentElement.scrollTop,left:document.body.scrollLeft>0?document.body.scrollLeft:document.documentElement.scrollLeft};return{y:e&&e.scrollTop>=0?e.scrollTop:t.top,x:e&&e.scrollLeft>=0?e.scrollLeft:t.left}},DragSelect.prototype.getAreaRect=function(e){if(e===document){var t={y:e.documentElement.clientHeight>0?e.documentElement.clientHeight:window.innerHeight,x:e.documentElement.clientWidth>0?e.documentElement.clientWidth:window.innerWidth};return{top:0,left:0,bottom:0,right:0,width:t.x,height:t.y}}return{top:e.getBoundingClientRect().top,left:e.getBoundingClientRect().left,bottom:e.getBoundingClientRect().bottom,right:e.getBoundingClientRect().right,width:e.offsetWidth,height:e.offsetHeight}},DragSelect.prototype.updatePos=function(e,t){return e.style.left=t.x+"px",e.style.top=t.y+"px",e.style.width=t.w+"px",e.style.height=t.h+"px",e},"undefined"!=typeof module&&null!==module?module.exports=DragSelect:"undefined"!=typeof define&&"function"==typeof define&&define?define(function(){return DragSelect}):window.DragSelect=DragSelect;
"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function DragSelect(t){this.multiSelectKeyPressed,this.initialCursorPos={x:0,y:0},this.newCursorPos={x:0,y:0},this.previousCursorPos={x:0,y:0},this.initialScroll,this.selected=[],this._prevSelected=[],this._createBindings(),this._setupOptions(t),this.start()}DragSelect.prototype._createBindings=function(){this._startUp=this._startUp.bind(this),this._handleMove=this._handleMove.bind(this),this.reset=this.reset.bind(this),this._onClick=this._onClick.bind(this)},DragSelect.prototype._setupOptions=function(t){if(this.selectedClass=t.selectedClass||"ds-selected",this.hoverClass=t.hoverClass||"ds-hover",this.selectorClass=t.selectorClass||"ds-selector",this.selectableClass=t.selectableClass||"ds-selectable",this.selectables=[],this._handleSelectables(this.toArray(t.selectables)),this.multiSelectKeys=t.multiSelectKeys||["ctrlKey","shiftKey","metaKey"],this.multiSelectMode=t.multiSelectMode||!1,this.autoScrollSpeed=0===t.autoScrollSpeed?0:t.autoScrollSpeed||1,this.selectCallback=t.onElementSelect||function(){},this.unselectCallback=t.onElementUnselect||function(){},this.onDragStartBegin=t.onDragStartBegin||function(){},this.moveStartCallback=t.onDragStart||function(){},this.moveCallback=t.onDragMove||function(){},this.callback=t.callback||function(){},this.area=t.area||document,this.customStyles=t.customStyles,this.area!==document){var e=getComputedStyle(this.area);"absolute"===e.position||"relative"===e.position||"fixed"===e.position||(this.area.style.position="relative")}this.selector=t.selector||this._createSelector(),this.addClass(this.selector,this.selectorClass)},DragSelect.prototype._handleSelectables=function(t,e,s){for(var i=0;i<t.length;i++){var o=t[i],r=this.selectables.indexOf(o);r<0&&!e?(this.addClass(o,this.selectableClass),o.addEventListener("click",this._onClick),this.selectables.push(o),s&&this.selected.indexOf(o)<0&&(this.addClass(o,this.selectedClass),this.selected.push(o))):r>-1&&e&&(this.removeClass(o,this.hoverClass),this.removeClass(o,this.selectableClass),o.removeEventListener("click",this._onClick),this.selectables.splice(r,1),s&&this.selected.indexOf(o)>-1&&(this.removeClass(o,this.selectedClass),this.selected.splice(this.selected.indexOf(o),1)))}},DragSelect.prototype._onClick=function(t){if(!this.mouseInteraction&&!this.isRightClick(t)){var e=t.target;this.isMultiSelectKeyPressed(t)?this._prevSelected=this.selected.slice():this._prevSelected=[],this.checkIfInsideSelection(!0),this.selectables.indexOf(e)>-1&&this.toggle(e),this.reset()}},DragSelect.prototype._createSelector=function(){var t=document.createElement("div");return t.style.position="absolute",this.customStyles||(t.style.background="rgba(0, 0, 255, 0.1)",t.style.border="1px solid rgba(0, 0, 255, 0.45)",t.style.display="none",t.style.pointerEvents="none"),(this.area===document?document.body:this.area).appendChild(t),t},DragSelect.prototype.start=function(){this.area.addEventListener("mousedown",this._startUp),this.area.addEventListener("touchstart",this._startUp,{passive:!1})},DragSelect.prototype._startUp=function(t){if("touchstart"===t.type&&t.preventDefault(),this.onDragStartBegin(t),this._breaked)return!1;if(!this.isRightClick(t)){if(this.mouseInteraction=!0,this.selector.style.display="block",this.isMultiSelectKeyPressed(t)?this._prevSelected=this.selected.slice():this._prevSelected=[],this._getStartingPositions(t),this.checkIfInsideSelection(!0),this.selector.style.display="none",this.moveStartCallback(t),this._breaked)return!1;this.area.removeEventListener("mousedown",this._startUp),this.area.removeEventListener("touchstart",this._startUp,{passive:!1}),this.area.addEventListener("mousemove",this._handleMove),this.area.addEventListener("touchmove",this._handleMove),document.addEventListener("mouseup",this.reset),document.addEventListener("touchend",this.reset)}},DragSelect.prototype.isMultiSelectKeyPressed=function(t){if(this.multiSelectKeyPressed=!1,this.multiSelectMode)this.multiSelectKeyPressed=!0;else for(var e=0;e<this.multiSelectKeys.length;e++){var s=this.multiSelectKeys[e];t[s]&&(this.multiSelectKeyPressed=!0)}return this.multiSelectKeyPressed},DragSelect.prototype._getStartingPositions=function(t){this.initialCursorPos=this.newCursorPos=this._getCursorPos(t,this.area),this.initialScroll=this.getScroll(this.area);var e={};e.x=this.initialCursorPos.x+this.initialScroll.x,e.y=this.initialCursorPos.y+this.initialScroll.y,e.w=0,e.h=0,this.updatePos(this.selector,e)},DragSelect.prototype._handleMove=function(t){var e=this.getPosition(t);if(this.moveCallback(t),this._breaked)return!1;this.selector.style.display="block",this.updatePos(this.selector,e),this.checkIfInsideSelection(),this._autoScroll(t)},DragSelect.prototype.getPosition=function(t){var e=this._getCursorPos(t,this.area),s=this.getScroll(this.area);this.newCursorPos=e;var i={x:s.x-this.initialScroll.x,y:s.y-this.initialScroll.y},o={};return e.x>this.initialCursorPos.x-i.x?(o.x=this.initialCursorPos.x+this.initialScroll.x,o.w=e.x-this.initialCursorPos.x+i.x):(o.x=e.x+s.x,o.w=this.initialCursorPos.x-e.x-i.x),e.y>this.initialCursorPos.y-i.y?(o.y=this.initialCursorPos.y+this.initialScroll.y,o.h=e.y-this.initialCursorPos.y+i.y):(o.y=e.y+s.y,o.h=this.initialCursorPos.y-e.y-i.y),o},DragSelect.prototype.checkIfInsideSelection=function(t){for(var e=!1,s=0,i=this.selectables.length;s<i;s++){var o=this.selectables[s],r=this.getScroll(this.area),l={y:this.selector.getBoundingClientRect().top+r.y,x:this.selector.getBoundingClientRect().left+r.x,h:this.selector.offsetHeight,w:this.selector.offsetWidth};this._isElementTouching(o,l,r)?(this._handleSelection(o,t),e=!0):this._handleUnselection(o,t)}return e},DragSelect.prototype._handleSelection=function(t,e){if(this.hasClass(t,this.hoverClass)&&!e)return!1;var s=this.selected.indexOf(t);s<0?this.select(t):s>-1&&this.multiSelectKeyPressed&&this.unselect(t),this.addClass(t,this.hoverClass)},DragSelect.prototype._handleUnselection=function(t,e){if(!this.hasClass(t,this.hoverClass)&&!e)return!1;var s=this.selected.indexOf(t),i=this._prevSelected.indexOf(t);s>-1&&i<0?this.unselect(t):s<0&&i>-1&&this.select(t),this.removeClass(t,this.hoverClass)},DragSelect.prototype.select=function(t){return!(this.selected.indexOf(t)>-1)&&(this.selected.push(t),this.addClass(t,this.selectedClass),this.selectCallback(t),!this._breaked&&t)},DragSelect.prototype.unselect=function(t){return!(this.selected.indexOf(t)<0)&&(this.selected.splice(this.selected.indexOf(t),1),this.removeClass(t,this.selectedClass),this.unselectCallback(t),!this._breaked&&t)},DragSelect.prototype.toggle=function(t){return this.selected.indexOf(t)>-1?this.unselect(t):this.select(t),t},DragSelect.prototype._isElementTouching=function(t,e,s){var i={y:t.getBoundingClientRect().top+s.y,x:t.getBoundingClientRect().left+s.x,h:t.offsetHeight||t.getBoundingClientRect().height,w:t.offsetWidth||t.getBoundingClientRect().width};return e.x<i.x+i.w&&e.x+e.w>i.x&&e.y<i.y+i.h&&e.h+e.y>i.y},DragSelect.prototype._autoScroll=function(t){var e=this.isCursorNearEdge(t,this.area),s=document&&document.documentElement&&document.documentElement.scrollTop&&document.documentElement,i=this.area===document?s||document.body:this.area;"top"===e&&i.scrollTop>0?i.scrollTop-=1*this.autoScrollSpeed:"bottom"===e?i.scrollTop+=1*this.autoScrollSpeed:"left"===e&&i.scrollLeft>0?i.scrollLeft-=1*this.autoScrollSpeed:"right"===e&&(i.scrollLeft+=1*this.autoScrollSpeed)},DragSelect.prototype.isCursorNearEdge=function(t,e){var s=this._getCursorPos(t,e),i=this.getAreaRect(e),o={x:Math.max(i.width/10,30),y:Math.max(i.height/10,30)};return s.y<o.y?"top":i.height-s.y<o.y?"bottom":i.width-s.x<o.x?"right":s.x<o.x&&"left"},DragSelect.prototype.reset=function(t){if(this.previousCursorPos=this._getCursorPos(t,this.area),document.removeEventListener("mouseup",this.reset),document.removeEventListener("touchend",this.reset),this.area.removeEventListener("mousemove",this._handleMove),this.area.removeEventListener("touchmove",this._handleMove),this.area.addEventListener("mousedown",this._startUp),this.area.addEventListener("touchstart",this._startUp,{passive:!1}),this.callback(this.selected,t),this._breaked)return!1;this.selector.style.width="0",this.selector.style.height="0",this.selector.style.display="none",setTimeout(function(){this.mouseInteraction=!1}.bind(this),100)},DragSelect.prototype.break=function(){this._breaked=!0,setTimeout(function(){this._breaked=!1}.bind(this),100)},DragSelect.prototype.stop=function(){this.reset(),this.area.removeEventListener("mousedown",this._startUp),this.area.removeEventListener("touchstart",this._startUp,{passive:!1}),document.removeEventListener("mouseup",this.reset),document.removeEventListener("touchend",this.reset)},DragSelect.prototype.getSelection=function(){return this.selected},DragSelect.prototype.getCursorPos=function(t,e,s){if(!t)return!1;var i=e||!1!==e&&this.area,o=this._getCursorPos(t,i),r=s?{x:0,y:0}:this.getScroll(i);return{x:o.x+r.x,y:o.y+r.y}},DragSelect.prototype.addSelection=function(t,e,s){for(var i=this.toArray(t),o=0,r=i.length;o<r;o++){var l=i[o];this.select(l)}return s||this.addSelectables(i),e&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.removeSelection=function(t,e,s){for(var i=this.toArray(t),o=0,r=i.length;o<r;o++){var l=i[o];this.unselect(l)}return s&&this.removeSelectables(i),e&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.toggleSelection=function(t,e,s){for(var i=this.toArray(t),o=0,r=i.length;o<r;o++){var l=i[o];this.selected.indexOf(l)<0?this.addSelection(l,e,s):this.removeSelection(l,e,s)}return this.selected},DragSelect.prototype.setSelection=function(t,e,s){return this.clearSelection(),this.addSelection(t,e,s),this.selected},DragSelect.prototype.clearSelection=function(t){for(var e=this.selected.slice(),s=0,i=e.length;s<i;s++){var o=e[s];this.unselect(o)}return t&&this.callback(this.selected,!1),this.selected},DragSelect.prototype.addSelectables=function(t,e){var s=this.toArray(t);return this._handleSelectables(s,!1,e),t},DragSelect.prototype.getSelectables=function(){return this.selectables},DragSelect.prototype.setSelectables=function(t,e,s){return this.removeSelectables(this.getSelectables(),e),this.addSelectables(t,s)},DragSelect.prototype.removeSelectables=function(t,e){var s=this.toArray(t);return this._handleSelectables(s,!0,e),t},DragSelect.prototype.isRightClick=function(t){if(!t)return!1;var e=!1;return"which"in t?e=3===t.which:"button"in t&&(e=2===t.button),e},DragSelect.prototype.addClass=function(t,e){if(t.classList)return t.classList.add(e);var s=t.getAttribute("class")||"";return-1!==s.indexOf(e)?t:(""!==s&&(e=" "+e),t.setAttribute("class",s+e),t)},DragSelect.prototype.removeClass=function(t,e){if(t.classList)return t.classList.remove(e);var s=t.getAttribute("class")||"",i=new RegExp(e+"\\b","g");return s=s.replace(i,""),t.setAttribute("class",s),t},DragSelect.prototype.hasClass=function(t,e){return t.classList?t.classList.contains(e):(t.getAttribute("class")||"").indexOf(e)>-1},DragSelect.prototype.toArray=function(t){if(!t)return!1;if(!t.length&&this.isElement(t))return[t];for(var e=[],s=t.length-1;s>=0;s--)e[s]=t[s];return e},DragSelect.prototype.isElement=function(t){try{return t instanceof HTMLElement||t instanceof SVGElement}catch(e){return"object"===_typeof(t)&&1===t.nodeType&&"object"===_typeof(t.style)&&"object"===_typeof(t.ownerDocument)}},DragSelect.prototype._getCursorPos=function(t,e){if(!t)return{x:0,y:0};t.touches&&"touchend"!==t.type&&(DragSelect.prototype.lastTouch=t),t=t.touches?DragSelect.prototype.lastTouch.touches[0]:t;var s={x:t.pageX||t.clientX,y:t.pageY||t.clientY},i=this.getAreaRect(e||document),o=this.getScroll();return{x:s.x-i.left-o.x,y:s.y-i.top-o.y}},DragSelect.prototype.getInitialCursorPosition=function(){return this.initialCursorPos},DragSelect.prototype.getCurrentCursorPosition=function(){return this.newCursorPos},DragSelect.prototype.getPreviousCursorPosition=function(){return this.previousCursorPos},DragSelect.prototype.getCursorPositionDifference=function(t){var e=this.getCurrentCursorPosition(),s=t?this.getPreviousCursorPosition():this.getInitialCursorPosition();return{x:e.x-s.x,y:e.y-s.y}},DragSelect.prototype.getScroll=function(t){var e={top:document.body.scrollTop>0?document.body.scrollTop:document.documentElement.scrollTop,left:document.body.scrollLeft>0?document.body.scrollLeft:document.documentElement.scrollLeft};return{y:t&&t.scrollTop>=0?t.scrollTop:e.top,x:t&&t.scrollLeft>=0?t.scrollLeft:e.left}},DragSelect.prototype.getAreaRect=function(t){if(t===document){var e={y:t.documentElement.clientHeight>0?t.documentElement.clientHeight:window.innerHeight,x:t.documentElement.clientWidth>0?t.documentElement.clientWidth:window.innerWidth};return{top:0,left:0,bottom:0,right:0,width:e.x,height:e.y}}return{top:t.getBoundingClientRect().top,left:t.getBoundingClientRect().left,bottom:t.getBoundingClientRect().bottom,right:t.getBoundingClientRect().right,width:t.offsetWidth,height:t.offsetHeight}},DragSelect.prototype.updatePos=function(t,e){return t.style.left=e.x+"px",t.style.top=e.y+"px",t.style.width=e.w+"px",t.style.height=e.h+"px",t},"undefined"!=typeof module&&null!==module?module.exports=DragSelect:"undefined"!=typeof define&&"function"==typeof define&&define?define(function(){return DragSelect}):window.DragSelect=DragSelect;

11

gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var autoprefixer = require('gulp-autoprefixer');
var csso = require('gulp-csso');
var babel = require('gulp-babel');

@@ -11,2 +11,3 @@ gulp.task('js', function() {

.src('./src/DragSelect.js')
.pipe(babel({ presets: ['@babel/env'] }))
.pipe(gulp.dest('./dist/'))

@@ -29,3 +30,2 @@ .pipe(uglify())

.src('./src/index.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('./dist/'));

@@ -38,2 +38,9 @@ });

gulp.task('watch', function() {
gulp.watch('src/*.js', ['js']);
gulp.watch('src/*.css', ['css']);
gulp.watch('src/*.html', ['html']);
});
gulp.task('default', ['js', 'html', 'css', 'quicktest']);
gulp.task('devl', ['default', 'watch']);

15

package.json
{
"name": "dragselect",
"version": "1.9.1",
"version": "1.10.0",
"description": "easy javascript drag select functionality for your projects",

@@ -8,3 +8,3 @@ "main": "./dist/ds.min.js",

"scripts": {
"start": "npm install; npm run open",
"start": "npm install; npm run open | gulp devl",
"open": "open tests/quicktest.html -a 'Google Chrome'",

@@ -16,10 +16,11 @@ "gulp": "gulp",

"devDependencies": {
"babel-core": "^6.26.3",
"babel-jest": "^23.4.0",
"babel-preset-env": "^1.7.0",
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-babel": "^8.0.0",
"gulp-buble": "^0.9.0",
"gulp-csso": "^2.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-jshint": "^2.0.4",
"gulp-rename": "^1.2.2",

@@ -26,0 +27,0 @@ "gulp-uglify": "^2.0.0",

11

README.md

@@ -24,8 +24,11 @@ ```

- Great browser support, works even like a charm on IE10
- Lightweight, only ~3KB gzipped
- Lightweight, only ![gzip size](http://img.badgesize.io/https://thibaultjanbeyer.github.io/DragSelect/ds.min.js?compression=gzip)
- DragSelect was written with Performance in mind
- Supports SVG
- Supports mobile (touch interaction)
- Free & open source under MIT License
- Ease of use
![dragselect demo](dragselect.gif)
# Why?

@@ -107,3 +110,7 @@

## Mobile/Touch useage
Keep in mind that using DragSelect on a mobile/touch device will also turn off the default scroll behaviour (on `click` + `drag` interaction).
In 99% of the usecases, this is what you want. If DragSelect is only one part of a website, and you still want to be able to scroll the page on mobile, you can use an `area` [property](#properties). This way the scroll behaviour remains for all the rest of the page.
## Accessibility (a11y)

@@ -175,2 +182,4 @@

Don’t forget to give this repository a star if you find it useful. Tell all your friends and start contributing. Thank you :)
[![Typewriter Gif](https://thibaultjanbeyer.github.io/DragSelect/typewriter.gif)](http://thibaultjanbeyer.com/)

60

src/DragSelect.js

@@ -1,2 +0,2 @@

// v 1.9.1
// v 1.10.0
/*

@@ -284,3 +284,6 @@ ____ _____ __ __

DragSelect.prototype.start = function() {
this.area.addEventListener('mousedown', this._startUp);
this.area.addEventListener( 'mousedown', this._startUp );
this.area.addEventListener( 'touchstart', this._startUp, { passive: false } );
};

@@ -295,2 +298,7 @@

// touchmove handler
if(event.type === 'touchstart')
// Call preventDefault() to prevent double click issue, see https://github.com/ThibaultJanBeyer/DragSelect/pull/29 & https://developer.mozilla.org/vi/docs/Web/API/Touch_events/Supporting_both_TouchEvent_and_MouseEvent
event.preventDefault();
// callback

@@ -325,5 +333,9 @@ this.onDragStartBegin(event);

// event listeners
this.area.removeEventListener('mousedown', this._startUp);
this.area.addEventListener('mousemove', this._handleMove);
document.addEventListener('mouseup', this.reset);
this.area.removeEventListener( 'mousedown', this._startUp );
this.area.removeEventListener( 'touchstart', this._startUp, { passive: false } );
this.area.addEventListener( 'mousemove', this._handleMove );
this.area.addEventListener( 'touchmove', this._handleMove );
document.addEventListener( 'mouseup', this.reset );
document.addEventListener( 'touchend', this.reset );
};

@@ -745,13 +757,15 @@

*/
DragSelect.prototype.reset = function(event) {
this.previousCursorPos = this._getCursorPos(event, this.area);
document.removeEventListener('mouseup', this.reset);
this.area.removeEventListener('mousemove', this._handleMove);
this.area.addEventListener('mousedown', this._startUp);
DragSelect.prototype.reset = function( event ) {
this.callback(this.selected, event);
if (this._breaked) {
return false;
}
this.previousCursorPos = this._getCursorPos( event, this.area );
document.removeEventListener( 'mouseup', this.reset );
document.removeEventListener( 'touchend', this.reset );
this.area.removeEventListener( 'mousemove', this._handleMove );
this.area.removeEventListener( 'touchmove', this._handleMove );
this.area.addEventListener( 'mousedown', this._startUp );
this.area.addEventListener( 'touchstart', this._startUp, { passive: false } );
this.callback( this.selected, event );
if( this._breaked ) { return false; }
this.selector.style.width = '0';

@@ -791,4 +805,7 @@ this.selector.style.height = '0';

this.reset();
this.area.removeEventListener('mousedown', this._startUp);
document.removeEventListener('mouseup', this.reset);
this.area.removeEventListener( 'mousedown', this._startUp );
this.area.removeEventListener( 'touchstart', this._startUp, { passive: false } );
document.removeEventListener( 'mouseup', this.reset );
document.removeEventListener( 'touchend', this.reset );
};

@@ -1176,4 +1193,11 @@

var cPos = {
// event.clientX/Y fallback for <IE8
// touchend has not touches. so we take the last toucb if a touchevent, we need to store the positions on the prototype
if (event.touches && event.type !== 'touchend') {
DragSelect.prototype.lastTouch = event
}
//if a touchevent, return the last touch rather than the regular event
// we need .touches[0] from that event instead
event = event.touches ? DragSelect.prototype.lastTouch.touches[0] : event
var cPos = { // event.clientX/Y fallback for <IE8
x: event.pageX || event.clientX,

@@ -1180,0 +1204,0 @@ y: event.pageY || event.clientY

src/typewriter.gif
.babelrc

Sorry, the diff of this file is not supported yet

dist/index.html

Sorry, the diff of this file is not supported yet

src/index.html

Sorry, the diff of this file is not supported yet

test/basics.html

Sorry, the diff of this file is not supported yet

test/callbacks.html

Sorry, the diff of this file is not supported yet

test/constrained.html

Sorry, the diff of this file is not supported yet

tests/quicktest.html

Sorry, the diff of this file is not supported yet

tests/test0.html

Sorry, the diff of this file is not supported yet

tests/test1.html

Sorry, the diff of this file is not supported yet

tests/test2.html

Sorry, the diff of this file is not supported yet

tests/test4.html

Sorry, the diff of this file is not supported yet

tests/test5.html

Sorry, the diff of this file is not supported yet

tests/test6.html

Sorry, the diff of this file is not supported yet

tests/test7.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc