dragselect - npm Package Compare versions

Comparing version 1.4.3 to 1.5.0

dist/dragSelect.js

@@ -25,8 +25,10 @@ /*
  Properties
+  ** @selectables       nodes           the elements that can be selected
   ** @selector          node            the square that will draw the selection
-  ** @selectables       nodes           the elements that can be selected
+  ** @area              node            area in which you can drag. If not provided it will be the whole document
+  ** @customStyles      boolean         if set to true, no styles (except for position absolute) will be applied by default
   ** @onElementSelect   function        this is optional, it is fired every time an element is selected. This callback gets a property which is the just selected node
   ** @onElementUnselect function        this is optional, it is fired every time an element is de-selected. This callback gets a property which is the just de-selected node
   ** @callback          function        a callback function that gets fired when the element is dropped. This callback gets a property which is an array that holds all selected nodes
- 
+
  Methods
@@ -87,3 +89,2 @@
   function _setup() {
-    selector = options.selector || document.getElementById('rectangle');
     selectables = toArray(options.selectables) || [];
@@ -95,6 +96,24 @@ selectCallback = options.onElementSelect || function() {};
 
+    selector = options.selector || _createSelection();
+    addClass(selector, 'ds-selector');
+
     selected = [];
   } _setup();
 
+  function _createSelection() {
+    var selector = document.createElement('div');
 
+    selector.style.position = 'absolute';
+    if(!options.customStyles) {
+      selector.style.background = 'rgba(0, 0, 255, 0.2)';
+      selector.style.border = '1px solid rgba(0, 0, 255, 0.5)';
+      selector.style.display = 'none';
+    }
+
+    var _area = area === document ? document.body : area;
+    _area.appendChild(selector);
+
+    return selector;
+  }
+
   // Start
@@ -115,11 +134,11 @@ //////////////////////////////////////////////////////////////////////////////////////
     // move element on location
-    getStartingPositions(event);
+    _getStartingPositions(event);
     checkIfInsideSelection();
 
     area.removeEventListener('mousedown', _startUp);
-    area.addEventListener('mousemove', handleMove);
+    area.addEventListener('mousemove', _handleMove);
     document.addEventListener('mouseup', reset);
   }
 
-  function getStartingPositions(event) {
+  function _getStartingPositions(event) {
     initialCursorPos = getCursorPos(event);
@@ -141,3 +160,3 @@ initialScroll = getScroll(area);
   // resize that div while mouse is pressed
-  function handleMove(event) {
+  function _handleMove(event) {
     // move element on location
@@ -354,3 +373,3 @@ var selectorPos = getPosition(event);
 
-    area.removeEventListener('mousemove', handleMove);
+    area.removeEventListener('mousemove', _handleMove);
     area.addEventListener('mousedown', _startUp);
@@ -552,17 +571,26 @@ }
   var DS = {
-    _updatePos: _updatePos,
-    isElement: isElement,
-    toArray: toArray,
-    removeClass: removeClass,
-    addClass: addClass,
-    stop: stop,
+    _setup: _setup,
+    _createSelection: _createSelection,
+    start: start,
+    _startUp: _startUp,
+    _getStartingPositions: _getStartingPositions,
+    _handleMove: _handleMove,
+    getPosition: getPosition,
+    checkIfInsideSelection: checkIfInsideSelection,
     isElementTouching: isElementTouching,
+    autoScroll: autoScroll,
+    isCursorNearEdge: isCursorNearEdge,
     reset: reset,
-    checkIfInsideSelection: checkIfInsideSelection,
-    handleMove: handleMove,
-    _startUp: _startUp,
-    start: start,
+    stop: stop,
     getSelection: getSelection,
+    addSelectables: addSelectables,
     removeSelectables: removeSelectables,
-    addSelectables: addSelectables
+    addClass: addClass,
+    removeClass: removeClass,
+    toArray: toArray,
+    isElement: isElement,
+    getCursorPos: getCursorPos,
+    getScroll: getScroll,
+    getAreaRect: getAreaRect,
+    _updatePos: _updatePos,
   };
@@ -569,0 +597,0 @@ return DS;

dist/ds.min.js

@@ -1,1 +0,1 @@
-var dragSelect=function(e){function t(){H.addEventListener("mousedown",n)}function n(e){L.style.display="block",o(e),r(),H.removeEventListener("mousedown",n),H.addEventListener("mousemove",i),document.addEventListener("mouseup",d)}function o(e){T=v(e),O=w(H);var t={};t.x=T.x+O.x,t.y=T.y+O.y,t.w=0,t.h=0,b(L,t)}function i(e){var t=l(e);b(L,t),r(),u(e)}function l(e){var t=v(e),n=w(H),o={x:n.x-O.x,y:n.y-O.y},i={};return t.x>T.x-o.x?(i.x=T.x+O.x,i.w=t.x-T.x+o.x):(i.x=t.x+n.x,i.w=T.x-t.x-o.x),t.y>T.y-o.y?(i.y=T.y+O.y,i.h=t.y-T.y+o.y):(i.y=t.y+n.y,i.h=T.y-t.y-o.y),i}function r(){for(var e=0,t=C.length;e<t;e++){var n=C[e],o=W.indexOf(n);c(n,L)?o<0&&(W.push(n),h(n,"selected"),B(n)):o>-1&&(W.splice(o,1),m(n,"selected"),R(n))}}function c(e,t){var n=w(H),o={y:t.getBoundingClientRect().top+n.y,x:t.getBoundingClientRect().left+n.x,h:t.offsetHeight,w:t.offsetWidth},i={y:e.getBoundingClientRect().top+n.y,x:e.getBoundingClientRect().left+n.x,h:e.offsetHeight,w:e.offsetWidth};return o.x<i.x+i.w&&o.x+o.w>i.x&&o.y<i.y+i.h&&o.h+o.y>i.y}function u(e){var t=s(e),n=H===document?H.body:H;"top"===t&&n.scrollTop>0?n.scrollTop-=1:"bottom"===t?n.scrollTop+=1:"left"===t&&n.scrollLeft>0?n.scrollLeft-=1:"right"===t&&(n.scrollLeft+=1)}function s(e){var t=v(e),n=E(H),o={x:Math.max(n.width/10,20),y:Math.max(n.height/10,20)},i=H===document?w(document.body):{x:0,y:0};return t.y<o.y+i.y?"top":n.height-t.y+i.y<o.y?"bottom":n.width-t.x+i.x<o.x?"right":t.x<o.x+i.x&&"left"}function d(){L.style.width="0",L.style.height="0",L.style.display="none",S(W),H.removeEventListener("mousemove",i),H.addEventListener("mousedown",n)}function f(){d(),H.removeEventListener("mousedown",n),document.removeEventListener("mouseup",d)}function y(){return W}function a(e){for(var t=g(e),n=0,o=t.length;n<o;n++){var i=t[n];C.indexOf(i)<0&&C.push(i)}}function x(e){for(var t=g(e),n=0,o=t.length;n<o;n++){var i=t[n];C.indexOf(i)>0&&(m(i,"selected"),C.splice(C.indexOf(i),1))}}function h(e,t){var n=e.className;return-1!==n.indexOf(t)?e:(""!==n&&(t=" "+t),e.className=n+t,e)}function m(e,t){var n=e.className,o=new RegExp(t+"\\b","g");n=n.replace(o,""),e.className=n}function g(e){if(!e)return!1;if(!e.length&&p(e))return[e];for(var t=[],n=e.length-1;n>=0;n--)t[n]=e[n];return t}function p(e){try{return e instanceof HTMLElement}catch(t){return"object"==typeof e&&1===e.nodeType&&"object"==typeof e.style&&"object"==typeof e.ownerDocument}}function v(e){var t={x:e.pageX||e.clientX,y:e.pageY||e.clientY},n=E(H);return{x:t.x-n.left,y:t.y-n.top}}function w(e){return{y:e&&e.scrollTop>=0?e.scrollTop:0,x:e&&e.scrollLeft>=0?e.scrollLeft:0}}function E(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}}function b(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}var L,C,B,R,S,T,H,W,O;return function(){L=e.selector||document.getElementById("rectangle"),C=g(e.selectables)||[],B=e.onElementSelect||function(){},R=e.onElementUnselect||function(){},S=e.callback||function(){},H=e.area||document,W=[]}(),t(),{_updatePos:b,isElement:p,toArray:g,removeClass:m,addClass:h,stop:f,isElementTouching:c,reset:d,checkIfInsideSelection:r,handleMove:i,_startUp:n,start:t,getSelection:y,removeSelectables:x,addSelectables:a}};"undefined"!=typeof module&&null!==module?module.exports=dragSelect:window.dragSelect=dragSelect;
+var dragSelect=function(e){function t(){R=v(e.selectables)||[],B=e.onElementSelect||function(){},T=e.onElementUnselect||function(){},H=e.callback||function(){},_=e.area||document,C=e.selector||n(),m(C,"ds-selector"),N=[]}function n(){var t=document.createElement("div");return t.style.position="absolute",e.customStyles||(t.style.background="rgba(0, 0, 255, 0.2)",t.style.border="1px solid rgba(0, 0, 255, 0.5)",t.style.display="none"),(_===document?document.body:_).appendChild(t),t}function o(){_.addEventListener("mousedown",i)}function i(e){C.style.display="block",r(e),s(),_.removeEventListener("mousedown",i),_.addEventListener("mousemove",l),document.addEventListener("mouseup",f)}function r(e){W=b(e),O=E(_);var t={};t.x=W.x+O.x,t.y=W.y+O.y,t.w=0,t.h=0,S(C,t)}function l(e){var t=c(e);S(C,t),s(),d(e)}function c(e){var t=b(e),n=E(_),o={x:n.x-O.x,y:n.y-O.y},i={};return t.x>W.x-o.x?(i.x=W.x+O.x,i.w=t.x-W.x+o.x):(i.x=t.x+n.x,i.w=W.x-t.x-o.x),t.y>W.y-o.y?(i.y=W.y+O.y,i.h=t.y-W.y+o.y):(i.y=t.y+n.y,i.h=W.y-t.y-o.y),i}function s(){for(var e=0,t=R.length;e<t;e++){var n=R[e],o=N.indexOf(n);u(n,C)?o<0&&(N.push(n),m(n,"selected"),B(n)):o>-1&&(N.splice(o,1),p(n,"selected"),T(n))}}function u(e,t){var n=E(_),o={y:t.getBoundingClientRect().top+n.y,x:t.getBoundingClientRect().left+n.x,h:t.offsetHeight,w:t.offsetWidth},i={y:e.getBoundingClientRect().top+n.y,x:e.getBoundingClientRect().left+n.x,h:e.offsetHeight,w:e.offsetWidth};return o.x<i.x+i.w&&o.x+o.w>i.x&&o.y<i.y+i.h&&o.h+o.y>i.y}function d(e){var t=a(e),n=_===document?_.body:_;"top"===t&&n.scrollTop>0?n.scrollTop-=1:"bottom"===t?n.scrollTop+=1:"left"===t&&n.scrollLeft>0?n.scrollLeft-=1:"right"===t&&(n.scrollLeft+=1)}function a(e){var t=b(e),n=L(_),o={x:Math.max(n.width/10,20),y:Math.max(n.height/10,20)},i=_===document?E(document.body):{x:0,y:0};return t.y<o.y+i.y?"top":n.height-t.y+i.y<o.y?"bottom":n.width-t.x+i.x<o.x?"right":t.x<o.x+i.x&&"left"}function f(){C.style.width="0",C.style.height="0",C.style.display="none",H(N),_.removeEventListener("mousemove",l),_.addEventListener("mousedown",i)}function y(){f(),_.removeEventListener("mousedown",i),document.removeEventListener("mouseup",f)}function g(){return N}function x(e){for(var t=v(e),n=0,o=t.length;n<o;n++){var i=t[n];R.indexOf(i)<0&&R.push(i)}}function h(e){for(var t=v(e),n=0,o=t.length;n<o;n++){var i=t[n];R.indexOf(i)>0&&(p(i,"selected"),R.splice(R.indexOf(i),1))}}function m(e,t){var n=e.className;return-1!==n.indexOf(t)?e:(""!==n&&(t=" "+t),e.className=n+t,e)}function p(e,t){var n=e.className,o=new RegExp(t+"\\b","g");n=n.replace(o,""),e.className=n}function v(e){if(!e)return!1;if(!e.length&&w(e))return[e];for(var t=[],n=e.length-1;n>=0;n--)t[n]=e[n];return t}function w(e){try{return e instanceof HTMLElement}catch(t){return"object"==typeof e&&1===e.nodeType&&"object"==typeof e.style&&"object"==typeof e.ownerDocument}}function b(e){var t={x:e.pageX||e.clientX,y:e.pageY||e.clientY},n=L(_);return{x:t.x-n.left,y:t.y-n.top}}function E(e){return{y:e&&e.scrollTop>=0?e.scrollTop:0,x:e&&e.scrollLeft>=0?e.scrollLeft:0}}function L(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}}function S(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}var C,R,B,T,H,W,_,N,O;return t(),o(),{_setup:t,_createSelection:n,start:o,_startUp:i,_getStartingPositions:r,_handleMove:l,getPosition:c,checkIfInsideSelection:s,isElementTouching:u,autoScroll:d,isCursorNearEdge:a,reset:f,stop:y,getSelection:g,addSelectables:x,removeSelectables:h,addClass:m,removeClass:p,toArray:v,isElement:w,getCursorPos:b,getScroll:E,getAreaRect:L,_updatePos:S}};"undefined"!=typeof module&&null!==module?module.exports=dragSelect:window.dragSelect=dragSelect;

package.json

 {
   "name": "dragselect",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "easy javascript drag select functionality to your projects",
@@ -5,0 +5,0 @@ "main": "./dist/ds.min.js",

README.md

@@ -24,3 +24,3 @@ ```
 - Ease of use
-- Lightweight, only 1KB gzipped
+- Lightweight, only ~1KB gzipped
 - DragSelect was written with Performance in mind.
@@ -38,3 +38,5 @@ - Free & open source under MIT License
 
+```html
 <script src="https://thibaultjanbeyer.github.io/dragSelect/ds.min.js"></script>
+```
 
@@ -58,14 +60,7 @@ ## npm
 
-The rectangle has to have a `position: fixed/absolute` attribute. The other ones have purely visual reasons.
-```html
-<div id="rectangle" 
-     style="position: fixed;
-            background-color: blue;
-            border: 1px solid blue;
-            display:none;"></div>
-```
+Choose which elements can be selected:
 
 ```javascript
 dragSelect({
-  selectables: document.getElementsByClassName('selectable-node')
+  selectables: document.getElementsByClassName('selectable-nodes')
 });
@@ -76,10 +71,13 @@ ```
 
+All options are optional. You could also just initiate the dragselect by `var ds = dragSelect();` without any option.
+
 ```javascript
 var ds = dragSelect({
-  selector: document.getElementById('rectangle'), // draggable element '#rectangle is default but can be set to anything'
-  selectables: [ document.getElementById('selectable1') ], // nodes that can be selected as array
-  area: document.getElementById('area'), // area in which you can drag'
-  onElementSelect: function(element) {}, // this is optional, it is fired every time an element is selected. (element) = just selected node
-  onElementUnselect: function(element) {}, // this is optional, it is fired every time an element is de-selected. (element) = just de-selected node.
-  callback: function(elements) {} // this is optional is fired once the user releases the mouse. (elements) = selected nodes.
+  selectables: document.getElementsByClassName('selectable-nodes'), // node/nodes that can be selected. This is also optional, you could just add them later with .addSelectables.
+  selector: document.getElementById('rectangle'), // draggable element. By default one will be created.
+  area: document.getElementById('area'), // area in which you can drag. If not provided it will be the whole document.
+  customStyles: false,  // If set to true, no styles (except for position absolute) will be applied by default.
+  onElementSelect: function(element) {}, // fired every time an element is selected. (element) = just selected node
+  onElementUnselect: function(element) {}, // fired every time an element is de-selected. (element) = just de-selected node.
+  callback: function(elements) {} // fired once the user releases the mouse. (elements) = selected nodes.
 });
@@ -90,3 +88,3 @@
 ds.getSelection();  // returns all currently selected nodes
-
+ds.addSelectables(document.getElementsByClassName('selectable-node'));  // adds elements that can be selected. Intelligent algorythm never adds elements twice.
 ds.stop();  // will teardown/stop the whole functionality
@@ -99,19 +97,20 @@ ds.start();  // reset the functionality after a teardown
 |--- |--- |--- |
-|selector |single DOM element (node) |the square that will draw the selection. Default = #rectangle|
-|selectables |DOM elements (nodes) |the elements that can be selected|
-|area |single DOM element (node) |The square in which you are able to select |
-|onElementSelect |function |this is optional, it is fired every time an element is selected. This callback gets a property which is the just selected node|
-|onElementUnselect |function |this is optional, it is fired every time an element is de-selected. This callback gets a property which is the just de-selected node.|
-|callback |function |callback function that gets fired when the element is dropped. This callback gets a property which is an array that holds all selected nodes|
+|selectables |DOM elements (nodes) |OPTIONAL. The elements that can be selected |
+|selector |single DOM element (node) |OPTIONAL. The square that will draw the selection. Autocreated by default |
+|area |single DOM element (node) |OPTIONAL. The square in which you are able to select |
+|customStyles |boolean |OPTIONAL. If true, no styles will be automatically applied (except position: absolute). Default: false |
+|onElementSelect |function |OPTIONAL. Fired every time an element is selected. This callback gets a property which is the selected node |
+|onElementUnselect |function |OPTIONAL. Fired every time an element is de-selected. This callback gets a property which is the de-selected node |
+|callback |function |OPTIONAL. Callback function that gets fired when the selection is released. This callback gets a property which is an array that holds all selected nodes |
 
 ## Methods:
-When the function is saved into a variable `var foo = dragSelect({...}` you have access to all its inner functions. There are way more than listed here. Here are just the most usable:  
+When the function is saved into a variable `var foo = dragSelect()` you have access to all its inner functions. There are way more than listed here. Here are just the most usable:  
 
 | method | properties | usage |
 |--- |--- |--- |
-|stop |/ |will teardown/stop the whole functionality |
-|start |/ |reset the functionality after a teardown |
-|getSelection |/ |returns all currently selected nodes |
-|addSelectables |DOM elements (nodes) |adds elements that can be selected. Don’t worry, a smart algorythm makes sure that nodes are never added twice |
-|removeSelectables |DOM elements (nodes) |remove elements that can be selected. Also removes the 'selected' class from those elements. |
+|stop |/ |Will teardown/stop the whole functionality |
+|start |/ |Reset the functionality after a teardown |
+|getSelection |/ |Returns all currently selected nodes |
+|addSelectables |DOM elements (nodes) |Adds elements that can be selected. Don’t worry, a smart algorythm makes sure that nodes are never added twice |
+|removeSelectables |DOM elements (nodes) |Remove elements that can be selected. Also removes the 'selected' class from those elements. |
 
@@ -121,3 +120,4 @@ ## Classes
 |--- |--- |
-|.ds-selected | on elements that are selected
+|.ds-selected |On elements that are selected
+|.ds-selector |On the selector element
 
@@ -124,0 +124,0 @@ # Have Fun!

src/dragSelect.js

@@ -25,8 +25,10 @@ /*
  Properties
+  ** @selectables       nodes           the elements that can be selected
   ** @selector          node            the square that will draw the selection
-  ** @selectables       nodes           the elements that can be selected
+  ** @area              node            area in which you can drag. If not provided it will be the whole document
+  ** @customStyles      boolean         if set to true, no styles (except for position absolute) will be applied by default
   ** @onElementSelect   function        this is optional, it is fired every time an element is selected. This callback gets a property which is the just selected node
   ** @onElementUnselect function        this is optional, it is fired every time an element is de-selected. This callback gets a property which is the just de-selected node
   ** @callback          function        a callback function that gets fired when the element is dropped. This callback gets a property which is an array that holds all selected nodes
- 
+
  Methods
@@ -87,3 +89,2 @@
   function _setup() {
-    selector = options.selector || document.getElementById('rectangle');
     selectables = toArray(options.selectables) || [];
@@ -95,6 +96,24 @@ selectCallback = options.onElementSelect || function() {};
 
+    selector = options.selector || _createSelection();
+    addClass(selector, 'ds-selector');
+
     selected = [];
   } _setup();
 
+  function _createSelection() {
+    var selector = document.createElement('div');
 
+    selector.style.position = 'absolute';
+    if(!options.customStyles) {
+      selector.style.background = 'rgba(0, 0, 255, 0.2)';
+      selector.style.border = '1px solid rgba(0, 0, 255, 0.5)';
+      selector.style.display = 'none';
+    }
+
+    var _area = area === document ? document.body : area;
+    _area.appendChild(selector);
+
+    return selector;
+  }
+
   // Start
@@ -115,11 +134,11 @@ //////////////////////////////////////////////////////////////////////////////////////
     // move element on location
-    getStartingPositions(event);
+    _getStartingPositions(event);
     checkIfInsideSelection();
 
     area.removeEventListener('mousedown', _startUp);
-    area.addEventListener('mousemove', handleMove);
+    area.addEventListener('mousemove', _handleMove);
     document.addEventListener('mouseup', reset);
   }
 
-  function getStartingPositions(event) {
+  function _getStartingPositions(event) {
     initialCursorPos = getCursorPos(event);
@@ -141,3 +160,3 @@ initialScroll = getScroll(area);
   // resize that div while mouse is pressed
-  function handleMove(event) {
+  function _handleMove(event) {
     // move element on location
@@ -354,3 +373,3 @@ var selectorPos = getPosition(event);
 
-    area.removeEventListener('mousemove', handleMove);
+    area.removeEventListener('mousemove', _handleMove);
     area.addEventListener('mousedown', _startUp);
@@ -552,17 +571,26 @@ }
   var DS = {
-    _updatePos: _updatePos,
-    isElement: isElement,
-    toArray: toArray,
-    removeClass: removeClass,
-    addClass: addClass,
-    stop: stop,
+    _setup: _setup,
+    _createSelection: _createSelection,
+    start: start,
+    _startUp: _startUp,
+    _getStartingPositions: _getStartingPositions,
+    _handleMove: _handleMove,
+    getPosition: getPosition,
+    checkIfInsideSelection: checkIfInsideSelection,
     isElementTouching: isElementTouching,
+    autoScroll: autoScroll,
+    isCursorNearEdge: isCursorNearEdge,
     reset: reset,
-    checkIfInsideSelection: checkIfInsideSelection,
-    handleMove: handleMove,
-    _startUp: _startUp,
-    start: start,
+    stop: stop,
     getSelection: getSelection,
+    addSelectables: addSelectables,
     removeSelectables: removeSelectables,
-    addSelectables: addSelectables
+    addClass: addClass,
+    removeClass: removeClass,
+    toArray: toArray,
+    isElement: isElement,
+    getCursorPos: getCursorPos,
+    getScroll: getScroll,
+    getAreaRect: getAreaRect,
+    _updatePos: _updatePos,
   };
@@ -569,0 +597,0 @@ return DS;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1244813

increased by0.31%

Lines of code

4335

increased by1.1%

No dependency changes