dragselect - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

dist/dragSelect.js

@@ -14,3 +14,3 @@ /*
 - Choose which elements can be selected.
-- Awesome browser support, works even on IE5
+- Awesome browser support, works even on IE7
 - Ease of use
@@ -29,3 +29,3 @@ - Lightweight, only 1KB gzipped
 ** @selector          node            the square that will draw the selection
-** @selectables       array of nodes  the elements that can be selected
+** @selectables       nodes           the elements that can be selected
 ** @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
@@ -35,4 +35,12 @@ ** @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
 
+ Methods
+** .start             ()                    reset the functionality after a teardown
+** .stop              ()                    will teardown/stop the whole functionality
+** .getSelection      ()                    returns the current selection
+** .addSelectables    ([nodes])             add elements that can be selected. Intelligent algorythm never adds elements twice.
+** .removeSelectables ([nodes])             remove elements that can be selected. Also removes the 'selected' class from those elements.
 
 
+
+
  STAR THIS PLUGIN ON GITHUB:
@@ -85,3 +93,3 @@
   var selector = options.selector || document.getElementById("rectangle");
-  var selectables = options.selectables;
+  var selectables = toArray(options.selectables) || [];
   var selectCallback = options.onElementSelect || function() {};
@@ -93,2 +101,24 @@ var unselectCallback = options.onElementUnselect || function() {};
 
+  //- 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);
+      }
+    }
+  }
+
   //- Start
@@ -102,3 +132,2 @@ function start() {
   function startUp(e) {
-    console.log('STARTUP');
     cursorPos = { // event.clientX/Y fallback for IE8-
@@ -259,2 +288,31 @@ x: e.pageX || e.clientX,
 
+  function toArray(obj) {
+    if(!obj.length && isElement(obj)) { return [obj]; }
+
+    var array = [];
+    for (var i = obj.length - 1; i >= 0; i--) { 
+      array[i] = obj[i];
+    }
+
+    return array;
+  }
+
+  function isElement(obj) {
+    try {
+      //Using W3 DOM2 (works for FF, Opera and Chrom)
+      return obj instanceof HTMLElement;
+    }
+    catch(e){
+      //Browsers not supporting W3 DOM2 don't have HTMLElement and
+      //an exception is thrown and we end up here. Testing some
+      //properties that all elements have. (works on IE7)
+      return (typeof obj==="object") &&
+        (obj.nodeType===1) && (typeof obj.style === "object") &&
+        (typeof obj.ownerDocument ==="object");
+    }
+  }
+
+
+  //- Return
+
   var DS = {
@@ -270,3 +328,5 @@ removeClass: removeClass,
     start: start,
-    getSelection: getSelection
+    getSelection: getSelection,
+    removeSelectables: removeSelectables,
+    addSelectables: addSelectables
   };
@@ -273,0 +333,0 @@ return DS;

dist/ds.min.js

@@ -1,1 +0,1 @@
-var dragSelect=function(e){function t(){document.addEventListener("mousedown",n)}function n(e){console.log("STARTUP"),x={x:e.pageX||e.clientX,y:e.pageY||e.clientY},u.style.display="block",u.style.top=x.y+"px",u.style.left=x.x+"px",l(),document.addEventListener("mousemove",o),document.addEventListener("mouseup",c)}function o(e){h={x:e.pageX||e.clientX,y:e.pageY||e.clientY},h.x>x.x?u.style.width=h.x-x.x+"px":(u.style.left=h.x+"px",u.style.width=x.x-h.x+"px"),h.y>x.y?u.style.height=h.y-x.y+"px":(u.style.top=h.y+"px",u.style.height=x.y-h.y+"px"),l()}function l(){for(var e=0,t=f.length;e<t;e++){var n=f[e],o=p.indexOf(n);s(n,u)?o<0&&(p.push(n),a(n,"selected"),m(n)):o>-1&&(p.splice(p.indexOf(n),1),r(n,"selected"),g(n))}}function c(){u.style.width="0",u.style.height="0",u.style.display="none",document.removeEventListener("mousemove",o),y(p)}function s(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 i(){return p}function d(){c(),document.removeEventListener("mousedown",n)}function a(e,t){var n=e.className;-1===n.indexOf(t)&&(""!==n&&(t=" "+t),e.className=n+t)}function r(e,t){var n=e.className;new RegExp(t+"\\b","g");n=n.replace(t,""),e.className=n}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 u=e.selector||document.getElementById("rectangle"),f=e.selectables,m=e.onElementSelect||function(){},g=e.onElementUnselect||function(){},y=e.callback||function(){},p=[];t();var x,h;return{removeClass:r,addClass:a,stop:d,isElementTouching:s,reset:c,checkIfInside:l,move:o,startUp:n,start:t,getSelection:i}};"undefined"!=typeof module&&null!==module?module.exports=dragSelect:window.dragSelect=dragSelect;
+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.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{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;

package.json

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

README.md

@@ -22,3 +22,3 @@ ```
 - Choose which elements can be selected.
-- Awesome browser support, works even on IE5
+- Awesome browser support, works even on IE7
 - Ease of use
@@ -80,3 +80,3 @@ - Lightweight, only 1KB gzipped
   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) = array of selected nodes.
+  callback: function(elements) {} // this is optional is fired once the user releases the mouse. (elements) = selected nodes.
 });
@@ -96,3 +96,3 @@
 |selector |single DOM element (node) |the square that will draw the selection. Default = #rectangle|
-|selectables |array of DOM elements (nodes) |the elements that can be selected|
+|selectables |DOM elements (nodes) |the elements that can be selected|
 |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|
@@ -102,2 +102,13 @@ |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.|
 
+## 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:  
+
+| 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. |
+
 ## Classes
@@ -104,0 +115,0 @@ | name | trigger |

src/dragSelect.js

@@ -14,3 +14,3 @@ /*
 - Choose which elements can be selected.
-- Awesome browser support, works even on IE5
+- Awesome browser support, works even on IE7
 - Ease of use
@@ -29,3 +29,3 @@ - Lightweight, only 1KB gzipped
 ** @selector          node            the square that will draw the selection
-** @selectables       array of nodes  the elements that can be selected
+** @selectables       nodes           the elements that can be selected
 ** @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
@@ -35,4 +35,12 @@ ** @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
 
+ Methods
+** .start             ()                    reset the functionality after a teardown
+** .stop              ()                    will teardown/stop the whole functionality
+** .getSelection      ()                    returns the current selection
+** .addSelectables    ([nodes])             add elements that can be selected. Intelligent algorythm never adds elements twice.
+** .removeSelectables ([nodes])             remove elements that can be selected. Also removes the 'selected' class from those elements.
 
 
+
+
  STAR THIS PLUGIN ON GITHUB:
@@ -85,3 +93,3 @@
   var selector = options.selector || document.getElementById("rectangle");
-  var selectables = options.selectables;
+  var selectables = toArray(options.selectables) || [];
   var selectCallback = options.onElementSelect || function() {};
@@ -93,2 +101,24 @@ var unselectCallback = options.onElementUnselect || function() {};
 
+  //- 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);
+      }
+    }
+  }
+
   //- Start
@@ -102,3 +132,2 @@ function start() {
   function startUp(e) {
-    console.log('STARTUP');
     cursorPos = { // event.clientX/Y fallback for IE8-
@@ -259,2 +288,31 @@ x: e.pageX || e.clientX,
 
+  function toArray(obj) {
+    if(!obj.length && isElement(obj)) { return [obj]; }
+
+    var array = [];
+    for (var i = obj.length - 1; i >= 0; i--) { 
+      array[i] = obj[i];
+    }
+
+    return array;
+  }
+
+  function isElement(obj) {
+    try {
+      //Using W3 DOM2 (works for FF, Opera and Chrom)
+      return obj instanceof HTMLElement;
+    }
+    catch(e){
+      //Browsers not supporting W3 DOM2 don't have HTMLElement and
+      //an exception is thrown and we end up here. Testing some
+      //properties that all elements have. (works on IE7)
+      return (typeof obj==="object") &&
+        (obj.nodeType===1) && (typeof obj.style === "object") &&
+        (typeof obj.ownerDocument ==="object");
+    }
+  }
+
+
+  //- Return
+
   var DS = {
@@ -270,3 +328,5 @@ removeClass: removeClass,
     start: start,
-    getSelection: getSelection
+    getSelection: getSelection,
+    removeSelectables: removeSelectables,
+    addSelectables: addSelectables
   };
@@ -273,0 +333,0 @@ return DS;

No alert changes

Improved metrics

Total package byte prevSize

1116714

increased by0.68%

Lines of code

833

increased by13.64%

Number of lines in readme file

117

increased by10.38%

No dependency changes