Add user query manual sorting (#3346)

* Add user query manual sorting

Before, to change the user query order, you'll have to delete them
and recreate them. It was not really efficient.
Now, you can drag and drop them to ease reordering.

See #2216 and #2015

* Remove cancel action on user query configuration

Before, the cancel action was useless since it was not wired.
Now, there is no cancel action.

See #2015

1 files changed, 48 insertions, 0 deletions

diff --git a/p/scripts/user.query.js b/p/scripts/user.query.js
new file mode 100644
index 000000000..c828cef19
--- /dev/null
+++ b/p/scripts/user.query.js
@@ -0,0 +1,48 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
+"use strict";
+/* jshint esversion:6, strict:global */
+
+function init_draggable() {
+	if (!window.context) {
+		if (window.console) {
+			console.log('FreshRSS user query waiting for JS…');
+		}
+		setTimeout(init_draggable, 50);
+		return;
+	}
+	
+	let source;
+	const configureQueries = document.querySelector('#configureQueries');
+
+	configureQueries.addEventListener('dragstart', event => {
+		source = event.target.closest('[draggable="true"]');
+		event.dataTransfer.setData('text/html', source.outerHTML);
+		event.dataTransfer.effectAllowed = 'move';
+	});
+	configureQueries.addEventListener('dragover', event => event.preventDefault());
+	configureQueries.addEventListener('dragleave', event => event.preventDefault());
+	configureQueries.addEventListener('drop', event => {
+		event.preventDefault();
+		event.stopPropagation();
+		const dropQuery = event.target.closest('[draggable="true"]');
+		if (null === dropQuery) {
+			source.remove();
+			configureQueries.querySelector('legend').insertAdjacentHTML('afterend', event.dataTransfer.getData('text/html'));
+		} else if (source !== dropQuery) {
+			source.remove();
+			dropQuery.insertAdjacentHTML('afterend', event.dataTransfer.getData('text/html'));
+		}
+	});
+
+	// This is needed to work around a Firefox bug → https://bugzilla.mozilla.org/show_bug.cgi?id=800050
+	configureQueries.addEventListener('focusin', event => {
+		event.target.closest('input[id^="queries_"][id$="_name"]').select();
+	});
+}
+
+if (document.readyState && document.readyState !== 'loading') {
+	init_draggable();
+} else if (document.addEventListener) {
+	document.addEventListener('DOMContentLoaded', event => init_draggable(), false);
+}
+// @license-end