Improved: refactor the sharing menu to use a template instead of duplicated HTML code (#6751)

* <script> --> <template>

* sharing menu

* normal view, global view (reader view does not have a share button)

* fix

app/layout/aside_feed.phtml

@@ -154,16 +154,16 @@
 <div id="first_load" class="loading"></div>
 <?php flush(); ?>
 
-<script id="tag_config_template" type="text/html">
+<template id="tag_config_template">
 	<ul class="dropdown-menu">
 		<li class="item">
 			<a class="configure open-slider" href="<?= _url('tag', 'update', 'id', '------') ?>"><?= _t('gen.action.manage') ?></a>
 		</li>
 	</ul>
 	<a class="dropdown-close" href="#close">❌</a>
-</script>
+</template>
 
-<script id="feed_config_template" type="text/html">
+<template id="feed_config_template">
 	<ul class="dropdown-menu">
 		<li class="item"><a href="<?= _url('index', $actual_view, 'get', 'f_------') ?>"><?= _t('gen.action.filter') ?></a></li>
 		<?php if (FreshRSS_Auth::hasAccess()) { ?>
@@ -190,4 +190,4 @@
 		<?php } ?>
 	</ul>
 	<a class="dropdown-close" href="#close">❌</a>
-</script>
+</template>

app/views/helpers/index/normal/entry_bottom.phtml

@@ -76,8 +76,7 @@
 			<a class="dropdown-toggle" href="#dropdown-share-<?= $this->entry->id() ?>">
 				<?= _i('share') ?><?= _t('index.share') ?>
 			</a>
-			<?php $this->renderHelper('index/normal/entry_share_menu'); ?>
-			<a class="dropdown-close" href="#close">❌</a>
+			<?php /* entry_share_menu */ ?>
 		</div>
 		<?php } ?>
 	</li><?php

app/views/helpers/index/normal/entry_header.phtml

@@ -11,7 +11,7 @@
 	$topline_date = FreshRSS_Context::userConf()->topline_date;
 	$topline_link = FreshRSS_Context::userConf()->topline_link;
 	$lazyload = FreshRSS_Context::userConf()->lazyload;
