dragselect
Advanced tools
Comparing version 1.6.1 to 1.7.0
@@ -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
1264577
4657
127