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

app/Controllers/configureController.php

@@ -275,6 +275,8 @@ class FreshRSS_configure_Controller extends Minz_ActionController {
 	 * checking if categories and feeds are still in use.
 	 */
 	public function queriesAction() {
+		Minz_View::appendScript(Minz_Url::display('/scripts/user.query.js?' . @filemtime(PUBLIC_PATH . '/scripts/user.query.js')));
+
 		$category_dao = FreshRSS_Factory::createCategoryDao();
 		$feed_dao = FreshRSS_Factory::createFeedDao();
 		$tag_dao = FreshRSS_Factory::createTagDao();

app/views/configure/queries.phtml

@@ -3,12 +3,12 @@
 <div class="post">
 	<a href="<?= _url('index', 'index') ?>"><?= _t('gen.action.back_to_rss_feeds') ?></a>
 
-	<form method="post" action="<?= _url('configure', 'queries') ?>">
+	<form method="post" action="<?= _url('configure', 'queries') ?>" id="configureQueries">
 		<input type="hidden" name="_csrf" value="<?= FreshRSS_Auth::csrfToken() ?>" />
 		<legend><?= _t('conf.query') ?></legend>
 
 		<?php foreach ($this->queries as $key => $query) { ?>
-		<div class="form-group" id="query-group-<?= $key ?>">
+		<div class="form-group" id="query-group-<?= $key ?>" draggable="true">
 			<label class="group-name" for="queries_<?= $key ?>_name">
 				<?= _t('conf.query.number', $key + 1) ?>
 			</label>
@@ -77,7 +77,6 @@
 		<div class="form-group form-actions">
 			<div class="group-controls">
 				<button type="submit" class="btn btn-important"><?= _t('gen.action.submit') ?></button>
-				<button type="reset" class="btn"><?= _t('gen.action.cancel') ?></button>
 			</div>
 		</div>
 		<?php } else { ?>

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