Only render TOC related HTML when TOC is available

Bug: T328719
Change-Id: I3484a790ce8ebadf21054ac1d222d5632b2dc5a4

includes/templates/PageTitlebar.mustache

@@ -3,6 +3,7 @@
 	When language button is visible, indicators are placed in the BeforeContent.mustache template instead.
 }}
 <header class="mw-body-header vector-page-titlebar{{#is-title-blank}} vector-page-titlebar-blank{{/is-title-blank}}">
+	{{#data-toc}}
 	{{! Checkbox hack used by collapsed TOC on narrow viewports for no JS users }}
 	<label
 		id="vector-toc-collapsed-button"
@@ -25,6 +26,7 @@
 			{{/data-page-titlebar-toc-pinnable-container}}
 		{{#data-page-titlebar-toc-dropdown}}{{>Dropdown/Close}}{{/data-page-titlebar-toc-dropdown}}
 	</nav>
+	{{/data-toc}}
 	{{{html-title-heading}}}
 
 	{{#has-buttons-in-content-top}}

includes/templates/StickyHeader.mustache

@@ -21,6 +21,7 @@
 		{{>SearchBox}}
 		{{/data-search}}
 		<div class="vector-sticky-header-context-bar">
+			{{#data-toc}}
 			{{! TOC is moved into this dropdown from the sidebar in stickyHeader.js. }}
 			<nav role="navigation" aria-label="{{ msg-vector-toc-label }}" class="vector-toc-landmark">
 				{{#data-sticky-header-toc-dropdown}}
@@ -32,6 +33,7 @@
 					{{>Dropdown/Close}}
 				{{/data-sticky-header-toc-dropdown}}
 			</nav>
+			{{/data-toc}}
 			<div class="vector-sticky-header-context-bar-primary" aria-hidden="true" {{{html-user-language-attributes}}}>{{{html-title}}}</div>
 		</div>
 	</div>

includes/templates/TableOfContentsPinned.mustache

@@ -1,3 +1,4 @@
+{{#data-toc}}
 <nav id="mw-panel-toc" role="navigation" aria-label="{{ msg-vector-toc-label }}" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark">
 	{{! T313060 Additional container div needed to prevent the sticky element from being siblings with the footer }}
 	{{#data-toc-pinnable-container}}
@@ -8,3 +9,4 @@
 	{{>PinnableContainer/Close}}
 	{{/data-toc-pinnable-container}}
 </nav>
+{{/data-toc}}

includes/templates/skin.mustache

@@ -43,8 +43,8 @@
 		<div class="vector-sitenotice-container">
 			<div id="siteNotice">{{{html-site-notice}}}</div>
 		</div>
-		<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
-		{{>TableOfContentsContainer}}
+		{{#data-toc}}<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">{{/data-toc}}
+		{{>TableOfContentsPinned}}
 		<div class="mw-content-container">
 			{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
 			<main id="content" class="mw-body" role="main">

tests/jest/stickyHeader.test.js

@@ -58,6 +58,9 @@ const editButtonsTemplateData = [ {
 } ];
 
 const templateData = {
+	'data-toc': {
+		'array-sections': []
+	},
 	'data-sticky-header-toc-dropdown': {
 		id: 'vector-sticky-header-toc',
 		class: 'mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc',