From: Fomafix Date: Sat, 29 Dec 2018 19:56:49 +0000 (+0100) Subject: Preload styles for 'jquery.tablesorter' X-Git-Tag: 1.34.0-rc.0~2969^2 X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/pie.php?a=commitdiff_plain;h=535df46f3f5a35e426d3415e76824d70e84fb3a7;p=lhc%2Fweb%2Fwiklou.git 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 --- 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.styles/images/sort_both.png b/resources/src/jquery.tablesorter.styles/images/sort_both.png new file mode 100644 index 0000000000..fc630913c0 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 index 0000000000..872a8dbf4e --- /dev/null +++ b/resources/src/jquery.tablesorter.styles/images/sort_both.svg @@ -0,0 +1,4 @@ + + + + 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 index 0000000000..ce04a0fcd7 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 index 0000000000..452606abbf --- /dev/null +++ b/resources/src/jquery.tablesorter.styles/images/sort_down.svg @@ -0,0 +1,4 @@ + + + + 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 index 0000000000..2ebe071338 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 index 0000000000..38f6374a05 --- /dev/null +++ b/resources/src/jquery.tablesorter.styles/images/sort_up.svg @@ -0,0 +1,4 @@ + + + + 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/images/sort_both.png b/resources/src/jquery.tablesorter/images/sort_both.png deleted file mode 100644 index fc630913c0..0000000000 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 index 872a8dbf4e..0000000000 --- a/resources/src/jquery.tablesorter/images/sort_both.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/resources/src/jquery.tablesorter/images/sort_down.png b/resources/src/jquery.tablesorter/images/sort_down.png deleted file mode 100644 index ce04a0fcd7..0000000000 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 index 452606abbf..0000000000 --- a/resources/src/jquery.tablesorter/images/sort_down.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/resources/src/jquery.tablesorter/images/sort_up.png b/resources/src/jquery.tablesorter/images/sort_up.png deleted file mode 100644 index 2ebe071338..0000000000 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 index 38f6374a05..0000000000 --- a/resources/src/jquery.tablesorter/images/sort_up.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - 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' ); - } -}