Add feature to hide/show collapsible TOC above desktop

- Add hide/show links to TOC template.
- Add i18n messages for hide/show text.
- Add event listener to TOC js.
- Update relevant TOC collapsed styles.
- Update test snapshot.

Bug: T307901
Change-Id: Ic94fda79bd14856ccda14985d5860aa54d3118d0

i18n/en.json

@@ -39,6 +39,8 @@
 	"vector-searchsuggest-containing": "Search for pages containing <strong class=\"cdx-typeahead-search__search-footer__query\">$1</strong>",
 	"vector-intro-page": "Help:Introduction",
 	"vector-toc-heading": "Contents",
+	"vector-toc-toggle-position-sidebar": "move to sidebar",
+	"vector-toc-toggle-position-title": "hide",
 	"vector-toc-beginning": "Beginning",
 	"vector-toc-toggle-button-label": "Toggle $1 subsection",
 	"vector-anon-user-menu-pages": "Pages for logged out editors",

i18n/qqq.json

@@ -54,6 +54,8 @@
 	"vector-searchsuggest-containing": "Label used in the special item of the search suggestions list which gives the user an option to perform a full text search for the term. Used in the Codex typeahead search component.",
 	"vector-intro-page": "Introduction or tutorial page for the wiki. Typically either Project/Help:Introduction ([[d:Q3945]]) or Project/Help:Tutorial ([[d:Q915263]]).",
 	"vector-toc-heading": "Heading of table of contents\n\n{{Identical|Content}}",
+	"vector-toc-toggle-position-sidebar": "Indicator for TOC to move position into sidebar",
+	"vector-toc-toggle-position-title": "Indicator for TOC to move to collapsed state next to title",
 	"vector-toc-beginning": "Shown in the table of contents: Text of link to the beginning of the article.",
 	"vector-toc-toggle-button-label": "Used to label TOC section toggle buttons for screen readers",
 	"vector-anon-user-menu-pages": "Label describing the anon editor links in the anon user menu",

includes/templates/TableOfContents.mustache

@@ -1,6 +1,14 @@
 <nav id="mw-panel-toc" class="sidebar-toc" role="navigation" aria-labelledby="sidebar-toc-label" data-event-name="ui.sidebar-toc">
 	<div id="sidebar-toc-label" class="sidebar-toc-header">
