Closes #9 - shows the dropdown when the original select label is clicked

gustavohenke · Mar 11, 2013 · 8cad4e6 · 8cad4e6
1 parent 4be9cb8
commit 8cad4e6
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -29,13 +29,77 @@ <h2>Basic select element</h2>
 				</div>
 				<div class="span4">
 					<div class="control-group">
-						<label class="control-label">Turns this:</label>
-						<div class="controls" id="select-basic-container1"></div>
+						<label class="control-label" for="select-basic1">Turns this:</label>
+						<div class="controls" id="select-basic-container1">
+							<select class="languages input-block-level" id="select-basic1">
+								<option value="">Select an option</option>
+								<option value="Ada">Ada</option>
+								<option value="C">C</option>
+								<option value="C#">C#</option>
+								<option value="C++">C++</option>
+								<option value="C++">CoffeeScript</option>
+								<option value="Dart">Dart</option>
+								<option value="Delphi">Delphi</option>
+								<option value="Delphi">Erlang</option>
+								<option value="F#">F#</option>
+								<option value="FORTRAN">FORTRAN</option>
+								<option value="Go">Go</option>
+								<option value="Haskell">Haskell</option>
+								<option value="Java">Java</option>
+								<option value="JavaScript">JavaScript</option>
+								<option value="Kotlin">Kotlin</option>
+								<option value="Lisp">Lisp</option>
+								<option value="Lua">Lua</option>
+								<option value="MATLAB">MATLAB</option>
+								<option value="Objective-C">Objective-C</option>
+								<option value="Pascal">Pascal</option>
+								<option value="Perl">Perl</option>
+								<option value="PHP">PHP</option>
+								<option value="Python">Python</option>
+								<option value="Ruby">Ruby</option>
+								<option value="Scala">Scala</option>
+								<option value="Shell">Shell</option>
+								<option value="Tcl">Tcl</option>
+								<option value="Visual Basic">Visual Basic</option>
+							</select>
+						</div>
 					</div>
 
 					<div class="control-group">
-						<label class="control-label">Into this:</label>
-						<div class="controls" id="bselect-basic-container1"></div>
+						<label class="control-label" for="bselect-basic1">Into this:</label>
+						<div class="controls" id="bselect-basic-container1">
+							<select class="languages input-block-level" id="bselect-basic1">
+								<option value="">Select an option</option>
+								<option value="Ada">Ada</option>
+								<option value="C">C</option>
+								<option value="C#">C#</option>
+								<option value="C++">C++</option>
+								<option value="C++">CoffeeScript</option>
+								<option value="Dart">Dart</option>
+								<option value="Delphi">Delphi</option>
+								<option value="Delphi">Erlang</option>
+								<option value="F#">F#</option>
+								<option value="FORTRAN">FORTRAN</option>
+								<option value="Go">Go</option>
+								<option value="Haskell">Haskell</option>
+								<option value="Java">Java</option>
+								<option value="JavaScript">JavaScript</option>
+								<option value="Kotlin">Kotlin</option>
+								<option value="Lisp">Lisp</option>
+								<option value="Lua">Lua</option>
+								<option value="MATLAB">MATLAB</option>
+								<option value="Objective-C">Objective-C</option>
+								<option value="Pascal">Pascal</option>
+								<option value="Perl">Perl</option>
+								<option value="PHP">PHP</option>
+								<option value="Python">Python</option>
+								<option value="Ruby">Ruby</option>
+								<option value="Scala">Scala</option>
+								<option value="Shell">Shell</option>
+								<option value="Tcl">Tcl</option>
+								<option value="Visual Basic">Visual Basic</option>
+							</select>
+						</div>
 					</div>
 				</div>
 				<div class="span8">
@@ -46,38 +110,6 @@ <h2>Basic select element</h2>
 			</div>
 		</div>
 
