From 0bfff67aac67408fb1d32624ff6c5a26e2e8e403 Mon Sep 17 00:00:00 2001 From: Fomafix Date: Wed, 6 Feb 2019 12:00:16 +0100 Subject: [PATCH] Move bullets from HTML to CSS This allows better to style the buttons. The complicated CSS selector for the direction supports a categorytree in the user interface language like in the sidebar or on Special:CategoryTree and in the content language like on category pages and with in the content. The CSS selector :dir( rtl ) would be a short version for this but it is currently only supported by Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/:dir Bug: T288910 Change-Id: Ibfb0cb28f0086fb1b7d0997be2246bc120eea85e --- extension.json | 2 -- i18n/en.json | 4 --- i18n/qqq.json | 4 --- includes/CategoryTree.php | 12 +++----- modules/ext.categoryTree.styles.css | 32 ++++++++++++++++++++ modules/ext.categoryTree/ext.categoryTree.js | 10 +++--- 6 files changed, 40 insertions(+), 24 deletions(-) diff --git a/extension.json b/extension.json index 87ba8d37..40a72180 100644 --- a/extension.json +++ b/extension.json @@ -54,8 +54,6 @@ "messages": [ "categorytree-collapse", "categorytree-expand", - "categorytree-collapse-bullet", - "categorytree-expand-bullet", "categorytree-load", "categorytree-loading", "categorytree-nothing-found", diff --git a/i18n/en.json b/i18n/en.json index 6619e8a7..dd813aaa 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -18,10 +18,6 @@ "categorytree-mode-all": "all pages", "categorytree-collapse": "collapse", "categorytree-expand": "expand", - "categorytree-collapse-bullet": "▼", - "categorytree-expand-bullet": "►", - "categorytree-empty-bullet": "►", - "categorytree-page-bullet": " ", "categorytree-member-counts": "Contains {{PLURAL:$1|1 subcategory|$1 subcategories}}, {{PLURAL:$2|1 page|$2 pages}}, and {{PLURAL:$3|1 file|$3 files}}", "categorytree-member-num": "($5)", "categorytree-num-categories": "$1 C", diff --git a/i18n/qqq.json b/i18n/qqq.json index 77c617f7..b8e5a955 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -37,10 +37,6 @@ "categorytree-mode-all": "Item for the mode choice on [[Special:CategoryTree]], indicating that all pages are listed.\n\n{{Identical|All pages}}", "categorytree-collapse": "Tooltip for the \"collapse\" button.\n{{Identical|Collapse}}", "categorytree-expand": "Tooltip for the \"expand\" button.\n{{Identical|Expand}}", - "categorytree-collapse-bullet": "{{notranslate}}", - "categorytree-expand-bullet": "For right-to-left scripts, set this message to the single character ◄ . Otherwise, do not translate this message. Does not support wiki-syntax, html or entity references. \n{{optional}}", - "categorytree-empty-bullet": "{{optional}}\nPrefix used before category names in category pages when the number of subcategories (or something) is 0, to indicate that there is no sub-tree of items to expand. Does not support wiki-syntax, html or entity references.", - "categorytree-page-bullet": "{{notranslate}}", "categorytree-member-counts": "Tooltip showing a detailed summary of subcategory member counts. Parameters:\n* $1 - number of subcategories\n* $2 - number of pages (without subcategories and files)\n* $3 - number of files\n* $4 - (Unused) total number of members\n* $5 - (Unused) members to be shown in the tree, depending on mode\nUse with {{PLURAL}}", "categorytree-member-num": "{{notranslate}}\nHowever, if needed, you can localise the parentheses.\n\n(From https://www.mediawiki.org/wiki/Extension:CategoryTree#categorytree-member-num):\nBy default, when listing subcategories on a category page, each subcategory is followed by an integer indicating how many subcategories lie beneath it:\n
\nMy category name (5)\n
\nYou can change this behavior by overriding this system message. Parameters:\n* $1 - (Unused) number of subcategories\n* $2 - (Unused) number of articles (not including category pages or file pages)\n* $3 - (Unused) number of uploaded files\n* $4 - (Unused) total number of member pages, including category pages and file pages\n* $5 - (Varies depending on CategoryTree mode....Can someone describe it?)\n\nTip: Use the ParserFunctions extension (https://www.mediawiki.org/wiki/Help:Extension:ParserFunctions) to provide if/then/else logic to display different parts conditionally. For example:\n
\n{{#ifeq:$1|0||$1 categories}}\n
", "categorytree-num-categories": "'''\"C\" is short for \"Category\".''' It must be as short as possible.\n\nNumber of sub-categories in a category. Appears in brackets after a name of an empty category.\n\nParameters:\n* $1 - number of sub-categories. Can be used for PLURAL.\n{{Related|Categorytree-num}}", diff --git a/includes/CategoryTree.php b/includes/CategoryTree.php index 8b998547..272813c0 100644 --- a/includes/CategoryTree.php +++ b/includes/CategoryTree.php @@ -656,7 +656,7 @@ class CategoryTree { } } if ( $count === 0 ) { - $bullet = wfMessage( 'categorytree-empty-bullet' )->escaped() . ' '; + $bullet = ''; $attr['class'] = 'CategoryTreeEmptyBullet'; } else { $linkattr = []; @@ -665,21 +665,17 @@ class CategoryTree { $linkattr['data-ct-title'] = $key; if ( $children == 0 ) { - // Use ->plain() to ensure identical result as JS, - // which does: - // $link.text( mw.msg( 'categorytree-expand-bullet' ) ); - $txt = wfMessage( 'categorytree-expand-bullet' )->plain(); $linkattr[ 'data-ct-state' ] = 'collapsed'; } else { - $txt = wfMessage( 'categorytree-collapse-bullet' )->plain(); $linkattr[ 'data-ct-loaded' ] = true; $linkattr[ 'data-ct-state' ] = 'expanded'; } - $bullet = Html::element( 'span', $linkattr, $txt ) . ' '; + $bullet = Html::element( 'span', $linkattr ) . ' '; } } else { - $bullet = wfMessage( 'categorytree-page-bullet' )->escaped(); + $bullet = ''; + $attr['class'] = 'CategoryTreePageBullet'; } $s .= Xml::tags( 'span', $attr, $bullet ) . ' '; diff --git a/modules/ext.categoryTree.styles.css b/modules/ext.categoryTree.styles.css index fee60faa..db546f1f 100644 --- a/modules/ext.categoryTree.styles.css +++ b/modules/ext.categoryTree.styles.css @@ -108,6 +108,38 @@ color: #0645ad; } +/* The :empty selector in the following selectors prevents the cached HTML + * that includes a bullet in the HTML from showing two bullets. After the cache + * has expired the :empty selectors can be removed. + */ +/* @noflip */ +body.ltr .CategoryTreeEmptyBullet:empty:before, +body.ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before, +body.mediawiki .mw-content-ltr .CategoryTreeEmptyBullet:empty:before, +body.mediawiki .mw-content-ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before, +body.mediawiki .mw-content-rtl .mw-content-ltr .CategoryTreeEmptyBullet:empty:before, +body.mediawiki .mw-content-rtl .mw-content-ltr .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before { + content: '►'; +} + +/* @noflip */ +body.rtl .CategoryTreeEmptyBullet:empty:before, +body.rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before, +body.mediawiki .mw-content-rtl .CategoryTreeEmptyBullet:empty:before, +body.mediawiki .mw-content-rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before, +body.mediawiki .mw-content-ltr .mw-content-rtl .CategoryTreeEmptyBullet:empty:before, +body.mediawiki .mw-content-ltr .mw-content-rtl .CategoryTreeToggle[ data-ct-state='collapsed' ]:empty:before { + content: '◄'; +} + +.CategoryTreeToggle[ data-ct-state='expanded' ]:empty:before { + content: '▼'; +} + +.CategoryTreePageBullet:before { + content: '\A0'; +} + .CategoryTreeLabelPage { font-style: italic; } diff --git a/modules/ext.categoryTree/ext.categoryTree.js b/modules/ext.categoryTree/ext.categoryTree.js index 496a6eab..ec8acf1f 100644 --- a/modules/ext.categoryTree/ext.categoryTree.js +++ b/modules/ext.categoryTree/ext.categoryTree.js @@ -39,9 +39,8 @@ $children.show(); $link - .text( mw.msg( 'categorytree-collapse-bullet' ) ) .attr( 'title', mw.msg( 'categorytree-collapse' ) ) - .data( 'ct-state', 'expanded' ); + .attr( 'data-ct-state', 'expanded' ); if ( !$link.data( 'ct-loaded' ) ) { loadChildren( $link, $children ); @@ -59,9 +58,8 @@ .siblings( '.CategoryTreeChildren' ).hide(); $link - .text( mw.msg( 'categorytree-expand-bullet' ) ) .attr( 'title', mw.msg( 'categorytree-expand' ) ) - .data( 'ct-state', 'collapsed' ); + .attr( 'data-ct-state', 'collapsed' ); } /** @@ -71,7 +69,7 @@ */ function handleNode() { var $link = $( this ); - if ( $link.data( 'ct-state' ) === 'collapsed' ) { + if ( $link.attr( 'data-ct-state' ) === 'collapsed' ) { expandNode( $link ); } else { collapseNode( $link ); @@ -88,7 +86,7 @@ .on( 'click', handleNode ) .attr( 'title', function () { return mw.msg( - $( this ).data( 'ct-state' ) === 'collapsed' ? + $( this ).attr( 'data-ct-state' ) === 'collapsed' ? 'categorytree-expand' : 'categorytree-collapse' );