feat(components): rewrite template data partials into CitizenComponent components

i18n/en.json

@@ -63,5 +63,8 @@
 	"citizen-feature-custom-width-name": "Width",
 	"citizen-feature-custom-width-standard-label": "Standard",
 	"citizen-feature-custom-width-wide-label": "Wide",
-	"citizen-feature-custom-width-full-label": "Full"
+	"citizen-feature-custom-width-full-label": "Full",
+
+	"citizen-user-info-text-anon": "Your IP address will be publicly visible if you make any edits.",
+	"citizen-user-info-text-temp": "This temporary account was created after an edit was made without an account on this browser and device."
 }

i18n/qqq.json

@@ -62,5 +62,7 @@
 	"citizen-feature-custom-width-name": "Heading label for page width",
 	"citizen-feature-custom-width-standard-label": "Label for standard page width. An adjective that describes \"text\" ({{msg-mw|Citizen-feature-custom-width-name}}).",
 	"citizen-feature-custom-width-wide-label": "Label for wide page width. An adjective that describes \"text\" ({{msg-mw|Citizen-feature-custom-width-name}}).",
-	"citizen-feature-custom-width-full-label": "Label for full page width. An adjective that describes \"text\" ({{msg-mw|Citizen-feature-custom-width-name}})."
+	"citizen-feature-custom-width-full-label": "Label for full page width. An adjective that describes \"text\" ({{msg-mw|Citizen-feature-custom-width-name}}).",
+	"citizen-user-info-text-anon": "Description in the user menu when user is not logged in.",
+	"citizen-user-info-text-temp": "Description in the user menu when user is using a temporary account."
 }

includes/Components/CitizenComponent.php

@@ -0,0 +1,17 @@
+<?php
+
+declare( strict_types=1 );
+
+namespace MediaWiki\Skins\Citizen\Components;
+
+/**
+ * Component interface for managing Citizen-modified components
+ *
+ * @internal
+ */
+interface CitizenComponent {
+	/**
+	 * @return array of Mustache compatible data
+	 */
+	public function getTemplateData(): array;
+}

includes/Components/CitizenComponentFooter.php

