Fix copy permalink when on non-secure source close #47

README.md

@@ -78,7 +78,7 @@ I've made several changes to this Weather Star 4000 simulation compared to the o
 * "Flavors" are not present in this simulation. Flavors refer to the order of the weather information that was shown on the original units. Instead, the order of the displays has been fixed and a checkboxes can be used to turn on and off individual displays. The travel forecast has been defaulted to off so only local information shows for new users.
 
 ## Sharing a permalink (bookmarking)
-Selected displays, the forecast city and widescreen setting are sticky from one session to the next. However if you would like to share your exact configuration or bookmark it click the "Copy Permalink" near the bottom of the page. A URL will be copied to your clipboard with all of you selected displays and location. You can then share this link or add it to your bookmarks.
+Selected displays, the forecast city and widescreen setting are sticky from one session to the next. However if you would like to share your exact configuration or bookmark it click the "Copy Permalink" (or get "Get Parmalink") near the bottom of the page. A URL will be copied to your clipboard with all of you selected displays and location (or copy it from the page if your browser doesn't support clipboard transfers directly). You can then share this link or add it to your bookmarks.
 
 ## Kiosk mode
 Kiosk mode can be activated by a checkbox on the page. Note that there is no way out of kiosk mode (except refresh or closing the browser), and the play/pause and other controls will not be available. This is deliberate as a browser's kiosk mode it intended not to be exited or significantly modified.

server/scripts/modules/share.mjs

@@ -7,7 +7,13 @@ const specialMappings = {
 
 const init = () => {
 	// add action to existing link
-	document.querySelector('#share-link').addEventListener('click', createLink);
+	const shareLink = document.querySelector('#share-link');
+	shareLink.addEventListener('click', createLink);
+
+	// if navigator.clipboard does not exist, change text
+	if (!navigator?.clipboard) {
+		shareLink.textContent = 'Get Permalink';
+	}
 };
 
 const createLink = async (e) => {
@@ -33,10 +39,23 @@ const createLink = async (e) => {
 
 	const url = new URL(`?${queryString}`, document.location.href);
 
+	// send to proper function based on availability of clipboard
+	if (navigator?.clipboard) {
+		copyToClipboard(url);
+	} else {
+		writeLinkToPage(url);
+	}
+};
+
+const copyToClipboard = async (url) => {
 	try {
+		// write to clipboard
 		await navigator.clipboard.writeText(url.toString());
+		// alert user
 		const confirmSpan = document.querySelector('#share-link-copied');
 		confirmSpan.style.display = 'inline';
+
+		// hide confirm text after 5 seconds
 		setTimeout(() => {
 			confirmSpan.style.display = 'none';
 		}, 5000);
@@ -45,6 +64,18 @@ const createLink = async (e) => {
 	}
 };
 
+const writeLinkToPage = (url) => {
+	// get elements
+	const shareLinkInstructions = document.querySelector('#share-link-instructions');
+	const shareLinkUrl = shareLinkInstructions.querySelector('#share-link-url');
+	// populate url and display
+	shareLinkUrl.value = url;
+	shareLinkInstructions.style.display = 'inline';
+	// highlight for convenience
+	shareLinkUrl.focus();
+	shareLinkUrl.select();
+};
+
 const parseQueryString = () => {
 	// return memoized result
 	if (parseQueryString.params) return parseQueryString.params;

server/styles/scss/_page.scss

@@ -353,7 +353,8 @@ body {
 	margin-bottom: 15px;
 }
 
-#enabledDisplays, #settings {
+#enabledDisplays,
+#settings {
 	margin-bottom: 15px;
 	@include u.status-colors();
 
@@ -412,6 +413,7 @@ body {
 	justify-content: center;
 	align-content: center;
 }
+
 .kiosk #divTwc {
 	justify-content: unset;
 }
@@ -728,7 +730,12 @@ body {
 	display: none;
 }
 
+#share-link-instructions {
+	display: none;
+}
+
 .kiosk {
+
 	#divQuery,
 	>.info,
 	>.heading,

views/index.ejs

@@ -151,10 +151,16 @@
 	<div id='settings'>
 	</div>
 
+	<div class='heading'>Sharing</div>
 	<div class='info'>
 		<a href='' id='share-link'>Copy Permalink</a> <span id="share-link-copied">Link copied to clipboard!</span>
+		<div id="share-link-instructions">
+			Copy this long URL:
+			<input type='text' id="share-link-url"></div>
+		</div>
 	</div>
 
+	<div class='heading'>Forecast Information</div>
   <div id="divInfo">
     Location: <span id="spanCity"></span> <span id="spanState"></span><br />
     Station Id: <span id="spanStationId"></span><br />