From 0c3786c754583d87a5f8364e39c6cec154970a83 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 12 Nov 2024 22:36:59 -0500
Subject: [PATCH] =?UTF-8?q?perf(share):=20=E2=9A=A1=EF=B8=8F=20prerender?=
 =?UTF-8?q?=20the=20HTML=20for=20the=20share=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Instead of doing it in JS, just render it altogther in the HTML
---
 .../Components/CitizenComponentPageTools.php  |  3 +-
 resources/skins.citizen.scripts/share.js      | 31 +++++--------------
 .../components/Pagetools.less                 |  8 +++++
 templates/PageTools.mustache                  |  1 +
 templates/Share.mustache                      |  8 +++++
 5 files changed, 27 insertions(+), 24 deletions(-)
 create mode 100644 templates/Share.mustache

diff --git a/includes/Components/CitizenComponentPageTools.php b/includes/Components/CitizenComponentPageTools.php
index 18d2824e..b9888572 100644
--- a/includes/Components/CitizenComponentPageTools.php
+++ b/includes/Components/CitizenComponentPageTools.php
@@ -153,7 +153,8 @@ class CitizenComponentPageTools implements CitizenComponent {
 			 * 'is-uls-ready' => $this->shouldShowULS( $variantsData ),
 			 */
 			'is-uls-ready' => false,
-			'int-language-count' => $this->numLanguages
+			'int-language-count' => $this->numLanguages,
+			'msg-citizen-share' => $this->localizer->msg( "citizen-share" )->text()
 		];
 	}
 }
diff --git a/resources/skins.citizen.scripts/share.js b/resources/skins.citizen.scripts/share.js
index 8ecc96db..85be716b 100644
--- a/resources/skins.citizen.scripts/share.js
+++ b/resources/skins.citizen.scripts/share.js
@@ -4,15 +4,13 @@
  * @return {void}
  */
 function init() {
-	const supportsWebShareAPI = navigator.share;
-
 	if ( !mw.config.get( 'wgIsArticle' ) ) {
 		return;
 	}
 
-	const pageActions = document.querySelector( '.page-actions' );
-	if ( !pageActions ) {
-		mw.log.error( '[Citizen] Unable to attach share button (.page-actions not found)' );
+	const shareButton = document.getElementById( 'citizen-share' );
+	if ( !shareButton ) {
+		mw.log.error( '[Citizen] Unable to find share button (#shareButton not found)' );
 		return;
 	}
 
@@ -23,26 +21,13 @@ function init() {
 		url: url
 	};
 
-	const fragment = document.createDocumentFragment();
-	const button = document.createElement( 'button' );
-	button.classList.add( 'citizen-share', 'citizen-button', 'citizen-dropdown-summary' );
-	const icon = document.createElement( 'span' );
-	icon.classList.add( 'citizen-ui-icon', 'mw-ui-icon-wikimedia-share' );
-	const label = document.createElement( 'span' );
-	const labelMsg = mw.message( 'citizen-share' );
-	label.textContent = labelMsg;
-	button.setAttribute( 'title', labelMsg );
-	button.append( icon, label );
-	fragment.appendChild( button );
-	pageActions.prepend( fragment );
-
 	// eslint-disable-next-line es-x/no-async-functions
 	const handleShareButtonClick = async () => {
-		button.disabled = true; // Disable the button
+		shareButton.disabled = true; // Disable the button
 		try {
-			if ( supportsWebShareAPI ) {
+			if ( navigator.share ) {
 				await navigator.share( shareData );
-			} else {
+			} else if ( navigator.clipboard ) {
 				// Fallback to navigator.clipboard if Share API is not supported
 				await navigator.clipboard.writeText( url );
 				mw.notify( mw.msg( 'citizen-share-copied' ), {
@@ -53,11 +38,11 @@ function init() {
 		} catch ( error ) {
 			mw.log.error( `[Citizen] ${ error }` );
 		} finally {
-			button.disabled = false; // Re-enable button after error or share completes
+			shareButton.disabled = false; // Re-enable button after error or share completes
 		}
 	};
 
-	button.addEventListener( 'click', mw.util.debounce( handleShareButtonClick, 100 ) );
+	shareButton.addEventListener( 'click', mw.util.debounce( handleShareButtonClick, 100 ) );
 }
 
 module.exports = {
diff --git a/resources/skins.citizen.styles/components/Pagetools.less b/resources/skins.citizen.styles/components/Pagetools.less
index da850d55..0ea52ff3 100644
--- a/resources/skins.citizen.styles/components/Pagetools.less
+++ b/resources/skins.citizen.styles/components/Pagetools.less
@@ -149,6 +149,14 @@
 	}
 }
 
+.client-nojs {
+	// Hide share button completely when JS is not supported
+	// Since it won't do anything
+	.citizen-share {
+		display: none;
+	}
+}
+
 // To avoid more menu from overflow in narrow screen
 @media ( max-width: @max-width-breakpoint-tablet ) {
 	.page-actions {
diff --git a/templates/PageTools.mustache b/templates/PageTools.mustache
index ae2c004c..da854dcd 100644
--- a/templates/PageTools.mustache
+++ b/templates/PageTools.mustache
@@ -4,6 +4,7 @@
 	object data-page-actions
 }}
 <div class="page-actions">
+	{{>Share}}
 	{{#has-languages}}{{>PageTools__languages}}{{/has-languages}}
 	{{#is-visible}}
 		{{#data-portlets.data-views}}{{>Menu}}{{/data-portlets.data-views}}
diff --git a/templates/Share.mustache b/templates/Share.mustache
new file mode 100644
index 00000000..a52eca52
--- /dev/null
+++ b/templates/Share.mustache
@@ -0,0 +1,8 @@
+<button
+	id="citizen-share"
+	class="citizen-share citizen-button citizen-dropdown-summary"
+	title="{{msg-citizen-share}}"
+>
+	<span class="citizen-ui-icon mw-ui-icon-wikimedia-share"></span>
+	<span>{{msg-citizen-share}}</span>
+</button>
\ No newline at end of file