@@ -0,0 +1,44 @@
+<?php
+
+declare( strict_types=1 );
+
+namespace MediaWiki\Skins\Citizen\Components;
+
+use MessageLocalizer;
+
+/**
+ * CitizenComponentFooter component
+ * FIXME: Need unit test
+ */
+class CitizenComponentFooter implements CitizenComponent {
+	/** @var MessageLocalizer */
+	private $localizer;
+
+	/** @var array */
+	private $footerData;
+
+	/**
+	 * @param MessageLocalizer $localizer
+	 * @param array $footerData
+	 */
+	public function __construct(
+		MessageLocalizer $localizer,
+		array $footerData
+	) {
+		$this->localizer = $localizer;
+		$this->footerData = $footerData;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTemplateData(): array {
+		$localizer = $this->localizer;
+		$footerData = $this->footerData;
+
+		return $footerData + [
+			'msg-citizen-footer-desc' => $localizer->msg( "citizen-footer-desc" )->inContentLanguage()->parse(),
+			'msg-citizen-footer-tagline' => $localizer->msg( "citizen-footer-tagline" )->inContentLanguage()->parse()
+		];
+	}
+}

includes/Components/CitizenComponentLink.php

@@ -0,0 +1,80 @@
+<?php
+
+declare( strict_types=1 );
+
+namespace MediaWiki\Skins\Citizen\Components;
+
+/**
+ * TODO: Update to new classes when we move to MW 1.43
+ * - MediaWiki\Html\Html
+ * - MediaWiki\Linker\Linker
+ */
+use Html;
+use Linker;
+use MessageLocalizer;
+
+/**
+ * CitizenComponentLink component
+ */
+class CitizenComponentLink implements CitizenComponent {
+	/** @var MessageLocalizer */
+	private $localizer;
+	/** @var string */
+	private $icon;
+	/** @var string */
+	private $href;
+	/** @var string */
+	private $text;
+	/** @var string */
+	private $accessKeyHint;
+
+	/**
+	 * @param string $href
+	 * @param string $text
+	 * @param null|string $icon
+	 * @param null|MessageLocalizer $localizer for generation of tooltip and access keys
+	 * @param null|string $accessKeyHint will be used to derive HTML attributes such as title, accesskey
+	 *   and aria-label ("$accessKeyHint-label")
+	 */
+	public function __construct( string $href, string $text, $icon = null, $localizer = null, $accessKeyHint = null ) {
+		$this->href = $href;
+		$this->text = $text;
+		$this->icon = $icon;
+		$this->localizer = $localizer;
+		$this->accessKeyHint = $accessKeyHint;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTemplateData(): array {
+		$localizer = $this->localizer;
+		$accessKeyHint = $this->accessKeyHint;
+		$additionalAttributes = [];
+		if ( $localizer ) {
+			$msg = $localizer->msg( $accessKeyHint . '-label' );
+			if ( $msg->exists() ) {
+				$additionalAttributes[ 'aria-label' ] = $msg->text();
+			}
+		}
+		return [
+			'href' => $this->href,
+			'icon' => $this->icon,
+			'text' => $this->text,
+			'array-attributes' => [
+				[
+					'key' => 'href',
+					'value' => $this->href
+				]
+			],
+			'html-attributes' => $localizer && $accessKeyHint ? Html::expandAttributes(
+				Linker::tooltipAndAccesskeyAttribs(
+					$accessKeyHint,
+					[],
+					[],
+					$localizer
+				) + $additionalAttributes
+			) : '',
+		];
+	}
+}

includes/Components/CitizenComponentMainMenu.php

@@ -0,0 +1,43 @@
+<?php
+
+declare( strict_types=1 );
+
+namespace MediaWiki\Skins\Citizen\Components;
+
+/**
+ * CitizenComponentMainMenu component
+ */
+class CitizenComponentMainMenu implements CitizenComponent {
+	/** @var array */
+	private $sidebarData;
+
+	/**
+	 * @param array $sidebarData
+	 */
+	public function __construct( array $sidebarData ) {
+		$this->sidebarData = $sidebarData;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTemplateData(): array {
+		$portletsRest = [];
+		foreach ( $this->sidebarData[ 'array-portlets-rest' ] as $data ) {
+			/**
+			 * Remove toolbox from main menu as we moved it to article tools
+			 * TODO: Move handling to SkinCitizen.php after we convert pagetools to component
+			 */
+			if ( $data['id'] === 'p-tb' ) {
+				continue;
+			}
+			$portletsRest[] = ( new CitizenComponentMenu( $data ) )->getTemplateData();
+		}
+		$firstPortlet = new CitizenComponentMenu( $this->sidebarData['data-portlets-first'] );
+
+		return [
+			'data-portlets-first' => $firstPortlet->getTemplateData(),
+			'array-portlets-rest' => $portletsRest
+		];
+	}
+}

includes/Components/CitizenComponentMenu.php

@@ -0,0 +1,52 @@
+<?php
+
+declare( strict_types=1 );
+
+namespace MediaWiki\Skins\Citizen\Components;
+
+use Countable;
+
+/**
+ * CitizenComponentMenu component
+ */
+class CitizenComponentMenu implements CitizenComponent, Countable {
+	/** @var array */
+	private $data;
+
+	/**
+	 * @param array $data
+	 */
+	public function __construct( array $data ) {
+		$this->data = $data;
+	}
+
+	/**
+	 * Counts how many items the menu has.
+	 *
+	 * @return int
+	 */
+	public function count(): int {
+		$items = $this->data['array-list-items'] ?? null;
+		if ( $items ) {
+			return count( $items );
+		}
+		$htmlItems = $this->data['html-items'] ?? '';
+		return substr_count( $htmlItems, '<li' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTemplateData(): array {
+		return $this->data + [
+			'class' => '',
+			'label' => '',
+			'html-tooltip' => '',
+			'label-class' => '',
+			'html-before-portal' => '',
+			'html-items' => '',
+			'html-after-portal' => '',
+			'array-list-items' => null,
+		];
+	}
+}

includes/Components/CitizenComponentMenuListItem.php

@@ -0,0 +1,39 @@
+<?php
+
+declare( strict_types=1 );
+
+namespace MediaWiki\Skins\Citizen\Components;
+
+/**
+ * CitizenComponentMenuListItem component
+ */
+class CitizenComponentMenuListItem implements CitizenComponent {
+	/** @var CitizenComponentLink */
+	private $link;
+	/** @var string */
+	private $class;
+	/** @var string */
+	private $id;
+
+	/**
+	 * @param CitizenComponentLink $link
+	 * @param string $class
+	 * @param string $id
+	 */
+	public function __construct( CitizenComponentLink $link, string $class = '', string $id = '' ) {
+		$this->link = $link;
+		$this->class = $class;
+		$this->id = $id;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTemplateData(): array {
+		return [
+			'array-links' => $this->link->getTemplateData(),
+			'item-class' => $this->class,
+			'item-id' => $this->id,
+		];
+	}
+}

includes/Components/CitizenComponentPageFooter.php

@@ -0,0 +1,46 @@
+<?php
+
+declare( strict_types=1 );
+
+namespace MediaWiki\Skins\Citizen\Components;
+
+use MessageLocalizer;
+
+/**
+ * CitizenComponentPageFooter component
+ * FIXME: Need unit test
+ */
+class CitizenComponentPageFooter implements CitizenComponent {
+	/** @var MessageLocalizer */
+	private $localizer;
+
+	/** @var array */
+	private $footerData;
+
+	/**
+	 * @param MessageLocalizer $localizer
+	 * @param array $footerData
+	 */
+	public function __construct(
+		MessageLocalizer $localizer,
+		array $footerData
+	) {
+		$this->localizer = $localizer;
+		$this->footerData = $footerData;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public function getTemplateData(): array {
+		$footerData = $this->footerData;
+
+		// Add label to footer-info to use in PageFooter
+		foreach ( $footerData['array-items'] as &$item ) {
+			$msgKey = 'citizen-page-info-' . $item['name'];
+			$item['label'] = $this->localizer->msg( $msgKey )->text();
+		}
+
+		return $footerData;
+	}
+}