-		<select class="languages input-block-level">
-			<option value="">Select an option</option>
-			<option value="Ada">Ada</option>
-			<option value="C">C</option>
-			<option value="C#">C#</option>
-			<option value="C++">C++</option>
-			<option value="C++">CoffeeScript</option>
-			<option value="Dart">Dart</option>
-			<option value="Delphi">Delphi</option>
-			<option value="Delphi">Erlang</option>
-			<option value="F#">F#</option>
-			<option value="FORTRAN">FORTRAN</option>
-			<option value="Go">Go</option>
-			<option value="Haskell">Haskell</option>
-			<option value="Java">Java</option>
-			<option value="JavaScript">JavaScript</option>
-			<option value="Kotlin">Kotlin</option>
-			<option value="Lisp">Lisp</option>
-			<option value="Lua">Lua</option>
-			<option value="MATLAB">MATLAB</option>
-			<option value="Objective-C">Objective-C</option>
-			<option value="Pascal">Pascal</option>
-			<option value="Perl">Perl</option>
-			<option value="PHP">PHP</option>
-			<option value="Python">Python</option>
-			<option value="Ruby">Ruby</option>
-			<option value="Scala">Scala</option>
-			<option value="Shell">Shell</option>
-			<option value="Tcl">Tcl</option>
-			<option value="Visual Basic">Visual Basic</option>
-		</select>
-
 		<script src="external/less.js"></script>
 		<script src="external/jquery.js"></script>
 		<script src="src/bselect.js"></script>

diff --git a/src/bselect.js b/src/bselect.js
@@ -369,7 +369,7 @@
 		$elem.hide();
 
 		// Event binding
-		$( document ).click(function( e ) {
+		$( window ).click(function( e ) {
 			if ( container.find(".bselect-dropdown").is(":visible") && !$( ".bselect-dropdown, .bselect-dropdown *", container ).find( e.target ).length ) {
 				_callMethod( $elem, "hide" );
 			}
@@ -384,6 +384,11 @@
 			var index = $elem.data("bselect").itemsMap[ this.value ];
 			_callMethod( $elem, "select", index );
 		}).trigger("change.bselect");
+
+		$( document ).on("click", "label[for='" + $elem.attr("id") + "']", function( e ) {
+			_callMethod( $elem, "show" );
+			return false;
+		});
 	}
 
 	$.fn.bselect = function( arg ) {

diff --git a/support/scripts/example.js b/support/scripts/example.js
@@ -1,10 +1,7 @@
 (function( $ ) {
 
 	$( document ).ready(function() {
-		var select = $(".languages").remove();
-		$("#select-basic-container1").append( select.clone().show() );
-
-		$("#bselect-basic-container1").append( select ).find(".languages").bselect();
+		$("#bselect-basic1").bselect();
 
 		// Clean up the mess with imported files
 		if ( window.localStorage !== undefined ) {

diff --git a/tests/spec/any.js b/tests/spec/any.js
@@ -10,7 +10,7 @@
 		}
 	});
 
-	test( "General", function() {
+	test( "general", 1, function() {
 		this.select.bselect();
 		this.select.bselect();
 
@@ -19,4 +19,16 @@
 		this.select.bselect("destroy");
 	});
 
+	test( "instantiation", 2, function() {
+		this.select.val("option1").bselect({
+			animationDuration: 0
+		});
+		this.bselect = this.select.bselect("element");
+
+		strictEqual( this.bselect.find(".bselect-option.active").length, 1, "should select the current option on instantiation (issue #11)" );
+
+		$("<label for='select-1' />").appendTo("body").trigger("click");
+		ok( this.bselect.is(".open"), "when the original select label is clicked, should show the dropdown (issue #9)" );
+	})
+
 })( jQuery );
diff --git a/tests/spec/single.js b/tests/spec/single.js
@@ -11,7 +11,7 @@
 		}
 	});
 
-	test( "markup structure", 6, function() {
+	test( "markup structure", 5, function() {
 		strictEqual( this.bselect.length, 1, "bselect exists" );
 		ok( this.bselect.is(".bselect"), "bselect is .bselect" );
 		strictEqual( this.bselect.find(".bselect-option").length, 3, "has the same number of items than the original select" );
@@ -22,11 +22,6 @@
 
 		ok( this.bselect.find(".bselect-message").is(":visible"), "should show a message telling that no options exist (issue #7)" );
 		options.appendTo( this.select );
-
-		this.select.bselect("destroy").val("option1").bselect();
-		this.bselect = this.select.bselect("element");
-
-		strictEqual( this.bselect.find(".bselect-option.active").length, 1, "should select the current option on instantiation (issue #11)" );
 	});
 
 	test( "native events", 1, function() {