Add snackbar/toast when copying URL

get_online_session_communities.php

@@ -77,10 +77,7 @@
 		$info_arrays = generate_info_arrays($room_assignments);
 //		$final_join_links = generate_join_links($room_assignments);
 
-//		$modal_html = create_qr_code_modals_html($info_arrays);
-//		$table_html = get_table_html($info_arrays);
-//		$title = "Self-updating list of active Session Communities";
-//		$final_html = create_html_page_from_html_data($table_html, $title, $timestamp);
+
 		$final_html = generateHTML($timestamp, $info_arrays);
 
 //		print_r($wild_join_links);

html_generator.php

@@ -166,18 +166,32 @@
 		return $html;
 	}
 
+	/*
+	 * Generate the HTML for the toast/snackbar when you copy a join link
+	 */
+	function get_copy_snackbar() {
+		$snackbar_html =
+			"<div id=\"copy-snackbar\">" .
+				"Copied the URL to the clipboard. Paste into Session app to join." .
+			"</div>";
+
+		return $snackbar_html;
+	}
+
 	/*
 	 * TODO: Description
 	 */
 	function generateHTML($timestamp, $info_arrays) {
 		$title = "Self-updating list of active Session Communities";
 
-		$modal_html = create_qr_code_modals_html($info_arrays);
 		$table_html = get_table_html($info_arrays);
+		$modal_html = create_qr_code_modals_html($info_arrays);
+		$snackbar_html = get_copy_snackbar();
 
 		$html =
+			$table_html . PHP_EOL .
 			$modal_html . PHP_EOL .
-			$table_html . PHP_EOL;
+			$snackbar_html . PHP_EOL;
 
 		$final_html = create_html_page_from_html_data($html, $title, $timestamp);
 

output/script2.js

@@ -72,6 +72,13 @@ function hideElementByID(id) {
 
 function copyToClipboard(text) {
 	navigator.clipboard.writeText(text);
+
+	// Snackbar
+	const snackbar = document.getElementById("copy-snackbar");
+	// Add the "show" class to DIV
+	snackbar.className = "show";
+	// After 3 seconds, remove the show class from DIV
+	setTimeout(function(){ snackbar.className = snackbar.className.replace("show", ""); }, 3000);
 }
 
 function setLastChecked(timestamp) {

output/styles2.css

@@ -80,3 +80,50 @@
     text-decoration: none;
     color: #000000;
 }
+
+/* <Snackbar> */
+/* The snackbar - position it at the bottom and in the middle of the screen */
+#copy-snackbar {
+  visibility: hidden; /* Hidden by default. Visible on click */
+  min-width: 250px; /* Set a default minimum width */
+  margin-left: -125px; /* Divide value of min-width by 2 */
+  background-color: #333; /* Black background color */
+  color: #fff; /* White text color */
+  text-align: center; /* Centered text */
+  border-radius: 2px; /* Rounded borders */
+  padding: 16px; /* Padding */
+  position: fixed; /* Sit on top of the screen */
+  z-index: 1; /* Add a z-index if needed */
+  left: 50%; /* Center the snackbar */
+  bottom: 30px; /* 30px from the bottom */
+}
+
+/* Show the snackbar when clicking on a button (class added with JavaScript) */
+#copy-snackbar.show {
+  visibility: visible; /* Show the snackbar */
+  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
+  However, delay the fade out process for 2.5 seconds */
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+/* Animations to fade the snackbar in and out */
+@-webkit-keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}