Enhance content path feature (#2778)

- Add a maintenance section to be able to clear cache and force reload a feed.
- Add an icon next to path field to show a pop-up with the result of the content path.

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

5 files changed, 244 insertions, 1 deletions

diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index 1fd8a19de..9ce0e74ce 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -1,8 +1,25 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
 "use strict";
-/* globals context, openNotification, xmlHttpRequestJson */
+/* globals context, openNotification, openPopupWithSource, xmlHttpRequestJson */
 /* jshint esversion:6, strict:global */
 
+function fix_popup_preview_selector() {
+	const link = document.getElementById('popup-preview-selector');
+
+	if (!link) {
+		return;
+	}
+
+	link.addEventListener('click', function (ev) {
+		const selector_entries = document.getElementById('path_entries').value;
+		const href = link.href.replace('selector-token', encodeURIComponent(selector_entries));
+
+		openPopupWithSource(href);
+
+		ev.preventDefault();
+	});
+}
+
 //<crypto form (Web login)>
 function poormanSalt() {	//If crypto.getRandomValues is not available
 	const base = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ.0123456789/abcdefghijklmnopqrstuvwxyz';
@@ -176,6 +193,7 @@ function init_slider_observers() {
 							slider.classList.add('active');
 							closer.classList.add('active');
 							context.ajax_loading = false;
+							fix_popup_preview_selector();
 						};
 					req.send();
 					return false;
@@ -240,6 +258,7 @@ function init_extra() {
 	init_select_observers();
 	init_slider_observers();
 	init_configuration_alert();
+	fix_popup_preview_selector();
 }
 
 if (document.readyState && document.readyState !== 'loading') {
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 9ebc4c247..6b4b0a6b2 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1215,6 +1215,72 @@ function init_notifications() {
 }
 // </notification>
 
+// <popup>
+let popup = null,
+	popup_iframe_container = null,
+	popup_iframe = null,
+	popup_txt = null,
+	popup_working = false;
+
+function openPopupWithMessage(msg) {
+	if (popup_working === true) {
+		return false;
+	}
+
+	popup_working = true;
+
+	popup_txt.innerHTML = msg;
+
+	popup_txt.style.display = 'table-row';
+	popup.style.display = 'block';
+}
+
+function openPopupWithSource(source) {
+	if (popup_working === true) {
+		return false;
+	}
+
+	popup_working = true;
+
+	popup_iframe.src = source;
+
+	popup_iframe_container.style.display = 'table-row';
+	popup.style.display = 'block';
+}
+
+function closePopup() {
+	popup.style.display = 'none';
+	popup_iframe_container.style.display = 'none';
+	popup_txt.style.display = 'none';
+
+	popup_iframe.src = 'about:blank';
+
+	popup_working = false;
+}
+
+function init_popup() {
+	//Fetch elements.
+	popup = document.getElementById('popup');
+
+	popup_iframe_container = document.getElementById('popup-iframe-container');
+	popup_iframe = document.getElementById('popup-iframe');
+
+	popup_txt = document.getElementById('popup-txt');
+
+	//Configure close button.
+	document.getElementById('popup-close').addEventListener('click', function (ev) {
+  		closePopup();
+  	});
+
+  	//Configure close-on-click.
+	window.addEventListener('click', function (ev) {
+		if (ev.target == popup) {
+			closePopup();
+		}
+	});
+}
+// </popup>
+
 // <notifs html5>
 var notifs_html5_permission = 'denied';
 
@@ -1483,6 +1549,7 @@ function init_beforeDOM() {
 
 function init_afterDOM() {
 	init_notifications();
+	init_popup();
 	init_confirm_action();
 	const stream = document.getElementById('stream');
 	if (stream) {
diff --git a/p/scripts/preview.js b/p/scripts/preview.js
new file mode 100644
index 000000000..d52657a5a
--- /dev/null
+++ b/p/scripts/preview.js
@@ -0,0 +1,43 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
+"use strict";
+/* jshint esversion:6, strict:global */
+
+let rendered_node = null,
+	rendered_view = null,
+	raw_node = null,
+	raw_view = null;
+
+
+function update_ui() {
+	if (rendered_node.checked && !raw_node.checked) {
+		rendered_view.removeAttribute('hidden');
+		raw_view.setAttribute('hidden', true);
+	} else if (!rendered_node.checked && raw_node.checked) {
+		rendered_view.setAttribute('hidden', true);
+		raw_view.removeAttribute('hidden');
+	}
+}
+
+function init_afterDOM() {
+	rendered_node = document.getElementById('freshrss_rendered');
+	rendered_view = document.getElementById('freshrss_rendered_view');
+
+	raw_node = document.getElementById('freshrss_raw');
+	raw_view = document.getElementById('freshrss_raw_view');
+
+	rendered_node.addEventListener('click', update_ui);
+	raw_node.addEventListener('click', update_ui);
+}
+
+
+if (document.readyState && document.readyState !== 'loading') {
+	init_afterDOM();
+} else {
+	document.addEventListener('DOMContentLoaded', function () {
+		if (window.console) {
+			console.log('FreshRSS waiting for DOMContentLoaded…');
+		}
+		init_afterDOM();
+	}, false);
+}
+// @license-end
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 04bc37bcb..5c67099fe 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -772,6 +772,73 @@ br {
 	vertical-align: middle;
 }
 
+/*=== Popup */
+#popup {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background-color: #eee;
+	background-color: rgba(0,0,0,0.4);
+}
+
+#popup-content {
+	margin: 5rem auto;
+	display: table;
+	width: 80%;
+	height: 80%;
+	overflow: hidden;
+	background-color: #fafafa;
+	border-radius: .25rem;
+	box-shadow: 0 0 1px #737373, 1px 2px 3px #4a4a4f;
+}
+
+.popup-row {
+	display: table-row;
+	width: 100%;
+}
+
+#popup-close {
+	float: right;
+	width: 27px;
+	height: 27px;
+	padding-bottom: 5px;
+	color: #aaa;
+	font-size: 28px;
+	font-weight: bold;
+}
+
+#popup-close:hover,
+#popup-close:focus {
+	color: #000;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+#popup-txt {
+	display: none;
+	height: 100%;
+}
+
+#popup-iframe-container {
+	display: none;
+	height: 100%;
+}
+
+#popup-iframe-sub {
+	padding: 10px;
+	height: 100%;
+}
+
+#popup-iframe {
+	width: 100%;
+	height: 100%;
+}
+
 /*=== Navigation menu (for articles) */
 #nav_entries {
 	background: #fff;
