dragselect - npm Package Compare versions

Comparing version 1.7.1 to 1.7.2

dist/DragSelect.js

@@ -11,6 +11,7 @@ /*
   - No dependencies
-  - Add drag selection.
+  - Ease of use
+  - Add drag selection
+  - Accessibility (a11y)
   - Choose which elements can be selected.
   - Great browser support, works perfectly on IE9
-  - Ease of use
   - Lightweight, only ~2KB gzipped
@@ -90,4 +91,4 @@ - Free & open source under MIT License
 
+  this._createBindings();
   this._setupOptions( options );
-  this._createBindings();
   this.start();
@@ -98,2 +99,14 @@
 /**
+ * Binds the `this` to the event listener functions
+ */
+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);
+
+};
+
+/**
  * Setup the options
@@ -103,7 +116,4 @@ */
 
-  this.selectables = this.toArray( options.selectables ) || [];
-  for (var index = 0; index < this.selectables.length; index++) {
-    var selectable = this.selectables[index];
-    this.addClass( selectable, 'ds-selectable' );
-  }
+  this.selectables = [];
+  this._handleSelectables( this.toArray( options.selectables ) );
 
@@ -124,13 +134,71 @@ this.multiSelectKeys = options.multiSelectKeys || ['ctrlKey', 'shiftKey', 'metaKey'];
 /**
- * Binds the `this` to the event listener functions
+ * Add/Remove Selectables also handles css classes and event listeners.
+ * 
+ * @param {Object} selectables - selectable elements.
+ * @param {Boolean} remove - if elements should be removed.
+ * @param {Boolean} fromSelection - if elements should also be added/removed to the selection.
  */
