Improve subscription list drag and drop (#3953)

* it works

* more beautiful

* optimize JS

* CSS - optimized for dark theme

* delete not used form

* phpcs

* optimize

* more optimization

* fixed javaScript syntax

* better css class name

* template.css RTL

* fix failed test for RTL

* fix broken CSS Syntax

* fixed failed test

* fixed: empty lines in RTL CSS

* again a fixed CSS test....

* fixed test

* less magic numbers

1 files changed, 41 insertions, 24 deletions

diff --git a/p/scripts/category.js b/p/scripts/category.js
index cb8616b97..d83b3b22b 100644
--- a/p/scripts/category.js
+++ b/p/scripts/category.js
@@ -25,7 +25,7 @@ function dragend_process(t) {
 
 		if (p.childElementCount <= 1) {
 			p.insertAdjacentHTML('afterbegin',
-				'<li class="item feed disabled" dropzone="move"><div class="alert-warn">' + context.i18n.category_empty + '</div></li>');
+				'<li class="item feed disabled"><div class="alert-warn">' + context.i18n.category_empty + '</div></li>');
 		}
 	}
 }
@@ -47,41 +47,53 @@ function init_draggable() {
 	const dropSection = document.querySelector('.drop-section');
 
 	dropSection.ondragstart = function (ev) {
-		const li = ev.target.closest ? ev.target.closest(draggable) : null;
-		if (li) {
+		const li_draggable = ev.target.closest ? ev.target.closest(draggable) : null;
+		if (li_draggable) {
+			const ulClosest = li_draggable.closest('ul');
+			ulClosest.classList.add('drag-disallowed');
+			ulClosest.removeAttribute('dropzone', '');
 			const drag = ev.target.closest('[draggable]');
 			ev.dataTransfer.effectAllowed = 'move';
 			dragHtml = drag.outerHTML;
 			dragFeedId = drag.getAttribute('data-feed-id');
 			ev.dataTransfer.setData('text', dragFeedId);
-			drag.style.opacity = 0.3;
+			drag.style.opacity = 0.5;
+			drag.classList.add('dragging');
+			li_draggable.closest('.drop-section').classList.add('drag-active');
 			dnd_successful = false;
 		}
 	};
 
 	dropSection.ondragend = function (ev) {
-		const li = ev.target.closest ? ev.target.closest(draggable) : null;
-		if (li) {
-			dragend_process(li);
+		const li_draggable = ev.target.closest ? ev.target.closest(draggable) : null;
+		if (li_draggable) {
+			dragend_process(li_draggable);
+		}
+		li_draggable.classList.remove('dragging');
+		const disallowDragging = document.getElementsByClassName('drag-disallowed');
+		for (let i = 0; i < disallowDragging.length; i++) {
+			disallowDragging[i].setAttribute('dropzone', 'move');
+			disallowDragging[i].classList.remove('drag-disallowed');
 		}
+		li_draggable.closest('.drag-active').classList.remove('drag-active');
 	};
 
 	dropSection.ondragenter = function (ev) {
-		const li = ev.target.closest ? ev.target.closest(dropzone) : null;
-		if (li) {
-			li.classList.add('drag-hover');
+		const ul_dropzone = ev.target.closest ? ev.target.closest(dropzone) : null;
+		if (ul_dropzone) {
+			ul_dropzone.classList.add('drag-hover');
 			return false;
 		}
 	};
 
 	dropSection.ondragleave = function (ev) {
-		const li = ev.target.closest ? ev.target.closest(dropzone) : null;
-		if (li) {
+		const ul_dropzone = ev.target.closest ? ev.target.closest(dropzone) : null;
+		if (ul_dropzone) {
 			const scroll_top = document.documentElement.scrollTop;
-			const top = li.offsetTop;
-			const left = li.offsetLeft;
-			const right = left + li.clientWidth;
-			const bottom = top + li.clientHeight;
+			const top = ul_dropzone.offsetTop;
+			const left = ul_dropzone.offsetLeft;
+			const right = left + ul_dropzone.clientWidth;
+			const bottom = top + ul_dropzone.clientHeight;
 			const mouse_x = ev.screenX;
 			const mouse_y = ev.clientY + scroll_top;
 
@@ -90,21 +102,22 @@ function init_draggable() {
 				// HACK because dragleave is triggered when hovering children!
 				return;
 			}
-			li.classList.remove('drag-hover');
+			ul_dropzone.classList.remove('drag-hover');
 		}
 	};
 
 	dropSection.ondragover = function (ev) {
 		const li = ev.target.closest ? ev.target.closest(dropzone) : null;
 		if (li) {
+			li.closest('ul').classList.remove('drag-drop');
 			ev.dataTransfer.dropEffect = 'move';
 			return false;
 		}
 	};
 
 	dropSection.ondrop = function (ev) {
-		const li = ev.target.closest ? ev.target.closest(dropzone) : null;
-		if (li) {
+		const ul_dropzone = ev.target.closest ? ev.target.closest(dropzone) : null;
+		if (ul_dropzone) {
 			loading = true;
 
 			const req = new XMLHttpRequest();
@@ -112,9 +125,12 @@ function init_draggable() {
 			req.responseType = 'json';
 			req.onload = function (e) {
 				if (this.status == 200) {
-					li.insertAdjacentHTML('afterend', dragHtml);
-					if (li.classList.contains('disabled')) {
-						li.remove();
+					ul_dropzone.insertAdjacentHTML('afterbegin', dragHtml);
+					ul_dropzone.firstChild.classList.add('moved');
+					ul_dropzone.scrollTop = 0;
+					const disabledElement = ul_dropzone.getElementsByClassName('disabled');
+					if (disabledElement.length > 0) {
+						disabledElement[0].remove();
 					}
 					dnd_successful = true;
 				}
@@ -127,11 +143,12 @@ function init_draggable() {
 			req.setRequestHeader('Content-Type', 'application/json');
 			req.send(JSON.stringify({
 				f_id: dragFeedId,
-				c_id: li.parentElement.getAttribute('data-cat-id'),
+				c_id: ul_dropzone.getAttribute('data-cat-id'),
 				_csrf: context.csrf,
 			}));
 
-			li.classList.remove('drag-hover');
+			ul_dropzone.closest('ul').classList.add('drag-drop');
+			ul_dropzone.closest('ul').classList.remove('drag-hover');
 			return false;
 		}
 	};