Improve drag and drop

- Refactoring
- Better design
- Item doesn't disappear if action is not completed

See https://github.com/marienfressinaud/FreshRSS/issues/646

app/views/subscription/index.phtml

@@ -1,6 +1,6 @@
 <?php $this->partial('aside_subscription'); ?>
 
-<div class="post">
+<div class="post drop-section">
 	<a href="<?php echo _url('index', 'index'); ?>"><?php echo _t('back_to_rss_feeds'); ?></a>
 
 	<h2><?php echo _t('subscription_management'); ?></h2>
@@ -113,21 +113,24 @@
 			</form>
 		</div>
 
-		<ul class="box-content" dropzone="move" data-cat-id="<?php echo $cat->id(); ?>">
+		<ul class="box-content" data-cat-id="<?php echo $cat->id(); ?>">
 			<?php if (!empty($feeds)) { ?>
 			<?php
 					foreach ($feeds as $feed) {
 						$error = $feed->inError() ? ' error' : '';
 						$empty = $feed->nbEntries() == 0 ? ' empty' : '';
 			?>
-			<li class="item feed<?php echo $error, $empty; ?>" draggable="true" data-feed-id="<?php echo $feed->id(); ?>">
+			<li class="item feed<?php echo $error, $empty; ?>"
+			    draggable="true"
+			    data-feed-id="<?php echo $feed->id(); ?>"
+			    dropzone="move">
 				<a class="configure open-slider" href="<?php echo _url('subscription', 'feed', 'id', $feed->id()); ?>"><?php echo _i('configure'); ?></a>
 				<img class="favicon" src="<?php echo $feed->favicon(); ?>" alt="✇" /> <?php echo $feed->name(); ?>
 			</li>
 			<?php 	}
 				} else {
 			?>
-			<li class="item"><?php echo _t('category_empty'); ?></li>
+			<li class="item disabled" dropzone="move"><?php echo _t('category_empty'); ?></li>
 			<?php } ?>
 		</ul>
 	</div>

p/scripts/category.js

@@ -1,38 +1,66 @@
 "use strict";
 
+var loading = false,
+	dnd_successful = false;
+
+function dragend_process(t) {
+	if (loading) {
+		window.setTimeout(function() {
+			dragend_process(t);
+		}, 50);
+	}
+
+	if (!dnd_successful) {
+		t.style.opacity = 1.0;
+	} else {
+		t.parentNode.removeChild(t);
+	}
+}
+
 
 function init_draggable() {
+	if (!(window.$ && window.url_freshrss)) {
+		if (window.console) {
+			console.log('FreshRSS waiting for JS…');
+		}
+		window.setTimeout(init_draggable, 50);
+		return;
+	}
+
 	$.event.props.push('dataTransfer');
 
-	var feeds_draggable = '.box-content > .feed',
-	    box_dropzone = '.box-content';
+	var draggable = '[draggable="true"]',
+	    dropzone = '[dropzone="move"]';
 
-	$('.box').on('dragstart', feeds_draggable, function(e) {
+	$('.drop-section').on('dragstart', draggable, function(e) {
 		e.dataTransfer.effectAllowed = 'move';
-		e.dataTransfer.setData('html', e.target.outerHTML);
-		e.dataTransfer.setData('feed-id', e.target.getAttribute('data-feed-id'));
+		e.dataTransfer.setData('text/html', e.target.outerHTML);
+		e.dataTransfer.setData('text', e.target.getAttribute('data-feed-id'));
+		e.target.style.opacity = 0.3;
+
+		dnd_successful = false;
 	});
-	$('.box').on('dragend', feeds_draggable, function(e) {
-		var parent = e.target.parentNode;
-		parent.removeChild(e.target);
-		
+	$('.drop-section').on('dragend', draggable, function(e) {
+		dragend_process(e.target);
 	});
 
-	$('.box').on('dragenter', box_dropzone, function(e) {
+	$('.drop-section').on('dragenter', dropzone, function(e) {
 		$(e.target).addClass('drag-hover');
 	});
-	$('.box').on('dragleave', box_dropzone, function(e) {
+	$('.drop-section').on('dragleave', dropzone, function(e) {
 		$(e.target).removeClass('drag-hover');
 	});
-	$('.box').on('dragover', box_dropzone, function(e) {
+	$('.drop-section').on('dragover', dropzone, function(e) {
 		e.dataTransfer.dropEffect = "move";
 
 		return false;
 	});
-	$('.box').on('drop', box_dropzone, function(e) {
-		var feed_id = e.dataTransfer.getData('feed-id'),
+	$('.drop-section').on('drop', dropzone, function(e) {
+		var feed_id = e.dataTransfer.getData('text'),
 		    cat_id = e.target.parentNode.getAttribute('data-cat-id');
 
+		loading = true;
+
 		$.ajax({
 			type: 'POST',
 			url: './?c=feed&a=move',
@@ -40,10 +68,15 @@ function init_draggable() {
 				f_id: feed_id,
 				c_id: cat_id
 			}
+		}).success(function() {
+			$(e.target).after(e.dataTransfer.getData('text/html'));
+			loading = false;
+		}).complete(function() {
+			dnd_successful = true;
 		});
 
-		$(e.target).after(e.dataTransfer.getData('html'));
 		$(e.target).removeClass('drag-hover');
+
 		return false;
 	});
 }

p/themes/Origine/origine.css

@@ -498,15 +498,6 @@ a.btn {
 	visibility: visible;
 }
 
-/*=== Draggable */
-.drag-hover {
-	background: #dfd;
-	transition: all linear 0.2s;
-}
-[draggable=true] {
-	cursor: grab;
-}
-
 /*=== STRUCTURE */
 /*===============*/
 /*=== Header */

p/themes/base-theme/template.css

@@ -304,6 +304,10 @@ a.btn {
 .box .box-content .item {
 	display: block;
 }
+.box .box-content .item.disabled {
+	text-align: center;
+	font-style: italic;
+}
 
 .box .box-content-centered {
 	padding: 30px 5px;
@@ -313,6 +317,14 @@ a.btn {
 	margin: 20px 0 0;
 }
 
+/*=== Draggable */
+.drag-hover {
+	margin: 0 0 5px;
+	border-bottom: 2px solid #ccc;
+}
+[draggable=true] {
+	cursor: grab;
+}
 
 /*=== STRUCTURE */
 /*===============*/