forked from rDrama/rDrama
formatting page: add javascript to generate format copy buttons programmatically (#120)
Kindly, As per $title: * we add a button to the first column of each row of /formatting programatically * programatically because table is subject to change and tedious/complicated to write it for each row * clicking on button copies text of second row to clipboard (reusing toasts code) * did some javascript replacing because of preserving newlines and removing extraneous tabs Thanks, granny Reviewed-on: rDrama/rDrama#120 Co-authored-by: mummified-corroding-granny <mummified-corroding-granny@noreply.fsdfsd.net> Co-committed-by: mummified-corroding-granny <mummified-corroding-granny@noreply.fsdfsd.net>master
parent
2934ea58e2
commit
0c2128811f
|
@ -0,0 +1,37 @@
|
|||
|
||||
/* addFormattingCopyButtons(): creates a button in the first column of each row of a table
|
||||
that copies the text in the second column of that row */
|
||||
function addFormattingCopyButtons() {
|
||||
var allTablesGenerateCopyButtons = document.getElementsByClassName('generate-copy-buttons')
|
||||
|
||||
for (let table = 0; table < allTablesGenerateCopyButtons.length; table++) {
|
||||
|
||||
if(allTablesGenerateCopyButtons[table].tagName != 'TABLE') {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (var i = 1, row; row = allTablesGenerateCopyButtons[table].rows[i]; i++) {
|
||||
|
||||
let textCopyButton = document.createElement("button");
|
||||
textCopyButton.setAttribute("type", "button");
|
||||
textCopyButton.className = "btn caction py-0 nobackground px-1 text-muted copy-link";
|
||||
|
||||
/* replace HTML newlines with text newlines */
|
||||
var cleanedText = row.cells[1].cloneNode(true)
|
||||
cleanedText.innerHTML = cleanedText.innerHTML.replace(/<br>/gi, "\n")
|
||||
/* remove lots of extraneous tabs */
|
||||
cleanedText = cleanedText.textContent.replace(/\t/g,'');
|
||||
textCopyButton.setAttribute("data-clipboard-text", cleanedText);
|
||||
|
||||
copyIcon = document.createElement("i");
|
||||
copyIcon.className = "fas fa-copy";
|
||||
|
||||
textCopyButton.insertAdjacentElement('afterbegin', copyIcon)
|
||||
row.cells[0].appendChild(textCopyButton);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
addFormattingCopyButtons();
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<div class="ml-2">You can use Markdown formatting:</div>
|
||||
|
||||
<div class="overflow-x-auto mt-3"><table class="table table-striped mb-5">
|
||||
<div class="overflow-x-auto mt-3"><table class="table table-striped mb-5 generate-copy-buttons">
|
||||
<thead class="bg-primary text-white">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
@ -237,7 +237,7 @@ And we allow custom HTML in most places:
|
|||
|
||||
<h4 class="mt-2">Allowed Tags</h4>
|
||||
|
||||
<div class="overflow-x-auto"><table class="table table-striped mb-5">
|
||||
<div class="overflow-x-auto"><table class="table table-striped mb-5 generate-copy-buttons">
|
||||
<thead class="bg-primary text-white">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
@ -626,4 +626,12 @@ line breaks
|
|||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<div class="toast clipboard" id="toast-success" data-bs-animation="true" data-bs-autohide="true" data-bs-delay="5000">
|
||||
<div class="toast-body text-center">
|
||||
<i class="fas fa-check-circle text-success mr-2"></i>Text copied to clipboard
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script defer src="{{'js/vendor/clipboard.js' | asset}}"></script>
|
||||
<script defer src="{{'js/formatting.js' | asset}}"></script>
|
||||
{% endblock %}
|
||||
|
|
Loading…
Reference in New Issue