Skip to content

Commit 08a74d0

Browse files
scarlacscarlac
committed
Version 2.0
1 parent 7c44341 commit 08a74d0

14 files changed

+338
-163
lines changed

‎demo/css/normalize.min.css

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎demo/demo.html

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎dist/dragcheck.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/jquery.dragcheck.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dragcheck-jquery.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var DragCheck = require('./dragcheck').DragCheck;
2+
3+
(function($) {
4+
$.fn.dragCheck = function (options) {
5+
options = options || {};
6+
options.checkboxes = $(this).toArray();
7+
return new DragCheck(options);
8+
}
9+
})(window.jQuery);

‎dragcheck-vanilla.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var DragCheck = require('./dragcheck').DragCheck;
2+
3+
window.DragCheck = DragCheck;

‎dragcheck.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
"use strict";
2+
3+
function DragCheck(options) {
4+
this.options = options || {};
5+
this.triggerChangeOnDragEnd = false;
6+
this.checkState = null;
7+
// Array passed is a shorthand for appling drag check to a list of checboxes
8+
this.selectionList = Array.isArray(options) ? options : [];
9+
10+
// Constructor {{{
11+
// Should "change" be triggered WHILE user is drag-checking, or wait until user has released the mouse?
12+
if(this.options.checkboxes !== undefined)
13+
this.selectionList = this.options.checkboxes;
14+
15+
this.attachEvents(this.selectionList);
16+
17+
// Mouse release should disable the functionality
18+
document.body.addEventListener('mouseup', this.dragEnd.bind(this));
19+
// }}}
20+
}
21+
22+
DragCheck.prototype.attachEvents = function(checkboxes) {
23+
checkboxes.forEach(function(item) {
24+
item.addEventListener('mousedown', this.mouseDown.bind(this));
25+
item.addEventListener('mouseup', this.dragEnd.bind(this));
26+
item.addEventListener('mouseenter', this.mouseEnter.bind(this));
27+
28+
// For custom (non-checkbox) elements there is no concept of switching state on click
29+
// So provide an easy onclick-toggle feature by setting clickToToggle: true
30+
if(this.options.clickToToggle) {
31+
item.addEventListener('click', function(event) {
32+
var flippedState = !this.getChecked(item);
33+
this.setChecked(item, flippedState);
34+
}.bind(this));
35+
}
36+
}, this);
37+
};
38+
39+
40+
DragCheck.prototype.mouseDown = function(event) {
41+
this.checkState = !this.getChecked(event.target);
42+
this.selectionList = [event.target];
43+
};
44+
45+
46+
DragCheck.prototype.dragEnd = function(event) {
47+
if(this.options.deferChangeTrigger) {
48+
this.selectionList.forEach(this.triggerChange);
49+
}
50+
51+
if(this.options.onDragEnd) {
52+
this.options.onDragEnd(this.selectionList);
53+
}
54+
55+
this.checkState = null;
56+
this.selectionList = [];
57+
};
58+
59+
60+
DragCheck.prototype.triggerChange = function(item) {
61+
if(this.options.onChange !== undefined)
62+
this.options.onChange(item);
63+
else
64+
item.dispatchEvent(new Event('change')); // Force the event to trigger "change", so live feedback can be given
65+
};
66+
67+
68+
// Default to checkboxes which have a 'checked' property.
69+
// Can be customized to work with table cells or other custom elements
70+
DragCheck.prototype.setChecked = function(item, state) {
71+
if(this.options.setChecked) {
72+
this.options.setChecked(item, state);
73+
} else {
74+
item.checked = state;
75+
}
76+
77+
// Unless requested, we dispatch an 'onchange' event
78+
// now that we've changed the element
79+
if(!this.options.deferChangeTrigger)
80+
this.triggerChange(item);
81+
}
82+
83+
84+
DragCheck.prototype.getChecked = function(item) {
85+
return this.options.getChecked ? this.options.getChecked(item) : item.checked;
86+
}
87+
88+
89+
DragCheck.prototype.mouseEnter = function(event) {
90+
if (this.checkState !== null) {
91+
this.selectionList.push(event.target);
92+
93+
this.selectionList.forEach(function(item) {
94+
// Set checked state of checkbox (or custom element)
95+
this.setChecked(item, this.checkState);
96+
}, this);
97+
}
98+
};
99+
100+
exports.DragCheck = DragCheck;

