Initial commit

Signed-off-by: Oleg Bulatov <[email protected]>

.gitignore

@@ -0,0 +1 @@
+node_modules/

LICENSE

@@ -0,0 +1,20 @@
+Copyright (C) 2013-2014  Oleg Bulatov
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject
+to the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR
+ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,16 @@
+# CheckBox Group
+
+Allows to construct analog of `<select multiple>` using sequence of `<input type="checkbox">`.
+
+**Demo** available at <http://dmage.github.io/checkboxgroup/>.
+
+## Usage
+
+    $(function () {
+        $('.checkboxes').checkboxgroup();
+    });
+
+    <div class="checkboxes">
+        <label><input type="checkbox"> Hello</label>
+        <label><input type="checkbox"> World</label>
+    </div>

checkboxgroup.jquery.js

@@ -0,0 +1,204 @@
+/*global document, define, jQuery */
+'use strict';
+(function (factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery'], factory);
+    } else {
+        factory(jQuery);
+    }
+}(function ($) {
+    var doIt = function (opts) {
+        var $box = $(this),
+            $items = $('input[type="checkbox"]', $box),
+            labels = [],
+            topLevelObjects = [],
+            $labels,
+            $topLevelObjects,
+            prevIdx = 0,
+            setChecked,
+            getInputForObject,
+            mouseActive = false,
+            mouseMoved,
+            mouseChecked,
+            startIdx;
+
+        if (!opts) {
+            opts = {};
+        }
+
+        $items.each(function () {
+            var $this = $(this),
+                $label;
+
+            if (this.id) {
+                $label = $('label[for="' + this.id + '"]');
+            }
+            if (!$label) {
+                $label = $this.closest('label');
+            }
+            if ($label) {
+                labels.push($label);
+                topLevelObjects.push($label);
+                if ($this.parents().index($label) === -1) {
+                    topLevelObjects.push($this);
+                }
+            } else {
+                topLevelObjects.push($this);
+            }
+        });
+        $labels = $(labels).map(function () { return this.toArray(); });
+        $topLevelObjects = $(topLevelObjects).map(function () { return this.toArray(); });
+
+        setChecked = function (begin, end, checked) {
+            $items.slice(begin, end).each(function () {
+                if (this.checked !== checked) {
+                    $(this).trigger('click');
+                }
+            });
+        };
+
+        getInputForObject = function (obj) {
+            if (obj.nodeName === "INPUT") {
+                return $(obj);
+            }
+
+            var forAttr = $(obj).attr('for'),
+                input = document.getElementById(forAttr);
+            if (!input) {
+                input = $('input[type="checkbox"]', obj).get(0);
+            }
+            return $(input);
+        };
+
+        $items.click(function (e) {
+            var idx = $items.index(this),
+                a,
+                b;
+
+            if (e.shiftKey) {
+                if (idx <= prevIdx) {
+                    a = idx;
+                    b = prevIdx;
+                } else {
+                    a = prevIdx;
+                    b = idx;
+                }
+                setChecked(a, b + 1, this.checked);
+            }
+            prevIdx = idx;
+
+            e.stopPropagation();
+        });
+
+        $labels.click(function (e) {
+            if (e.originalEvent.detail <= 1) {
+                return;
+            }
+
+            getInputForObject(this).click();
+            e.preventDefault();
+        });
+
+        $topLevelObjects.mousedown(function (e) {
+            var $input = getInputForObject(this),
+                idx = $items.index($input);
+
+            startIdx = idx;
+
+            mouseChecked = !$input.get(0).checked;
+            mouseMoved = false;
+            mouseActive = true;
+
+            e.preventDefault();
+        });
+
+        $box.mouseover(function (e) {
+            if (!mouseActive) {
+                return;
+            }
+
+            var $target = $(e.target),
+                idx = $items.index($target),
+                findRelated,
+                $input,
+                $label,
+                inputIdx,
+                labelIdx;
+
+            findRelated = function ($target, $items) {
+                var $ret = $target.find($items).add($target.closest($items));
+                if ($ret.length === 0 && opts.itemSelector) {
+                    $ret = $target.closest(opts.itemSelector).find($items);
+                }
+                return $ret;
+            };
+
+            if (idx === -1) {
+                $input = findRelated($target, $items);
+                $label = findRelated($target, $labels);
+                if ($input.length > 1 || $label.length > 1) {
+                    return; // ambiguous target
+                }
+                if ($input.length === 1 && $label.length === 1) {
+                    inputIdx = $items.index($input);
+                    labelIdx = $labels.index($label);
+                    if (inputIdx === labelIdx) {
+                        idx = inputIdx;
+                    }
+                } else if ($input.length === 1) {
+                    idx = $items.index($input);
+                } else if ($label.length === 1) {
+                    idx = $labels.index($label);
+                }
+            }
+            if (idx === -1) {
+                return;
+            }
+
+            if (!mouseMoved) {
+                prevIdx = startIdx;
+                mouseMoved = true;
+            }
+
+            if (prevIdx >= startIdx && idx >= prevIdx) {
+                // console.log('move down');
+                setChecked(prevIdx, idx + 1, mouseChecked);
+            } else if (prevIdx <= startIdx && idx < prevIdx) {
+                // console.log('move up');
+                setChecked(idx, prevIdx + 1, mouseChecked);
+            } else if (prevIdx >= startIdx && idx < prevIdx) {
+                // console.log('recover up');
+                if (idx >= startIdx) {
+                    setChecked(idx + 1, prevIdx + 1, !mouseChecked);
+                } else {
+                    setChecked(startIdx + 1, prevIdx + 1, !mouseChecked);
+                    setChecked(idx, startIdx + 1, mouseChecked);
+                }
+            } else if (prevIdx <= startIdx && idx > prevIdx) {
+                // console.log('recover down');
+                if (idx <= startIdx) {
+                    setChecked(prevIdx, idx, !mouseChecked);
+                } else {
+                    setChecked(prevIdx, startIdx, !mouseChecked);
+                    setChecked(startIdx, idx + 1, mouseChecked);
+                }
+            }
+
+            prevIdx = idx;
+        });
+
+        $(document).mouseup(function () {
+            if (!mouseActive) {
+                return;
+            }
+
+            mouseActive = false;
+        });
+    };
+
+    $.fn.checkboxgroup = function (opts) {
+        return this.each(function () {
+            doIt.call(this, opts);
+        });
+    };
+}));

