Browse Source

HUE-197. Improvements for SelectWithOther filter.

* Add support for specifying which options are "other" options.
* Add support for specifying elements that are containers of inputs.
Aaron Newton 15 years ago
parent
commit
aa0603bf1c

+ 26 - 15
apps/jframegallery/src/jframegallery/templates/select_with_other.mako

@@ -15,19 +15,30 @@
 ## limitations under the License.
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html>
-	<head>
-		<title>Select With Other</title>
-	</head>
-	<body>
-		<div class="jframe_padded">
-                        <div data-filters="SelectWithOther">
-                                <select>
-                                <option>A</option>
-                                <option>B</option>
-                                <option value="__other__">Other</option>
-                                </select>
-                                <input name="other" class="ccs-hidden">
-                        </div>
-		</div>
-	</body>
+  <head>
+    <title>Select With Other</title>
+  </head>
+  <body>
+    <div class="jframe_padded">
+      <div data-filters="SelectWithOther">
+        <select>
+        <option>A</option>
+        <option>B</option>
+        <option value="__other__">Other</option>
+        </select>
+        <input name="other" class="ccs-hidden"  data-filters="OverText" alt="Enter a custom value">
+      </div>
+      <hr/>
+      <div data-filters="SelectWithOther" data-other-input=".otherContainer" data-other-options="option[value=null]">
+        <select>
+        <option>A</option>
+        <option>B</option>
+        <option value="null">Other</option>
+        </select>
+        <div class="otherContainer ccs-hidden">
+          <input name="other" data-filters="OverText" alt="Enter a custom value">
+        <div>
+      </div>
+    </div>
+  </body>
 </html>

+ 33 - 22
desktop/core/static/js/Source/BehaviorFilters/Behavior.SelectWithOther.js

@@ -24,27 +24,38 @@ script: Behavior.SelectWithOther.js
 
 Behavior.addGlobalFilters({
 	SelectWithOther: function(element, methods) {
-                //get the 'other' input
-                var other = element.getElement('input').set('alt', 'Enter a custom value').addClass('required').addDataFilter('OverText').hide();
-                //create hint text
-                var ot = new OverText(other);
-                //get the select input
-                var sel = element.getElement('select');
-                //when the select changes, if the user chooses "other"
-                //reveal the input, enable the overtext
-                sel.addEvent('change', function() {
-                        if (sel.getSelected()[0].get('value') == '__other__') {
-                                other.removeClass('ignoreValidation').reveal().get('reveal').chain(function(){
-                                        ot.enable();
-                                });
-                        //else hide and disable the input
-                        } else {
-                                ot.disable();
-                                other.addClass('ignoreValidation').dissolve();
-                        }
-                });
-                this.markForCleanup(element, function(){
-                        ot.destroy();
-                });
+		//get the 'other' input / container
+		var other = element.getElement(element.get('data', 'other-input') || 'input');
+		var input = other;
+		var otherOptions = element.getElements(element.get('data', 'other-options') || 'option[value=__other__]');
+		//if the "other" element is not an input, it must be a container that contains one
+		if (!['input', 'select', 'textarea'].contains(other.get('tag'))) input = other.getElement('input, textarea');
+		other.hide();
+		//get the select input
+		var sel = element.getElement('select');
+		//when the select changes, if the user chooses "other"
+		//reveal the input, enable the overtext
+		sel.addEvent('change', function() {
+			var ot = input.retrieve('OverText');
+			if (otherOptions.contains(sel.getSelected()[0])) {
+				input.removeClass('ignoreValidation');
+				if (ot) {
+					other.get('reveal').chain(function(){
+						ot.enable();
+					});
+				}
+				other.reveal();
+			//else hide and disable the input
+			} else {
+				if (ot) ot.disable();
+				input.addClass('ignoreValidation');
+				other.dissolve();
+			}
+		});
+		if (ot) {
+			this.markForCleanup(element, function(){
+				ot.destroy();
+			});
+		}
 	}
 });