CSS: Make show/hide/toggle methods a module

dmethvin · timmywil · commit 67d7a2eefee7 · 2015-10-18T12:30:00.000-04:00
Unit test changes some uses of .show() and .hide() to .css( "display", ... ), there was already an implicit assumption in several of the existing tests. Fixes gh-2193 Close gh-2648
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -70,6 +70,7 @@ module.exports = function( grunt ) {
 					ajax: [ "manipulation/_evalUrl", "event/ajax" ],
 					callbacks: [ "deferred" ],
 					css: [ "effects", "dimensions", "offset" ],
+					"css/showHide": [ "effects" ],
 					sizzle: [ "css/hiddenVisibleSelectors", "effects/animatedSelector" ]
 				}
 			}
diff --git a/README.md b/README.md
@@ -81,7 +81,8 @@ Some example modules that can be excluded are:
 - **ajax/xhr**: The XMLHTTPRequest AJAX transport only.
 - **ajax/script**: The `<script>` AJAX transport only; used to retrieve scripts.
 - **ajax/jsonp**: The JSONP AJAX transport only; depends on the ajax/script transport.
-- **css**: The `.css()` method plus non-animated `.show()`, `.hide()` and `.toggle()`. Also removes **all** modules depending on css (including **effects**, **dimensions**, and **offset**).
+- **css**: The `.css()` method. Also removes **all** modules depending on css (including **effects**, **dimensions**, and **offset**).
+- **css/showHide**:  Non-animated `.show()`, `.hide()` and `.toggle()`; can be excluded if you use classes or explicit `.css()` calls to set the `display` property. Also removes the **effects** module.
 - **deprecated**: Methods documented as deprecated but not yet removed.
 - **dimensions**: The `.width()` and `.height()` methods, including `inner-` and `outer-` variations.
 - **effects**: The `.animate()` method and its shorthands such as `.slideUp()` or `.hide("slow")`.
diff --git a/src/css.js b/src/css.js
@@ -14,13 +14,12 @@ define( [
 	"./css/adjustCSS",
 	"./css/addGetHookIf",
 	"./css/support",
-	"./css/showHide",
 
 	"./core/init",
 	"./core/ready",
 	"./selector" // contains
 ], function( jQuery, pnum, access, rmargin, document, rcssNum, rnumnonpx, cssExpand,
-	isHidden, getStyles, swap, curCSS, adjustCSS, addGetHookIf, support, showHide ) {
+	isHidden, getStyles, swap, curCSS, adjustCSS, addGetHookIf, support ) {
 
 var
 
@@ -401,25 +400,6 @@ jQuery.fn.extend( {
 				jQuery.style( elem, name, value ) :
 				jQuery.css( elem, name );
 		}, name, value, arguments.length > 1 );
-	},
-	show: function() {
-		return showHide( this, true );
-	},
-	hide: function() {
-		return showHide( this );
-	},
-	toggle: function( state ) {
-		if ( typeof state === "boolean" ) {
-			return state ? this.show() : this.hide();
-		}
-
-		return this.each( function() {
-			if ( isHidden( this ) ) {
-				jQuery( this ).show();
-			} else {
-				jQuery( this ).hide();
-			}
-		} );
 	}
 } );
 