‎examples/jquery/index.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>Drag-check example</title>
7+
8+
<style type="text/css">
9+
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
10+
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
11+
12+
body { font: 11px verdana; padding: 20px; }
13+
.table-demo { width: 300px; margin: 0 0 30px; border: 1px solid #ccc; border-collapse: collapse; }
14+
.table-demo td { border-bottom: 1px solid #ccc; padding: 5px }
15+
.canvas-demo { width: 250px; margin: 0 0 30px }
16+
input[type=checkbox] { margin: 0; transition: transform 0.1s ease-out; vertical-align: bottom }
17+
</style>
18+
</head>
19+
<body>
20+
<h1>Drag over checkboxes to check</h1>
21+
<p>
22+
Click-and-drag checkbox state plugin.<br/>
23+
Useful for lists where you user wants to select many intervals, but not entire table.<br/>
24+
Once you get used to this feature in a system with many lists, it's hard to live without.<br/>
25+
</p>
26+
27+
<script type="text/javascript">
28+
var lipsum = [
29+
'Liber consequat eorum ipsum elit sed. Lius claritatem velit videntur blandit littera',
30+
'Lectorum quis vel erat exerci ipsum.',
31+
'Nihil quinta nisl parum fiant congue.',
32+
'Dolore duis liber litterarum parum cum. ',
33+
'Quarta lorem eum saepius nonummy cum.',
34+
'In eorum lectorum vero iusto mazim. Veniam augue non feugiat mirum odio. '
35+
];
36+
</script>
37+
38+
<table class="table-demo">
39+
Table:<span id="table_selection"></span><br/>
40+
<script type="text/javascript">
41+
for(var i = 0; i < 10; i++) {
42+
document.write('<tr><td><input type="checkbox"></td><td>'+i+'</td><td>'+lipsum[parseInt(Math.random()*lipsum.length)]+'</td></tr>');
43+
}
44+
</script>
45+
46+
</table>
47+
48+
<div class="canvas-demo">
49+
Draw here:<br/>
50+
<script type="text/javascript">
51+
for(var i = 0; i < 20; i++) {
52+
for(var j = 0; j < 20; j++) {
53+
document.write('<input type="checkbox">');
54+
}
55+
document.write('<br>');
56+
}
57+
</script>
58+
</div>
59+
60+
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
61+
<script src="../../dist/jquery.dragcheck.js"></script>
62+
<script src="index.js"></script>
63+
</body>
64+
</html>

‎examples/jquery/index.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// Classic table/convenience example
2+
$('.table-demo td')
3+
.change(function(event) {
4+
// Add an interesting effect to showcase when events are triggered
5+
// Tip: Try setting 'deferChangeTrigger': true and see what happens
6+
var input = $(this).parent().find('input');
7+
$(this).parent().find('td').css('background-color', input.prop('checked') ? 'green' : '');
8+
}).dragCheck({
9+
'deferChangeTrigger': false,
10+
'setChecked': function(el, state) { $(el).parent().find('input').prop('checked', state); },
11+
'getChecked': function(el) { return $(el).parent().find('input').prop('checked'); },
12+
'clickToToggle': true
13+
});
14+
15+
16+
// Drawing demo
17+
$('.canvas-demo input').dragCheck({
18+
'deferChangeTrigger': false,
19+
'onChange': function(element) {
20+
element.style.transform = 'scale(2)';
21+
},
22+
'onDragEnd': function(items) {
23+
items.forEach(function(item, index) {
24+
setTimeout(function() {
25+
item.style.transform = ''
26+
}, index * 10);
27+
});
28+
}
29+
});

0 commit comments

Comments
 (0)