From: Timo Tijhof <ttijhof@wikimedia.org>
Date: Fri, 14 Dec 2012 21:13:23 +0000 (+0100)
Subject: jquery.badge: Add ability to display the number zero.
X-Git-Tag: 1.31.0-rc.0~21297^2
X-Git-Url: https://git.cyclocoop.org/%242?a=commitdiff_plain;h=33161d3354f7e7f04dae6cf6757c0c8c55d78dd6;p=lhc%2Fweb%2Fwiklou.git

jquery.badge: Add ability to display the number zero.

This is needed by Echo extension.

Follows-up Id5e7cbb1.

Change-Id: I88c5f819c42d9fe1468be6b2cf74413d7d6d6907
---

diff --git a/resources/jquery/jquery.badge.css b/resources/jquery/jquery.badge.css
index 7dd2198e62..8dda42e9c3 100644
--- a/resources/jquery/jquery.badge.css
+++ b/resources/jquery/jquery.badge.css
@@ -6,11 +6,11 @@
 	-moz-box-shadow: 0px 1px 4px #ccc;
 	-webkit-box-shadow: 0px 1px 4px #ccc;
 	box-shadow: 0px 1px 4px #ccc;
-	background-color: #cc0000;
 	padding: 0 3px;
 	text-align: center;
 	font-size: 12px;
 	line-height: 12px;
+	background-color: #d2d2d2;
 }
 
 .mw-badge-content {
@@ -24,10 +24,14 @@
 	display: inline-block;
 	margin-left: 3px;
 }
-
 .mw-badge-overlay {
 	position: absolute;
 	bottom: -1px;
 	right: -3px;
 	z-index: 50;
 }
+
+.mw-badge-important {
+	background-color: #cc0000;
+}
+
diff --git a/resources/jquery/jquery.badge.js b/resources/jquery/jquery.badge.js
index c8073d1756..16e71969c1 100644
--- a/resources/jquery/jquery.badge.js
+++ b/resources/jquery/jquery.badge.js
@@ -27,22 +27,40 @@
 	 * will be appended to the selected element(s).
 	 * See mediawiki.org/wiki/ResourceLoader/Default_modules#jQuery.badge
 	 *
-	 * @param text The value to display in the badge. If the value is falsey (0,
+	 * @param {number|string} text The value to display in the badge. If the value is falsey (0,
 	 *   null, false, '', etc.), any existing badge will be removed.
-	 * @param boolean inline True if the badge should be displayed inline, false
+	 * @param {boolean} inline True if the badge should be displayed inline, false
 	 *   if the badge should overlay the parent element (default is inline)
+	 * @param {boolean} displayZero True if the number zero should be displayed,
+	 *   false if the number zero should result in the badge being hidden
+	 *   (default is zero will result in the badge being hidden)
 	 */
-	$.fn.badge = function ( text, inline ) {
-		var $badge = this.find( '.mw-badge' );
+	$.fn.badge = function ( text, inline, displayZero ) {
+		var $badge = this.find( '.mw-badge' ),
+			badgeStyleClass = 'mw-badge-' + ( inline ? 'inline' : 'overlay' ),
+			isImportant = true;
+
+		// If we're displaying zero, ensure style to be non-important
+		if ( text === 0 && displayZero ) {
+			isImportant = false;
+			text = '0';
+		}
 
 		if ( text ) {
 			// If a badge already exists, reuse it
 			if ( $badge.length ) {
-				$badge.find( '.mw-badge-content' ).text( text );
+				$badge
+					.toggleClass( 'mw-badge-important', isImportant )
+					.find( '.mw-badge-content' )
+						.text( text );
 			} else {
 				// Otherwise, create a new badge with the specified text and style
-				$badge = $( '<div class="mw-badge mw-badge-' + ( inline ? 'inline' : 'overlay' ) + '"></div>' )
-					.append( $( '<span class="mw-badge-content"></span>' ).text ( text ) )
+				$badge = $( '<div class="mw-badge"></div>' )
+					.addClass( badgeStyleClass )
+					.toggleClass( 'mw-badge-important', isImportant )
+					.append(
+						$( '<span class="mw-badge-content"></span>' ).text ( text )
+					)
 					.appendTo( this );
 			}
 		} else {