-?><ul class="horizontal-list flux_header website<?= $topline_website ?>"><?php
+?><ul class="horizontal-list flux_header website<?= $topline_website ?>" data-website-name="<?= $this->feed->name() ?>" data-article-authors="<?= implode(', ', $this->entry->authors()) ?>"><?php
 	if (FreshRSS_Auth::hasAccess()) {
 		if ($topline_read) {
 			?><li class="item manage"><?php
@@ -80,8 +80,7 @@
 				<a class="dropdown-toggle" href="#dropdown-share2-<?= $this->entry->id() ?>" title="<?= _t('index.share') ?>">
 					<?= _i('share') ?>
 				</a>
-				<?php $this->renderHelper('index/normal/entry_share_menu'); ?>
-				<a class="dropdown-close" href="#close">❌</a>
+				<?php /* entry_share_menu */ ?>
 			</div>
 		</li>
 	<?php } ?>

app/views/helpers/index/normal/entry_share_menu.phtml

@@ -1,29 +1,26 @@
 <?php
 	declare(strict_types=1);
 	/** @var FreshRSS_View $this */
-	//TODO: To reduce output size, replace by an on-demand JavaScript menu, potentially using HTML template element
 ?>
 <ul class="dropdown-menu">
 	<li class="dropdown-header"><?= _t('index.share') ?> <a href="<?= _url('configure', 'integration') ?>"><?= _i('configure') ?></a></li><?php
-		$id = $this->entry->id();
-		$link = $this->entry->link();
-		$title = $this->entry->title() . ' · ' . ($this->feed === null ? '' : $this->feed->name());
+		$link = '--link--';
+		$title = '--titleText----websiteName----articleAuthors--';
 		foreach (FreshRSS_Context::userConf()->sharing as $share_options) {
 			$share = FreshRSS_Share::get($share_options['type']);
 			if ($share === null) {
 				continue;
 			}
 			$cssClass = $share->isDeprecated() ? ' error' : '';
-			$share_options['id'] = $id;
 			$share_options['link'] = $link;
 			$share_options['title'] = $title;
 			$share->update($share_options);
 			?><li class="item share<?= $cssClass ?>">
 				<?php if ('GET' === $share->method()) {
 					if ($share->HTMLtag() !== 'button') {?>
-					<a target="_blank" rel="noreferrer" href="<?= $share->url() ?>" data-type="<?= $share->type() ?>"><?= $share->name() ?></a>
+						<a target="_blank" rel="noreferrer" href="<?= $share->url() ?>" data-type="<?= $share->type() ?>"><?= $share->name() ?></a>
 					<?php } else { ?>
-					<button type="button" class="as-link" data-url="<?= $share->url() ?>" data-type="<?= $share->type() ?>" data-title="<?= htmlspecialchars($title) ?>"><?= $share->name() ?></button>
+						<button type="button" class="as-link" data-url="<?= $share->url() ?>" data-type="<?= $share->type() ?>" data-title="<?= htmlspecialchars($title) ?>"><?= $share->name() ?></button>
 					<?php
 					}
 				} else {?>

app/views/index/global.phtml

@@ -13,6 +13,12 @@
 		$state_unread = true;
 	}
 ?>
+
+<template id="share_article_template">
+	<?php $this->renderHelper('index/normal/entry_share_menu'); ?>
+	<a class="dropdown-close" href="#close">❌</a>
+</template>
+
 <main id="stream" class="global<?= $class ?>">
 	<h1 class="title_hidden"><?= _t('conf.reading.view.global') ?></h1>
 <?php

app/views/index/normal.phtml

@@ -16,6 +16,11 @@ $useKeepUnreadImportant = !FreshRSS_Context::isImportant() && !FreshRSS_Context:
 $today = @strtotime('today');
 ?>
 
+<template id="share_article_template">
+	<?php $this->renderHelper('index/normal/entry_share_menu'); ?>
+	<a class="dropdown-close" href="#close">❌</a>
+</template>
+
 <main id="stream" class="normal<?= FreshRSS_Context::userConf()->display_posts ? '' : ' hide_posts' ?>">
 	<h1 class="title_hidden"><?= _t('conf.reading.view.normal') ?></h1>
 	<div id="new-article">

p/scripts/main.js

@@ -1093,6 +1093,36 @@ function init_stream(stream) {
 			return true;
 		}
 
+		el = ev.target.closest('.item.share a.dropdown-toggle');
+		if (el) {
+			const itemId = el.closest('.flux').id;
+			const templateId = 'share_article_template';
+			const id = itemId;
+			const flux_header_el = el.closest('.flux');
+			const title_el = flux_header_el.querySelector('.item.titleAuthorSummaryDate .item-element.title');
+			const websiteName = ' - ' + flux_header_el.querySelector('.flux_header').dataset.websiteName;
+			const articleAuthors = flux_header_el.querySelector('.flux_header').dataset.articleAuthors;
+			let articleAuthorsText = '';
+			if (articleAuthors.trim().length > 0) {
+				articleAuthorsText = ' (' + articleAuthors + ')';
+			}
+			const link = title_el.href;
+			const title = title_el.textContent;
+			const titleText = title;
+			const div = el.parentElement;
+			const dropdownMenu = div.querySelector('.dropdown-menu');
+			const template = document.getElementById(templateId).innerHTML
+				.replace(/--entryId--/g, id)
+				.replace(/--link--/g, link)
+				.replace(/--titleText--/g, titleText)
+				.replace(/--websiteName--/g, websiteName)
+				.replace(/--articleAuthors--/g, articleAuthorsText);
+			if (!dropdownMenu) {
+				div.insertAdjacentHTML('beforeend', template);
+			}
+			return true;
+		}
+
 		el = ev.target.closest('.item.share > button[data-type="print"]');
 		if (el) {	// Print
 			const tmp_window = window.open();