r65069 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r65068‎ | r65069 | r65070 >
Date:16:38, 15 April 2010
Author:catrope
Status:ok (Comments)
Tags:
Comment:
new-installer: Rewrite all JS to use jQuery and generally be more elegant
Modified paths:
  • /branches/new-installer/phase3/includes/installer/WebInstaller.php (modified) (history)
  • /branches/new-installer/phase3/includes/installer/WebInstallerOutput.php (modified) (history)
  • /branches/new-installer/phase3/skins/common/config.css (modified) (history)
  • /branches/new-installer/phase3/skins/common/config.js (modified) (history)

Diff [purge]

Index: branches/new-installer/phase3/skins/common/config.js
——@@ -1,96 +1,76 @@
2 -
3 -function showHelp(idx, show) {
4 - var showDiv = document.getElementById( 'config-show-help-' + idx );
5 - var hideDiv = document.getElementById( 'config-hide-help-' + idx );
6 - var msgDiv = document.getElementById( 'config-help-message-' + idx );
7 - if ( !showDiv || !hideDiv || !msgDiv ) return;
8 - if ( show ) {
9 - showDiv.style.display = 'none';
10 - hideDiv.style.display = 'block';
11 - msgDiv.style.display = 'block';
12 - } else {
13 - showDiv.style.display = 'block';
14 - hideDiv.style.display = 'none';
15 - msgDiv.style.display = 'none';
16 - }
17 -}
18 -
19 -function hideAllDBs() {
20 - for ( var i = 0; i < dbTypes.length; i++ ) {
21 - elt = document.getElementById( 'DB_wrapper_' + dbTypes[i] );
22 - if ( elt ) elt.style.display = 'none';
23 - }
24 -}
25 -function showDBArea(type) {
26 - hideAllDBs();
27 - var div = document.getElementById('DB_wrapper_' + type);
28 - if (div) div.style.display = 'block';
29 -}
30 -function resetDBArea() {
31 - for ( var i = 0; i < dbTypes.length; i++ ) {
32 - input = document.getElementById('DBType_' + dbTypes[i]);
33 - if ( input && input.checked ) {
34 - showDBArea( dbTypes[i] );
35 - return;
 2+(function( $ ) {
 3+ $( document ).ready( function() {
 4+ // Show/hide code for help text
 5+ $( '.config-show-help a' ).click( function() {
 6+ $(this).parent().siblings( '.config-help-message' ).show( 'slow' );
 7+ $(this).parent().siblings( '.config-hide-help' ).show();
 8+ $(this).parent().hide();
 9+ return false;
 10+ } );
 11+ $( '.config-hide-help a' ).click( function() {
 12+ $(this).parent().siblings( '.config-help-message' ).hide( 'slow' );
 13+ $(this).parent().siblings( '.config-show-help' ).show();
 14+ $(this).parent().hide();
 15+ return false;
 16+ } );
 17+
 18+ // Show/hide code for DB-specific options
 19+ // FIXME: Do we want slow, fast, or even non-animated (instantaneous) showing/hiding here?
 20+ $( '.dbRadio' ).click( function() {
 21+ var $checked = $( '.dbRadio:checked' );
 22+ var $wrapper = $( '#' + $checked.attr( 'rel' ) );
 23+ if ( !$wrapper.is( ':visible' ) ) {
 24+ $( '.dbWrapper' ).hide( 'slow' );
 25+ $wrapper.show( 'slow' );
 26+ }
 27+ } );
 28+
 29+ // Show/hide Creative Commons thingy
 30+ $( '.licenseRadio' ).click( function() {
 31+ var $wrapper = $( '#config-cc-wrapper' );
 32+ if ( $( '#config__LicenseCode_cc-choose' ).is( ':checked' ) ) {
 33+ $wrapper.show( 'slow' );
 34+ } else {
 35+ $wrapper.hide( 'slow' );
 36+ }
 37+ } );
 38+
 39+ // Show/hide random stuff (email, upload)
 40+ $( '.showHideRadio' ).click( function() {
 41+ var $wrapper = $( '#' + $(this).attr( 'rel' ) );
 42+ if ( $(this).is( ':checked' ) ) {
 43+ $wrapper.show( 'slow' );
 44+ } else {
 45+ $wrapper.hide( 'slow' );
 46+ }
 47+ } );
 48+
 49+ // Enable/disable "other" textboxes
 50+ $( '.enableForOther' ).click( function() {
 51+ var $textbox = $( '#' + $(this).attr( 'rel' ) );
 52+ if ( $(this).val() == 'other' ) { // FIXME: Ugh, this is ugly
 53+ $textbox.removeAttr( 'disabled' );
 54+ } else {
 55+ $textbox.attr( 'disabled', 'disabled' );
 56+ }
 57+ } );
 58+
 59+ // Synchronize radio button label for sitename with textbox
 60+ $label = $( 'label[for=config__NamespaceType_site-name]' );
 61+ labelText = $label.text();
 62+ $label.text( labelText.replace( '$1', '' ) );
 63+ $( '#config_wgSitename' ).bind( 'keyup change', function() { sync( $(this) ); } );
 64+ sync( $( '#config_wgSitename' ) );
 65+ function sync( $e ) {
 66+ var value = $e.val()
 67+ .replace( /[\[\]\{\}|#<>%+? ]/g, '_' )
 68+ .replace( /&/, '&amp;' )
 69+ .replace( /__+/g, '_' )
 70+ .replace( /^_+/, '' )
 71+ .replace( /_+$/, '' );
 72+ value = value.substr( 0, 1 ).toUpperCase() + value.substr( 1 );
 73+ $label.text( labelText.replace( '$1', value ) );
3674 }
37 - }
38 -}
39 -function enableOrDisableControlArray( sourceID, targetIDs, enable ) {
40 - var source = document.getElementById( sourceID );
41 - var disabled = !!source.checked == enable ? '' : '1';
42 - if ( !source ) {
43 - return;
44 - }
45 - for ( var i = 0; i < targetIDs.length; i++ ) {
46 - var elt = document.getElementById( targetIDs[i] );
47 - if ( elt ) elt.disabled = disabled;
48 - }
49 -}
50 -function enableControlArray( sourceID, targetIDs, enable ) {
51 - enableOrDisableControlArray( sourceID, targetIDs, true );
52 -}
53 -function disableControlArray( sourceID, targetIDs ) {
54 - enableOrDisableControlArray( sourceID, targetIDs, false );
55 -}
56 -
57 -function showControlArray( sourceID, targetIDs ) {
58 - var source = document.getElementById( sourceID );
59 - var show = !!source.checked == false ? '' : '1';
60 - if ( !source ) {
61 - return;
62 - }
63 - for ( var i = 0; i < targetIDs.length; i++ ) {
64 - var elt = document.getElementById( targetIDs[i] );
65 - if ( !elt ) continue;
66 - if ( show ) {
67 - elt.style.display = 'block';
68 - } else {
69 - elt.style.display = 'none';
70 - }
71 - }
72 -}
73 -wgSameNamespacePrefix = null;
74 -
75 -function setProjectNamespace() {
76 - var radio = document.getElementById( 'config__NamespaceType_site-name' );
77 - if ( radio == null ) return;
78 - var li = radio.parentNode;
79 - var labels = li.getElementsByTagName( 'label' );
80 - if ( labels.length == 0 ) return;
81 - var label = labels.item( 0 );
82 -
83 - if ( wgSameNamespacePrefix == null ) {
84 - wgSameNamespacePrefix = label.innerHTML;
85 - }
86 - var input = document.getElementById( 'config_wgSitename' );
87 - if ( input == null ) return;
88 - var value = input.value;
89 - value = value.replace(/[\[\]\{\}|#<>%+? ]/g, '_');
90 - value = value.replace(/&/, '&amp;');
91 - value = value.replace(/__+/g, '_');
92 - value = value.replace(/^_+/, '').replace(/_+$/, '');
93 - value = value.substr(0, 1).toUpperCase()
94 - + value.substr(1);
95 - label.innerHTML = wgSameNamespacePrefix.replace('$1', value);
96 -}
97 -
 75+
 76+ } );
 77+})(jQuery);
Index: branches/new-installer/phase3/skins/common/config.css
——@@ -85,6 +85,7 @@
8686 .config-show-help, .config-hide-help {
8787 margin-left: 14em;
8888 }
 89+.config-hide-help { display: none; }
8990 .config-show-help a, .config-hide-help a {
9091 background-image: url(images/help-22.png);
9192 background-position: 0 0;
——@@ -93,11 +94,10 @@
9495 height: 26px;
9596 padding-left: 26px;
9697 }
97 -.config-help-message { display: none; }
98 -.config-hide-help { display: none; }
9998
10099 .config-help-message {
101100 font-size: 85%;
 101+ display: none;
102102 }
103103
104104 .config-message {
Index: branches/new-installer/phase3/includes/installer/WebInstaller.php
——@@ -505,15 +505,15 @@
506506
507507 return
508508 "<div class=\"config-help-wrapper\">\n" .
509 - "<div class=\"config-show-help\" id=\"config-show-help-$id\">\n" .
510 - Xml::openElement( 'a', array( 'href' => "javascript:showHelp($id,true)" ) ) .
 509+ "<div class=\"config-help-message\">\n" .
 510+ $html .
 511+ "</div>\n" .
 512+ "<div class=\"config-show-help\">\n" .
 513+ "<a href=\"#\">" .
511514 wfMsgHtml( 'config-show-help' ) .
512515 "</a></div>\n" .
513 - "<div class=\"config-help-message\" id=\"config-help-message-$id\">\n" .
514 - $html.
515 - "</div>\n" .
516 - "<div class=\"config-hide-help\" id=\"config-hide-help-$id\">\n" .
517 - Xml::openElement( 'a', array( 'href' => "javascript:showHelp($id,false)" ) ) .
 516+ "<div class=\"config-hide-help\">\n" .
 517+ "<a href=\"#\">" .
518518 wfMsgHtml( 'config-hide-help' ) .
519519 "</a></div>\n</div>\n";
520520 }
——@@ -994,32 +994,29 @@
995995 $defaultType = $this->getVar( 'wgDBtype' );
996996 foreach ( $this->parent->getVar( '_CompiledDBs' ) as $type ) {
997997 $installer = $this->parent->getDBInstaller( $type );
998 - $encType = Xml::encodeJsVar( $type );
999998 $types .=
1000999 '<li>' .
10011000 Xml::radioLabel(
10021001 $installer->getReadableName(),
10031002 'DBType',
10041003 $type,
1005 - 'DBType_' . $type,
 1004+ "DBType_$type",
10061005 $type == $defaultType,
1007 - array( 'onclick' => "showDBArea($encType);" )
 1006+ array( 'class' => 'dbRadio', 'rel' => "DB_wrapper_$type" )
10081007 ) .
10091008 "</li>\n";
10101009
10111010 $settings .=
1012 - Xml::openElement( 'div', array( 'id' => 'DB_wrapper_' . $type ) ) .
 1011+ Xml::openElement( 'div', array( 'id' => 'DB_wrapper_' . $type, 'class' => 'dbWrapper' ) ) .
10131012 Xml::element( 'h3', array(), wfMsg( 'config-header-' . $type ) ) .
10141013 $installer->getConnectForm() .
10151014 "</div>\n";
10161015 }
10171016 $types .= "</ul><br clear=\"left\"/>\n";
1018 - $encType = Xml::encodeJsVar( $defaultType );
10191017
10201018 $this->addHTML(
10211019 $this->parent->label( 'config-db-type', false, $types ) .
1022 - $settings .
1023 - "<script type=\"text/javascript\">resetDBArea();</script>\n"
 1020+ $settings
10241021 );
10251022
10261023 $this->endForm();
——@@ -1132,8 +1129,6 @@
11331130 if ( $this->getVar( 'wgSitename' ) == $GLOBALS['wgSitename'] ) {
11341131 $this->setVar( 'wgSitename', '' );
11351132 }
1136 - $js = 'enableControlArray("config__NamespaceType_other", ["config_wgMetaNamespace"])';
1137 - $attribs = array( 'onclick' => $js );
11381133
11391134 // Set wgMetaNamespace to something valid before we show the form.
11401135 // $wgMetaNamespace defaults to $wgSiteName which is 'MediaWiki'
——@@ -1144,10 +1139,6 @@
11451140 $this->parent->getTextBox( array(
11461141 'var' => 'wgSitename',
11471142 'label' => 'config-site-name',
1148 - 'attribs' => array(
1149 - 'onkeyup' => 'setProjectNamespace();',
1150 - 'onchange' => 'setProjectNamespace();'
1151 - )
11521143 ) ) .
11531144 $this->parent->getHelpBox( 'config-site-name-help' ) .
11541145 $this->parent->getRadioSet( array(
——@@ -1155,13 +1146,13 @@
11561147 'label' => 'config-project-namespace',
11571148 'itemLabelPrefix' => 'config-ns-',
11581149 'values' => array( 'site-name', 'generic', 'other' ),
1159 - 'commonAttribs' => $attribs,
 1150+ 'commonAttribs' => array( 'class' => 'enableForOther', 'rel' => 'config_wgMetaNamespace' ),
11601151 ) ) .
11611152 $this->parent->getTextBox( array(
11621153 'var' => 'wgMetaNamespace',
11631154 'label' => '',
 1155+ 'attribs' => array( 'disabled' => '' ),
11641156 ) ) .
1165 - "<script type=\"text/javascript\">\nsetProjectNamespace();\n$js\n</script>\n" .
11661157 $this->parent->getHelpBox( 'config-project-namespace-help' ) .
11671158 $this->parent->getFieldsetStart( 'config-admin-box' ) .
11681159 $this->parent->getTextBox( array(
——@@ -1297,10 +1288,6 @@
12981289 }
12991290 }
13001291
1301 - $licenseJs = 'showControlArray("config__LicenseCode_cc-choose", ["config-cc-wrapper"]);';
1302 - $emailJs = 'enableControlArray("config_wgEnableEmail", ["config_wgPasswordSender", "config_wgEnableUserEmail", "config_wgEnotifUserTalk", "config_wgEnotifWatchlist", "config_wgEmailAuthentication"]);';
1303 - $uploadJs = 'enableControlArray("config_wgEnableUploads", ["config_wgDeletedDirectory"]);';
1304 -
13051292 $this->startForm();
13061293 $this->addHTML(
13071294 # User Rights
——@@ -1318,7 +1305,7 @@
13191306 'label' => 'config-license',
13201307 'itemLabelPrefix' => 'config-license-',
13211308 'values' => array_keys( $this->parent->licenses ),
1322 - 'commonAttribs' => array( 'onclick' => $licenseJs )
 1309+ 'commonAttribs' => array( 'class' => 'licenseRadio' ),
13231310 ) ) .
13241311 $this->getCCChooser() .
13251312 $this->parent->getHelpBox( 'config-license-help' ) .
——@@ -1328,9 +1315,10 @@
13291316 $this->parent->getCheckBox( array(
13301317 'var' => 'wgEnableEmail',
13311318 'label' => 'config-enable-email',
1332 - 'attribs' => array( 'onclick' => $emailJs ),
 1319+ 'attribs' => array( 'class' => 'showHideRadio', 'rel' => 'emailwrapper' ),
13331320 ) ) .
13341321 $this->parent->getHelpBox( 'config-enable-email-help' ) .
 1322+ "<div id=\"emailwrapper\">" .
13351323 $this->parent->getTextBox( array(
13361324 'var' => 'wgPasswordSender',
13371325 'label' => 'config-email-sender'
——@@ -1356,6 +1344,7 @@
13571345 'label' => 'config-email-auth',
13581346 ) ) .
13591347 $this->parent->getHelpBox( 'config-email-auth-help' ) .
 1348+ "</div>" .
13601349 $this->parent->getFieldsetEnd()
13611350 );
13621351
——@@ -1379,9 +1368,10 @@
13801369 $this->parent->getCheckBox( array(
13811370 'var' => 'wgEnableUploads',
13821371 'label' => 'config-upload-enable',
1383 - 'attribs' => array( 'onclick' => $uploadJs ),
 1372+ 'attribs' => array( 'class' => 'showHideRadio', 'rel' => 'uploadwrapper' ),
13841373 ) ) .
13851374 $this->parent->getHelpBox( 'config-upload-help' ) .
 1375+ '<div id="uploadwrapper" style="display: none;">' .
13861376 $this->parent->getTextBox( array(
13871377 'var' => 'wgDeletedDirectory',
13881378 'label' => 'config-upload-deleted',
——@@ -1392,6 +1382,7 @@
13931383 'label' => 'config-logo'
13941384 ) ) .
13951385 $this->parent->getHelpBox( 'config-logo-help' ) .
 1386+ '</div>' .
13961387 $this->parent->getFieldsetEnd()
13971388 );
13981389
——@@ -1420,10 +1411,7 @@
14211412 'label' => 'config-memcached-servers',
14221413 ) ) .
14231414 $this->parent->getHelpBox( 'config-memcached-help' ) .
1424 - $this->parent->getFieldsetEnd() .
1425 -
1426 - "<script type=\"text/javascript\">$licenseJs $emailJs $uploadJs</script>\n"
1427 -
 1415+ $this->parent->getFieldsetEnd()