-DragSelect.prototype._createBindings = function() {
+DragSelect.prototype._handleSelectables = function( selectables, remove, fromSelection ) {
 
-  this._startUp = this._startUp.bind(this);
-  this._handleMove = this._handleMove.bind(this);
-  this.reset = this.reset.bind(this);
+  for ( var index = 0; index < selectables.length; index++ ) {
+    var selectable = selectables[index];
+    var indexOf = this.selectables.indexOf( selectable );
 
+    if( indexOf < 0 && !remove ) {  // add
+      
+      this.addClass( selectable, 'ds-selectable' );
+      selectable.addEventListener( 'click', this._onClick );
+      this.selectables.push( selectable );
+      
+      // also add to current selection
+      if( fromSelection && this.selected.indexOf( selectable ) < 0 ) {
+        this.addClass( selectable, 'ds-selected' );
+        this.selected.push( selectable );
+      }
+
+    }
+
+    else if( indexOf > -1 && remove ) {  // remove
+
+      this.removeClass( selectable, 'ds-hover' );
+      this.removeClass( selectable, 'ds-selectable' );
+      selectable.removeEventListener( 'click', this._onClick );
+      this.selectables.splice( indexOf, 1 );
+
+      // also remove from current selection
+      if( fromSelection && this.selected.indexOf( selectable ) > -1 ) {
+        this.removeClass( selectable, 'ds-selected' );
+        this.selected.splice( this.selected.indexOf( selectable ), 1 );
+      }
+
+    }
+  }
+
 };
 
 /**
+ * Triggers when a node is actively selected.
+ * 
+ * This might be an "onClick" method but it also triggers when
+ * <button> nodes are pressed via the keyboard.
+ * Making DragSelect accessible for everyone!
+ * 
+ * @param {Object} selectables - selectable elements.
+ * @param {Boolean} remove - if elements were removed.
+ */
+DragSelect.prototype._onClick = function( event ) {
+
+  var node = event.target;
+
+  this.isMultiSelectKeyPressed( event );
+  this.checkIfInsideSelection( true );  // reset selection if no multiselectionkeypressed
+
+  if( this.selectables.indexOf( node ) > -1 ) {
+    this.toggle( node );
+    this.reset();
+  }
+
+};
+
+/**
  * Create the selector node when not provided by options object.
@@ -179,8 +247,3 @@ *
 
-  // check if some multiselection modifier key is pressed
-  this.multiSelectKeyPressed = false;
-  for ( var index = 0; index < this.multiSelectKeys.length; index++ ) {
-    var mKey = this.multiSelectKeys[index];
-    if( event[mKey] ) { this.multiSelectKeyPressed = true; }
-  }
+  this.isMultiSelectKeyPressed( event );
 
@@ -199,2 +262,17 @@ // move element on location
 /**
+ * Check if some multiselection modifier key is pressed
+ * 
+ * @param {Object} event - The event object.
+ */
+DragSelect.prototype.isMultiSelectKeyPressed = function( event ) {
+
+  this.multiSelectKeyPressed = false;
+  for ( var index = 0; index < this.multiSelectKeys.length; index++ ) {
+    var mKey = this.multiSelectKeys[index];
+    if( event[mKey] ) { this.multiSelectKeyPressed = true; }
+  }
+
+};
+
+/**
  * Grabs the starting position of all needed elements
@@ -329,17 +407,23 @@ *
  * 
- * startup handles first clicks. Here is user is clicking directly onto
+ * force handles first clicks and accessibility. Here is user is clicking directly onto
  * some element at start, (contrary to later hovers) we can assume that he
  * really wants to select/deselect that item.
  * 
- * @param {Boolean} startup – forces through.
+ * @param {Boolean} force – forces through.
+ * 
+ * @return {Boolean}
  */
-DragSelect.prototype.checkIfInsideSelection = function( startup ) {
+DragSelect.prototype.checkIfInsideSelection = function( force ) {
 
+  var anyInside = false;
+
   for( var i = 0, il = this.selectables.length; i < il; i++ ) {
+
     var selectable = this.selectables[i];
 
     if( this.isElementTouching( selectable, this.selector, this.area ) ) {
-      this._handleSelection( selectable, startup );
+      this._handleSelection( selectable, force );
+      anyInside = true;
     } else {
-      this._handleUnselection( selectable, startup );
+      this._handleUnselection( selectable, force );
     }
@@ -349,2 +433,4 @@
 
+  return anyInside;
+
 };
@@ -356,7 +442,7 @@
  * @param {Node} item – selected item.
- * @param {Boolean} startup – forces through.
+ * @param {Boolean} force – forces through.
  */
-DragSelect.prototype._handleSelection = function( item, startup ) {
+DragSelect.prototype._handleSelection = function( item, force ) {
 
-  if( this.hasClass( item, 'ds-hover' ) && !startup ) { return false; }
+  if( this.hasClass( item, 'ds-hover' ) && !force ) { return false; }
   var posInSelectedArray = this.selected.indexOf( item );
@@ -378,7 +464,7 @@
  * @param {Node} item – selected item.
- * @param {Boolean} startup – forces through.
+ * @param {Boolean} force – forces through.
  */
-DragSelect.prototype._handleUnselection = function( item, startup ) {
+DragSelect.prototype._handleUnselection = function( item, force ) {
 
-  if( !this.hasClass( item, 'ds-hover' ) && !startup ) { return false; }
+  if( !this.hasClass( item, 'ds-hover' ) && !force ) { return false; }
   var posInSelectedArray = this.selected.indexOf( item );
@@ -431,2 +517,21 @@
 /**
+ * Adds/Removes an item to the selection.
+ * If it is already selected = remove, if not = add.
+ * 
+ * @param {Node} item – item to select.
+ * @return {Node} item
+ */
+DragSelect.prototype.toggle = function( item ) {
+  
+    if( this.selected.indexOf( item ) > -1) {
+      this.unselect( item );
+    } else {
+      this.select( item );
+    }
+  
+    return item;
+  
+  };
+
+/**
  * Checks if element is touched by the selector (and vice-versa)
@@ -591,16 +696,9 @@ *
  * @param {Nodes} _nodes – dom nodes
+ * @param {Nodes} addToSelection – if elements should also be added to current selection
  * @return {Nodes} _nodes – the added node(s)
  */
-DragSelect.prototype.addSelectables = function( _nodes ) {
+DragSelect.prototype.addSelectables = function( _nodes, addToSelection ) {
 
   var nodes = this.toArray( _nodes );
-
-  for (var i  = 0, il = nodes.length; i < il; i++) {
-    var node = nodes[i];
-    if( this.selectables.indexOf( node ) < 0) {
-      this.selectables.push( node );
-      this.addClass( node, 'ds-selectable' );
-    }
-  }
-
+  this._handleSelectables( nodes, false, addToSelection );
   return _nodes;
@@ -625,19 +723,9 @@
  * @param {Nodes} _nodes – dom nodes
+ * @param {Nodes} removeFromSelection – if elements should also be removed from current selection
  * @return {Nodes} _nodes – the removed node(s)
  */
-DragSelect.prototype.removeSelectables = function( _nodes ) {
+DragSelect.prototype.removeSelectables = function( _nodes, removeFromSelection ) {
 
   var nodes = this.toArray( _nodes );
-
-  for (var i  = 0, il = nodes.length; i < il; i++) {
-    var node = nodes[i];
-    var index = this.selectables.indexOf( node );
-    if( index > -1 ) {
-      this.removeClass( node, 'ds-hover' );
-      this.removeClass( node, 'ds-selected' );
-      this.removeClass( node, 'ds-selectable' );
-      this.selectables.splice( index, 1 );
-    }
-  }
-
+  this._handleSelectables( nodes, true, removeFromSelection );
   return _nodes;
@@ -644,0 +732,0 @@

dist/ds.min.js

@@ -1,1 +0,1 @@
-function DragSelect(t){this.multiSelectKeyPressed,this.initialCursorPos,this.initialScroll,this.selected=[],this._setupOptions(t),this._createBindings(),this.start()}DragSelect.prototype._setupOptions=function(t){this.selectables=this.toArray(t.selectables)||[];for(var e=0;e<this.selectables.length;e++){var s=this.selectables[e];this.addClass(s,"ds-selectable")}this.multiSelectKeys=t.multiSelectKeys||["ctrlKey","shiftKey","metaKey"],this.selectCallback=t.onElementSelect||function(){},this.unselectCallback=t.onElementUnselect||function(){},this.callback=t.callback||function(){},this.area=t.area||document,this.customStyles=t.customStyles,this.selector=t.selector||this._createSelector(),this.addClass(this.selector,"ds-selector")},DragSelect.prototype._createBindings=function(){this._startUp=this._startUp.bind(this),this._handleMove=this._handleMove.bind(this),this.reset=this.reset.bind(this)},DragSelect.prototype._createSelector=function(){var t=document.createElement("div");return t.style.position="absolute",this.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"),(this.area===document?document.body:this.area).appendChild(t),t},DragSelect.prototype.start=function(){this.area.addEventListener("mousedown",this._startUp)},DragSelect.prototype._startUp=function(t){this.selector.style.display="block",this.multiSelectKeyPressed=!1;for(var e=0;e<this.multiSelectKeys.length;e++){t[this.multiSelectKeys[e]]&&(this.multiSelectKeyPressed=!0)}this._getStartingPositions(t),this.checkIfInsideSelection(!0),this.area.removeEventListener("mousedown",this._startUp),this.area.addEventListener("mousemove",this._handleMove),document.addEventListener("mouseup",this.reset)},DragSelect.prototype._getStartingPositions=function(t){this.initialCursorPos=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);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),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=0,s=this.selectables.length;e<s;e++){var i=this.selectables[e];this.isElementTouching(i,this.selector,this.area)?this._handleSelection(i,t):this._handleUnselection(i,t)}},DragSelect.prototype._handleSelection=function(t,e){if(this.hasClass(t,"ds-hover")&&!e)return!1;var s=this.selected.indexOf(t);s<0?this.select(t):s>-1&&this.multiSelectKeyPressed&&this.unselect(t),this.addClass(t,"ds-hover")},DragSelect.prototype._handleUnselection=function(t,e){if(!this.hasClass(t,"ds-hover")&&!e)return!1;this.selected.indexOf(t)>-1&&!this.multiSelectKeyPressed&&this.unselect(t),this.removeClass(t,"ds-hover")},DragSelect.prototype.select=function(t){return!(this.selected.indexOf(t)>-1)&&(this.selected.push(t),this.addClass(t,"ds-selected"),this.selectCallback(t),t)},DragSelect.prototype.unselect=function(t){return!(this.selected.indexOf(t)<0)&&(this.selected.splice(this.selected.indexOf(t),1),this.removeClass(t,"ds-selected"),this.unselectCallback(t),t)},DragSelect.prototype.isElementTouching=function(t,e,s){var i=this.getScroll(s),o={y:e.getBoundingClientRect().top+i.y,x:e.getBoundingClientRect().left+i.x,h:e.offsetHeight,w:e.offsetWidth},l={y:t.getBoundingClientRect().top+i.y,x:t.getBoundingClientRect().left+i.x,h:t.offsetHeight,w:t.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},DragSelect.prototype._autoScroll=function(t){var e=this.isCursorNearEdge(t,this.area),s=this.area===document?this.area.body:this.area;"top"===e&&s.scrollTop>0?s.scrollTop-=1:"bottom"===e?s.scrollTop+=1:"left"===e&&s.scrollLeft>0?s.scrollLeft-=1:"right"===e&&(s.scrollLeft+=1)},DragSelect.prototype.isCursorNearEdge=function(t,e){var s=this.getCursorPos(t,e),i=this.getAreaRect(e),o={x:Math.max(i.width/10,20),y:Math.max(i.height/10,20)},l=e===document?this.getScroll(document.body):{x:0,y:0};return s.y<o.y+l.y?"top":i.height-s.y+l.y<o.y?"bottom":i.width-s.x+l.x<o.x?"right":s.x<o.x+l.x&&"left"},DragSelect.prototype.reset=function(){this.selector.style.width="0",this.selector.style.height="0",this.selector.style.display="none",this.callback(this.selected),this.area.removeEventListener("mousemove",this._handleMove),this.area.addEventListener("mousedown",this._startUp)},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.addSelectables=function(t){for(var e=this.toArray(t),s=0,i=e.length;s<i;s++){var o=e[s];this.selectables.indexOf(o)<0&&(this.selectables.push(o),this.addClass(o,"ds-selectable"))}return t},DragSelect.prototype.getSelectables=function(){return this.selectables},DragSelect.prototype.removeSelectables=function(t){for(var e=this.toArray(t),s=0,i=e.length;s<i;s++){var o=e[s],l=this.selectables.indexOf(o);l>-1&&(this.removeClass(o,"ds-hover"),this.removeClass(o,"ds-selected"),this.removeClass(o,"ds-selectable"),this.selectables.splice(l,1))}return t},DragSelect.prototype.addClass=function(t,e){var s=t.className;return-1!==s.indexOf(e)?t:(""!==s&&(e=" "+e),t.className=s+e,t)},DragSelect.prototype.removeClass=function(t,e){var s=t.className,i=new RegExp(e+"\\b","g");return s=s.replace(i,""),t.className=s,t},DragSelect.prototype.hasClass=function(t,e){return t.className.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}catch(e){return"object"==typeof t&&1===t.nodeType&&"object"==typeof t.style&&"object"==typeof t.ownerDocument}},DragSelect.prototype.getCursorPos=function(t,e){var s={x:t.pageX||t.clientX,y:t.pageY||t.clientY},i=this.getAreaRect(e||document);return{x:s.x-i.left,y:s.y-i.top}},DragSelect.prototype.getScroll=function(t){return{y:t&&t.scrollTop>=0?t.scrollTop:0,x:t&&t.scrollLeft>=0?t.scrollLeft:0}},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:window.DragSelect=DragSelect;
+function DragSelect(e){this.multiSelectKeyPressed,this.initialCursorPos,this.initialScroll,this.selected=[],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){this.selectables=[],this._handleSelectables(this.toArray(e.selectables)),this.multiSelectKeys=e.multiSelectKeys||["ctrlKey","shiftKey","metaKey"],this.selectCallback=e.onElementSelect||function(){},this.unselectCallback=e.onElementUnselect||function(){},this.callback=e.callback||function(){},this.area=e.area||document,this.customStyles=e.customStyles,this.selector=e.selector||this._createSelector(),this.addClass(this.selector,"ds-selector")},DragSelect.prototype._handleSelectables=function(e,t,s){for(var i=0;i<e.length;i++){var l=e[i],o=this.selectables.indexOf(l);o<0&&!t?(this.addClass(l,"ds-selectable"),l.addEventListener("click",this._onClick),this.selectables.push(l),s&&this.selected.indexOf(l)<0&&(this.addClass(l,"ds-selected"),this.selected.push(l))):o>-1&&t&&(this.removeClass(l,"ds-hover"),this.removeClass(l,"ds-selectable"),l.removeEventListener("click",this._onClick),this.selectables.splice(o,1),s&&this.selected.indexOf(l)>-1&&(this.removeClass(l,"ds-selected"),this.selected.splice(this.selected.indexOf(l),1)))}},DragSelect.prototype._onClick=function(e){var t=e.target;this.isMultiSelectKeyPressed(e),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.2)",e.style.border="1px solid rgba(0, 0, 255, 0.5)",e.style.display="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){this.selector.style.display="block",this.isMultiSelectKeyPressed(e),this._getStartingPositions(e),this.checkIfInsideSelection(!0),this.area.removeEventListener("mousedown",this._startUp),this.area.addEventListener("mousemove",this._handleMove),document.addEventListener("mouseup",this.reset)},DragSelect.prototype.isMultiSelectKeyPressed=function(e){this.multiSelectKeyPressed=!1;for(var t=0;t<this.multiSelectKeys.length;t++){e[this.multiSelectKeys[t]]&&(this.multiSelectKeyPressed=!0)}},DragSelect.prototype._getStartingPositions=function(e){this.initialCursorPos=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);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),i={x:s.x-this.initialScroll.x,y:s.y-this.initialScroll.y},l={};return t.x>this.initialCursorPos.x-i.x?(l.x=this.initialCursorPos.x+this.initialScroll.x,l.w=t.x-this.initialCursorPos.x+i.x):(l.x=t.x+s.x,l.w=this.initialCursorPos.x-t.x-i.x),t.y>this.initialCursorPos.y-i.y?(l.y=this.initialCursorPos.y+this.initialScroll.y,l.h=t.y-this.initialCursorPos.y+i.y):(l.y=t.y+s.y,l.h=this.initialCursorPos.y-t.y-i.y),l},DragSelect.prototype.checkIfInsideSelection=function(e){for(var t=!1,s=0,i=this.selectables.length;s<i;s++){var l=this.selectables[s];this.isElementTouching(l,this.selector,this.area)?(this._handleSelection(l,e),t=!0):this._handleUnselection(l,e)}return t},DragSelect.prototype._handleSelection=function(e,t){if(this.hasClass(e,"ds-hover")&&!t)return!1;var s=this.selected.indexOf(e);s<0?this.select(e):s>-1&&this.multiSelectKeyPressed&&this.unselect(e),this.addClass(e,"ds-hover")},DragSelect.prototype._handleUnselection=function(e,t){if(!this.hasClass(e,"ds-hover")&&!t)return!1;this.selected.indexOf(e)>-1&&!this.multiSelectKeyPressed&&this.unselect(e),this.removeClass(e,"ds-hover")},DragSelect.prototype.select=function(e){return!(this.selected.indexOf(e)>-1)&&(this.selected.push(e),this.addClass(e,"ds-selected"),this.selectCallback(e),e)},DragSelect.prototype.unselect=function(e){return!(this.selected.indexOf(e)<0)&&(this.selected.splice(this.selected.indexOf(e),1),this.removeClass(e,"ds-selected"),this.unselectCallback(e),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=this.getScroll(s),l={y:t.getBoundingClientRect().top+i.y,x:t.getBoundingClientRect().left+i.x,h:t.offsetHeight,w:t.offsetWidth},o={y:e.getBoundingClientRect().top+i.y,x:e.getBoundingClientRect().left+i.x,h:e.offsetHeight,w:e.offsetWidth};return l.x<o.x+o.w&&l.x+l.w>o.x&&l.y<o.y+o.h&&l.h+l.y>o.y},DragSelect.prototype._autoScroll=function(e){var t=this.isCursorNearEdge(e,this.area),s=this.area===document?this.area.body:this.area;"top"===t&&s.scrollTop>0?s.scrollTop-=1:"bottom"===t?s.scrollTop+=1:"left"===t&&s.scrollLeft>0?s.scrollLeft-=1:"right"===t&&(s.scrollLeft+=1)},DragSelect.prototype.isCursorNearEdge=function(e,t){var s=this.getCursorPos(e,t),i=this.getAreaRect(t),l={x:Math.max(i.width/10,20),y:Math.max(i.height/10,20)},o=t===document?this.getScroll(document.body):{x:0,y:0};return s.y<l.y+o.y?"top":i.height-s.y+o.y<l.y?"bottom":i.width-s.x+o.x<l.x?"right":s.x<l.x+o.x&&"left"},DragSelect.prototype.reset=function(){this.selector.style.width="0",this.selector.style.height="0",this.selector.style.display="none",this.callback(this.selected),this.area.removeEventListener("mousemove",this._handleMove),this.area.addEventListener("mousedown",this._startUp)},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.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.removeSelectables=function(e,t){var s=this.toArray(e);return this._handleSelectables(s,!0,t),e},DragSelect.prototype.addClass=function(e,t){var s=e.className;return-1!==s.indexOf(t)?e:(""!==s&&(t=" "+t),e.className=s+t,e)},DragSelect.prototype.removeClass=function(e,t){var s=e.className,i=new RegExp(t+"\\b","g");return s=s.replace(i,""),e.className=s,e},DragSelect.prototype.hasClass=function(e,t){return e.className.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}catch(t){return"object"==typeof e&&1===e.nodeType&&"object"==typeof e.style&&"object"==typeof e.ownerDocument}},DragSelect.prototype.getCursorPos=function(e,t){var s={x:e.pageX||e.clientX,y:e.pageY||e.clientY},i=this.getAreaRect(t||document);return{x:s.x-i.left,y:s.y-i.top}},DragSelect.prototype.getScroll=function(e){return{y:e&&e.scrollTop>=0?e.scrollTop:0,x:e&&e.scrollLeft>=0?e.scrollLeft:0}},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:window.DragSelect=DragSelect;

package.json

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

README.md

@@ -20,9 +20,10 @@ ```
 - No dependencies
-- Add drag selection.
+- Accessibility (a11y)
+- Add drag selection
 - Choose which elements can be selected.
 - Great browser support, works even like a charm on IE9
-- Ease of use
 - Lightweight, only ~1KB gzipped
 - DragSelect was written with Performance in mind.
 - Free & open source under MIT License
+- Ease of use
 
@@ -33,3 +34,3 @@ # Why?
 
-# 1. Installation
+# Installation
 ## easy
@@ -45,3 +46,3 @@
 
-npm install --save-dev npm-dragselect
+npm install --save-dev dragselect
 
@@ -52,4 +53,4 @@ ## bower
 
-That's it, you're ready to rock!
-Of course you can also just include the function within your code to save a request.
+That's it, you're ready to rock!  
+Of course you can also just include the code within your code to save a request.
 
@@ -97,3 +98,13 @@ # Usage
 
-## Properties:
+## Accessibility (a11y)
+
+DragSelect is accessibly by default:  
+
+TLDR; => Your `selectables` should be buttons: `<button type="button"></button>`.  
+
+Obviously, keyboard users won’t get the full visual experience but it works similarely to the OS default behaviour. You can select items using the default select keys (usually space or enter) and also multiselect when using a modifier key at the same time. There is one little thing you have to do tho’: the `selectables` have to be pressable (clickable)! To achieve this, they should be of type `<button type="button"></button>`.  
+
+
+
+# Properties:
 | property | type | usage |
@@ -110,3 +121,3 @@ |--- |--- |--- |
 
-## Methods:
+# Methods:
 When the function is saved into a variable `var foo = new DragSelect()` you have access to all its inner functions. There are way more than listed here. Here are just the most usable:  
@@ -119,7 +130,7 @@
 |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. |
+|addSelectables |DOM elements (nodes), Boolean (addToSelection) |Adds elements that can be selected. Don’t worry, a smart algorythm makes sure that nodes are never added twice. If boolean is set to true: elements will also be added to current selection. |
+|removeSelectables |DOM elements (nodes), Boolean (removeFromSelection) |Remove elements that can be selected. If boolean is set to true: elements will also be removed from current selection. |
 |getSelectables |/ |Returns array with all nodes that can be selected. |
 
-## Classes
+# Classes
 | name | trigger |
@@ -126,0 +137,0 @@ |--- |--- |

src/DragSelect.js

@@ -11,6 +11,7 @@ /*
   - No dependencies
-  - Add drag selection.
+  - Ease of use
+  - Add drag selection
+  - Accessibility (a11y)
   - Choose which elements can be selected.
   - Great browser support, works perfectly on IE9
-  - Ease of use
   - Lightweight, only ~2KB gzipped
@@ -90,4 +91,4 @@ - Free & open source under MIT License
 
+  this._createBindings();
   this._setupOptions( options );
-  this._createBindings();
   this.start();
@@ -98,2 +99,14 @@
 /**
+ * Binds the `this` to the event listener functions
+ */
+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);
+
+};
+
+/**
  * Setup the options
@@ -103,7 +116,4 @@ */
 
-  this.selectables = this.toArray( options.selectables ) || [];
-  for (var index = 0; index < this.selectables.length; index++) {
-    var selectable = this.selectables[index];
-    this.addClass( selectable, 'ds-selectable' );
-  }
+  this.selectables = [];
+  this._handleSelectables( this.toArray( options.selectables ) );
 
@@ -124,13 +134,71 @@ this.multiSelectKeys = options.multiSelectKeys || ['ctrlKey', 'shiftKey', 'metaKey'];
 /**
- * Binds the `this` to the event listener functions
+ * Add/Remove Selectables also handles css classes and event listeners.
+ * 
+ * @param {Object} selectables - selectable elements.
+ * @param {Boolean} remove - if elements should be removed.
+ * @param {Boolean} fromSelection - if elements should also be added/removed to the selection.
  */
-DragSelect.prototype._createBindings = function() {
+DragSelect.prototype._handleSelectables = function( selectables, remove, fromSelection ) {
 
-  this._startUp = this._startUp.bind(this);
-  this._handleMove = this._handleMove.bind(this);
-  this.reset = this.reset.bind(this);
+  for ( var index = 0; index < selectables.length; index++ ) {
+    var selectable = selectables[index];
+    var indexOf = this.selectables.indexOf( selectable );
 
+    if( indexOf < 0 && !remove ) {  // add
+      
+      this.addClass( selectable, 'ds-selectable' );
+      selectable.addEventListener( 'click', this._onClick );
+      this.selectables.push( selectable );
+      
+      // also add to current selection
+      if( fromSelection && this.selected.indexOf( selectable ) < 0 ) {
+        this.addClass( selectable, 'ds-selected' );
+        this.selected.push( selectable );
+      }
+
+    }
+
+    else if( indexOf > -1 && remove ) {  // remove
+
+      this.removeClass( selectable, 'ds-hover' );
+      this.removeClass( selectable, 'ds-selectable' );
+      selectable.removeEventListener( 'click', this._onClick );
+      this.selectables.splice( indexOf, 1 );
+
+      // also remove from current selection
+      if( fromSelection && this.selected.indexOf( selectable ) > -1 ) {
+        this.removeClass( selectable, 'ds-selected' );
+        this.selected.splice( this.selected.indexOf( selectable ), 1 );
+      }
+
+    }
+  }
+
 };
 
 /**
+ * Triggers when a node is actively selected.
+ * 
+ * This might be an "onClick" method but it also triggers when
+ * <button> nodes are pressed via the keyboard.
+ * Making DragSelect accessible for everyone!
+ * 
+ * @param {Object} selectables - selectable elements.
+ * @param {Boolean} remove - if elements were removed.
+ */
+DragSelect.prototype._onClick = function( event ) {
+
+  var node = event.target;
+
+  this.isMultiSelectKeyPressed( event );
+  this.checkIfInsideSelection( true );  // reset selection if no multiselectionkeypressed
+
+  if( this.selectables.indexOf( node ) > -1 ) {
+    this.toggle( node );
+    this.reset();
+  }
+
+};
+
+/**
  * Create the selector node when not provided by options object.
@@ -179,8 +247,3 @@ *
 
-  // check if some multiselection modifier key is pressed
-  this.multiSelectKeyPressed = false;
-  for ( var index = 0; index < this.multiSelectKeys.length; index++ ) {
-    var mKey = this.multiSelectKeys[index];
-    if( event[mKey] ) { this.multiSelectKeyPressed = true; }
-  }
+  this.isMultiSelectKeyPressed( event );
 
@@ -199,2 +262,17 @@ // move element on location
 /**
+ * Check if some multiselection modifier key is pressed
+ * 
+ * @param {Object} event - The event object.
+ */
+DragSelect.prototype.isMultiSelectKeyPressed = function( event ) {
+
+  this.multiSelectKeyPressed = false;
+  for ( var index = 0; index < this.multiSelectKeys.length; index++ ) {
+    var mKey = this.multiSelectKeys[index];
+    if( event[mKey] ) { this.multiSelectKeyPressed = true; }
+  }
+
+};
+
+/**
  * Grabs the starting position of all needed elements
@@ -329,17 +407,23 @@ *
  * 
- * startup handles first clicks. Here is user is clicking directly onto
+ * force handles first clicks and accessibility. Here is user is clicking directly onto
  * some element at start, (contrary to later hovers) we can assume that he
  * really wants to select/deselect that item.
  * 
- * @param {Boolean} startup – forces through.
+ * @param {Boolean} force – forces through.
+ * 
+ * @return {Boolean}
  */
-DragSelect.prototype.checkIfInsideSelection = function( startup ) {
+DragSelect.prototype.checkIfInsideSelection = function( force ) {
 
+  var anyInside = false;
+
   for( var i = 0, il = this.selectables.length; i < il; i++ ) {
+
     var selectable = this.selectables[i];
 
     if( this.isElementTouching( selectable, this.selector, this.area ) ) {
-      this._handleSelection( selectable, startup );
+      this._handleSelection( selectable, force );
+      anyInside = true;
     } else {
-      this._handleUnselection( selectable, startup );
+      this._handleUnselection( selectable, force );
     }
@@ -349,2 +433,4 @@
 
+  return anyInside;
+
 };
@@ -356,7 +442,7 @@
  * @param {Node} item – selected item.
- * @param {Boolean} startup – forces through.
+ * @param {Boolean} force – forces through.
  */
-DragSelect.prototype._handleSelection = function( item, startup ) {
+DragSelect.prototype._handleSelection = function( item, force ) {
 
-  if( this.hasClass( item, 'ds-hover' ) && !startup ) { return false; }
+  if( this.hasClass( item, 'ds-hover' ) && !force ) { return false; }
   var posInSelectedArray = this.selected.indexOf( item );
@@ -378,7 +464,7 @@
  * @param {Node} item – selected item.
- * @param {Boolean} startup – forces through.
+ * @param {Boolean} force – forces through.
  */
-DragSelect.prototype._handleUnselection = function( item, startup ) {
+DragSelect.prototype._handleUnselection = function( item, force ) {
 
-  if( !this.hasClass( item, 'ds-hover' ) && !startup ) { return false; }
+  if( !this.hasClass( item, 'ds-hover' ) && !force ) { return false; }
   var posInSelectedArray = this.selected.indexOf( item );
@@ -431,2 +517,21 @@
 /**
+ * Adds/Removes an item to the selection.
+ * If it is already selected = remove, if not = add.
+ * 
+ * @param {Node} item – item to select.
+ * @return {Node} item
+ */
+DragSelect.prototype.toggle = function( item ) {
+  
+    if( this.selected.indexOf( item ) > -1) {
+      this.unselect( item );
+    } else {
+      this.select( item );
+    }
+  
+    return item;
+  
+  };
+
+/**
  * Checks if element is touched by the selector (and vice-versa)
@@ -591,16 +696,9 @@ *
  * @param {Nodes} _nodes – dom nodes
+ * @param {Nodes} addToSelection – if elements should also be added to current selection
  * @return {Nodes} _nodes – the added node(s)
  */
-DragSelect.prototype.addSelectables = function( _nodes ) {
+DragSelect.prototype.addSelectables = function( _nodes, addToSelection ) {
 
   var nodes = this.toArray( _nodes );
-
-  for (var i  = 0, il = nodes.length; i < il; i++) {
-    var node = nodes[i];
-    if( this.selectables.indexOf( node ) < 0) {
-      this.selectables.push( node );
-      this.addClass( node, 'ds-selectable' );
-    }
-  }
-
+  this._handleSelectables( nodes, false, addToSelection );
   return _nodes;
@@ -625,19 +723,9 @@
  * @param {Nodes} _nodes – dom nodes
+ * @param {Nodes} removeFromSelection – if elements should also be removed from current selection
  * @return {Nodes} _nodes – the removed node(s)
  */
-DragSelect.prototype.removeSelectables = function( _nodes ) {
+DragSelect.prototype.removeSelectables = function( _nodes, removeFromSelection ) {
 
   var nodes = this.toArray( _nodes );
-
-  for (var i  = 0, il = nodes.length; i < il; i++) {
-    var node = nodes[i];
-    var index = this.selectables.indexOf( node );
-    if( index > -1 ) {
-      this.removeClass( node, 'ds-hover' );
-      this.removeClass( node, 'ds-selected' );
-      this.removeClass( node, 'ds-selectable' );
-      this.selectables.splice( index, 1 );
-    }
-  }
-
+  this._handleSelectables( nodes, true, removeFromSelection );
   return _nodes;
@@ -644,0 +732,0 @@

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

1272700

increased by0.7%

Lines of code

4777

increased by2.84%

Number of lines in readme file

138

increased by8.66%

No dependency changes