index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset="utf-8">
+<script src="https://yastatic.net/jquery/2.1.1/jquery.min.js"></script>
+<script src="checkboxgroup.jquery.js"></script>
+<style>
+.tag {
+    background: rgba(0, 255, 0, 0.05);
+    padding: 3px;
+    display: inline-block;
+    border: 1px solid rgba(0, 51, 0, 0.3);
+}
+.multiselect .group > div {
+    padding: 5px 7px;
+}
+.multiselect input {
+    margin: 0.2em 0.5em 0.2em 0.2em;
+}
+.multiselect label {
+    background: rgba(0, 0, 0, 0.1);
+}
+.group {
+    margin: 0 0 1em 2em;
+    border: 1px solid #ccc;
+}
+.highlight {
+    background: #cfc;
+}
+</style>
+<script>
+$(function() {
+    $('.multiselect').checkboxgroup();
+
+    // example of click handler: highlight selected rows
+    $('.multiselect input').click(function() {
+        $(this).closest('div')[this.checked ? 'addClass' : 'removeClass']('highlight');
+    });
+
+    // checkbox may be checked after page refresh, add corresponding class
+    $('.multiselect input').each(function() {
+        if (this.checked) {
+            $(this).closest('div').addClass('highlight');
+        }
+    });
+});
+</script>
+</head>
+
+<body>
+    <h1><span class="tag">&lt;label&gt;<span class="tag">&lt;input&gt;</span> ...&lt;/label&gt;</span></h1>
+    <div class="multiselect">
+        <div class="group">
+            <div><label><input type="checkbox">Lorem <b>ipsum</b> dolor sit amet,</label></div>
+            <div><label><input type="checkbox">consectetuer adipiscing elit,</label></div>
+            <div><label><input type="checkbox">sed diam nonummy nibh euismod tincidunt ut laoreet</label></div>
+            <div><label><input type="checkbox">dolore magna aliquam erat volutpat.</label></div>
+            <div><label><input type="checkbox">Ut wisi enim ad minim veniam,</label></div>
+            <div><label><input type="checkbox">quis nostrud exerci tation ullamcorper suscipit</label></div>
+        </div>
+        <div class="group">
+            <div><label><input type="checkbox">lobortis nisl ut aliquip ex ea commodo consequat.</label></div>
+            <div><label><input type="checkbox">Duis autem vel eum iriure dolor in hendrerit</label></div>
+            <div><label><input type="checkbox">in vulputate velit esse molestie consequat,</label></div>
+            <div><label><input type="checkbox">vel illum dolore eu feugiat nulla facilisis at vero</label></div>
+            <div><label><input type="checkbox">eros et accumsan et iusto odio dignissim qui blandit</label></div>
+            <div><label><input type="checkbox">praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</label></div>
+        </div>
+    </div>
+
+    <h1><span class="tag">&lt;input&gt;</span> <span class="tag">&lt;label&gt;...&lt;/label&gt;</span></h1>
+    <div class="multiselect">
+        <div class="group">
+            <div><input id="v1_01" type="checkbox"> ... <label for="v1_01">Lorem <b>ipsum</b> dolor sit amet,</label></div>
+            <div><input id="v1_02" type="checkbox"> ... <label for="v1_02">consectetuer adipiscing elit,</label></div>
+            <div><input id="v1_03" type="checkbox"> ... <label for="v1_03">sed diam nonummy nibh euismod tincidunt ut laoreet</label></div>
+            <div><input id="v1_04" type="checkbox"> ... <label for="v1_04">dolore magna aliquam erat volutpat.</label></div>
+            <div><input id="v1_05" type="checkbox"> ... <label for="v1_05">Ut wisi enim ad minim veniam,</label></div>
+            <div><input id="v1_06" type="checkbox"> ... <label for="v1_06">quis nostrud exerci tation ullamcorper suscipit</label></div>
+        </div>
+        <div class="group">
+            <div><input id="v1_07" type="checkbox"> ... <label for="v1_07">lobortis nisl ut aliquip ex ea commodo consequat.</label></div>
+            <div><input id="v1_08" type="checkbox"> ... <label for="v1_08">Duis autem vel eum iriure dolor in hendrerit</label></div>
+            <div><input id="v1_09" type="checkbox"> ... <label for="v1_09">in vulputate velit esse molestie consequat,</label></div>
+            <div><input id="v1_10" type="checkbox"> ... <label for="v1_10">vel illum dolore eu feugiat nulla facilisis at vero</label></div>
+            <div><input id="v1_11" type="checkbox"> ... <label for="v1_11">eros et accumsan et iusto odio dignissim qui blandit</label></div>
+            <div><input id="v1_12" type="checkbox"> ... <label for="v1_12">praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</label></div>
+        </div>
+    </div>
+</body>
+
+</html>

package.json

@@ -0,0 +1,32 @@
+{
+    "name": "checkboxgroup",
+    "version": "1.0.0",
+    "description": "jQuery plugin for constructing analog of multiselect using checkboxes.",
+    "keywords": [
+        "jquery-plugin",
+        "multiselect",
+        "checkbox"
+    ],
+    "homepage": "https://github.com/dmage/checkboxgroup",
+    "bugs": {
+        "url": "https://github.com/dmage/checkboxgroup/issues"
+    },
+    "license": "MIT",
+
+    "author": {
+        "name": "Oleg Bulatov",
+        "email": "[email protected]"
+    },
+
+    "repository": {
+        "type": "git",
+        "url" : "https://github.com/dmage/checkboxgroup"
+    },
+
+    "dependencies": {
+        "jquery": ">=1.9.0"
+    },
+    "devDependencies": {
+        "jslint": ">=0.3.0"
+    }
+}