-		<p class="sidebar-toc-title">{{ msg-vector-toc-heading }}</p>
+		<p class="sidebar-toc-title">
+		{{ msg-vector-toc-heading }}
+		<button class="vector-toc-uncollapse-button">
+			{{ msg-vector-toc-toggle-position-sidebar }}
+		</button>
+		<button class="vector-toc-collapse-button">
+			{{ msg-vector-toc-toggle-position-title }}
+		</button>
+		</p>
 	</div>
 	<ul class="sidebar-toc-contents">
 		{{#is-vector-toc-beginning-enabled}}

resources/skins.vector.es6/tableOfContents.js

@@ -6,6 +6,7 @@ const EXPANDED_SECTION_CLASS = 'sidebar-toc-list-item-expanded';
 const PARENT_SECTION_CLASS = 'sidebar-toc-level-1';
 const LINK_CLASS = 'sidebar-toc-link';
 const TOGGLE_CLASS = 'sidebar-toc-toggle';
+const TOC_COLLAPSED_CLASS = 'vector-toc-collapsed';
 
 /**
  * @callback onHeadingClick
@@ -279,10 +280,22 @@ module.exports = function tableOfContents( props ) {
 		} );
 	}
 
+	/**
+	 * Bind event listener for clicking on show/hide Table of Contents links.
+	 */
+	function bindCollapseToggleListeners() {
+		const showHideTocElement = document.querySelectorAll( '#sidebar-toc-label button' );
+		showHideTocElement.forEach( function ( btn ) {
+			btn.addEventListener( 'click', () => {
+				document.body.classList.toggle( TOC_COLLAPSED_CLASS );
+			} );
+		} );
+	}
+
 	/**
 	 * Bind event listeners for clicking on section headings and toggle buttons.
 	 */
-	function bindClickListener() {
+	function bindSubsectionToggleListeners() {
 		props.container.addEventListener( 'click', function ( e ) {
 			if (
 				!( e.target instanceof HTMLElement )
@@ -322,7 +335,8 @@ module.exports = function tableOfContents( props ) {
 		initializeExpandedStatus();
 
 		// Bind event listeners.
-		bindClickListener();
+		bindSubsectionToggleListeners();
+		bindCollapseToggleListeners();
 
 		// Hide TOC button on VE activation
 		mw.hook( 've.activationStart' ).add( () => {

resources/skins.vector.styles/components/TableOfContentsCollapsed.less

@@ -60,6 +60,30 @@
 	}
 }
 
+// Override button styles for the "move to sidebar/hide" links. Default hide.
+.vector-toc-collapse-button,
+.vector-toc-uncollapse-button {
+	display: none;
+	border: 0;
+	padding: 0;
+	background-color: transparent;
+	color: @color-primary;
+
+	&:hover {
+		color: @color-primary--hover;
+	}
+
+	&:before {
+		content: '@{msg-brackets-start}';
+		color: @color-base--subtle;
+	}
+
+	&:after {
+		content: '@{msg-brackets-end}';
+		color: @color-base--subtle;
+	}
+}
+
 @media ( max-width: @max-width-tablet ) {
 	.mixin-collapse-toc-page-title();
 
@@ -85,15 +109,29 @@
 
 @media ( min-width: @min-width-desktop ) {
 	@supports ( display: grid ) {
-		.vector-toc-collapsed .vector-layout-grid {
-			.mixin-collapse-toc-page-title();
+		.client-js {
+			.vector-toc-collapsed .vector-layout-grid {
+				.mixin-collapse-toc-page-title();
 
-			.mw-table-of-contents-container {
-				grid-area: content;
+				.mw-table-of-contents-container {
+					grid-area: content;
+				}
+
+				.sidebar-toc {
+					left: -@icon-padding-md;
+				}
 			}
 
-			.sidebar-toc {
-				left: -@icon-padding-md;
+			.vector-toc-collapsed {
+				.vector-toc-uncollapse-button {
+					display: inline-block;
+				}
+			}
+
+			body:not( .vector-toc-collapsed ) {
+				.vector-toc-collapse-button {
+					display: inline-block;
+				}
 			}
 		}
 	}

skin.json

@@ -63,6 +63,8 @@
 						"vector-jumptocontent",
 						"vector-toc-beginning",
 						"vector-toc-heading",
+						"vector-toc-toggle-position-sidebar",
+						"vector-toc-toggle-position-title",
 						"vector-toc-menu-tooltip",
 						"vector-toc-collapsible-button-label",
 						"vector-article-tools-nav-label",
@@ -250,7 +252,9 @@
 			],
 			"lessMessages": [
 				"parentheses-start",
-				"parentheses-end"
+				"parentheses-end",
+				"brackets-start",
+				"brackets-end"
 			]
 		},
 		"skins.vector.icons.js": {

tests/jest/__snapshots__/tableOfContents.test.js.snap

@@ -3,7 +3,15 @@
 exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\` is false 1`] = `
 "<nav id=\\"mw-panel-toc\\" class=\\"sidebar-toc\\" role=\\"navigation\\" aria-labelledby=\\"sidebar-toc-label\\" data-event-name=\\"ui.sidebar-toc\\">
 	<div id=\\"sidebar-toc-label\\" class=\\"sidebar-toc-header\\">
-		<p class=\\"sidebar-toc-title\\">Contents</p>
+		<p class=\\"sidebar-toc-title\\">
+		Contents
+		<button class=\\"vector-toc-uncollapse-button\\">
+			
+		</button>
+		<button class=\\"vector-toc-collapse-button\\">
+			
+		</button>
+		</p>
 	</div>
 	<ul class=\\"sidebar-toc-contents\\">
 		<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
@@ -62,7 +70,15 @@ exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\`
 exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\` is true 1`] = `
 "<nav id=\\"mw-panel-toc\\" class=\\"sidebar-toc\\" role=\\"navigation\\" aria-labelledby=\\"sidebar-toc-label\\" data-event-name=\\"ui.sidebar-toc\\">
 	<div id=\\"sidebar-toc-label\\" class=\\"sidebar-toc-header\\">
-		<p class=\\"sidebar-toc-title\\">Contents</p>
+		<p class=\\"sidebar-toc-title\\">
+		Contents
+		<button class=\\"vector-toc-uncollapse-button\\">
+			
+		</button>
+		<button class=\\"vector-toc-collapse-button\\">
+			
+		</button>
+		</p>
 	</div>
 	<ul class=\\"sidebar-toc-contents\\">
 		<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">