From 409a62ba1ac1dd3a1d50907627991dfb7d350404 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jans.tuomi@gmail.com>
Date: Fri, 1 Mar 2024 09:55:52 +0200
Subject: Improve checkbox styling, add clipboard copy button

---
 templates/manage.html.j2 | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

(limited to 'templates/manage.html.j2')

diff --git a/templates/manage.html.j2 b/templates/manage.html.j2
index db7da0b..4a7a99e 100644
--- a/templates/manage.html.j2
+++ b/templates/manage.html.j2
@@ -5,14 +5,16 @@
 <h2>Managing poll <span class="contrast">{{ poll.title }}</span> by <i>{{ poll.author_name }}</i></h2>
 <p>{{ poll.pub_date_formatted_notz() }}.</p>
 
-<p>
+<div>
   Share this URL with your peers:<br>
-  <a href="{{ poll.share_url() }}">{{ poll.share_url() }}</a>
-</p>
-<p>
+  <a id="share-link" href="{{ poll.share_url() }}">{{ poll.share_url() }}</a> <div id="share-link-copy"></div>
+</div>
+<p></p>
+<div>
   <strong>Note!</strong> You can only edit this poll if you have this URL or use the same browser session:<br>
-  <a href="{{ poll.manage_url() }}">{{ poll.manage_url() }}</a>
-</p>
+  <a id="manage-link" href="{{ poll.manage_url() }}">{{ poll.manage_url() }}</a>
+</div>
+<p></p>
 
 <form class="poll-form" action="/manage/{{ poll.manage_code }}/update_info" method="post">
   {% include "poll_info_table.html.j2" %}
@@ -124,9 +126,27 @@ const focusNext = query.get('focus_next');
 if (focusNext !== null) {
   const nextInput = document.querySelector(`input[name="start_datetime"]`);
   if (nextInput !== null) {
+    nextInput.scrollIntoView();
     nextInput.focus();
   }
 }
+
+let shareLinkCopy = document.getElementById("share-link-copy");
+if (shareLinkCopy !== null) {
+  shareLinkCopy.outerHTML = "<button id='share-link-copy' onclick='copyShareLink()'>📋</button>";
+  shareLinkCopy = document.getElementById("share-link-copy"); // refresh the reference
+}
+
+function copyShareLink() {
+  const shareLink = document.getElementById("share-link");
+  const linkText = shareLink.getAttribute("href");
+  navigator.clipboard.writeText(linkText);
+  console.log("Copied to clipboard: " + linkText);
+  shareLinkCopy.innerHTML = "✅";
+  setTimeout(() => {
+    shareLinkCopy.innerHTML = "📋";
+  }, 2000);
+}
 </script>
 
 {% endblock %}
\ No newline at end of file
-- 
cgit v1.3