14281416 );
14291417 $this->endForm();
14301418 }
——@@ -1466,7 +1454,7 @@
14671455 }
14681456
14691457 return
1470 - "<div class=\"config-cc-wrapper\" id=\"config-cc-wrapper\">\n" .
 1458+ "<div class=\"config-cc-wrapper\" id=\"config-cc-wrapper\" style=\"display: none;\">\n" .
14711459 Xml::element( 'iframe', $iframeAttribs, '', false /* not short */ ) .
14721460 "</div>\n";
14731461 }
Index: branches/new-installer/phase3/includes/installer/WebInstallerOutput.php
——@@ -112,6 +112,7 @@
113113 <?php echo "var dbTypes = " . Xml::encodeJsVar( $dbTypes ) . ";\n"; ?>
114114 // -->
115115 </script>
 116+ <script type="text/javascript" src="../skins/common/jquery.min.js"></script>
116117 <script type="text/javascript" src="../skins/common/config.js"></script>
117118 </head>
118119
——@@ -176,6 +177,7 @@
177178 <title><?php $this->outputTitle(); ?></title>
178179 <link rel="stylesheet" type="text/css" href="../skins/monobook/main.css"/>
179180 <link rel="stylesheet" type="text/css" href="../skins/common/config.css"/>
 181+ <script type="text/javascript" src="../skins/common/jquery.min.js"></script>
180182 <script type="text/javascript" src="../skins/common/config.js"></script>
181183 </head>
182184

Follow-up revisions

RevisionCommit summaryAuthorDate
r65103new-installer: Fix r65069 so DB selection actually works, prettify textbox sy...catrope22:59, 15 April 2010
r68769Fix r65069 per CR: put logo setting outside of block hidden when uploads are ...catrope10:44, 30 June 2010

Comments

#Comment by MaxSem (talk | contribs)   18:29, 15 April 2010

DB selector JS doesn't work for me in Opera and FF.

#Comment by Tim Starling (talk | contribs)   00:54, 30 June 2010

Why did you put the $wgLogo configuration inside the div that's hidden by disabling uploads?

#Comment by Catrope (talk | contribs)   08:57, 30 June 2010

Oops, good point. Will fix.

Status & tagging log