r92256 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r92255‎ | r92256 | r92257 >
Date:17:35, 15 July 2011
Author:krinkle
Status:deferred (Comments)
Tags:
Comment:
MoodBar front-end:
* Init/show triger in init-module (position: top)
* Bind and load the rest from the bottom in the core-module
* Implement overlay div (with close-toggle)
* Add i18n-messages
* Makes use of new jquery.localize features

Other fixes:
* Only show when logged-in
* Hook for mw.config
* Merged the double i18n $messages['qqq'] with the first one
Modified paths:
  • /trunk/extensions/MoodBar/MoodBar.hooks.php (modified) (history)
  • /trunk/extensions/MoodBar/MoodBar.i18n.php (modified) (history)
  • /trunk/extensions/MoodBar/MoodBar.php (modified) (history)
  • /trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.core.css (added) (history)
  • /trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.core.js (added) (history)
  • /trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.css (deleted) (history)
  • /trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.init.css (added) (history)
  • /trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.init.js (added) (history)
  • /trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.js (deleted) (history)

Diff [purge]

Index: trunk/extensions/MoodBar/MoodBar.i18n.php
——@@ -14,10 +14,22 @@
1515
1616 $messages['en'] = array(
1717 'moodbar-desc' => 'Allows specified users to send their "mood" back to the site operator',
 18+ // Portlet link
1819 'moodbar-trigger-using' => 'Using $1...',
1920 'tooltip-p-moodbar-trigger-using' => '',
 21+ 'moodbar-intro-using' => 'Using $1 made me...',
2022 'moodbar-trigger-feedback' => 'Feedback',
2123 'tooltip-p-moodbar-trigger-feedback' => '',
 24+ // Overlay
 25+ 'moodbar-close' => '(close)',
 26+ 'moodbar-intro-feedback' => 'Feedback:',
 27+ 'moodbar-type-happy-title' => 'Happy',
 28+ 'moodbar-type-sad-title' => 'Sad',
 29+ 'moodbar-type-confused-title' => 'Confused',
 30+ 'tooltip-moodbar-what' => 'Learn more about this feature',
 31+ 'moodbar-what-target' => 'http://www.mediawiki.org/wiki/MoodBar',
 32+ 'moodbar-what-label' => 'What is this?',
 33+ // Special:MoodBar
2234 'right-moodbar-view' => 'View and export MoodBar feedback',
2335 'moodbar-admin-title' => 'MoodBar feedback',
2436 'moodbar-admin-intro' => 'This page allows you to view feedback submitted with the MoodBar',
——@@ -36,22 +48,27 @@
3749 'moodbar-header-comment' => 'Comments',
3850 );
3951
40 -/** Message documentation
 52+/** Message documentation (Message documentation)
4153 * @author Krinkle
 54+ * @author SPQRobin
4255 */
4356
4457 $messages['qqq'] = array(
45 - 'moodbar-trigger-using' => 'Link text of the MoodBar overlay trigger. $1 is the SITENAME.',
46 - 'moodbar-trigger-feedback' => 'Link text of the MoodBar overlay trigger. $1 is the SITENAME.',
47 -);
48 -
49 -/** Message documentation (Message documentation)
50 - * @author SPQRobin
51 - */
52 -$messages['qqq'] = array(
5358 'moodbar-desc' => 'This is a feature in development. See [[mw:MoodBar 0.1/Design]] for background information.',
5459 'moodbar-trigger-using' => "Link text of the MoodBar overlay trigger. \$1 is the SITENAME. The implied sentence is ''\"Using [Sitename] made me happy/sad/...\"''. See [[mw:MoodBar 0.1/Design]] for background development information.",
5560 'moodbar-trigger-feedback' => 'Link text of the MoodBar overlay trigger. $1 is the SITENAME.',
 61+ 'moodbar-intro-using' => 'Intro title of the MoodBar overlay trigger. $1 is the SITENAME.',
 62+ 'moodbar-intro-feedback' => 'Intro title of the MoodBar overlay trigger. $1 is the SITENAME.',
 63+ 'moodbar-close' => 'Link text of the close-button. Make sure to include parentheses.
 64+
 65+See also:
 66+* {{msg|parentheses}}',
 67+ 'tooltip-moodbar-what' => 'Tooltip displayed when hovering the What-link.
 68+
 69+See also:
 70+* {{msg|moodbar-what-label}}',
 71+ 'moodbar-what-target' => 'Complete URL (including http://) or article name where more info can be found.',
 72+ 'moodbar-what-label' => 'Link text for the page where more info abut MoodBar can be found.',
5673 );
5774
5875 /** Afrikaans (Afrikaans)
Index: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.css
——@@ -1,22 +0,0 @@
2 -/* Based on p-personal */
3 -#p-moodbar {
4 - position: absolute;
5 - left: 10.75em;
6 - top: 0px;
7 -}
8 -
9 -#p-moodbar p {
10 - margin-top: 0.5em;
11 - margin-right: 0.75em;
12 - font-size: 0.75em;
13 - white-space: nowrap;
14 - line-height: 1.125em;
15 - text-transform: none;
16 - padding-left: 20px !important;
17 - /* @embed */
18 - background: url(images/speechbubble-icon-ellipse-blue.png) left top no-repeat;
19 -}
20 -
21 -#mw-moodbar-overlay {
22 -
23 -}
\ No newline at end of file
Index: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.js
——@@ -1,52 +0,0 @@
2 -/**
3 - * Front-end scripting for the MoodBar MediaWiki extension
4 - *
5 - * @author Timo Tijhof, 2011
6 - */
7 -( function( $ ) {
8 -
9 - var mb = mw.moodBar = {
10 -
11 - ui: {
12 - // jQuery objects
13 - pMoodbar: null,
14 - trigger: null,
15 - overlay: null // @todo
16 - },
17 - event: {
18 - trigger: function( e ) {
19 - e.preventDefault();
20 - }
21 - },
22 - init: function() {
23 - var ui = mb.ui;
24 -
25 - // Create portlet
26 - ui.pMoodbar = $( '<div id="p-moodbar"></div>' );
27 -
28 - // Create trigger
29 - ui.trigger = $( '<a>', {
30 - href: '#',
31 - title: mw.msg( 'tooltip-p-moodbar-trigger-using' ),
32 - text: mw.msg( 'moodbar-trigger-using', mw.config.get( 'wgSiteName' ) ),
33 - click: mb.event.trigger
34 - });
35 -
36 - // Insert trigger into portlet
37 - ui.trigger
38 - .wrap( '<p>' )
39 - .parent()
40 - .appendTo( ui.pMoodbar );
41 -
42 - // Inject portlet into document, when document is ready
43 - $( mb.inject );
44 - },
45 - inject: function() {
46 - $( '#mw-head' ).append( mb.ui.pMoodbar );
47 - }
48 -
49 - };
50 -
51 - mw.moodBar.init();
52 -
53 -} )( jQuery );
Index: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.init.js
——@@ -0,0 +1,51 @@
 2+/**
 3+ * Initialization script for the MoodBar MediaWiki extension
 4+ *
 5+ * @author Timo Tijhof, 2011
 6+ */
 7+( function( $ ) {
 8+ var mb = mw.moodBar = {
 9+
 10+ conf: mw.config.get( 'mbConfig' ),
 11+
 12+ ui: {
 13+ // jQuery objects
 14+ pMoodbar: null,
 15+ trigger: null,
 16+ overlay: null
 17+ },
 18+
 19+ init: function() {
 20+ var ui = mb.ui;
 21+
 22+ // Bucketing (@todo)
 23+ mb.conf.bucketKey = 'using';
 24+
 25+ // Create portlet
 26+ ui.pMoodbar = $( '<div id="p-moodbar"></div>' );
 27+
 28+ // Create trigger
 29+ ui.trigger = $( '<a>' )
 30+ .attr( 'href', '#' )
 31+ .attr( 'title', mw.msg( 'tooltip-p-moodbar-trigger-' + mb.conf.bucketKey ) )
 32+ .text( mw.msg( 'moodbar-trigger-' + mb.conf.bucketKey, mw.config.get( 'wgSiteName' ) ) );
 33+
 34+ // Insert trigger into portlet
 35+ ui.trigger
 36+ .wrap( '<p>' )
 37+ .parent()
 38+ .appendTo( ui.pMoodbar );
 39+
 40+ // Inject portlet into document, when document is ready
 41+ $( mb.inject );
 42+ },
 43+
 44+ inject: function() {
 45+ $( '#mw-head' ).append( mb.ui.pMoodbar );
 46+ }
 47+
 48+ };
 49+
 50+ mb.init();
 51+
 52+} )( jQuery );
