simplify copying

4 files changed, 46 insertions, 6 deletions

diff --git a/.gitignore b/.gitignore
index 485dee6..62f73a6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 .idea
+.*.sw?
diff --git a/copyurl.js b/copyurl.js
new file mode 100644
index 0000000..421ab2c
--- /dev/null
+++ b/copyurl.js
@@ -0,0 +1,13 @@
+function copyURL() {
+  var copyText = document.getElementById("url");
+  navigator.clipboard.writeText(copyText.href);
+  copyText.classList.add("highlight");
+  window.setTimeout(() => copyText.classList.remove("highlight"), 1500);
+  document.getElementById('share-notice').style.display = "none";
+  document.getElementById('shared-notice').style.display = "initial";
+}
+
+function resetURL() {
+  document.getElementById('share-notice').style.display = "initial";
+  document.getElementById('shared-notice').style.display = "none";
+}
diff --git a/index.html b/index.html
index 292cd48..661cd48 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
   <script src="spectrum.min.js"></script>
   <script src="get_query_string_vars.js"></script>
   <script src="roomname_generator.js"></script>
+  <script src="copyurl.js"></script>
   <script src="jitsi_url_generator.js"></script>
   <script>
     const QUERY_STRING = getQueryStringVars();
@@ -54,6 +55,7 @@
       // Regenerate random room name
       $('#monster').on('click', function () {
         $('#roomName').val(germanRoomName()).trigger("input");
+        resetURL();
       });
 
       // Handle user profile changes
@@ -298,14 +300,26 @@
     <div class="w-100"></div>
 
     <div class="mt-3 fs-5 col-8 text-center">
-      <div id="output" class="form-floating">
-        <code>
-          <a id="url" class="url" href='' target="jitsiUrlGenerator"></a>
-        </code>
-        <label for="url">Konferenz-URL</label>
+      <div class="input-group">
+        <div id="output" class="form-floating">
+          <code class="d-block">
+            <a id="url" class="url" href='' target="jitsiUrlGenerator"></a>
+          </code>
+          <label for="url">Konferenz-URL</label>
+          <p class="mt-3" onclick="copyURL()">
+            <span id="share-notice">
+              Den Link nun bitte in die Zwischenablage kopieren (einfach hier
+              auf den Text klicken), per Email verschicken, oder in das Feld
+              "Ort" eines neuen Termins einfügen.
+            </span>
+            <span id="shared-notice">
+              Der Link wurde kopiert. Nun kann er per Email verschickt oder in
+              das Feld "Ort" eines neuen Termins eingefügt werden.
+            </span>
+          </p>
+        </div>
       </div>
     </div>
-
   </div>
 </div>
 
diff --git a/style.css b/style.css
index 8dba4dd..c54815f 100644
--- a/style.css
+++ b/style.css
@@ -35,3 +35,15 @@ body {
   opacity: .65;
   font-size: smaller;
 }
+
+.highlight {
+  background-color: yellow;
+}
+
+#shared-notice {
+  display: none;
+}
+
+#share-notice {
+  cursor: pointer;
+}