From 8dc90f63a800afae9cbdfbaeaae565be987d2238 Mon Sep 17 00:00:00 2001 From: Kaldari Date: Thu, 16 Aug 2012 14:22:45 -0700 Subject: [PATCH] Addressing problems with jquery.badge mentioned at I0f5e7541 Making sure variable types are consistant, fixing global vars, various style fixes, etc. Change-Id: I2f30fe07078aa3cadd730b0d6f199d037f2a4612 --- resources/jquery/jquery.badge.css | 8 +- resources/jquery/jquery.badge.js | 131 +++++++++++++++++++----------- 2 files changed, 89 insertions(+), 50 deletions(-) diff --git a/resources/jquery/jquery.badge.css b/resources/jquery/jquery.badge.css index 49063ba35a..92e72555b6 100644 --- a/resources/jquery/jquery.badge.css +++ b/resources/jquery/jquery.badge.css @@ -2,19 +2,19 @@ min-width: 8px; height: 14px; border: 1px solid white; - border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; - box-shadow: 0px 1px 4px #ccc; + border-radius: 8px; -moz-box-shadow: 0px 1px 4px #ccc; -webkit-box-shadow: 0px 1px 4px #ccc; + box-shadow: 0px 1px 4px #ccc; background-color: #b60a00; - background-image: linear-gradient(bottom, #a70802 0%, #cf0e00 100%); background-image: -o-linear-gradient(bottom, #a70802 0%, #cf0e00 100%); background-image: -moz-linear-gradient(bottom, #a70802 0%, #cf0e00 100%); + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #a70802), color-stop(1, #cf0e00)); background-image: -webkit-linear-gradient(bottom, #a70802 0%, #cf0e00 100%); background-image: -ms-linear-gradient(bottom, #a70802 0%, #cf0e00 100%); - background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #a70802), color-stop(1, #cf0e00)); + background-image: linear-gradient(bottom, #a70802 0%, #cf0e00 100%); padding: 0 3px; text-align: center; } diff --git a/resources/jquery/jquery.badge.js b/resources/jquery/jquery.badge.js index d40acc6efc..04495b7167 100644 --- a/resources/jquery/jquery.badge.js +++ b/resources/jquery/jquery.badge.js @@ -1,9 +1,16 @@ -// Badger v1.0 by Daniel Raftery -// http://thrivingkings.com/badger -// http://twitter.com/ThrivingKings -// Modified by Ryan Kaldari +/** + * jQuery Badge plugin + * + * Based on Badger plugin by Daniel Raftery (http://thrivingkings.com/badger). + * + * @license MIT + */ /** + * @author Ryan Kaldari , 2012 + * @author Andrew Garrett , 2012 + * @author Marius Hoch , 2012 + * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights @@ -16,63 +23,95 @@ * * This program is distributed WITHOUT ANY WARRANTY. */ +( function ( $ ) { -(function( $ ) { - $.fn.badge = function( badge, options ) { - var existingBadge = this.find( '.mw-badge' ); - options = $.extend( {}, options ); + /** + * Allows you to put a numeric "badge" on an item on the page. + * See mediawiki.org/wiki/ResourceLoader/Default_modules#jQuery.badge + * + * @param {string|number} badgeCount An explicit number, or "+n"/ "-n" + * to modify the existing value. If the new value is equal or lower than 0, + * any existing badge will be removed. The badge container will be appended + * to the selected element(s). + * @param {Object} options Optional parameters specified below + * type: 'inline' or 'overlay' (default) + * callback: will be called with the number now shown on the badge as a parameter + */ + $.fn.badge = function ( badgeCount, options ) { + var $badge, + oldBadgeCount, + newBadgeCount, + $existingBadge = this.find( '.mw-badge' ); - badge = String(badge); - if ( badge.charAt(0) === '+' ) { - if ( existingBadge.length > 0 ) { - oldBadge = existingBadge.text(); - badge = Math.round( Number( oldBadge ) + Number( badge.substr(1) ) ); - } else { - badge = badge.substr(1); - } - } else if ( badge.charAt(0) === '-' ) { - if ( existingBadge.length > 0 ) { - oldBadge = existingBadge.text(); - badge = Math.round( Number( oldBadge ) - Number( badge.substr(1) ) ); + options = $.extend( { type : 'overlay' }, options ); + + // If there is no existing badge, this will give an empty string + oldBadgeCount = Number( $existingBadge.text() ); + if ( isNaN( oldBadgeCount ) ) { + oldBadgeCount = 0; + } + + // If badgeCount is a number, use that as the new badge + if ( typeof badgeCount === 'number' ) { + newBadgeCount = badgeCount; + } else if ( typeof badgeCount === 'string' ) { + // If badgeCount is "+x", add x to the old badge + if ( badgeCount.charAt(0) === '+' ) { + newBadgeCount = oldBadgeCount + Number( badgeCount.substr(1) ); + // If badgeCount is "-x", subtract x from the old badge + } else if ( badgeCount.charAt(0) === '-' ) { + newBadgeCount = oldBadgeCount - Number( badgeCount.substr(1) ); + // If badgeCount can be converted into a number, convert it + } else if ( !isNaN( Number( badgeCount ) ) ) { + newBadgeCount = Number( badgeCount ); } else { - badge = 0; + newBadgeCount = 0; } + // Other types are not supported, fall back to 0. + } else { + newBadgeCount = 0; } - if ( Number(badge) <= 0 ) { - // Clear any existing badge - existingBadge.remove(); + // Badge count must be a whole number + newBadgeCount = Math.round( newBadgeCount ); + + if ( newBadgeCount <= 0 ) { + // Badges should only exist for values > 0. + $existingBadge.remove(); } else { // Don't add duplicates - var $badge = existingBadge; - if ( existingBadge.length > 0 ) { - this.find( '.mw-badge-content' ).text( badge ); + if ( $existingBadge.length ) { + $badge = $existingBadge; + // Insert the new count into the badge + this.find( '.mw-badge-content' ).text( newBadgeCount ); } else { - $badge = $('
') - .addClass('mw-badge') - .addClass('mw-badge-overlay') + // Contruct a new badge with the count + $badge = $( '
' ) + .addClass( 'mw-badge' ) .append( - $('') - .addClass('mw-badge-content') - .text(badge) + $( '' ) + .addClass( 'mw-badge-content' ) + .text( newBadgeCount ) ); - this.append($badge); + this.append( $badge ); } - if ( options.type ) { - if ( options.type == 'inline' ) { - $badge.removeClass('mw-badge-overlay') - .addClass('mw-badge-inline'); - } else if ( options.type == 'overlay' ) { - $badge.removeClass('mw-badge-inline') - .addClass('mw-badge-overlay'); - } + if ( options.type === 'inline' ) { + $badge + .removeClass( 'mw-badge-overlay' ) + .addClass( 'mw-badge-inline' ); + // Default: overlay + } else { + $badge + .removeClass( 'mw-badge-inline' ) + .addClass( 'mw-badge-overlay' ); + } - // If a callback was specified, call it with the badge number - if ( options.callback ) { - options.callback( badge ); + // If a callback was specified, call it with the badge count + if ( $.isFunction( options.callback ) ) { + options.callback( newBadgeCount ); } } }; -} ) ( jQuery ); +}( jQuery ) ); -- 2.20.1