Property changes on: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.init.js
___________________________________________________________________
Added: svn:eol-style
153 + native
Index: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.core.css
——@@ -0,0 +1,37 @@
 2+/* Overlay styling */
 3+#mw-moodBar-overlay {
 4+ position: absolute;
 5+ top: 4em;
 6+ left: 10.2em;
 7+ min-width: 100px;
 8+ min-height: 100px;
 9+ background: #fafafa;
 10+ border: 1px solid #0645ad;
 11+ border-radius: 40px;
 12+ padding: 22px 22px;
 13+ box-shadow: 7px 7px 15px rgba(0, 0, 0, 0.5);
 14+ display: none;
 15+}
 16+
 17+.mw-moodBar-overlayTitle {
 18+ font-weight: bold;
 19+}
 20+
 21+.mw-moodBar-overlayClose {
 22+ float: right;
 23+ font-size: 10px;
 24+}
 25+
 26+.mw-moodBar-type {
 27+ float: left;
 28+ width: 100px;
 29+ margin: 10px;
 30+ padding: 100px 10px 5px 10px;
 31+ background: #f0f0f0;
 32+ text-align: center;
 33+}
 34+
 35+.mw-moodBar-typeTitle,
 36+.mw-moodBar-overlayWhat {
 37+ font-size: 10px;
 38+}
