Hide TOC with CSS instead of JavaScript
authorFomafix <fomafix@googlemail.com>
Thu, 17 Aug 2017 21:56:40 +0000 (23:56 +0200)
committerFomafix <fomafix@googlemail.com>
Mon, 9 Jul 2018 06:07:52 +0000 (08:07 +0200)
commit68527cf47935a0350d3f0a153bd06cbb98062ec8
treefbc3a02f650850a6a9573bd66ffe6a7648d06e23
parentce6ae6ada0a3216b5c41d3470dd86165aa3e9a62
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
includes/api/ApiHelp.php
includes/skins/Skin.php
includes/specials/SpecialEditWatchlist.php
resources/Resources.php
resources/src/mediawiki.toc.styles/common.css [new file with mode: 0644]
resources/src/mediawiki.toc.styles/print.css [new file with mode: 0644]
resources/src/mediawiki.toc.styles/screen.less [new file with mode: 0644]
resources/src/mediawiki.toc/toc.js
tests/parser/parserTests.txt