From c0fee346c532ddb991d18bed75226dcdc0ab7af2 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Wed, 3 Jun 2020 00:28:22 -0400
Subject: [PATCH] Partial conversion to Mustache for header

---
 includes/CitizenTemplate.php       | 109 ++++++-----------------------
 includes/templates/Header.mustache |  26 +++++++
 includes/templates/skin.mustache   |   2 +-
 skin.json                          |   2 +-
 4 files changed, 49 insertions(+), 90 deletions(-)
 create mode 100644 includes/templates/Header.mustache

diff --git a/includes/CitizenTemplate.php b/includes/CitizenTemplate.php
index 5a0fad5c..296f0d95 100644
--- a/includes/CitizenTemplate.php
+++ b/includes/CitizenTemplate.php
@@ -78,13 +78,29 @@ class CitizenTemplate extends BaseTemplate {
 			),
 		];
 
-		// TODO: Convert the header to Mustache
+		// TODO: Convert the rest of the header to Mustache
 		ob_start();
 
-		$html = $this->getHeader();
+		$html = $this->getHamburgerMenu();
 
 		echo $html;
-		$params['html-unported-header'] = ob_get_contents();
+		$params['html-unported-hamburgermenu'] = ob_get_contents();
+		ob_end_clean();
+
+		ob_start();
+
+		$html = $this->getUserIcons();
+
+		echo $html;
+		$params['html-unported-usericons'] = ob_get_contents();
+		ob_end_clean();
+
+		ob_start();
+
+		$html = $this->getSearch();
+
+		echo $html;
+		$params['html-unported-search'] = ob_get_contents();
 		ob_end_clean();
 
 		// TODO: Convert the page tools to Mustache
@@ -119,40 +135,6 @@ class CitizenTemplate extends BaseTemplate {
 		echo $templates->processTemplate( 'skin', $params );
 	}
 
-	/**
-	 * The header containing the mobile site navigation and user icons + search
-	 *
-	 * @return string Header
-	 */
-	protected function getHeader() {
-		$header =
-			Html::openElement( 'header',
-				[ 'class' => 'mw-header-container', 'id' => 'mw-navigation' ] );
-
-		// Site navigation menu
-		$navigation =
-			Html::rawElement(
-				'div',
-				[ 'class' => 'mw-header-icons' ],
-				$this->getHamburgerMenu()
-			);
-
-		// User icons and Search bar
-		$userIconsSearchBar =
-			Html::rawElement(
-				'div',
-				[ 'class' => 'mw-header-icons' ],
-				Html::rawElement(
-					'div',
-					[ 'class' => 'mw-header', 'id' => 'user-icons' ],
-					$this->getUserIcons()
-				) .
-				$this->getSearchToggle()
-			);
-
-		return $header . $navigation . $userIconsSearchBar . Html::closeElement( 'header' );
-	}
-
 	/**
 	 * Generates the bottom bar
 	 * @return string html
@@ -195,62 +177,13 @@ class CitizenTemplate extends BaseTemplate {
 		);
 	}
 
-	/**
-	 * Generates the search button
-	 * @return string html
-	 */
-	protected function getSearchToggle() {
-		return Html::rawElement(
-			'div',
-			[ 'class' => 'mw-header-end', 'id' => 'site-search' ],
-			Html::rawElement(
-				'input',
-				[
-					'type' => 'checkbox',
-					'role' => 'button',
-					'title' => 'Toggle Search',
-					'id' => 'search-toggle',
-				]
-			) .
-			// Search button
-			Html::rawElement(
-				'div',
-				[ 'id' => 'search-toggle-icon-container' ],
-				Html::rawElement(
-					'div',
-					[ 'id' => 'search-toggle-icon' ]
-				)
-			) .
-			// Search form
-			$this->getSearch()
-		);
-	}
-
 	/**
 	 * Generates the hamburger menu
 	 * @return string html
 	 */
 	protected function getHamburgerMenu() {
-		$html = Html::openElement(
-			'div',
-			[ 'class' => 'mw-header-end mw-header-menu' ]
-		);
-
-		$html .= Html::rawElement(
-			'input',
-			[ 'type' => 'checkbox', 'role' => 'button', 'title' => 'Toggle Menu' ]
-		);
-
-		// Actual hamburger
-		$html .= Html::openElement( 'div', [ 'class' => 'mw-header-menu-toggle' ] );
-
-		for ( $i = 1; $i <= 3; $i++ ) {
-			$html .= Html::rawElement( 'span' );
-		}
-		$html .= Html::closeElement( 'div' );
-
 		// Get sidebar links
-		$html .= Html::rawElement(
+		$html = Html::rawElement(
 			'div',
 			[ 'class' => 'mw-header-menu-drawer' ],
 			Html::rawElement(
@@ -272,7 +205,7 @@ class CitizenTemplate extends BaseTemplate {
 			)
 		);
 
-		return $html . Html::closeElement( 'div' );
+		return $html;
 	}
 
 	/**
diff --git a/includes/templates/Header.mustache b/includes/templates/Header.mustache
new file mode 100644
index 00000000..92c7b0ba
--- /dev/null
+++ b/includes/templates/Header.mustache
@@ -0,0 +1,26 @@
+ {{!
+	
+}}
+<header class="mw-header-container" id="mw-navigation">
+	<div class="mw-header-icons">
+		<div class="mw-header-menu mw-header-end">
+			<input type="checkbox" role="button" title="Toggle menu" />
+			<div class="mw-header-menu-toggle">
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+			{{{html-unported-hamburgermenu}}}
+		</div>
+	</div>
+	<div class="mw-header-icons">
+		<div class="mw-header" id="user-icons">{{{html-unported-usericons}}}</div>
+		<div class="mw-header-end" id="site-search">
+			<input type="checkbox" role="button" title="Toggle search" id="search-toggle" />
+			<div id="search-toggle-icon-container">
+				<div id="search-toggle-icon"></div>
+			</div>
+			{{{html-unported-search}}}
+		</div>
+	</div>
+</header>
\ No newline at end of file
diff --git a/includes/templates/skin.mustache b/includes/templates/skin.mustache
index 9c6cbe8b..625a5b45 100644
--- a/includes/templates/skin.mustache
+++ b/includes/templates/skin.mustache
@@ -28,7 +28,7 @@
 }}
 
 {{{html-headelement}}}
-{{{html-unported-header}}}
+{{>Header}}
 <main id="content" class="mw-body">
 	{{#html-sitenotice}}
 		<div id="siteNotice" class="mw-body-content">{{{.}}}</div>
diff --git a/skin.json b/skin.json
index 646b77a6..b14b0ce0 100644
--- a/skin.json
+++ b/skin.json
@@ -1,7 +1,7 @@
 {
 	"name": "Citizen",
 	"namemsg": "skinname-citizen",
-	"version": "0.8.0",
+	"version": "0.8.1",
 	"author": [
 		"[https://www.mediawiki.org/wiki/User:Alistair3149 Alistair3149]",
 		"[https://www.mediawiki.org/wiki/User:Octfx Octfx]"