Property changes on: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.core.css
___________________________________________________________________
Added: svn:eol-style
139 + native
Index: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.core.js
——@@ -0,0 +1,82 @@
 2+/**
 3+ * Front-end scripting core for the MoodBar MediaWiki extension
 4+ *
 5+ * @author Timo Tijhof, 2011
 6+ */
 7+( function( $ ) {
 8+
 9+ var mb = mw.moodBar;
 10+ $.extend( mb, {
 11+
 12+ tpl: {
 13+ overlay: '\
 14+ <div id="mw-moodBar-overlay">\
 15+ <span class="mw-moodBar-overlayClose"><a href="#"><html:msg key="moodbar-close" /></a></span>\
 16+ <div class="mw-moodBar-overlayTitle"><html:msg key="moodbar-intro-' + mb.conf.bucketKey + '" /></div>\
 17+ <div id="mw-moodBar-typeSelect"></div>\
 18+ <span class="mw-moodBar-overlayWhat"><a title-msg="tooltip-moodbar-what"><html:msg key="moodbar-what-label" /></a></span>\
 19+ </div>',
 20+ type: '\
 21+ <div class="mw-moodBar-type moodbar-type-$1">\
 22+ <span class="mw-moodBar-typeTitle"><html:msg key="moodbar-type-$1-title" /></span>\
 23+ </div>'
 24+ },
 25+
 26+ event: {
 27+ trigger: function( e ) {
 28+ e.preventDefault();
 29+ if ( !mb.ui.overlay.is( ':visible' ) ) {
 30+ mb.ui.overlay.show();
 31+ } else {
 32+ mb.ui.overlay.hide();
 33+ }
 34+ }
 35+ },
 36+
 37+ core: function() {
 38+ var msgOptions = { params: {} };
 39+ msgOptions.params['moodbar-intro-' + mb.conf.bucketKey] = [mw.config.get( 'wgSiteName' )];
 40+
 41+ // Create overlay
 42+ mb.ui.overlay = $( mb.tpl.overlay )
 43+ // Handle all html:msgs
 44+ .localize( msgOptions )
 45+ // Bind close-toggle
 46+ .find( '.mw-moodBar-overlayClose' )
 47+ .click( mb.event.trigger )
 48+ .end()
 49+ // Populate type selector
 50+ .find( '#mw-moodBar-typeSelect' ).append( function() {
 51+ var elems = [];
 52+ $.each( mb.conf.validTypes, function( id, type ) {
 53+ elems.push(
 54+ $( mb.tpl.type.replace( /\$1/g, type ) ).localize()[0]
 55+ );
 56+ } );
 57+ return elems;
 58+ })
 59+ .end()
 60+ // Link what-button
 61+ .find( '.mw-moodBar-overlayWhat > a' )
 62+ .attr( 'href', function() {
 63+ var target = mw.msg( 'moodbar-what-target' ),
 64+ r = new RegExp( '^(' + mw.config.get( 'wgUrlProtocols' ) + ')', 'i' );
 65+ if ( r.exec( target ) ) {
 66+ return target;
 67+ } else {
 68+ return mw.util.wikiGetlink( target );
 69+ }
 70+ } )
 71+ .end();
 72+
 73+ // Inject overlay
 74+ mb.ui.overlay.appendTo( 'body' );
 75+
 76+ // Bind triger
 77+ mb.ui.trigger.click( mb.event.trigger );
 78+ }
 79+ } );
 80+
 81+ mb.core();
 82+
 83+} )( jQuery );
