dragselect - npm Package Compare versions

Comparing version 1.3.5 to 1.3.6

dist/dragSelect.js

@@ -84,40 +84,27 @@ /*
     console.log('ERROR: dragSelect: please provide an options object to the function. See reference at: https://github.com/ThibaultJanBeyer/dragSelect for more info');
-  } else if(options && !options.selectables) {
-    console.log('ERROR: dragSelect: please provide nodes that can be selected. See reference at: https://github.com/ThibaultJanBeyer/dragSelect for more info');
   }
 
   // Setup
-  var selector = options.selector || document.getElementById("rectangle");
-  var selectables = toArray(options.selectables) || [];
-  var selectCallback = options.onElementSelect || function() {};
-  var unselectCallback = options.onElementUnselect || function() {};
-  var callback = options.callback || function() {};
+  var selector,
+      selectables,
+      selectCallback,
+      unselectCallback,
+      callback,
+      area,
+      selected;
 
-  var selected = [];
-
-  //- Add/Remove Selectables
-  function addSelectables(_nodes) {
-    var nodes = toArray(_nodes);
-    for (var i  = 0, il = nodes.length; i < il; i++) {
-      var node = nodes[i];
-      if(selectables.indexOf(node) < 0) {
-        selectables.push(node);
-      }
-    }
+  function setup() {
+    selector = options.selector || document.getElementById("rectangle");
+    selectables = toArray(options.selectables) || [];
+    selectCallback = options.onElementSelect || function() {};
+    unselectCallback = options.onElementUnselect || function() {};
+    callback = options.callback || function() {};
+    area = options.area || document;
+    selected = [];
   }
+  setup();
 
-  function removeSelectables(_nodes) {
-    var nodes = toArray(_nodes);
-    for (var i  = 0, il = nodes.length; i < il; i++) {
-      var node = nodes[i];
-      if(selectables.indexOf(node) > 0) {
-        removeClass(node, 'selected');
-        selectables.splice(selectables.indexOf(node), 1);
-      }
-    }
-  }
-
   //- Start
   function start() {
-    document.addEventListener('mousedown', startUp);
+    area.addEventListener('mousedown', startUp);
   }
@@ -138,3 +125,4 @@ start();
     
-    document.addEventListener('mousemove', move);
+    area.removeEventListener('mousedown', startUp);
+    area.addEventListener('mousemove', move);
     document.addEventListener('mouseup', reset);
@@ -195,7 +183,7 @@ }
     selector.style.display = 'none';
-
-    //document.removeEventListener('mousedown', mousedown);
-    document.removeEventListener('mousemove', move);
-
+    
     callback(selected);
+    
+    area.removeEventListener('mousemove', move);
+    area.addEventListener('mousedown', startUp);
   }
@@ -212,4 +200,4 @@
       // fallback for IE9-
-      x: window.scrollY || document.documentElement.scrollTop,
-      y: window.scrollX || document.documentElement.scrollLeft
+      x: area && area.scrollTop ? area.scrollTop : window.scrollY || document.documentElement.scrollTop,
+      y: area && area.scrollLeft ? area.scrollLeft : window.scrollX || document.documentElement.scrollLeft
     };
@@ -254,2 +242,24 @@ var containerRect = {
 
+  //- Add/Remove Selectables
+  function addSelectables(_nodes) {
+    var nodes = toArray(_nodes);
+    for (var i  = 0, il = nodes.length; i < il; i++) {
+      var node = nodes[i];
+      if(selectables.indexOf(node) < 0) {
+        selectables.push(node);
+      }
+    }
+  }
+
+  function removeSelectables(_nodes) {
+    var nodes = toArray(_nodes);
+    for (var i  = 0, il = nodes.length; i < il; i++) {
+      var node = nodes[i];
+      if(selectables.indexOf(node) > 0) {
+        removeClass(node, 'selected');
+        selectables.splice(selectables.indexOf(node), 1);
+      }
+    }
+  }
+
   function getSelection() {
@@ -262,3 +272,4 @@ return selected;
     reset();
-    document.removeEventListener('mousedown', startUp);
+    area.removeEventListener('mousedown', startUp);
+    document.removeEventListener('mouseup', reset);
   }
@@ -265,0 +276,0 @@

dist/ds.min.js

@@ -1,1 +0,1 @@
-var dragSelect=function(e){function t(e){for(var t=y(e),n=0,o=t.length;n<o;n++){var l=t[n];g.indexOf(l)<0&&g.push(l)}}function n(e){for(var t=y(e),n=0,o=t.length;n<o;n++){var l=t[n];g.indexOf(l)>0&&(f(l,"selected"),g.splice(g.indexOf(l),1))}}function o(){document.addEventListener("mousedown",l)}function l(e){b={x:e.pageX||e.clientX,y:e.pageY||e.clientY},p.style.display="block",p.style.top=b.y+"px",p.style.left=b.x+"px",s(),document.addEventListener("mousemove",c),document.addEventListener("mouseup",i)}function c(e){E={x:e.pageX||e.clientX,y:e.pageY||e.clientY},E.x>b.x?p.style.width=E.x-b.x+"px":(p.style.left=E.x+"px",p.style.width=b.x-E.x+"px"),E.y>b.y?p.style.height=E.y-b.y+"px":(p.style.top=E.y+"px",p.style.height=b.y-E.y+"px"),s()}function s(){for(var e=0,t=g.length;e<t;e++){var n=g[e],o=w.indexOf(n);r(n,p)?o<0&&(w.push(n),u(n,"selected"),h(n)):o>-1&&(w.splice(w.indexOf(n),1),f(n,"selected"),x(n))}}function i(){p.style.width="0",p.style.height="0",p.style.display="none",document.removeEventListener("mousemove",c),v(w)}function r(e,t){var n={x:window.scrollY||document.documentElement.scrollTop,y:window.scrollX||document.documentElement.scrollLeft},o={y:t.getBoundingClientRect().top+n.y,x:t.getBoundingClientRect().left+n.x,h:t.offsetHeight,w:t.offsetWidth},l={y:e.getBoundingClientRect().top+n.y,x:e.getBoundingClientRect().left+n.x,h:e.offsetHeight,w:e.offsetWidth};return o.x<l.x+l.w&&o.x+o.w>l.x&&o.y<l.y+l.h&&o.h+o.y>l.y}function a(){return w}function d(){i(),document.removeEventListener("mousedown",l)}function u(e,t){var n=e.className;-1===n.indexOf(t)&&(""!==n&&(t=" "+t),e.className=n+t)}function f(e,t){var n=e.className;new RegExp(t+"\\b","g");n=n.replace(t,""),e.className=n}function y(e){if(!e)return!1;if(!e.length&&m(e))return[e];for(var t=[],n=e.length-1;n>=0;n--)t[n]=e[n];return t}function m(e){try{return e instanceof HTMLElement}catch(t){return"object"==typeof e&&1===e.nodeType&&"object"==typeof e.style&&"object"==typeof e.ownerDocument}}e?e&&!e.selectables&&console.log("ERROR: dragSelect: please provide nodes that can be selected. See reference at: https://github.com/ThibaultJanBeyer/dragSelect for more info"):console.log("ERROR: dragSelect: please provide an options object to the function. See reference at: https://github.com/ThibaultJanBeyer/dragSelect for more info");var p=e.selector||document.getElementById("rectangle"),g=y(e.selectables)||[],h=e.onElementSelect||function(){},x=e.onElementUnselect||function(){},v=e.callback||function(){},w=[];o();var b,E;return{isElement:m,toArray:y,removeClass:f,addClass:u,stop:d,isElementTouching:r,reset:i,checkIfInside:s,move:c,startUp:l,start:o,getSelection:a,removeSelectables:n,addSelectables:t}};"undefined"!=typeof module&&null!==module?module.exports=dragSelect:window.dragSelect=dragSelect;
+var dragSelect=function(e){function t(){w.addEventListener("mousedown",n)}function n(e){b={x:e.pageX||e.clientX,y:e.pageY||e.clientY},p.style.display="block",p.style.top=b.y+"px",p.style.left=b.x+"px",l(),w.removeEventListener("mousedown",n),w.addEventListener("mousemove",o),document.addEventListener("mouseup",c)}function o(e){L={x:e.pageX||e.clientX,y:e.pageY||e.clientY},L.x>b.x?p.style.width=L.x-b.x+"px":(p.style.left=L.x+"px",p.style.width=b.x-L.x+"px"),L.y>b.y?p.style.height=L.y-b.y+"px":(p.style.top=L.y+"px",p.style.height=b.y-L.y+"px"),l()}function l(){for(var e=0,t=g.length;e<t;e++){var n=g[e],o=E.indexOf(n);s(n,p)?o<0&&(E.push(n),a(n,"selected"),x(n)):o>-1&&(E.splice(E.indexOf(n),1),f(n,"selected"),h(n))}}function c(){p.style.width="0",p.style.height="0",p.style.display="none",v(E),w.removeEventListener("mousemove",o),w.addEventListener("mousedown",n)}function s(e,t){var n={x:w&&w.scrollTop?w.scrollTop:window.scrollY||document.documentElement.scrollTop,y:w&&w.scrollLeft?w.scrollLeft:window.scrollX||document.documentElement.scrollLeft},o={y:t.getBoundingClientRect().top+n.y,x:t.getBoundingClientRect().left+n.x,h:t.offsetHeight,w:t.offsetWidth},l={y:e.getBoundingClientRect().top+n.y,x:e.getBoundingClientRect().left+n.x,h:e.offsetHeight,w:e.offsetWidth};return o.x<l.x+l.w&&o.x+o.w>l.x&&o.y<l.y+l.h&&o.h+o.y>l.y}function r(e){for(var t=m(e),n=0,o=t.length;n<o;n++){var l=t[n];g.indexOf(l)<0&&g.push(l)}}function i(e){for(var t=m(e),n=0,o=t.length;n<o;n++){var l=t[n];g.indexOf(l)>0&&(f(l,"selected"),g.splice(g.indexOf(l),1))}}function d(){return E}function u(){c(),w.removeEventListener("mousedown",n),document.removeEventListener("mouseup",c)}function a(e,t){var n=e.className;-1===n.indexOf(t)&&(""!==n&&(t=" "+t),e.className=n+t)}function f(e,t){var n=e.className;new RegExp(t+"\\b","g");n=n.replace(t,""),e.className=n}function m(e){if(!e)return!1;if(!e.length&&y(e))return[e];for(var t=[],n=e.length-1;n>=0;n--)t[n]=e[n];return t}function y(e){try{return e instanceof HTMLElement}catch(t){return"object"==typeof e&&1===e.nodeType&&"object"==typeof e.style&&"object"==typeof e.ownerDocument}}e||console.log("ERROR: dragSelect: please provide an options object to the function. See reference at: https://github.com/ThibaultJanBeyer/dragSelect for more info");var p,g,x,h,v,w,E;!function(){p=e.selector||document.getElementById("rectangle"),g=m(e.selectables)||[],x=e.onElementSelect||function(){},h=e.onElementUnselect||function(){},v=e.callback||function(){},w=e.area||document,E=[]}(),t();var b,L;return{isElement:y,toArray:m,removeClass:f,addClass:a,stop:u,isElementTouching:s,reset:c,checkIfInside:l,move:o,startUp:n,start:t,getSelection:d,removeSelectables:i,addSelectables:r}};"undefined"!=typeof module&&null!==module?module.exports=dragSelect:window.dragSelect=dragSelect;

package.json

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

README.md

@@ -77,2 +77,3 @@ ```
   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
@@ -96,2 +97,3 @@ onElementUnselect: function(element) {}, // this is optional, it is fired every time an element is de-selected. (element) = just de-selected node.
 |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|
@@ -98,0 +100,0 @@ |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.|

src/dragSelect.js

@@ -84,40 +84,27 @@ /*
     console.log('ERROR: dragSelect: please provide an options object to the function. See reference at: https://github.com/ThibaultJanBeyer/dragSelect for more info');
-  } else if(options && !options.selectables) {
-    console.log('ERROR: dragSelect: please provide nodes that can be selected. See reference at: https://github.com/ThibaultJanBeyer/dragSelect for more info');
   }
 
   // Setup
-  var selector = options.selector || document.getElementById("rectangle");
-  var selectables = toArray(options.selectables) || [];
-  var selectCallback = options.onElementSelect || function() {};
-  var unselectCallback = options.onElementUnselect || function() {};
-  var callback = options.callback || function() {};
+  var selector,
+      selectables,
+      selectCallback,
+      unselectCallback,
+      callback,
+      area,
+      selected;
 
-  var selected = [];
-
-  //- Add/Remove Selectables
-  function addSelectables(_nodes) {
-    var nodes = toArray(_nodes);
-    for (var i  = 0, il = nodes.length; i < il; i++) {
-      var node = nodes[i];
-      if(selectables.indexOf(node) < 0) {
-        selectables.push(node);
-      }
-    }
+  function setup() {
+    selector = options.selector || document.getElementById("rectangle");
+    selectables = toArray(options.selectables) || [];
+    selectCallback = options.onElementSelect || function() {};
+    unselectCallback = options.onElementUnselect || function() {};
+    callback = options.callback || function() {};
+    area = options.area || document;
+    selected = [];
   }
+  setup();
 
-  function removeSelectables(_nodes) {
-    var nodes = toArray(_nodes);
-    for (var i  = 0, il = nodes.length; i < il; i++) {
-      var node = nodes[i];
-      if(selectables.indexOf(node) > 0) {
-        removeClass(node, 'selected');
-        selectables.splice(selectables.indexOf(node), 1);
-      }
-    }
-  }
-
   //- Start
   function start() {
-    document.addEventListener('mousedown', startUp);
+    area.addEventListener('mousedown', startUp);
   }
@@ -138,3 +125,4 @@ start();
     
-    document.addEventListener('mousemove', move);
+    area.removeEventListener('mousedown', startUp);
+    area.addEventListener('mousemove', move);
     document.addEventListener('mouseup', reset);
@@ -195,7 +183,7 @@ }
     selector.style.display = 'none';
-
-    //document.removeEventListener('mousedown', mousedown);
-    document.removeEventListener('mousemove', move);
-
+    
     callback(selected);
+    
+    area.removeEventListener('mousemove', move);
+    area.addEventListener('mousedown', startUp);
   }
@@ -212,4 +200,4 @@
       // fallback for IE9-
-      x: window.scrollY || document.documentElement.scrollTop,
-      y: window.scrollX || document.documentElement.scrollLeft
+      x: area && area.scrollTop ? area.scrollTop : window.scrollY || document.documentElement.scrollTop,
+      y: area && area.scrollLeft ? area.scrollLeft : window.scrollX || document.documentElement.scrollLeft
     };
@@ -254,2 +242,24 @@ var containerRect = {
 
+  //- Add/Remove Selectables
+  function addSelectables(_nodes) {
+    var nodes = toArray(_nodes);
+    for (var i  = 0, il = nodes.length; i < il; i++) {
+      var node = nodes[i];
+      if(selectables.indexOf(node) < 0) {
+        selectables.push(node);
+      }
+    }
+  }
+
+  function removeSelectables(_nodes) {
+    var nodes = toArray(_nodes);
+    for (var i  = 0, il = nodes.length; i < il; i++) {
+      var node = nodes[i];
+      if(selectables.indexOf(node) > 0) {
+        removeClass(node, 'selected');
+        selectables.splice(selectables.indexOf(node), 1);
+      }
+    }
+  }
+
   function getSelection() {
@@ -262,3 +272,4 @@ return selected;
     reset();
-    document.removeEventListener('mousedown', startUp);
+    area.removeEventListener('mousedown', startUp);
+    document.removeEventListener('mouseup', reset);
   }
@@ -265,0 +276,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1120849

increased by0.35%

Number of package files

16

increased by6.67%

Lines of code

861

increased by2.62%

Number of lines in readme file

119

increased by1.71%

No dependency changes