r81500 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r81499‎ | r81500 | r81501 >
Date:02:17, 4 February 2011
Author:krinkle
Status:ok (Comments)
Tags:
Comment:
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.
Modified paths:
  • /trunk/phase3/resources/Resources.php (modified) (history)
  • /trunk/phase3/resources/jquery/jquery.jsMessage.css (added) (history)
  • /trunk/phase3/resources/jquery/jquery.jsMessage.js (added) (history)
  • /trunk/phase3/resources/mediawiki.util/mediawiki.util.js (modified) (history)

Diff [purge]

Index: trunk/phase3/resources/jquery/jquery.jsMessage.css
——@@ -0,0 +1,15 @@
 2+.js-message-box {
 3+ margin: 1em 5%;
 4+ padding: 0.5em 2.5%;
 5+ border: 1px solid #ccc;
 6+ background-color: #fcfcfc;
 7+ font-size: 0.8em;
 8+}
 9+.js-message-box .js-message-group {
 10+ margin: 1px;
 11+ padding: 0.5em 2.5%;
 12+ border-bottom: 1px solid #ddd;
 13+}
 14+.js-message-box .js-message-group:last-child {
 15+ border-bottom: thin none transparent;
 16+}
\ No newline at end of file
Property changes on: trunk/phase3/resources/jquery/jquery.jsMessage.css
___________________________________________________________________
Added: svn:eol-style
117 + native
Index: trunk/phase3/resources/jquery/jquery.jsMessage.js
——@@ -0,0 +1,95 @@
 2+/**
 3+ * jQuery jsMessage
 4+ *
 5+ * Function to inform the user of something. Use sparingly (since there's mw.log for
 6+ * messages aimed at developers / debuggers). Based on the function in MediaWiki's
 7+ * legacy javascript (wikibits.js) by Aryeh Gregor called jsMsg() added in r23233.
 8+ *
 9+ * @author Krinkle <krinklemail@gmail.com>
 10+ *
 11+ * Dual license:
 12+ * @license CC-BY 3.0 <http://creativecommons.org/licenses/by/3.0>
 13+ * @license GPL2 <http://www.gnu.org/licenses/old-licenses/gpl-2.0.html>
 14+ */
 15+( function( $, mw ) {
 16+// @return jQuery object of the message box
 17+$.jsMessageNew = function( options ) {
 18+ options = $.extend( {
 19+ 'id': 'js-message', // unique identifier for this message box
 20+ 'parent': 'body', // jQuery/CSS selector
 21+ 'insert': 'prepend' // 'prepend' or 'append'
 22+ }, options );
 23+ var $curBox = $( '#'+ options.id );
 24+ // Only create a new box if it doesn't exist already
 25+ if ( $curBox.size() > 0 ) {
 26+ if ( $curBox.hasClass( 'js-message-box' ) ) {
 27+ return $curBox;
 28+ } else {
 29+ return $curBox.addClass( 'js-message-box' );
 30+ }
 31+ } else {
 32+ var $newBox = $( '<div/>', {
 33+ 'id': options.id,
 34+ 'class': 'js-message-box',
 35+ 'css': {
 36+ 'display': 'none'
 37+ }
 38+ });
 39+ if ( options.insert === 'append' ) {
 40+ $newBox.appendTo( options.parent );
 41+ return $newBox;
 42+ } else {
 43+ $newBox.prependTo( options.parent );
 44+ return $newBox;
 45+ }
 46+ }
 47+};
 48+// Calling with no message or message set to empty string or null will hide the group,
 49+// setting 'replace' to true as well will reset and hide the group entirely.
 50+// If there are no visible groups the main message box is hidden automatically,
 51+// and shown again once there are messages
 52+// @return jQuery object of message group
 53+$.jsMessage = function( options ) {
 54+ options = $.extend( {
 55+ 'message': '',
 56+ 'group': 'default',
 57+ 'replace': false, // if true replaces any previous message in this group
 58+ 'target': 'js-message'
 59+ }, options );
 60+ var $target = $.jsMessageNew( { id: options.target } );
 61+ var groupID = options.target + '-' + options.group;
 62+ var $group = $( '#' + groupID );
 63+ // Create group container if not existant
 64+ if ( $group.size() < 1 ) {
 65+ $group = $( '<div/>', {
 66+ 'id': groupID,
 67+ 'class': 'js-message-group'
 68+ });
 69+ $target.prepend( $group );
 70+ }
 71+ // Replace ?
 72+ if ( options.replace === true ) {
 73+ $group.empty();
 74+ }
 75+ // Hide it ?
 76+ if ( options.message === '' || options.message === null ) {
 77+ $group.hide();
 78+ } else {
 79+ // Actual message addition
 80+ $group.prepend( $( '<p/>' ).append( options.message ) ).show();
 81+ $target.slideDown()
 82+ }
 83+ // If the last visible group was just hidden, slide the entire box up
 84+ // Othere wise slideDown (if already visible nothing will happen)
 85+ if ( $target.find( '> *:visible' ).size() === 0 ) {
 86+ // to avoid a sudden dissapearance of the last group followed by
 87+ // a slide up of only the outline, show it for a second
 88+ $group.show();
 89+ $target.slideUp();
 90+ $group.hide();
 91+ } else {
 92+ $target.slideDown();
 93+ }
 94+ return $group;
 95+};
 96+} )( jQuery, mediaWiki );