Property changes on: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.core.js
___________________________________________________________________
Added: svn:eol-style
184 + native
Index: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.init.css
——@@ -0,0 +1,22 @@
 2+/* Based on p-personal */
 3+#p-moodbar {
 4+ position: absolute;
 5+ left: 10.75em;
 6+ top: 0px;
 7+}
 8+
 9+#p-moodbar p {
 10+ margin-top: 0.5em;
 11+ margin-right: 0.75em;
 12+ font-size: 0.75em;
 13+ white-space: nowrap;
 14+ line-height: 1.125em;
 15+ text-transform: none;
 16+ padding-left: 20px !important;
 17+ /* @embed */
 18+ background: url(images/speechbubble-icon-ellipse-blue.png) left top no-repeat;
 19+}
 20+
 21+#mw-moodbar-overlay {
 22+
 23+}
Property changes on: trunk/extensions/MoodBar/modules/ext.moodBar/ext.moodBar.init.css
___________________________________________________________________
Added: svn:eol-style
124 + native
Index: trunk/extensions/MoodBar/MoodBar.php
——@@ -23,12 +23,17 @@
2424 // Hooks
2525 $wgAutoloadClasses['MoodBarHooks'] = dirname(__FILE__).'/MoodBar.hooks.php';
2626 $wgHooks['BeforePageDisplay'][] = 'MoodBarHooks::onPageDisplay';
 27+$wgHooks['ResourceLoaderGetConfigVars'][] = 'MoodBarHooks::resourceLoaderGetConfigVars';
2728 $wgHooks['LoadExtensionSchemaUpdates'][] = 'MoodBarHooks::onLoadExtensionSchemaUpdates';
2829
2930 // Special page
3031 $wgAutoloadClasses['SpecialMoodBar'] = dirname(__FILE__).'/SpecialMoodBar.php';
3132 $wgSpecialPages['MoodBar'] = 'SpecialMoodBar';
3233
 34+// User rights
 35+$wgAvailableRights[] = 'moodbar-view';
 36+$wgGroupPermissions['moodbar']['moodbar-view'] = true;
 37+
