From 4e81b5c425ba6d6e7ca5ac0ccef14f9f40d77ee0 Mon Sep 17 00:00:00 2001 From: Ed Sanders Date: Wed, 20 Mar 2019 13:47:50 +0000 Subject: [PATCH] jquery.tablesorter: Fix pre-JS selector to match wikitext-generated sortable tables Also pre-load tablesorter styles when output contains 'sortable'. The :not( jquery-tablesorter ) selector removes the pre-JS styles once the code has run, so any errors in the CSS selector will be fixed at that point. For the majority of simple cases there should be no FOUC. Bug: T218781 Change-Id: Ifcb908ed4f3010d10c84f0f6a0f3b8692bec964b --- includes/skins/Skin.php | 1 + .../jquery.tablesorter.styles.less | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/includes/skins/Skin.php b/includes/skins/Skin.php index 7ac2927666..6ab2468864 100644 --- a/includes/skins/Skin.php +++ b/includes/skins/Skin.php @@ -216,6 +216,7 @@ abstract class Skin extends ContextSource { // Preload jquery.tablesorter for mediawiki.page.ready if ( strpos( $out->getHTML(), 'sortable' ) !== false ) { $modules['content'][] = 'jquery.tablesorter'; + $modules['styles']['content'][] = 'jquery.tablesorter.styles'; } // Preload jquery.makeCollapsible for mediawiki.page.ready diff --git a/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less b/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less index c941da0557..589ae23502 100644 --- a/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less +++ b/resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less @@ -2,7 +2,13 @@ /* Table Sorting */ -.client-js .sortable:not( .jquery-tablesorter ) > thead > :last-of-type > th:not( .unsortable ), +// Reserve space for table sortable controls +// This selector is not perfect as it will not correctly handle cases with +// merged header cells, so ensure it is removed after the JS has run by using +// the :not( .jquery-tablesorter ) selector. +// It will still prevent a visible jump in the majority of simpler cases. +// The second selector in this rule is for after the JS has run. +.client-js .sortable:not( .jquery-tablesorter ) > * > tr:first-child > th:not( .unsortable ), .jquery-tablesorter th.headerSort { .background-image-svg( 'images/sort_both.svg', 'images/sort_both.png' ); cursor: pointer; -- 2.20.1