From 9e7e91e06ad4139ba9a8eed1a604ec27dfa9d236 Mon Sep 17 00:00:00 2001 From: Seph Soliman Date: Wed, 11 May 2016 02:12:28 +0200 Subject: [PATCH] fix 1st box in drag-selection not being checked when check-dragging multiple items the 1st box would not get retroactively checked when mouseEnter'ing the 2nd box. this fixes it --- dist/dragcheck.js | 2 +- dist/jquery.dragcheck.js | 2 +- dragcheck.js | 44 +++++++++++++++++++--------------------- 3 files changed, 23 insertions(+), 25 deletions(-) diff --git a/dist/dragcheck.js b/dist/dragcheck.js index 8d47b3c..e3bf611 100644 --- a/dist/dragcheck.js +++ b/dist/dragcheck.js @@ -1 +1 @@ -!function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return t[s].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){var s=i(1).DragCheck;window.DragCheck=s},function(t,e){"use strict";function i(t){this.options=t||{},this.triggerChangeOnDragEnd=!1,this.checkState=null,this.selectionList=Array.isArray(t)?t:[],void 0!==this.options.checkboxes&&(this.selectionList=this.options.checkboxes),this.attachEvents(this.selectionList),document.body.addEventListener("mouseup",this.dragEnd.bind(this))}i.prototype.attachEvents=function(t){t.forEach(function(t){t.addEventListener("mousedown",this.mouseDown.bind(this)),t.addEventListener("mouseup",this.dragEnd.bind(this)),t.addEventListener("mouseenter",this.mouseEnter.bind(this)),this.options.clickToToggle&&t.addEventListener("click",function(e){var i=!this.getChecked(t);this.setChecked(t,i)}.bind(this))},this)},i.prototype.mouseDown=function(t){this.checkState=!this.getChecked(t.target),this.selectionList=[t.target]},i.prototype.dragEnd=function(t){this.options.deferChangeTrigger&&this.selectionList.forEach(this.triggerChange),this.options.onDragEnd&&this.options.onDragEnd(this.selectionList),this.checkState=null,this.selectionList=[]},i.prototype.triggerChange=function(t){void 0!==this.options.onChange?this.options.onChange(t):t.dispatchEvent(new Event("change"))},i.prototype.setChecked=function(t,e){this.options.setChecked?this.options.setChecked(t,e):t.checked=e,this.options.deferChangeTrigger||this.triggerChange(t)},i.prototype.getChecked=function(t){return this.options.getChecked?this.options.getChecked(t):t.checked},i.prototype.mouseEnter=function(t){null!==this.checkState&&(this.selectionList.push(t.target),this.selectionList.forEach(function(t){this.setChecked(t,this.checkState)},this))},e.DragCheck=i}]); \ No newline at end of file +!function(t){function e(s){if(i[s])return i[s].exports;var n=i[s]={exports:{},id:s,loaded:!1};return t[s].call(n.exports,n,n.exports,e),n.loaded=!0,n.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){var s=i(1).DragCheck;window.DragCheck=s},function(t,e){"use strict";function i(t){this.options=t||{},this.triggerChangeOnDragEnd=!1,this.checkState=null,this.selectionList=[],this.checkboxes=Array.isArray(t)?t:t.checkboxes,this.attachEvents(this.checkboxes),document.body.addEventListener("mouseup",this.dragEnd.bind(this))}i.prototype.attachEvents=function(t){t.forEach(function(t){t.addEventListener("mousedown",this.mouseDown.bind(this,t)),t.addEventListener("mouseup",this.dragEnd.bind(this,t)),t.addEventListener("mouseenter",this.mouseEnter.bind(this,t)),this.options.clickToToggle&&t.addEventListener("click",function(e){var i=!this.getChecked(t);this.setChecked(t,i)}.bind(this))},this)},i.prototype.mouseDown=function(t){this.checkState=!this.getChecked(t),this.selectionList=[t]},i.prototype.dragEnd=function(t){this.options.deferChangeTrigger&&this.selectionList.forEach(this.triggerChange.bind(this)),this.options.onDragEnd&&this.options.onDragEnd(this.selectionList),this.checkState=null,this.selectionList=[]},i.prototype.triggerChange=function(t){void 0!==this.options.onChange?this.options.onChange(t):t.dispatchEvent(new Event("change"))},i.prototype.setChecked=function(t,e){this.options.setChecked?this.options.setChecked(t,e):t.checked=e,this.options.deferChangeTrigger||this.triggerChange(t)},i.prototype.getChecked=function(t){return this.options.getChecked?this.options.getChecked(t):t.checked},i.prototype.mouseEnter=function(t){null!==this.checkState&&(1===this.selectionList.length&&this.setChecked(this.selectionList[0],this.checkState),this.selectionList.push(t),this.setChecked(t,this.checkState))},e.DragCheck=i}]); \ No newline at end of file diff --git a/dist/jquery.dragcheck.js b/dist/jquery.dragcheck.js index d4a506a..dd475cc 100644 --- a/dist/jquery.dragcheck.js +++ b/dist/jquery.dragcheck.js @@ -1 +1 @@ -!function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return t[n].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){var n=i(1).DragCheck;!function(t){t.fn.dragCheck=function(e){return e=e||{},e.checkboxes=t(this).toArray(),new n(e)}}(window.jQuery)},function(t,e){"use strict";function i(t){this.options=t||{},this.triggerChangeOnDragEnd=!1,this.checkState=null,this.selectionList=Array.isArray(t)?t:[],void 0!==this.options.checkboxes&&(this.selectionList=this.options.checkboxes),this.attachEvents(this.selectionList),document.body.addEventListener("mouseup",this.dragEnd.bind(this))}i.prototype.attachEvents=function(t){t.forEach(function(t){t.addEventListener("mousedown",this.mouseDown.bind(this)),t.addEventListener("mouseup",this.dragEnd.bind(this)),t.addEventListener("mouseenter",this.mouseEnter.bind(this)),this.options.clickToToggle&&t.addEventListener("click",function(e){var i=!this.getChecked(t);this.setChecked(t,i)}.bind(this))},this)},i.prototype.mouseDown=function(t){this.checkState=!this.getChecked(t.target),this.selectionList=[t.target]},i.prototype.dragEnd=function(t){this.options.deferChangeTrigger&&this.selectionList.forEach(this.triggerChange),this.options.onDragEnd&&this.options.onDragEnd(this.selectionList),this.checkState=null,this.selectionList=[]},i.prototype.triggerChange=function(t){void 0!==this.options.onChange?this.options.onChange(t):t.dispatchEvent(new Event("change"))},i.prototype.setChecked=function(t,e){this.options.setChecked?this.options.setChecked(t,e):t.checked=e,this.options.deferChangeTrigger||this.triggerChange(t)},i.prototype.getChecked=function(t){return this.options.getChecked?this.options.getChecked(t):t.checked},i.prototype.mouseEnter=function(t){null!==this.checkState&&(this.selectionList.push(t.target),this.selectionList.forEach(function(t){this.setChecked(t,this.checkState)},this))},e.DragCheck=i}]); \ No newline at end of file +!function(t){function e(n){if(i[n])return i[n].exports;var s=i[n]={exports:{},id:n,loaded:!1};return t[n].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var i={};return e.m=t,e.c=i,e.p="",e(0)}([function(t,e,i){var n=i(1).DragCheck;!function(t){t.fn.dragCheck=function(e){return e=e||{},e.checkboxes=t(this).toArray(),new n(e)}}(window.jQuery)},function(t,e){"use strict";function i(t){this.options=t||{},this.triggerChangeOnDragEnd=!1,this.checkState=null,this.selectionList=[],this.checkboxes=Array.isArray(t)?t:t.checkboxes,this.attachEvents(this.checkboxes),document.body.addEventListener("mouseup",this.dragEnd.bind(this))}i.prototype.attachEvents=function(t){t.forEach(function(t){t.addEventListener("mousedown",this.mouseDown.bind(this,t)),t.addEventListener("mouseup",this.dragEnd.bind(this,t)),t.addEventListener("mouseenter",this.mouseEnter.bind(this,t)),this.options.clickToToggle&&t.addEventListener("click",function(e){var i=!this.getChecked(t);this.setChecked(t,i)}.bind(this))},this)},i.prototype.mouseDown=function(t){this.checkState=!this.getChecked(t),this.selectionList=[t]},i.prototype.dragEnd=function(t){this.options.deferChangeTrigger&&this.selectionList.forEach(this.triggerChange.bind(this)),this.options.onDragEnd&&this.options.onDragEnd(this.selectionList),this.checkState=null,this.selectionList=[]},i.prototype.triggerChange=function(t){void 0!==this.options.onChange?this.options.onChange(t):t.dispatchEvent(new Event("change"))},i.prototype.setChecked=function(t,e){this.options.setChecked?this.options.setChecked(t,e):t.checked=e,this.options.deferChangeTrigger||this.triggerChange(t)},i.prototype.getChecked=function(t){return this.options.getChecked?this.options.getChecked(t):t.checked},i.prototype.mouseEnter=function(t){null!==this.checkState&&(1===this.selectionList.length&&this.setChecked(this.selectionList[0],this.checkState),this.selectionList.push(t),this.setChecked(t,this.checkState))},e.DragCheck=i}]); \ No newline at end of file diff --git a/dragcheck.js b/dragcheck.js index cf37a2b..cba8b9f 100644 --- a/dragcheck.js +++ b/dragcheck.js @@ -5,25 +5,20 @@ function DragCheck(options) { this.triggerChangeOnDragEnd = false; this.checkState = null; // Array passed is a shorthand for appling drag check to a list of checboxes - this.selectionList = Array.isArray(options) ? options : []; - - // Constructor {{{ - // Should "change" be triggered WHILE user is drag-checking, or wait until user has released the mouse? - if(this.options.checkboxes !== undefined) - this.selectionList = this.options.checkboxes; + this.selectionList = []; + this.checkboxes = Array.isArray(options) ? options : options.checkboxes; - this.attachEvents(this.selectionList); + this.attachEvents(this.checkboxes); // Mouse release should disable the functionality document.body.addEventListener('mouseup', this.dragEnd.bind(this)); - // }}} } DragCheck.prototype.attachEvents = function(checkboxes) { checkboxes.forEach(function(item) { - item.addEventListener('mousedown', this.mouseDown.bind(this)); - item.addEventListener('mouseup', this.dragEnd.bind(this)); - item.addEventListener('mouseenter', this.mouseEnter.bind(this)); + item.addEventListener('mousedown', this.mouseDown.bind(this, item)); + item.addEventListener('mouseup', this.dragEnd.bind(this, item)); + item.addEventListener('mouseenter', this.mouseEnter.bind(this, item)); // For custom (non-checkbox) elements there is no concept of switching state on click // So provide an easy onclick-toggle feature by setting clickToToggle: true @@ -37,15 +32,15 @@ DragCheck.prototype.attachEvents = function(checkboxes) { }; -DragCheck.prototype.mouseDown = function(event) { - this.checkState = !this.getChecked(event.target); - this.selectionList = [event.target]; +DragCheck.prototype.mouseDown = function(element) { + this.checkState = !this.getChecked(element); + this.selectionList = [element]; }; -DragCheck.prototype.dragEnd = function(event) { +DragCheck.prototype.dragEnd = function(element) { if(this.options.deferChangeTrigger) { - this.selectionList.forEach(this.triggerChange); + this.selectionList.forEach(this.triggerChange.bind(this)); } if(this.options.onDragEnd) { @@ -58,6 +53,8 @@ DragCheck.prototype.dragEnd = function(event) { DragCheck.prototype.triggerChange = function(item) { + // TODO: Should we implement states comparison + // and only trigger change event in case of a real change? if(this.options.onChange !== undefined) this.options.onChange(item); else @@ -86,14 +83,15 @@ DragCheck.prototype.getChecked = function(item) { } -DragCheck.prototype.mouseEnter = function(event) { +DragCheck.prototype.mouseEnter = function(element) { if (this.checkState !== null) { - this.selectionList.push(event.target); - - this.selectionList.forEach(function(item) { - // Set checked state of checkbox (or custom element) - this.setChecked(item, this.checkState); - }, this); + // Dragging from 1st -> 2nd checkbox initiates drag-check + // In which case we should retroactively check the 1st box + if(this.selectionList.length === 1) + this.setChecked(this.selectionList[0], this.checkState); + + this.selectionList.push(element); + this.setChecked(element, this.checkState); } };