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( $ ) {
  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.length > 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.parent ).length < 1 ) {
  39                         options.parent = 'body';
  40                 }
  41                 if ( options.insert === 'append' ) {
  42                         $newBox.appendTo( options.parent );
  43                         return $newBox;
  44                 } else {
  45                         $newBox.prependTo( options.parent );
  46                         return $newBox;
  47                 }
  48         }
  49 };
  50 // Calling with no message or message set to empty string or null will hide the group,
  51 // setting 'replace' to true as well will reset and hide the group entirely.
  52 // If there are no visible groups the main message box is hidden automatically,
  53 // and shown again once there are messages
  54 // @return jQuery object of message group
  55 $.messageBox = function( options ) {
  56         options = $.extend( {
  57                 'message': '',
  58                 'group': 'default',
  59                 'replace': false, // if true replaces any previous message in this group
  60                 'target': 'js-messagebox'
  61         }, options );
  62         var $target = $.messageBoxNew( { id: options.target } );
  63         var groupID = options.target + '-' + options.group;
  64         var $group = $( '#' + groupID );
  65         // Create group container if not existant
  66         if ( $group.length < 1 ) {
  67                 $group = $( '<div>', {
  68                         'id': groupID,
  69                         'class': 'js-messagebox-group'
  70                 });
  71                 $target.prepend( $group );
  72         }
  73         // Replace ?
  74         if ( options.replace === true ) {
  75                 $group.empty();
  76         }
  77         // Hide it ?
  78         if ( options.message === '' || options.message === null ) {
  79                 $group.hide();
  80         } else {
  81                 // Actual message addition
  82                 $group.prepend( $( '<p>' ).append( options.message ) ).show();
  83                 $target.slideDown();
  84         }
  85         // If the last visible group was just hidden, slide the entire box up
  86         // Othere wise slideDown (if already visible nothing will happen)
  87         if ( $target.find( '> *:visible' ).length === 0 ) {
  88                 // to avoid a sudden dissapearance of the last group followed by
  89                 // a slide up of only the outline, show it for a second
  90                 $group.show();
  91                 $target.slideUp();
  92                 $group.hide();
  93         } else {
  94                 $target.slideDown();
  95         }
  96         return $group;
  97 };
  98 } )( jQuery );