Use the template HTML element instead of our custom template logic

[rugk]

Currently

We currently use the following HTML templates:

PrivateBin/tpl/bootstrap5.php

Lines 530 to 554 in df5f4b1

	<div id="templates">
	<article id="commenttemplate" class="comment px-2 pb-3">
	<div class="commentmeta">
	<span class="nickname">name</span>
	<span class="commentdate">0000-00-00</span>
	</div>
	<div class="commentdata">c</div>
	<button class="btn btn-secondary btn-sm"><?php echo I18n::_('Reply'); ?></button>
	</article>
	<p id="commenttailtemplate" class="comment px-2 pb-3">
	<button class="btn btn-secondary btn-sm"><?php echo I18n::_('Add comment'); ?></button>
	</p>
	<div id="replytemplate" class="reply hidden">
	<input type="text" id="nickname" class="form-control my-2" title="<?php echo I18n::_('Optional nickname…'); ?>" placeholder="<?php echo I18n::_('Optional nickname…'); ?>" />
	<textarea id="replymessage" class="replymessage form-control" cols="80" rows="7"></textarea><br />
	<div id="replystatus" role="alert" class="statusmessage hidden alert">
	<svg width="16" height="16" fill="currentColor" aria-hidden="true"><use href="img/bootstrap-icons.svg#info-circle" /></svg>
	</div>
	<button id="replybutton" class="btn btn-secondary btn-sm"><?php echo I18n::_('Post comment'); ?></button>
	</div>
	<div id="attachmenttemplate" role="alert" class="hidden alert alert-info">
	<svg width="16" height="16" fill="currentColor" aria-hidden="true"><use href="img/bootstrap-icons.svg#download" /></svg>
	<a class="alert-link"><?php echo I18n::_('Download attachment'); ?><span></span></a>
	</div>
	</div>

Suggested

We should use the proper <template> HTML tag and the corresponding JavaScript logic.

See https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template

Implications

This would obviously be a breaking change for our template logic.

Details

Care needs to be taken for the event listeners, that they are either cloned or properly re-bound: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template#data_on_the_documentfragment_is_not_cloned

Noticed this while doing/in PR #1797

[LorenzoLongaretto]

I'd like to take this issue. Could you assign it to me?

[rugk]

Thanks. Just note as that would require a large refactoring could you please wait or at least base your work on #1797 so I don't have to resolve conflicts again and again.