@@ -1214,3 +1281,32 @@ pre.enclosure-description {
 		font-style: italic;
 	}
 }
+
+/*=== PREVIEW */
+/*===========*/
+.preview_controls {
+	margin-left: auto;
+	margin-right: auto;
+	padding: 1rem;
+	max-width: 1000px;
+	text-align: center;
+	background-color: #eee;
+	border: 1px solid #e0e0e0;
+	border-radius: .25rem;
+}
+
+.preview_controls label {
+	display: inline;
+}
+
+.preview_controls label input[type="radio"] {
+	margin-top: -4px;
+}
+
+.preview_controls label + label {
+	margin-left: 1rem;
+}
+
+.preview_background {
+	background-color: transparent;
+}
diff --git a/p/themes/icons/look.svg b/p/themes/icons/look.svg
new file mode 100755
index 000000000..8aa1d79a4
--- /dev/null
+++ b/p/themes/icons/look.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.0764824,0,0,0.0764824,-0.812646,-0.015801)">
+        <g transform="matrix(1,0,0,1,-8.5,-25)">
+            <path d="M20.165,126.756C19.688,128.746 19.721,130.785 20.207,132.866C45.104,175.078 81.07,202.183 123.5,202.183C157.853,202.183 191.961,185.861 227.057,133.589C227.806,131.634 227.838,128.051 227.005,126.1C191.909,73.828 157.853,57.429 123.5,57.429C81.07,57.429 45.062,84.543 20.165,126.756Z" style="fill:rgb(102,102,102);"/>
+        </g>
+        <g transform="matrix(1.04264,0,0,1.04264,-18.5327,-41.2106)">
+            <circle cx="128.071" cy="140.428" r="50.694" style="fill:white;"/>
+        </g>
+        <g transform="matrix(0.620569,0,0,0.620569,35.523,18.0607)">
+            <circle cx="128.071" cy="140.428" r="50.694" style="fill:rgb(102,102,102);"/>
+        </g>
+        <g transform="matrix(0.216239,0,0,0.216239,87.306,74.8402)">
+            <circle cx="128.071" cy="140.428" r="50.694" style="fill:white;"/>
+        </g>
+    </g>
+</svg>