Special:Search: Generate toggle buttons in HTML instead of JavaScript

This change ensures that the toggle buttons are already present while
loading.

Depends-On: I41225ccdf8a95a7c501fb6eea99abbd08353f4ea
Change-Id: I3292cf48214b842542ba97730ad91a1e95d127fe

diff --git a/includes/widget/search/SearchFormWidget.php b/includes/widget/search/SearchFormWidget.php
index 0c80951..5106c17 100644 (file)
--- a/includes/widget/search/SearchFormWidget.php
+++ b/includes/widget/search/SearchFormWidget.php
@@ -305,8 +305,14 @@ class SearchFormWidget {
                return "<fieldset id='mw-searchoptions'>" .
                        "<legend>" . $this->specialSearch->msg( 'powersearch-legend' )->escaped() . '</legend>' .
                        "<h4>" . $this->specialSearch->msg( 'powersearch-ns' )->parse() . '</h4>' .
-                       // populated by js if available
-                       "<div id='mw-search-togglebox'></div>" .
+                       // Handled by JavaScript if available
+                       '<div id="mw-search-togglebox">' .
+                       '<label>' . $this->specialSearch->msg( 'powersearch-togglelabel' )->escaped() . '</label>' .
+                       '<input type="button" id="mw-search-toggleall" value="' .
+                       $this->specialSearch->msg( 'powersearch-toggleall' )->escaped() . '"/>' .
+                       '<input type="button" id="mw-search-togglenone" value="' .
+                       $this->specialSearch->msg( 'powersearch-togglenone' )->escaped() . '"/>' .
+                       '</div>' .
                        $divider .
                        implode(
                                $divider,

diff --git a/resources/Resources.php b/resources/Resources.php
index ef8d974..a9e5e14 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -2187,13 +2187,7 @@ return [
        ],
        'mediawiki.special.search' => [
                'scripts' => 'resources/src/mediawiki.special.search/search.js',
-               'styles' => 'resources/src/mediawiki.special.search/search.css',
                'dependencies' => 'mediawiki.widgets.SearchInputWidget',
-               'messages' => [
-                       'powersearch-togglelabel',
-                       'powersearch-toggleall',
-                       'powersearch-togglenone',
-               ],
        ],
        'mediawiki.special.search.commonsInterwikiWidget' => [
                'scripts' => 'resources/src/mediawiki.special.search.commonsInterwikiWidget.js',

diff --git a/resources/src/mediawiki.special.search.styles.css b/resources/src/mediawiki.special.search.styles.css
index 1179f90..0f27420 100644 (file)
--- a/resources/src/mediawiki.special.search.styles.css
+++ b/resources/src/mediawiki.special.search.styles.css
@@ -187,3 +187,19 @@
        /* Note that this color won't affect the link, as desired. */
        color: #d33;
 }
+
+#mw-search-togglebox {
+       float: right;
+}
+
+#mw-search-togglebox label {
+       margin-right: 0.25em;
+}
+
+#mw-search-togglebox input {
+       margin-left: 0.25em;
+}
+
+.client-nojs #mw-search-togglebox {
+       display: none;
+}

diff --git a/resources/src/mediawiki.special.search/search.css b/resources/src/mediawiki.special.search/search.css
deleted file mode 100644 (file)
index e55c785..0000000
--- a/resources/src/mediawiki.special.search/search.css
+++ /dev/null
@@ -1,11 +0,0 @@
-#mw-search-togglebox {
-       float: right;
-}
-
-#mw-search-togglebox label {
-       margin-right: 0.25em;
-}
-
-#mw-search-togglebox input {
-       margin-left: 0.25em;
-}

diff --git a/resources/src/mediawiki.special.search/search.js b/resources/src/mediawiki.special.search/search.js
index 03ba0d2..d5760b2 100644 (file)
--- a/resources/src/mediawiki.special.search/search.js
+++ b/resources/src/mediawiki.special.search/search.js
@@ -10,26 +10,14 @@
                        $( 'input[autofocus]' ).eq( 0 ).focus();
                }
 
-               // Create check all/none button
+               // Attach handler for check all/none buttons
                $checkboxes = $( '#powersearch input[id^=mw-search-ns]' );
-               $( '#mw-search-togglebox' ).append(
-                       $( '<label>' )
-                               .text( mw.msg( 'powersearch-togglelabel' ) )
-               ).append(
-                       $( '<input>' ).attr( 'type', 'button' )
-                               .attr( 'id', 'mw-search-toggleall' )
-                               .prop( 'value', mw.msg( 'powersearch-toggleall' ) )
-                               .click( function () {
-                                       $checkboxes.prop( 'checked', true );
-                               } )
-               ).append(
-                       $( '<input>' ).attr( 'type', 'button' )
-                               .attr( 'id', 'mw-search-togglenone' )
-                               .prop( 'value', mw.msg( 'powersearch-togglenone' ) )
-                               .click( function () {
-                                       $checkboxes.prop( 'checked', false );
-                               } )
-               );
+               $( '#mw-search-toggleall' ).click( function () {
+                       $checkboxes.prop( 'checked', true );
+               } );
+               $( '#mw-search-togglenone' ).click( function () {
+                       $checkboxes.prop( 'checked', false );
+               } );
 
                // Change the header search links to what user entered
                $headerLinks = $( '.search-types a' );