From 11028261537e9b1e763169cca17a12043df754a7 Mon Sep 17 00:00:00 2001 From: Krinkle Date: Fri, 4 Feb 2011 02:17:14 +0000 Subject: [PATCH] Making a start with $.jsMessage. A more flexible way for messages. Supports grouping them and making the replacing of previous messages into option (the current jsMsg() function always replaces older messages. Time has shown that there is need for the ability to show older messages as well and grouping to avoid different scripts from erasing or clearing eachother's output (current Commons and a few other wikis have created similar functions to enable keeping previous messages) * 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. --- resources/Resources.php | 7 +- resources/jquery/jquery.jsMessage.css | 15 ++++ resources/jquery/jquery.jsMessage.js | 95 ++++++++++++++++++++++ resources/mediawiki.util/mediawiki.util.js | 6 ++ 4 files changed, 122 insertions(+), 1 deletion(-) create mode 100644 resources/jquery/jquery.jsMessage.css create mode 100644 resources/jquery/jquery.jsMessage.js diff --git a/resources/Resources.php b/resources/Resources.php index 1007925663..b913c5cdd2 100644 --- 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 index 0000000000..58e794a2d4 --- /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 index 0000000000..db64f1ac28 --- /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 + * + * Dual license: + * @license CC-BY 3.0 + * @license GPL2 + */ +( 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 = $( '
', { + '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 = $( '
', { + '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( $( '

' ).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 8c44b91921..8473f0b521 100644 --- 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(); -- 2.20.1