diff --git a/src/css/showHide.js b/src/css/showHide.js
@@ -1,6 +1,7 @@
 define( [
-	"../data/var/dataPriv"
-], function( dataPriv ) {
+	"../data/var/dataPriv",
+	"../css/var/isHidden"
+], function( dataPriv, isHidden ) {
 
 function showHide( elements, show ) {
 	var display, elem,
@@ -43,6 +44,26 @@ function showHide( elements, show ) {
 	return elements;
 }
 
-return showHide;
+jQuery.fn.extend( {
+	show: function() {
+		return showHide( this, true );
+	},
+	hide: function() {
+		return showHide( this );
+	},
+	toggle: function( state ) {
+		if ( typeof state === "boolean" ) {
+			return state ? this.show() : this.hide();
+		}
+
+		return this.each( function() {
+			if ( isHidden( this ) ) {
+				jQuery( this ).show();
+			} else {
+				jQuery( this ).hide();
+			}
+		} );
+	}
+} );
 
 } );
diff --git a/test/unit/basic.js b/test/unit/basic.js
@@ -54,11 +54,19 @@ QUnit.test( "attributes", function( assert ) {
 
 if ( jQuery.css ) {
 QUnit.test( "css", function( assert ) {
-	assert.expect( 3 );
+	assert.expect( 1 );
 
 	var div = jQuery( "<div/>" ).appendTo( "#qunit-fixture" );
 
 	assert.strictEqual( div.css( "width", "50px" ).css( "width" ), "50px", ".css getter/setter" );
+} );
+}
+
+if ( jQuery.fn.show && jQuery.fn.hide ) {
+QUnit.test( "show/hide", function( assert ) {
+	assert.expect( 2 );
+
+	var div = jQuery( "<div/>" ).appendTo( "#qunit-fixture" );
 
 	div.hide();
 	assert.strictEqual( div.css( "display" ), "none", "div hidden" );
diff --git a/test/unit/css.js b/test/unit/css.js
@@ -471,6 +471,9 @@ QUnit.test( "css(Object) where values are Functions with incoming values", funct
 	jQuery( "#cssFunctionTest" ).remove();
 } );
 
+// .show(), .hide(), can be excluded from the build
+if ( jQuery.fn.show && jQuery.fn.hide ) {
+
 QUnit.test( "show(); hide()", function( assert ) {
 
 	assert.expect( 4 );
@@ -636,6 +639,35 @@ QUnit.test( "show() resolves correct default display for detached nodes", functi
 	span.remove();
 } );
 
+QUnit.test( "hide hidden elements (bug #7141)", function( assert ) {
+	assert.expect( 3 );
+
+	var div = jQuery( "<div style='display:none'></div>" ).appendTo( "#qunit-fixture" );
+	assert.equal( div.css( "display" ), "none", "Element is hidden by default" );
+	div.hide();
+	assert.ok( !jQuery._data( div, "olddisplay" ), "olddisplay is undefined after hiding an already-hidden element" );
+	div.show();
+	assert.equal( div.css( "display" ), "block", "Show a double-hidden element" );
+
+	div.remove();
+} );
+
+QUnit.test( "show() after hide() should always set display to initial value (#14750)", function( assert ) {
+	assert.expect( 1 );
+
+	var div = jQuery( "<div />" ),
+		fixture = jQuery( "#qunit-fixture" );
+
+	fixture.append( div );
+
+	div.css( "display", "inline" ).hide().show().css( "display", "list-item" ).hide().show();
+	assert.equal( div.css( "display" ), "list-item", "should get last set display value" );
+} );
+
+}
+
+if ( jQuery.fn.toggle ) {
+
 QUnit.test( "toggle()", function( assert ) {
 	assert.expect( 9 );
 	var div, oldHide,
@@ -669,18 +701,7 @@ QUnit.test( "toggle()", function( assert ) {
 	jQuery.fn.hide = oldHide;
 } );
 
-QUnit.test( "hide hidden elements (bug #7141)", function( assert ) {
-	assert.expect( 3 );
-
-	var div = jQuery( "<div style='display:none'></div>" ).appendTo( "#qunit-fixture" );
-	assert.equal( div.css( "display" ), "none", "Element is hidden by default" );
-	div.hide();
-	assert.ok( !jQuery._data( div, "olddisplay" ), "olddisplay is undefined after hiding an already-hidden element" );
-	div.show();
-	assert.equal( div.css( "display" ), "block", "Show a double-hidden element" );
-
-	div.remove();
-} );
+}
 
 QUnit.test( "jQuery.css(elem, 'height') doesn't clear radio buttons (bug #1095)", function( assert ) {
 	assert.expect( 4 );
@@ -1128,18 +1149,6 @@ QUnit.test(
 	}
 );
 
-QUnit.test( "show() after hide() should always set display to initial value (#14750)", function( assert ) {
-	assert.expect( 1 );
-
-	var div = jQuery( "<div />" ),
-		fixture = jQuery( "#qunit-fixture" );
-
-	fixture.append( div );
-
-	div.css( "display", "inline" ).hide().show().css( "display", "list-item" ).hide().show();
-	assert.equal( div.css( "display" ), "list-item", "should get last set display value" );
-} );
-
 // Support: IE < 11
 // We have to jump through the hoops here in order to test work with "order" CSS property,
 // that some browsers do not support. This test is not, strictly speaking, correct,
diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
@@ -35,9 +35,9 @@ function testWidth( val, assert ) {
 	$div = jQuery( "#nothiddendiv" );
 	$div.width( val( 30 ) );
 	assert.equal( $div.width(), 30, "Test set to 30 correctly" );
-	$div.hide();
+	$div.css( "display", "none" );
 	assert.equal( $div.width(), 30, "Test hidden div" );
-	$div.show();
+	$div.css( "display", "" );
 	$div.width( val( -1 ) ); // handle negative numbers by setting to 0 #11604
 	assert.equal( $div.width(), 0, "Test negative width normalized to 0" );
 	$div.css( "padding", "20px" );
@@ -88,9 +88,9 @@ function testHeight( val, assert ) {
 	$div = jQuery( "#nothiddendiv" );
 	$div.height( val( 30 ) );
 	assert.equal( $div.height(), 30, "Test set to 30 correctly" );
-	$div.hide();
+	$div.css( "display", "none" );
 	assert.equal( $div.height(), 30, "Test hidden div" );
-	$div.show();
+	$div.css( "display", "" );
 	$div.height( val( -1 ) ); // handle negative numbers by setting to 0 #11604
 	assert.equal( $div.height(), 0, "Test negative height normalized to 0" );
 	$div.css( "padding", "20px" );
@@ -153,7 +153,7 @@ QUnit.test( "innerWidth()", function( assert ) {
 	assert.equal( $div.innerWidth(), 30, "Test with margin and border" );
 	$div.css( "padding", "20px" );
 	assert.equal( $div.innerWidth(), 70, "Test with margin, border and padding" );
-	$div.hide();
+	$div.css( "display", "none" );
 	assert.equal( $div.innerWidth(), 70, "Test hidden div" );
 
 	// reset styles
@@ -188,7 +188,7 @@ QUnit.test( "innerHeight()", function( assert ) {
 	assert.equal( $div.innerHeight(), 30, "Test with margin and border" );
 	$div.css( "padding", "20px" );
 	assert.equal( $div.innerHeight(), 70, "Test with margin, border and padding" );
-	$div.hide();
+	$div.css( "display", "none" );
 	assert.equal( $div.innerHeight(), 70, "Test hidden div" );
 
 	// reset styles
@@ -227,7 +227,7 @@ QUnit.test( "outerWidth()", function( assert ) {
 	assert.equal( $div.outerWidth(), 74, "Test with padding, border and margin without margin option" );
 	$div.css( "position", "absolute" );
 	assert.equal( $div.outerWidth( true ), 94, "Test with padding, border and margin with margin option" );
-	$div.hide();
+	$div.css( "display", "none" );
 	assert.equal( $div.outerWidth( true ), 94, "Test hidden div with padding, border and margin with margin option" );
 
 	// reset styles
@@ -383,7 +383,7 @@ QUnit.test( "outerHeight()", function( assert ) {
 	$div.css( "margin", "10px" );
 	assert.equal( $div.outerHeight(), 74, "Test with padding, border and margin without margin option" );
 	assert.equal( $div.outerHeight( true ), 94, "Test with padding, border and margin with margin option" );
-	$div.hide();
+	$div.css( "display", "none" );
 	assert.equal( $div.outerHeight( true ), 94, "Test hidden div with padding, border and margin with margin option" );
 
 	// reset styles
diff --git a/test/unit/queue.js b/test/unit/queue.js
@@ -231,6 +231,8 @@ QUnit.asyncTest( "fn.promise( \"queue\" ) - called whenever last queue function
 	foo.dequeue( "queue" );
 } );
 
+if ( jQuery.fn.animate ) {
+	
 QUnit.asyncTest( "fn.promise( \"queue\" ) - waits for animation to complete before resolving", 2, function( assert ) {
 	var foo = jQuery( "#foo" ),
 		test = 1;
@@ -251,6 +253,7 @@ QUnit.asyncTest( "fn.promise( \"queue\" ) - waits for animation to complete befo
 	} );
 
 } );
+}
 
 QUnit.test( ".promise(obj)", function( assert ) {
 	assert.expect( 2 );

Original file line number	Diff line number	Diff line change
`@@ -70,6 +70,7 @@ module.exports = function( grunt ) {`
`70`	`70`	`ajax: [ "manipulation/_evalUrl", "event/ajax" ],`
`71`	`71`	`callbacks: [ "deferred" ],`
`72`	`72`	`css: [ "effects", "dimensions", "offset" ],`
	`73`	`+ "css/showHide": [ "effects" ],`
`73`	`74`	`sizzle: [ "css/hiddenVisibleSelectors", "effects/animatedSelector" ]`
`74`	`75`	`}`
`75`	`76`	`}`