From 535df46f3f5a35e426d3415e76824d70e84fb3a7 Mon Sep 17 00:00:00 2001 From: Fomafix Date: Sat, 29 Dec 2018 20:56:49 +0100 Subject: [PATCH] Preload styles for 'jquery.tablesorter' This change avoids a flash of missing sorting buttons while loading. This only works if the element is already created in HTML instead of in JavaScript. Several special pages with sortable tables already create a . Explict add the module 'jquery.tablesorter' and the new style module 'jquery.tablesorter.styles' on these special pages. Change-Id: I0b446d18f47428d8c0c4aed78b75de16fe106218 --- includes/specials/SpecialMediaStatistics.php | 5 +++- includes/specials/SpecialTags.php | 2 ++ .../specials/SpecialTrackingCategories.php | 2 ++ resources/Resources.php | 6 ++++- .../images/sort_both.png | Bin .../images/sort_both.svg | 0 .../images/sort_down.png | Bin .../images/sort_down.svg | 0 .../images/sort_up.png | Bin .../images/sort_up.svg | 0 .../jquery.tablesorter.styles.less | 22 ++++++++++++++++++ .../jquery.tablesorter.less | 21 ----------------- 12 files changed, 35 insertions(+), 23 deletions(-) rename resources/src/{jquery.tablesorter => jquery.tablesorter.styles}/images/sort_both.png (100%) rename resources/src/{jquery.tablesorter => jquery.tablesorter.styles}/images/sort_both.svg (100%) rename resources/src/{jquery.tablesorter => jquery.tablesorter.styles}/images/sort_down.png (100%) rename resources/src/{jquery.tablesorter => jquery.tablesorter.styles}/images/sort_down.svg (100%) rename resources/src/{jquery.tablesorter => jquery.tablesorter.styles}/images/sort_up.png (100%) rename resources/src/{jquery.tablesorter => jquery.tablesorter.styles}/images/sort_up.svg (100%) create mode 100644 resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less delete mode 100644 resources/src/jquery.tablesorter/jquery.tablesorter.less diff --git a/includes/specials/SpecialMediaStatistics.php b/includes/specials/SpecialMediaStatistics.php index 873decb5d5..a56a745517 100644 --- 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 fe8fa194b0..0c74e76297 100644 --- 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 3ee7cea1ca..4f6543770c 100644 --- 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 c8daad67ba..52822e4855 100644 --- 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/images/sort_both.png b/resources/src/jquery.tablesorter.styles/images/sort_both.png similarity index 100% rename from resources/src/jquery.tablesorter/images/sort_both.png rename to resources/src/jquery.tablesorter.styles/images/sort_both.png diff --git a/resources/src/jquery.tablesorter/images/sort_both.svg b/resources/src/jquery.tablesorter.styles/images/sort_both.svg similarity index 100% rename from resources/src/jquery.tablesorter/images/sort_both.svg rename to resources/src/jquery.tablesorter.styles/images/sort_both.svg diff --git a/resources/src/jquery.tablesorter/images/sort_down.png b/resources/src/jquery.tablesorter.styles/images/sort_down.png similarity index 100% rename from resources/src/jquery.tablesorter/images/sort_down.png rename to resources/src/jquery.tablesorter.styles/images/sort_down.png diff --git a/resources/src/jquery.tablesorter/images/sort_down.svg b/resources/src/jquery.tablesorter.styles/images/sort_down.svg similarity index 100% rename from resources/src/jquery.tablesorter/images/sort_down.svg rename to resources/src/jquery.tablesorter.styles/images/sort_down.svg diff --git a/resources/src/jquery.tablesorter/images/sort_up.png b/resources/src/jquery.tablesorter.styles/images/sort_up.png similarity index 100% rename from resources/src/jquery.tablesorter/images/sort_up.png rename to resources/src/jquery.tablesorter.styles/images/sort_up.png diff --git a/resources/src/jquery.tablesorter/images/sort_up.svg b/resources/src/jquery.tablesorter.styles/images/sort_up.svg similarity index 100% rename from resources/src/jquery.tablesorter/images/sort_up.svg rename to resources/src/jquery.tablesorter.styles/images/sort_up.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 index 0000000000..c941da0557 --- /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/jquery.tablesorter.less b/resources/src/jquery.tablesorter/jquery.tablesorter.less deleted file mode 100644 index ce24b0de65..0000000000 --- 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' ); - } -} -- 2.20.1