From 68527cf47935a0350d3f0a153bd06cbb98062ec8 Mon Sep 17 00:00:00 2001 From: Fomafix Date: Thu, 17 Aug 2017 23:56:40 +0200 Subject: [PATCH] Hide TOC with CSS instead of JavaScript Changes in the behavior: * The toggle button generate no FOUC on loading. * On keyboard navigation the toggle key is the space key and not the return key. * Animation on hide and show is missing. Maybe a new animation with CSS can added. * The state of the button is not saved in a cookie. * Self-build TOCs can not get hidden. Browser support: * The new implementation does not need JavaScript and therefor it works on browser with disabled JavaScript and on Grade C browser. * The new implementation requires the CSS pseudo-class selector :checked. Therefor IE8 and lower are not supported. Risks: * The new implementation needs additional HTML elements. These elements also get cached and crawled. The elements have no content so they get hopefully ignored by crawler. * The new CSS code imitates some styles (link, focus). This must kept up to date. * Multiple TOCs on one page would generate the same id attribute. This can avoided by appending a counter or better and easier a random string to the id attribute. Bug: T195053 Change-Id: I82db33d656b3795d7134a91d20ed9d93a3471086 --- includes/Linker.php | 14 ++++- includes/api/ApiHelp.php | 1 + includes/skins/Skin.php | 1 + includes/specials/SpecialEditWatchlist.php | 1 + resources/Resources.php | 12 ++++ resources/src/mediawiki.toc.styles/common.css | 6 ++ resources/src/mediawiki.toc.styles/print.css | 4 ++ .../src/mediawiki.toc.styles/screen.less | 50 +++++++++++++++ resources/src/mediawiki.toc/toc.js | 3 +- tests/parser/parserTests.txt | 62 +++++++++---------- 10 files changed, 121 insertions(+), 33 deletions(-) create mode 100644 resources/src/mediawiki.toc.styles/common.css create mode 100644 resources/src/mediawiki.toc.styles/print.css create mode 100644 resources/src/mediawiki.toc.styles/screen.less diff --git a/includes/Linker.php b/includes/Linker.php index 5fc5eb1c29..f4b9ede234 100644 --- a/includes/Linker.php +++ b/includes/Linker.php @@ -1583,12 +1583,24 @@ class Linker { $title = wfMessage( 'toc' )->inLanguage( $lang )->escaped(); return '
' + . Html::element( 'input', [ + 'type' => 'checkbox', + 'id' => 'toctogglecheckbox', + 'class' => 'toctogglecheckbox', + 'style' => 'display:none', + ] ) . Html::openElement( 'div', [ 'class' => 'toctitle', 'lang' => $lang->getHtmlCode(), 'dir' => $lang->getDir(), ] ) - . '

' . $title . "

\n" + . "

$title

" + . '' + . Html::label( '', 'toctogglecheckbox', [ + 'class' => 'toctogglelabel', + ] ) + . '' + . "\n" . $toc . "\n\n"; } diff --git a/includes/api/ApiHelp.php b/includes/api/ApiHelp.php index 8d24859078..cf926793a0 100644 --- a/includes/api/ApiHelp.php +++ b/includes/api/ApiHelp.php @@ -104,6 +104,7 @@ class ApiHelp extends ApiBase { ] ); if ( !empty( $options['toc'] ) ) { $out->addModules( 'mediawiki.toc' ); + $out->addModuleStyles( 'mediawiki.toc.styles' ); } $out->setPageTitle( $context->msg( 'api-help-title' ) ); diff --git a/includes/skins/Skin.php b/includes/skins/Skin.php index 340bc2f5bd..b8cd921b8d 100644 --- a/includes/skins/Skin.php +++ b/includes/skins/Skin.php @@ -235,6 +235,7 @@ abstract class Skin extends ContextSource { if ( $out->isTOCEnabled() ) { $modules['content'][] = 'mediawiki.toc'; + $modules['styles']['content'][] = 'mediawiki.toc.styles'; } // Add various resources if required diff --git a/includes/specials/SpecialEditWatchlist.php b/includes/specials/SpecialEditWatchlist.php index 5e04d8d35c..17b3201ddf 100644 --- a/includes/specials/SpecialEditWatchlist.php +++ b/includes/specials/SpecialEditWatchlist.php @@ -160,6 +160,7 @@ class SpecialEditWatchlist extends UnlistedSpecialPage { } elseif ( $this->toc !== false ) { $out->prependHTML( $this->toc ); $out->addModules( 'mediawiki.toc' ); + $out->addModuleStyles( 'mediawiki.toc.styles' ); } } diff --git a/resources/Resources.php b/resources/Resources.php index 0fe5dd7513..399f83758e 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1362,6 +1362,18 @@ return [ 'messages' => [ 'showtoc', 'hidetoc' ], 'targets' => [ 'desktop', 'mobile' ], ], + 'mediawiki.toc.styles' => [ + 'class' => ResourceLoaderLessVarFileModule::class, + 'lessMessages' => [ 'hidetoc', 'showtoc' ], + 'styles' => [ + 'resources/src/mediawiki.toc.styles/common.css', + 'resources/src/mediawiki.toc.styles/screen.less' + => [ 'media' => 'screen' ], + 'resources/src/mediawiki.toc.styles/print.css' + => [ 'media' => 'print' ], + ], + 'targets' => [ 'desktop', 'mobile' ], + ], 'mediawiki.Uri' => [ 'scripts' => 'resources/src/mediawiki.Uri/Uri.js', 'templates' => [ diff --git a/resources/src/mediawiki.toc.styles/common.css b/resources/src/mediawiki.toc.styles/common.css new file mode 100644 index 0000000000..31a88269e3 --- /dev/null +++ b/resources/src/mediawiki.toc.styles/common.css @@ -0,0 +1,6 @@ +/* This style is loaded on all media. */ + +/* Hide the content of the TOC when the checkbox is checked. */ +.toctogglecheckbox:checked ~ ul { + display: none; +} diff --git a/resources/src/mediawiki.toc.styles/print.css b/resources/src/mediawiki.toc.styles/print.css new file mode 100644 index 0000000000..e905dbe72e --- /dev/null +++ b/resources/src/mediawiki.toc.styles/print.css @@ -0,0 +1,4 @@ +/* Hide the complete TOC on print when the TOC is hidden. */ +.toctogglecheckbox:checked + .toctitle { + display: none; +} diff --git a/resources/src/mediawiki.toc.styles/screen.less b/resources/src/mediawiki.toc.styles/screen.less new file mode 100644 index 0000000000..16b2591c16 --- /dev/null +++ b/resources/src/mediawiki.toc.styles/screen.less @@ -0,0 +1,50 @@ +/* This style adds a toggle button with internationalized message for the TOC. */ + +/* When the browser supports :checked then overwrite the style="display:none" and make the /* +/* checkbox invisible on another way to allow to focus the checkbox with keyboard. */ +:not( :checked ) > .toctogglecheckbox { + display: inline !important; /* stylelint-disable-line declaration-no-important */ + position: absolute; + opacity: 0; +} + +.toctogglespan { + font-size: 94%; +} + +/* IE8 does not support :checked and therefor it does not support the hiding at all. */ +/* The selector ":not( :checked ) >" prevents that the useless brackets are shown on IE8. */ +:not( :checked ) > .toctogglespan:before { + content: ' ['; +} + +:not( :checked ) > .toctogglespan:after { + content: ']'; +} + +/* Make the label look like a link. */ +.toctogglelabel { + cursor: pointer; + color: #0645ad; +} + +.toctogglelabel:hover { + text-decoration: underline; +} + +/* Show a focus ring around the label when focusing the invisible checkbox. */ +/* This simulates that the label is in focus. */ +.toctogglecheckbox:focus + .toctitle .toctogglelabel { + text-decoration: underline; + outline: dotted 1px; /* Firefox style for focus */ + outline: auto -webkit-focus-ring-color; /* Webkit style for focus */ +} + +/* Change the text of the button based on the state of the checkbox. */ +.toctogglecheckbox:checked + .toctitle .toctogglelabel:after { + content: '@{msg-showtoc}'; +} + +.toctogglecheckbox:not( :checked ) + .toctitle .toctogglelabel:after { + content: '@{msg-hidetoc}'; +} diff --git a/resources/src/mediawiki.toc/toc.js b/resources/src/mediawiki.toc/toc.js index 5e10a5be5a..4c201a67a1 100644 --- a/resources/src/mediawiki.toc/toc.js +++ b/resources/src/mediawiki.toc/toc.js @@ -6,6 +6,7 @@ $content.find( '.toc' ).addBack( '.toc' ).each( function () { var hideToc, $this = $( this ), + $tocToggleCheckbox = $this.children( '.toctogglecheckbox' ), $tocTitle = $this.find( '.toctitle' ), $tocToggleLink = $this.find( '.togglelink' ), $tocList = $this.find( 'ul' ).eq( 0 ); @@ -27,7 +28,7 @@ // Only add it if there is a complete TOC and it doesn't // have a toggle added already - if ( $tocTitle.length && $tocList.length && !$tocToggleLink.length ) { + if ( !$tocToggleCheckbox.length && $tocTitle.length && $tocList.length && !$tocToggleLink.length ) { hideToc = mw.cookie.get( 'hidetoc' ) === '1'; $tocToggleLink = $( '' ) diff --git a/tests/parser/parserTests.txt b/tests/parser/parserTests.txt index 05afefacff..e1a94b3836 100644 --- a/tests/parser/parserTests.txt +++ b/tests/parser/parserTests.txt @@ -16390,7 +16390,7 @@ Section headings with TOC Some text ===Another headline=== !! html -

Contents

+

Contents

  • 1 Headline 1
      @@ -16433,7 +16433,7 @@ __FORCETOC__ ==Headline 2== ==Headline== !! html/php -

      Contents

      +

      Contents

      • 1 Headline 2
      • 2 Headline
        • @@ -16467,7 +16467,7 @@ parsoid=wt2html =========Level 9 Heading========= ==========Level 10 Heading========== !! html/php -

        Contents

        +

        Contents

        • 1 Level 1 Heading
            @@ -16531,7 +16531,7 @@ TOC regression (T11764) ==title 2== ===title 2.1=== !! html -

            Contents

            +

            Contents

            • 1 title 1
                @@ -16566,7 +16566,7 @@ TOC for heading containing (T96153) __FORCETOC__ ==New title== !! html/php -

                Contents

                +

                Contents

                @@ -16588,7 +16588,7 @@ wgMaxTocLevel=3 ==title 2== ===title 2.1=== !! html -

                Contents

                +

                Contents

                • 1 title 1
                    @@ -16624,7 +16624,7 @@ wgMaxTocLevel=3 ====Section 1.1.1.1==== ==Section 2== !! html -

                    Contents

                    +

                    Contents

                    • 1 Section 1
                        @@ -16717,7 +16717,7 @@ __TOC__ ===title 1.1=== ==title 2== !! html -

                        Contents

                        +

                        Contents

                        • 1 title 1
                            @@ -16793,7 +16793,7 @@ section 5 !! html/php

                            The tooltips shall not show entities to the user (ie. be double escaped)

                            -

                            Contents

                            +

                            Contents

                            • 1 text > text
                            • 2 text < text
                              • @@ -16869,7 +16869,7 @@ section 6 !! html/php

                              Id should not contain + for spaces

                              -

                              Contents

                              +

                              Contents

                              • 1 Space between Text
                              • 2 Space-Entity between Text
                                • @@ -16945,7 +16945,7 @@ parsoid=wt2html,wt2wt,html2html =''italic'' heading== ==''italic'' heading= !! html/php -

                                Contents

                                +

                                Contents

                                • 1 foo=
                                • 2 =foo
                                  • @@ -16980,7 +16980,7 @@ HTML headers vs TOC (T25393) ==Header 2.2== __NOEDITSECTION__ !! html/php -

                                  Contents

                                  +

                                  Contents

                                  • 1 Header 1
                                      @@ -18906,7 +18906,7 @@ Fuzz testing: Parser14 http://__TOC__ !! html/php

                                      onmouseover=[edit]

                                      -http://

                                      Contents

                                      +http://

                                      Contents

                                      @@ -18915,7 +18915,7 @@ http://

                                      C !! html/php+tidy

                                      onmouseover=[edit]

                                      -http://

                                      Contents

                                      +http://

                                      Contents

                                      @@ -21464,7 +21464,7 @@ Out-of-order TOC heading levels =====5===== ==2== !! html -

                                      Contents

                                      +

                                      Contents

                                      • 1 2
                                          @@ -24097,7 +24097,7 @@ title=[[Main Page]] __TOC__ ==''Lost'' episodes== !! html/php -

                                          Contents

                                          +

                                          Contents

                                          @@ -24118,7 +24118,7 @@ title=[[Main Page]] __TOC__ =='''should be bold''' then normal text== !! html/php -

                                          Contents

                                          +

                                          Contents

                                          @@ -24139,7 +24139,7 @@ title=[[Main Page]] __TOC__ ==Image [[Image:foobar.jpg]]== !! html/php -

                                          Contents

                                          +

                                          Contents

                                          @@ -24160,7 +24160,7 @@ title=[[Main Page]] __TOC__ ==
                                          Quote
                                          == !! html/php -

                                          Contents

                                          +

                                          Contents

                                          @@ -24169,7 +24169,7 @@ __TOC__

                                          Quote
                                          [edit]

                                          !! html/php+tidy -

                                          Contents

                                          +

                                          Contents

                                          @@ -24193,7 +24193,7 @@ __TOC__ Hanc marginis exiguitas non caperet. QED !! html/php -

                                          Contents

                                          +

                                          Contents

                                          @@ -24218,7 +24218,7 @@ __TOC__ ==Foo
                                          Bar
                                          == !! html/php -

                                          Contents

                                          +

                                          Contents

                                          • 1 Foo Bar
                                          • 2 Foo Bar
                                            • @@ -24229,7 +24229,7 @@ __TOC__

                                            Foo
                                            Bar
                                            [edit]

                                            !! html/php+tidy -

                                            Contents

                                            +

                                            Contents

                                            • 1 Foo Bar
                                            • 2 Foo Bar
                                              • @@ -24257,7 +24257,7 @@ __TOC__ ==Evilbye== !! html/php -

                                              Contents

                                              +

                                              Contents

                                              • 1 Hello
                                              • 2 b">Evilbye
                                                • @@ -24288,7 +24288,7 @@ __TOC__ ==Attributes after dir on these span tags must be deleted from the TOC== !! html/php -

                                                Contents

                                                +

                                                Contents

                                                • 1 C++
                                                • 2 זבנג!
                                                  • @@ -24319,7 +24319,7 @@ T74884: bdi element in ToC __TOC__ ==test== !! html/php -

                                                  Contents

                                                  +

                                                  Contents

                                                  @@ -24338,7 +24338,7 @@ T35715: s/strike element in ToC __TOC__ ==test test test== !! html/php -

                                                  Contents

                                                  +

                                                  Contents

                                                  @@ -24357,7 +24357,7 @@ Empty

                                                  tag in TOC, removed by Sanitizer (T92892) __TOC__ ==x== !! html/php -

                                                  Contents

                                                  +

                                                  Contents

                                                  @@ -29937,7 +29937,7 @@ wgFragmentMode=[ 'html5', 'legacy' ] [[#啤酒]] [[#%E5%95%A4%E9%85%92]] !! html/php -

                                                  Contents

                                                  +

                                                  Contents

                                                  • 1 Foo bar
                                                  • 2 foo Bar
                                                    • @@ -30003,7 +30003,7 @@ wgFragmentMode=[ 'legacy', 'html5' ] [[#啤酒]] [[#%E5%95%A4%E9%85%92]] !! html/php -

                                                    Contents

                                                    +

                                                    Contents