3338 // Internationalisation
3439 $wgExtensionMessagesFiles['MoodBar'] = dirname(__FILE__).'/MoodBar.i18n.php';
3540
——@@ -38,9 +43,9 @@
3944 'remoteExtPath' => 'MoodBar/modules'
4045 );
4146
42 -$wgResourceModules['ext.moodBar'] = $mbResourceTemplate + array(
43 - 'styles' => 'ext.moodBar/ext.moodBar.css',
44 - 'scripts' => 'ext.moodBar/ext.moodBar.js',
 47+$wgResourceModules['ext.moodBar.init'] = $mbResourceTemplate + array(
 48+ 'styles' => 'ext.moodBar/ext.moodBar.init.css',
 49+ 'scripts' => 'ext.moodBar/ext.moodBar.init.js',
4550 'messages' => array(
4651 'moodbar-trigger-using',
4752 'tooltip-p-moodbar-trigger-using',
——@@ -50,4 +55,24 @@
5156 'position' => 'top',
5257 );
5358
54 -$wgGroupPermissions['moodbar']['moodbar-view'] = true;
 59+$wgResourceModules['ext.moodBar.core'] = $mbResourceTemplate + array(
 60+ 'styles' => 'ext.moodBar/ext.moodBar.core.css',
 61+ 'scripts' => 'ext.moodBar/ext.moodBar.core.js',
 62+ 'messages' => array(
 63+ 'moodbar-close',
 64+ 'moodbar-intro-using',
 65+ 'moodbar-intro-feedback',
 66+ 'moodbar-type-happy-title',
 67+ 'moodbar-type-sad-title',
 68+ 'moodbar-type-confused-title',
 69+ 'tooltip-moodbar-what',
 70+ 'moodbar-what-target',
 71+ 'moodbar-what-label',
 72+ ),
 73+ 'dependencies' => array(
 74+ 'mediawiki.util',
 75+ 'ext.moodBar.init', // just in case
 76+ 'jquery.localize',
 77+ ),
 78+ 'position' => 'bottom',
 79+);
Index: trunk/extensions/MoodBar/MoodBar.hooks.php
——@@ -6,7 +6,7 @@
77 */
88 public static function onPageDisplay( &$output, &$skin ) {
99 if ( self::shouldShowMoodbar( $output, $skin ) ) {
10 - $output->addModules( array('ext.moodBar') );
 10+ $output->addModules( array( 'ext.moodBar.init', 'ext.moodBar.core' ) );
1111 }
1212
1313 return true;
——@@ -16,17 +16,34 @@
1717 * Determines whether or not we should show the MoodBar.
1818 */
1919 public static function shouldShowMoodbar( &$output, &$skin ) {
20 - // Front-end appends to header elements, which have different
21 - // locations and IDs in every skin.
22 - // Untill there is some kind of central registry of element-ids
23 - // that skins implement, or a fixed name for each of them, just
24 - // show it in Vector for now.
25 - if ( $skin->getSkinName() == 'vector' ) {
26 - return true;
 20+
 21+ if (
 22+ // Front-end appends to header elements, which have different
 23+ // locations and IDs in every skin.
 24+ // Untill there is some kind of central registry of element-ids
 25+ // that skins implement, or a fixed name for each of them, just
 26+ // show it in Vector for now.
 27+ $skin->getSkinName() == 'vector' &&
 28+
 29+ // Only for logged-in users
 30+ $output->getUser()->isLoggedIn()
 31+ ) {
 32+ return true;
2733 }
 34+ return false;
2835 }
2936
3037 /**
 38+ * ResourceLoaderGetConfigVars hook
 39+ */
 40+ public static function resourceLoaderGetConfigVars( &$vars ) {
 41+ $vars['mbConfig'] = array(
 42+ 'validTypes' => MBFeedbackItem::getValidTypes(),
 43+ );
 44+ return true;
 45+ }
 46+
 47+ /**
3148 * Runs MoodBar schema updates
3249 */
3350 public static function onLoadExtensionSchemaUpdates( $updater = null ) {

Follow-up revisions

RevisionCommit summaryAuthorDate
r92267Followup r92256: Make message with an URL only ignore for Translatewiki, see CRraymond18:25, 15 July 2011

Comments

#Comment by Raymond (talk | contribs)   18:26, 15 July 2011

Should this URL be localized via Translatewiki? I set it to ignore for Translatewiki for now. 

'moodbar-what-target' => 'http://www.mediawiki.org/wiki/MoodBar',
#Comment by Krinkle (talk | contribs)   19:28, 15 July 2011

Yeah that's probably best for now. Thanks!

Status & tagging log