Making a start with $.jsMessage. A more flexible way for messages. Supports grouping...

* See also bug 26888. Not resolving the bug yet, this plugins needs a little more testing and should then be called from within mw.util.jsMessage with some wiki specific things.

Examples:

// Show a simple message in the default group
$.jsMessage( {
message: 'Hello',
target: 'mw-js-message'
} );

// Add a new message this time stating the defaults
$.jsMessage( {
message: 'World',
group: 'default',
replace: false,
target: 'mw-js-message'
} );

// Post a new message, replacing the previous ones
$.jsMessage( {
message: 'New',
group: 'default',
replace: true,
target: 'mw-js-message'
} );

// Add a messages in a new group (groups separated by a line)
$.jsMessage( {
message: 'A new group',
group: 'something',
target: 'mw-js-message'
} );

// Clear the default group
// See code comments for more info
$.jsMessage( {
message: '',
replace: true,
target: 'mw-js-message'
} );

// Clear the 'something'-group
// Since this leaves no visible groups, the main box will hide (slideUp) right after
$.jsMessage( {
message: '',
group: 'something',
replace: true,
target: 'mw-js-message'
} );

If testing goes well, mw.util.jsMsg(message, className, replace) will call
$.jsMessage( { message: message, group: className, replace: replace, target: $.jsMessage(ge' );
So it's more a backend plugin, not used directly by core modules.
But this way extensions or third party sites can easily re-use this plugin and/or create multiple message boxes
on one page, by calling $.jsMessageNew and giving an id and location for it on the page.

diff --git a/resources/Resources.php b/resources/Resources.php
index 1007925..b913c5c 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -89,6 +89,10 @@ return array(
        'jquery.hoverIntent' => array(
                'scripts' => 'resources/jquery/jquery.hoverIntent.js',
        ),
+       'jquery.jsMessage' => array(
+               'scripts' => 'resources/jquery/jquery.jsMessage.js',
+               'styles' => 'resources/jquery/jquery.jsMessage.css',
+       ),
        'jquery.placeholder' => array(
                'scripts' => 'resources/jquery/jquery.placeholder.js',
        ),
@@ -366,8 +370,9 @@ return array(
                'dependencies' => array(
                        'jquery.checkboxShiftClick',
                        'jquery.client',
-                       'jquery.makeCollapsible',
                        'jquery.cookie',
+                       'jquery.jsMessage',
+                       'jquery.makeCollapsible',
                        'jquery.placeholder',
                ),
                'debugScripts' => 'resources/mediawiki.util/mediawiki.util.test.js',

diff --git a/resources/jquery/jquery.jsMessage.css b/resources/jquery/jquery.jsMessage.css
new file mode 100644 (file)
index 0000000..58e794a
--- /dev/null
+++ b/resources/jquery/jquery.jsMessage.css
@@ -0,0 +1,15 @@
+.js-message-box {
+       margin: 1em 5%;
+       padding: 0.5em 2.5%;
+       border: 1px solid #ccc;
+       background-color: #fcfcfc;
+       font-size: 0.8em;
+}
+.js-message-box .js-message-group {
+       margin: 1px;
+       padding: 0.5em 2.5%;
+       border-bottom: 1px solid #ddd;
+}
+.js-message-box .js-message-group:last-child {
+       border-bottom: thin none transparent;
+}
\ No newline at end of file

diff --git a/resources/jquery/jquery.jsMessage.js b/resources/jquery/jquery.jsMessage.js
new file mode 100644 (file)
index 0000000..db64f1a
--- /dev/null
+++ b/resources/jquery/jquery.jsMessage.js
@@ -0,0 +1,95 @@
+/**
+ * jQuery jsMessage
+ *
+ * Function to inform the user of something. Use sparingly (since there's mw.log for
+ * messages aimed at developers / debuggers). Based on the function in MediaWiki's
+ * legacy javascript (wikibits.js) by Aryeh Gregor called jsMsg() added in r23233.
+ *
+ * @author Krinkle <krinklemail@gmail.com>
+ *
+ * Dual license:
+ * @license CC-BY 3.0 <http://creativecommons.org/licenses/by/3.0>
+ * @license GPL2 <http://www.gnu.org/licenses/old-licenses/gpl-2.0.html>
+ */
+( function( $, mw ) {
+// @return jQuery object of the message box
+$.jsMessageNew = function( options ) {
+       options = $.extend( {
+               'id': 'js-message', // unique identifier for this message box
+               'parent': 'body', // jQuery/CSS selector
+               'insert': 'prepend' // 'prepend' or 'append'
+       }, options );
+       var $curBox = $( '#'+ options.id );
+       // Only create a new box if it doesn't exist already
+       if ( $curBox.size() > 0 ) {
+               if ( $curBox.hasClass( 'js-message-box' ) ) {
+                       return $curBox;
+               } else {
+                       return $curBox.addClass( 'js-message-box' );
+               }
+       } else {
+               var $newBox = $( '<div/>', {
+                       'id': options.id,
+                       'class': 'js-message-box',
+                       'css': {
+                               'display': 'none'
+                       }
+               });
+               if ( options.insert === 'append' ) {
+                       $newBox.appendTo( options.parent );
+                       return $newBox;
+               } else {
+                       $newBox.prependTo( options.parent );
+                       return $newBox;
+               }
+       }
+};
+// Calling with no message or message set to empty string or null will hide the group,
+// setting 'replace' to true as well will reset and hide the group entirely.
+// If there are no visible groups the main message box is hidden automatically,
+// and shown again once there are messages
+// @return jQuery object of message group
+$.jsMessage = function( options ) {
+       options = $.extend( {
+               'message': '',
+               'group': 'default',
+               'replace': false, // if true replaces any previous message in this group
+               'target': 'js-message'
+       }, options );     
+       var $target = $.jsMessageNew( { id: options.target } );
+       var groupID = options.target + '-' + options.group;
+       var $group = $( '#' + groupID );
+       // Create group container if not existant
+       if ( $group.size() < 1 ) {
+               $group = $( '<div/>', {
+                       'id': groupID,
+                       'class': 'js-message-group'
+               });
+               $target.prepend( $group );
+       }
+       // Replace ?
+       if ( options.replace === true ) {
+               $group.empty();
+       }
+       // Hide it ?
+       if ( options.message === '' || options.message === null ) {
+               $group.hide();
+       } else {
+               // Actual message addition
+               $group.prepend( $( '<p/>' ).append( options.message ) ).show();
+               $target.slideDown()
+       }
+       // If the last visible group was just hidden, slide the entire box up
+       // Othere wise slideDown (if already visible nothing will happen)
+       if ( $target.find( '> *:visible' ).size() === 0 ) {
+               // to avoid a sudden dissapearance of the last group followed by
+               // a slide up of only the outline, show it for a second
+               $group.show();
+               $target.slideUp();
+               $group.hide();
+       } else {
+               $target.slideDown();
+       }
+       return $group;
+};
+} )( jQuery, mediaWiki );
\ No newline at end of file

diff --git a/resources/mediawiki.util/mediawiki.util.js b/resources/mediawiki.util/mediawiki.util.js
index 8c44b91..8473f0b 100644 (file)
--- a/resources/mediawiki.util/mediawiki.util.js
+++ b/resources/mediawiki.util/mediawiki.util.js
@@ -14,6 +14,12 @@
                                // Any initialisation after the DOM is ready
                                $( function() {
 
+                                       /* Set up $.jsMessage */
+                                       $.jsMessageNew( {
+                                               'id': 'mw-js-message',
+                                               'parent': '#content'
+                                       } );
+
                                        // Shortcut to client profile return
                                        var profile = $.client.profile();