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
  16 /** @return jQuery object of the message box */
  17 $.messageBoxNew = function ( options ) {
  18         options = $.extend( {
  19                 // unique identifier for this message box
  20                 id: 'js-messagebox',
  21
  22                 // jQuery/CSS selector
  23                 parent: 'body',
  24
  25                 // 'prepend' or 'append'
  26                 insert: 'prepend'
  27         }, options );
  28         var $curBox = $( '#' + options.id );
  29         // Only create a new box if it doesn't exist already
  30         if ( $curBox.length > 0 ) {
  31                 if ( $curBox.hasClass( 'js-messagebox' ) ) {
  32                         return $curBox;
  33                 } else {
  34                         return $curBox.addClass( 'js-messagebox' );
  35                 }
  36         } else {
  37                 var $newBox = $( '<div>', {
  38                         'id': options.id,
  39                         'class': 'js-messagebox',
  40                         'css': {
  41                                 'display': 'none'
  42                         }
  43                 });
  44                 if ( $( options.parent ).length < 1 ) {
  45                         options.parent = 'body';
  46                 }
  47                 if ( options.insert === 'append' ) {
  48                         $newBox.appendTo( options.parent );
  49                         return $newBox;
  50                 } else {
  51                         $newBox.prependTo( options.parent );
  52                         return $newBox;
  53                 }
  54         }
  55 };
  56
  57 /**
  58  * Calling with no message or message set to empty string or null will hide the group,
  59  * setting 'replace' to true as well will reset and hide the group entirely.
  60  * If there are no visible groups the main message box is hidden automatically,
  61  * and shown again once there are messages
  62  * @return {jQuery}: jQuery object of message group.
  63  */
  64 $.messageBox = function ( options ) {
  65         options = $.extend( {
  66                 message: '',
  67                 group: 'default',
  68                 // if replace=true, it replaces any previous message in this group
  69                 replace: false,
  70                 target: 'js-messagebox'
  71         }, options );
  72         var $target = $.messageBoxNew( { id: options.target } );
  73         var groupID = options.target + '-' + options.group;
  74         var $group = $( '#' + groupID );
  75         // Create group container if not existant
  76         if ( $group.length < 1 ) {
  77                 $group = $( '<div>', {
  78                         'id': groupID,
  79                         'class': 'js-messagebox-group'
  80                 });
  81                 $target.prepend( $group );
  82         }
  83         // Replace ?
  84         if ( options.replace === true ) {
  85                 $group.empty();
  86         }
  87         // Hide it ?
  88         if ( options.message === '' || options.message === null ) {
  89                 $group.hide();
  90         } else {
  91                 // Actual message addition
  92                 $group.prepend( $( '<p>' ).append( options.message ) ).show();
  93                 $target.slideDown();
  94         }
  95         // If the last visible group was just hidden, slide the entire box up
  96         // Othere wise slideDown (if already visible nothing will happen)
  97         if ( $target.find( '> *:visible' ).length === 0 ) {
  98                 // to avoid a sudden dissapearance of the last group followed by
  99                 // a slide up of only the outline, show it for a second
 100                 $group.show();
 101                 $target.slideUp();
 102                 $group.hide();
 103         } else {
 104                 $target.slideDown();
 105         }
 106         return $group;
 107 };
 108
 109 }( jQuery ) );