\ No newline at end of file
Property changes on: trunk/phase3/resources/jquery/jquery.jsMessage.js
___________________________________________________________________
Added: svn:eol-style
197 + native
Index: trunk/phase3/resources/mediawiki.util/mediawiki.util.js
——@@ -14,6 +14,12 @@
1515 // Any initialisation after the DOM is ready
1616 $( function() {
1717
 18+ /* Set up $.jsMessage */
 19+ $.jsMessageNew( {
 20+ 'id': 'mw-js-message',
 21+ 'parent': '#content'
 22+ } );
 23+
1824 // Shortcut to client profile return
1925 var profile = $.client.profile();
2026
Index: trunk/phase3/resources/Resources.php
——@@ -89,6 +89,10 @@
9090 'jquery.hoverIntent' => array(
9191 'scripts' => 'resources/jquery/jquery.hoverIntent.js',
9292 ),
 93+ 'jquery.jsMessage' => array(
 94+ 'scripts' => 'resources/jquery/jquery.jsMessage.js',
 95+ 'styles' => 'resources/jquery/jquery.jsMessage.css',
 96+ ),
9397 'jquery.placeholder' => array(
9498 'scripts' => 'resources/jquery/jquery.placeholder.js',
9599 ),
——@@ -366,8 +370,9 @@
367371 'dependencies' => array(
368372 'jquery.checkboxShiftClick',
369373 'jquery.client',
 374+ 'jquery.cookie',
 375+ 'jquery.jsMessage',
370376 'jquery.makeCollapsible',
371 - 'jquery.cookie',
372377 'jquery.placeholder',
373378 ),
374379 'debugScripts' => 'resources/mediawiki.util/mediawiki.util.test.js',

Comments

#Comment by DieBuche (talk | contribs)   08:38, 9 May 2011

IMO jsMessageNew could use a better name, but that's not worth a new rev.

#Comment by Krinkle (talk | contribs)   18:10, 21 March 2012

r81660

#Comment by He7d3r (talk | contribs)   20:30, 8 March 2012

I think the default parent shoudn't be the "body", because it breaks the appearence of the skin. Compare 

jsMsg('Lorem ipsum...'); // ok =)

with 

$.messageBox({
    message:'Lorem ipsum...', // Blergh! =(
});

Maybe the default target should be the 'mw-js-message' (which is/was used by the jsMsg from wikibits.js). E.g.: the result of 

$.messageBox({
    message:'Lorem ipsum...',
    target: 'mw-js-message'
});

looks a lot better than without specifying the target.

#Comment by Krinkle (talk | contribs)   18:16, 21 March 2012

Just a few points:

  • This plugin is intended to be generic and not MediaWiki-specific, so there is't anything other than body to go on
  • You shouldn't be putting messages into a parent directly, instead one first creates a messagebox and writes to it. In case you try to write to a message box that doesn't exist, it will create it and add it to the body, but that should almost never happen (unless you design your application in such a way that the messagebox is positioned by CSS and is supposed to be in the root).
  • The default target for the plugin is "#js-messagebox"
  • The new equivalent of jsMsg is not $.messageBox but mw.util.jsMessage, so do not change scripts from one to another, that's not how it is designed to work and up until now I haven't seen that either.
  • mw.util.jsMessage currently doesn't make use of messageBox yet, that's still a todo item.

Status & tagging log