get the latest version of gentleSelect with disallowEmpty support

shawnchin · May 2, 2012 · d5dc478 · d5dc478
1 parent 0642a4e
commit d5dc478
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 4 deletions.
diff --git a/gentleSelect/jquery-gentleSelect-min.js b/gentleSelect/jquery-gentleSelect-min.js
diff --git a/gentleSelect/jquery-gentleSelect.css b/gentleSelect/jquery-gentleSelect.css
@@ -42,20 +42,36 @@
 .gentleselect-dialog > ul > li {
     margin: 0;
     padding: 3px 20px 3px 25px;
-
     cursor: pointer;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 .gentleselect-dialog > ul > li.selected {
     font-weight: bold;
     color: #369;
     background-color: #eee;
 }
+
 .gentleselect-dialog > ul > li.gentleselect-dummy:hover { background-color: #fff; }
 .gentleselect-dialog > ul > li:hover {
     background-color: #69c;
     color: #fff;
 }
 
+/* override CSS for lone selected item when disallowEmpty=true */
+.gentleselect-dialog > ul > li.sole-selected {
+    cursor: default;
+}
+.gentleselect-dialog > ul > li.sole-selected:hover {
+    color: #369;
+    background-color: #eee;
+}
+
+
 .gentleselect-dialog > .gentleselect-title {
     display: block;
     text-align: center;

diff --git a/gentleSelect/jquery-gentleSelect.js b/gentleSelect/jquery-gentleSelect.js
@@ -33,6 +33,7 @@
         closeSpeed      : 400,
         openEffect      : "slide",
         closeEffect     : "slide",
+        disallowEmpty   : false,
         hideOnMouseOut  : true
     }
 
@@ -98,15 +99,39 @@
         }
         return arr.get().join(", ");
     }
+
+    function updateState(c, o) {
+        var c = $(c);
+        if (c.attr("multiple") && o.disallowEmpty) { 
+            var all_items = c.data("dialog").find("li"),
+                selected_items = all_items.filter(".selected");
+
+            // mark element if only one selected
+            all_items.removeClass("sole-selected");
+            if (selected_items.length == 1) {
+              selected_items.addClass("sole-selected");
+            }
+        }
+    }
 
     var methods = {
         init : function(options) {
-            var o = $.extend({}, defaults, options);
+            var o = $.extend({}, defaults, options),
+                select_items = this.find("option");
 
             if (hasError(this, o)) { return this; }; // check for errors
             optionOverrides(this, o); // 
             this.hide(); // hide original select box
 
+            if (this.attr("multiple") && o.disallowEmpty)
+            {
+                if (select_items.length == 0) {
+                    $.error("gentleSelect: disallowEmpty conflicts with empty <select>");
+                }
+                // default to first item if none selected
+                if (this[0].selectedIndex < 0) { this[0].selectedIndex = 0; }
+            }
+
             // initialise <span> to replace select box
             label_text = getSelectedAsText(this.find(":selected"), o);
             var label = $("<span class='gentleselect-label'>" + label_text + "</span>")
@@ -120,7 +145,7 @@
 
             // generate list of options
             var ul = $("<ul></ul>");
-            this.find("option").each(function() { 
+            select_items.each(function() { 
                 var li = $("<li>" + $(this).text() + "</li>")
                     .data("value", $(this).attr("value"))
                     .data("name", $(this).text())
@@ -188,6 +213,7 @@
             // ESC key should hide all dialog boxes
             $(document).bind("keyup.gentleselect", event_handlers.keyUp);
 
+            updateState(this, o);
             return this;
         },
 
@@ -208,6 +234,7 @@
             var label = getSelectedAsText(this.find(":selected"), opts);
             this.data("label").text(label);
 
+            updateState(this, opts);
             return this;
         }
     };
@@ -263,12 +290,19 @@
                 var label = $this.data("label")
 
                 if ($this.data("root").attr("multiple")) {
+                    if (opts.disallowEmpty 
+                          && clicked.hasClass("selected") 
+                          && (root.find(":selected").length == 1)) {
+                        // sole item clicked. For now, do nothing.
+                        return;
+                    }
                     clicked.toggleClass("selected");
                     var s = $this.find("li.selected");
                     label.text(getSelectedAsText(s, opts));
                     var v = s.map(function(){ return $(this).data("value"); });
                     // update actual selectbox and trigger change event
                     root.val(v.get()).trigger("change");
+                    updateState(root, opts);
                 } else {
                     $this.find("li.selected").removeClass("selected");
                     clicked.addClass("selected");