New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

dragselect

Package Overview
Dependencies
Maintainers
1
Versions
97
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dragselect - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0

dist/DragSelect.js

2

bower.json

@@ -17,3 +17,3 @@ {

],
"homepage": "https://github.com/ThibaultJanBeyer/dragSelect",
"homepage": "https://github.com/ThibaultJanBeyer/DragSelect",
"ignore": [

@@ -20,0 +20,0 @@ "**/.*",

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

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

@@ -12,3 +12,3 @@ var gulp = require('gulp');

gulp.task('js', function () {
gulp.src('./src/dragSelect.js')
gulp.src('./src/DragSelect.js')
.pipe(jshint())

@@ -15,0 +15,0 @@ .pipe(jshint.reporter('default'))

{
"name": "dragselect",
"version": "1.6.1",
"version": "1.7.0",
"description": "easy javascript drag select functionality to your projects",

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

"type": "git",
"url": "git+https://github.com/ThibaultJanBeyer/dragSelect.git"
"url": "git+https://github.com/ThibaultJanBeyer/DragSelect.git"
},

@@ -40,5 +40,5 @@ "keywords": [

"bugs": {
"url": "https://github.com/ThibaultJanBeyer/dragSelect/issues"
"url": "https://github.com/ThibaultJanBeyer/DragSelect/issues"
},
"homepage": "https://ThibaultJanBeyer.com/"
}
```
__ _____ __ __
____/ /________ _____ _/ ___/___ / /__ _____/ /_
/ __ / ___/ __ `/ __ `/\__ \/ _ \/ / _ \/ ___/ __/
/ /_/ / / / /_/ / /_/ /___/ / __/ / __/ /__/ /_
\__,_/_/ \__,_/\__, //____/\___/_/\___/\___/\__/
/____/
____ _____ __ __
/ __ \_________ _____ _/ ___/___ / /__ _____/ /_
/ / / / ___/ __ `/ __ `/\__ \/ _ \/ / _ \/ ___/ __/
/ /_/ / / / /_/ / /_/ /___/ / __/ / __/ /__/ /_
/_____/_/ \__,_/\__, //____/\___/_/\___/\___/\__/
/____/
```
# dragSelect
# DragSelect
easily add a selection algorythm to your application/website.

@@ -15,3 +15,3 @@

https://thibaultjanbeyer.github.io/dragSelect/
https://thibaultjanbeyer.github.io/DragSelect/

@@ -39,3 +39,3 @@ # Key-Features

```html
<script src="https://thibaultjanbeyer.github.io/dragSelect/ds.min.js"></script>
<script src="https://thibaultjanbeyer.github.io/DragSelect/ds.min.js"></script>
```

@@ -63,3 +63,3 @@

```javascript
dragSelect({
new DragSelect({
selectables: document.getElementsByClassName('selectable-nodes')

@@ -71,6 +71,6 @@ });

All options are optional. You could also just initiate the dragselect by `var ds = dragSelect();` without any option.
All options are optional. You could also just initiate the Dragselect by `new DragSelect();` without any option.
```javascript
var ds = dragSelect({
var ds = new DragSelect({
selectables: document.getElementsByClassName('selectable-nodes'), // node/nodes that can be selected. This is also optional, you could just add them later with .addSelectables.

@@ -110,3 +110,3 @@ selector: document.getElementById('rectangle'), // draggable element. By default one will be created.

## 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 = new DragSelect()` you have access to all its inner functions. There are way more than listed here. Here are just the most usable:

@@ -120,2 +120,3 @@ | method | properties | usage |

|removeSelectables |DOM elements (nodes) |Remove elements that can be selected. Also removes the 'selected' class from those elements. |
|getSelectables |/ |Returns array with all nodes that can be selected. |

@@ -128,5 +129,6 @@ ## Classes

|.ds-selector |On the selector element
|.ds-selectable |On elements that can be selected
# Have Fun!
[![Typewriter Gif](https://thibaultjanbeyer.github.io/dragSelect/typewriter.gif)](http://thibaultjanbeyer.com/)
[![Typewriter Gif](https://thibaultjanbeyer.github.io/DragSelect/typewriter.gif)](http://thibaultjanbeyer.com/)

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc