resources/jquery/jquery.messageBox.js

   1 /**
   2  * jQuery messageBox
   3  *
   4  * Function to inform the user of something. Use sparingly (since there's mw.log for
   5  * messages aimed at developers / debuggers). Based on the function in MediaWiki's
   6  * legacy javascript (wikibits.js) by Aryeh Gregor called jsMsg() added in r23233.
   7  *
   8  * @author Krinkle <krinklemail@gmail.com>
   9  *
  10  * Dual license:
  11  * @license CC-BY 3.0 <http://creativecommons.org/licenses/by/3.0>
  12  * @license GPL2 <http://www.gnu.org/licenses/old-licenses/gpl-2.0.html>
  13  */
  14 ( function( $, mw ) {
  15 // @return jQuery object of the message box
  16 $.messageBoxNew = function( options ) {
  17         options = $.extend( {
  18                 'id': 'js-messagebox', // unique identifier for this message box
  19                 'parent': 'body', // jQuery/CSS selector
  20                 'insert': 'prepend' // 'prepend' or 'append'
  21         }, options );
  22         var $curBox = $( '#'+ options.id );
  23         // Only create a new box if it doesn't exist already
  24         if ( $curBox.size() > 0 ) {
  25                 if ( $curBox.hasClass( 'js-messagebox' ) ) {
  26                         return $curBox;
  27                 } else {
  28                         return $curBox.addClass( 'js-messagebox' );
  29                 }
  30         } else {
  31                 var $newBox = $( '<div/>', {
  32                         'id': options.id,
  33                         'class': 'js-messagebox',
  34                         'css': {
  35                                 'display': 'none'
  36                         }
  37                 });
  38                 if ( options.insert === 'append' ) {
  39                         $newBox.appendTo( options.parent );
  40                         return $newBox;
  41                 } else {
  42                         $newBox.prependTo( options.parent );
  43                         return $newBox;
  44                 }
  45         }
  46 };
  47 // Calling with no message or message set to empty string or null will hide the group,
  48 // setting 'replace' to true as well will reset and hide the group entirely.
  49 // If there are no visible groups the main message box is hidden automatically,
  50 // and shown again once there are messages
  51 // @return jQuery object of message group
  52 $.messageBox = function( options ) {
  53         options = $.extend( {
  54                 'message': '',
  55                 'group': 'default',
  56                 'replace': false, // if true replaces any previous message in this group
  57                 'target': 'js-messagebox'
  58         }, options );
  59         var $target = $.messageBoxNew( { id: options.target } );
  60         var groupID = options.target + '-' + options.group;
  61         var $group = $( '#' + groupID );
  62         // Create group container if not existant
  63         if ( $group.size() < 1 ) {
  64                 $group = $( '<div/>', {
  65                         'id': groupID,
  66                         'class': 'js-messagebox-group'
  67                 });
  68                 $target.prepend( $group );
  69         }
  70         // Replace ?
  71         if ( options.replace === true ) {
  72                 $group.empty();
  73         }
  74         // Hide it ?
  75         if ( options.message === '' || options.message === null ) {
  76                 $group.hide();
  77         } else {
  78                 // Actual message addition
  79                 $group.prepend( $( '<p/>' ).append( options.message ) ).show();
  80                 $target.slideDown();
  81         }
  82         // If the last visible group was just hidden, slide the entire box up
  83         // Othere wise slideDown (if already visible nothing will happen)
  84         if ( $target.find( '> *:visible' ).size() === 0 ) {
  85                 // to avoid a sudden dissapearance of the last group followed by
  86                 // a slide up of only the outline, show it for a second
  87                 $group.show();
  88                 $target.slideUp();
  89                 $group.hide();
  90         } else {
  91                 $target.slideDown();
  92         }
  93         return $group;
  94 };
  95 } )( jQuery, mediaWiki );