Preload styles for 'jquery.tablesorter'

This change avoids a flash of missing sorting buttons while loading.
This only works if the <thead> element is already created in HTML
instead of in JavaScript.
Several special pages with sortable tables already create a <thead>.
Explict add the module 'jquery.tablesorter' and the new style module
'jquery.tablesorter.styles' on these special pages.

Change-Id: I0b446d18f47428d8c0c4aed78b75de16fe106218

diff --git a/includes/specials/SpecialMediaStatistics.php b/includes/specials/SpecialMediaStatistics.php
index 873decb..a56a745 100644 (file)
--- a/includes/specials/SpecialMediaStatistics.php
+++ b/includes/specials/SpecialMediaStatistics.php
@@ -261,7 +261,10 @@ class MediaStatisticsPage extends QueryPage {
         * @param string $mediaType
         */
        protected function outputTableStart( $mediaType ) {
-               $this->getOutput()->addHTML(
+               $out = $this->getOutput();
+               $out->addModuleStyles( 'jquery.tablesorter.styles' );
+               $out->addModules( 'jquery.tablesorter' );
+               $out->addHTML(
                        Html::openElement(
                                'table',
                                [ 'class' => [

diff --git a/includes/specials/SpecialTags.php b/includes/specials/SpecialTags.php
index fe8fa19..0c74e76 100644 (file)
--- a/includes/specials/SpecialTags.php
+++ b/includes/specials/SpecialTags.php
@@ -165,6 +165,8 @@ class SpecialTags extends SpecialPage {
                        }
                }
 
+               $out->addModuleStyles( 'jquery.tablesorter.styles' );
+               $out->addModules( 'jquery.tablesorter' );
                $out->addHTML( Xml::tags(
                        'table',
                        [ 'class' => 'mw-datatable sortable mw-tags-table' ],

diff --git a/includes/specials/SpecialTrackingCategories.php b/includes/specials/SpecialTrackingCategories.php
index 3ee7cea..4f65437 100644 (file)
--- a/includes/specials/SpecialTrackingCategories.php
+++ b/includes/specials/SpecialTrackingCategories.php
@@ -40,6 +40,8 @@ class SpecialTrackingCategories extends SpecialPage {
                $this->setHeaders();
                $this->outputHeader();
                $this->getOutput()->allowClickjacking();
+               $this->getOutput()->addModuleStyles( 'jquery.tablesorter.styles' );
+               $this->getOutput()->addModules( 'jquery.tablesorter' );
                $this->getOutput()->addHTML(
                        Html::openElement( 'table', [ 'class' => 'mw-datatable sortable',
                                'id' => 'mw-trackingcategories-table' ] ) . "\n" .

diff --git a/resources/Resources.php b/resources/Resources.php
index c8daad6..52822e4 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -325,13 +325,17 @@ return [
        'jquery.tablesorter' => [
                'targets' => [ 'desktop', 'mobile' ],
                'scripts' => 'resources/src/jquery.tablesorter/jquery.tablesorter.js',
-               'styles' => 'resources/src/jquery.tablesorter/jquery.tablesorter.less',
                'messages' => [ 'sort-descending', 'sort-ascending' ],
                'dependencies' => [
+                       'jquery.tablesorter.styles',
                        'mediawiki.RegExp',
                        'mediawiki.language.months',
                ],
        ],
+       'jquery.tablesorter.styles' => [
+               'targets' => [ 'desktop', 'mobile' ],
+               'styles' => 'resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less',
+       ],
        'jquery.textSelection' => [
                'scripts' => 'resources/src/jquery/jquery.textSelection.js',
                'dependencies' => 'jquery.client',

diff --git a/resources/src/jquery.tablesorter.styles/images/sort_both.png b/resources/src/jquery.tablesorter.styles/images/sort_both.png
new file mode 100644 (file)
index 0000000..fc63091
Binary files /dev/null and b/resources/src/jquery.tablesorter.styles/images/sort_both.png differ

diff --git a/resources/src/jquery.tablesorter.styles/images/sort_both.svg b/resources/src/jquery.tablesorter.styles/images/sort_both.svg
new file mode 100644 (file)
index 0000000..872a8db
--- /dev/null
+++ b/resources/src/jquery.tablesorter.styles/images/sort_both.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" viewBox="0 0 21 9">
+       <path d="M14.5 5l-4 4-4-4zM14.5 4l-4-4-4 4z"/>
+</svg>

diff --git a/resources/src/jquery.tablesorter.styles/images/sort_down.png b/resources/src/jquery.tablesorter.styles/images/sort_down.png
new file mode 100644 (file)
index 0000000..ce04a0f
Binary files /dev/null and b/resources/src/jquery.tablesorter.styles/images/sort_down.png differ

diff --git a/resources/src/jquery.tablesorter.styles/images/sort_down.svg b/resources/src/jquery.tablesorter.styles/images/sort_down.svg
new file mode 100644 (file)
index 0000000..452606a
--- /dev/null
+++ b/resources/src/jquery.tablesorter.styles/images/sort_down.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="4" viewBox="0 0 21 4">
+       <path d="M14.5 0l-4 4-4-4z"/>
+</svg>

diff --git a/resources/src/jquery.tablesorter.styles/images/sort_up.png b/resources/src/jquery.tablesorter.styles/images/sort_up.png
new file mode 100644 (file)
index 0000000..2ebe071
Binary files /dev/null and b/resources/src/jquery.tablesorter.styles/images/sort_up.png differ

diff --git a/resources/src/jquery.tablesorter.styles/images/sort_up.svg b/resources/src/jquery.tablesorter.styles/images/sort_up.svg
new file mode 100644 (file)
index 0000000..38f6374
--- /dev/null
+++ b/resources/src/jquery.tablesorter.styles/images/sort_up.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="4" viewBox="0 0 21 4">
+       <path d="M6.5 4l4-4 4 4z"/>
+</svg>

diff --git a/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less b/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less
new file mode 100644 (file)
index 0000000..c941da0
--- /dev/null
+++ b/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less
@@ -0,0 +1,22 @@
+@import 'mediawiki.mixins';
+
+/* Table Sorting */
+
+.client-js .sortable:not( .jquery-tablesorter ) > thead > :last-of-type > th:not( .unsortable ),
+.jquery-tablesorter th.headerSort {
+       .background-image-svg( 'images/sort_both.svg', 'images/sort_both.png' );
+       cursor: pointer;
+       background-repeat: no-repeat;
+       background-position: center right;
+       padding-right: 21px;
+}
+
+.jquery-tablesorter {
+       th.headerSortUp {
+               .background-image-svg( 'images/sort_up.svg', 'images/sort_up.png' );
+       }
+
+       th.headerSortDown {
+               .background-image-svg( 'images/sort_down.svg', 'images/sort_down.png' );
+       }
+}

diff --git a/resources/src/jquery.tablesorter/images/sort_both.png b/resources/src/jquery.tablesorter/images/sort_both.png
deleted file mode 100644 (file)
index fc63091..0000000
Binary files a/resources/src/jquery.tablesorter/images/sort_both.png and /dev/null differ

diff --git a/resources/src/jquery.tablesorter/images/sort_both.svg b/resources/src/jquery.tablesorter/images/sort_both.svg
deleted file mode 100644 (file)
index 872a8db..0000000
--- a/resources/src/jquery.tablesorter/images/sort_both.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" viewBox="0 0 21 9">
-       <path d="M14.5 5l-4 4-4-4zM14.5 4l-4-4-4 4z"/>
-</svg>

diff --git a/resources/src/jquery.tablesorter/images/sort_down.png b/resources/src/jquery.tablesorter/images/sort_down.png
deleted file mode 100644 (file)
index ce04a0f..0000000
Binary files a/resources/src/jquery.tablesorter/images/sort_down.png and /dev/null differ

diff --git a/resources/src/jquery.tablesorter/images/sort_down.svg b/resources/src/jquery.tablesorter/images/sort_down.svg
deleted file mode 100644 (file)
index 452606a..0000000
--- a/resources/src/jquery.tablesorter/images/sort_down.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="4" viewBox="0 0 21 4">
-       <path d="M14.5 0l-4 4-4-4z"/>
-</svg>

diff --git a/resources/src/jquery.tablesorter/images/sort_up.png b/resources/src/jquery.tablesorter/images/sort_up.png
deleted file mode 100644 (file)
index 2ebe071..0000000
Binary files a/resources/src/jquery.tablesorter/images/sort_up.png and /dev/null differ

diff --git a/resources/src/jquery.tablesorter/images/sort_up.svg b/resources/src/jquery.tablesorter/images/sort_up.svg
deleted file mode 100644 (file)
index 38f6374..0000000
--- a/resources/src/jquery.tablesorter/images/sort_up.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="4" viewBox="0 0 21 4">
-       <path d="M6.5 4l4-4 4 4z"/>
-</svg>

diff --git a/resources/src/jquery.tablesorter/jquery.tablesorter.less b/resources/src/jquery.tablesorter/jquery.tablesorter.less
deleted file mode 100644 (file)
index ce24b0d..0000000
--- a/resources/src/jquery.tablesorter/jquery.tablesorter.less
+++ /dev/null
@@ -1,21 +0,0 @@
-@import 'mediawiki.mixins';
-
-/* Table Sorting */
-
-table.jquery-tablesorter {
-       th.headerSort {
-               .background-image-svg( 'images/sort_both.svg', 'images/sort_both.png' );
-               cursor: pointer;
-               background-repeat: no-repeat;
-               background-position: center right;
-               padding-right: 21px;
-       }
-
-       th.headerSortUp {
-               .background-image-svg( 'images/sort_up.svg', 'images/sort_up.png' );
-       }
-
-       th.headerSortDown {
-               .background-image-svg( 'images/sort_down.svg', 'images/sort_down.png' );
-       }
-}