Fix: sharing via clipboard for no https/localhost environments (#5606)

* Update main.js

* Update p/scripts/main.js

Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>

* improved with negative feedback

* Update p/scripts/main.js

Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

---------

Co-authored-by: Frans de Jonge <fransdejonge@gmail.com>
Co-authored-by: Alexandre Alapetite <alexandre@alapetite.fr>

p/scripts/main.js

@@ -1087,11 +1087,31 @@ function init_stream(stream) {
 		}
 
 		el = ev.target.closest('.item.share > button[data-type="clipboard"]');
-		if (el && navigator.clipboard) {	// Clipboard
-			navigator.clipboard.writeText(el.dataset.url);
-			el.classList.remove('ok');
-			el.dataset.foo = el.offsetWidth; // it does nothing, but it is needed. See https://github.com/FreshRSS/FreshRSS/pull/5295
-			el.classList.add('ok');
+		if (el) { // Clipboard
+			if (navigator.clipboard) {
+				navigator.clipboard.writeText(el.dataset.url)
+					.then(() => {
+						toggleClass(el, 'error');
+					})
+					.catch(e => {
+						console.log(e);
+						toggleClass(el, 'error');
+					});
+			} else {
+				// fallback, if navigator.clipboard is not available f.e. if access is not via https or localhost
+				const inputElement = document.createElement('input');
+				inputElement.value = el.dataset.url;
+				document.body.appendChild(inputElement);
+				inputElement.select();
+				if (document.execCommand && document.execCommand('copy')) {
+					toggleClass(el, 'ok');
+				} else {
+					console.log('document.execCommand("copy") failed');
+					toggleClass(el, 'error');
+				}
+				inputElement.remove();
+			}
+
 			return false;
 		}
 
@@ -1225,6 +1245,12 @@ function init_stream(stream) {
 	};
 }
 
+function toggleClass(el, cssclass) {
+	el.classList.remove(cssclass);
+	el.dataset.foo = el.offsetWidth; // it does nothing, but it is needed. See https://github.com/FreshRSS/FreshRSS/pull/5295
+	el.classList.add(cssclass);
+}
+
 function init_nav_entries() {
 	const nav_entries = document.getElementById('nav_entries');
 	if (nav_entries) {

p/themes/base-theme/frss.css

@@ -1922,6 +1922,16 @@ html.slider-active {
 	animation-name: easeOut;
 }
 
+.item.share button.error::before {
+	content: "❌";
+	position: absolute;
+	left: 0.25rem;
+}
+
+.item.share button.error {
+	text-decoration: line-through;
+}
+
 @keyframes easeOut {
 	0% {opacity: 1;}
 

p/themes/base-theme/frss.rtl.css

@@ -1922,6 +1922,16 @@ html.slider-active {
 	animation-name: easeOut;
 }
 
+.item.share button.error::before {
+	content: "❌";
+	position: absolute;
+	right: 0.25rem;
+}
+
+.item.share button.error {
+	text-decoration: line-through;
+}
+
 @keyframes easeOut {
 	0% {opacity: 1;}