From db4da3babc0864099c5ab48e3583d0546a2759d8 Mon Sep 17 00:00:00 2001 From: Marien Fressinaud Date: Thu, 2 Oct 2014 11:39:51 +0200 Subject: First draft for drag and drop We can change feed category by drag and drop! Need improvements... See https://github.com/marienfressinaud/FreshRSS/issues/646 --- p/scripts/category.js | 55 ++++++++++++++++++++++++++++++++++++++++++++ p/scripts/main.js | 2 +- p/themes/Origine/origine.css | 9 ++++++++ 3 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 p/scripts/category.js (limited to 'p') diff --git a/p/scripts/category.js b/p/scripts/category.js new file mode 100644 index 000000000..fe80c3b22 --- /dev/null +++ b/p/scripts/category.js @@ -0,0 +1,55 @@ +"use strict"; + + +function init_draggable() { + var feeds_draggable = '.box-content > .feed', + box_dropzone = '.box-content'; + + $('.box').on('dragstart', feeds_draggable, function(e) { + e.originalEvent.dataTransfer.effectAllowed = 'move'; + e.originalEvent.dataTransfer.setData('html', e.target.outerHTML); + e.originalEvent.dataTransfer.setData('feed-id', e.target.getAttribute('data-feed-id')); + }); + $('.box').on('dragend', feeds_draggable, function(e) { + var parent = e.target.parentNode; + parent.removeChild(e.target); + }); + + $('.box').on('dragenter', box_dropzone, function(e) { + $(e.target).addClass('drag-hover'); + }); + $('.box').on('dragleave', box_dropzone, function(e) { + $(e.target).removeClass('drag-hover'); + }); + $('.box').on('dragover', box_dropzone, function(e) { + e.originalEvent.dataTransfer.dropEffect = "move"; + + return false; + }); + $('.box').on('drop', box_dropzone, function(e) { + var feed_id = e.originalEvent.dataTransfer.getData('feed-id'), + cat_id = e.target.parentNode.getAttribute('data-cat-id'); + + $.ajax({ + type: 'POST', + url: './?c=feed&a=move', + data : { + f_id: feed_id, + c_id: cat_id + } + }); + + $(e.target).after(e.originalEvent.dataTransfer.getData('html')); + $(e.target).removeClass('drag-hover'); + return false; + }); +} + + +if (document.readyState && document.readyState !== 'loading') { + init_draggable(); +} else if (document.addEventListener) { + document.addEventListener('DOMContentLoaded', function () { + init_draggable(); + }, false); +} diff --git a/p/scripts/main.js b/p/scripts/main.js index 005dc961b..e8055e00f 100644 --- a/p/scripts/main.js +++ b/p/scripts/main.js @@ -1247,7 +1247,7 @@ function init_slider_observers() { return; } - $('.open-slider').on('click', function() { + $('.post').on('click', '.open-slider', function() { if (ajax_loading) { return false; } diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index e3ae85075..cf6c9a2ef 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -497,6 +497,15 @@ a.btn { visibility: visible; } +/*=== Draggable */ +.drag-hover { + background: #dfd; + transition: all linear 0.2s; +} +[draggable=true] { + cursor: grab; +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ -- cgit v1.2.3 From 50f07febaed5e839d4e7d56a664c8a208bc2aaf5 Mon Sep 17 00:00:00 2001 From: Marien Fressinaud Date: Thu, 2 Oct 2014 12:13:16 +0200 Subject: Add dataTransfer property to event for JQuery See https://github.com/marienfressinaud/FreshRSS/issues/646 --- p/scripts/category.js | 15 +++++++++------ p/themes/Origine/origine.css | 1 + 2 files changed, 10 insertions(+), 6 deletions(-) (limited to 'p') diff --git a/p/scripts/category.js b/p/scripts/category.js index fe80c3b22..4378aa9cd 100644 --- a/p/scripts/category.js +++ b/p/scripts/category.js @@ -2,17 +2,20 @@ function init_draggable() { + $.event.props.push('dataTransfer'); + var feeds_draggable = '.box-content > .feed', box_dropzone = '.box-content'; $('.box').on('dragstart', feeds_draggable, function(e) { - e.originalEvent.dataTransfer.effectAllowed = 'move'; - e.originalEvent.dataTransfer.setData('html', e.target.outerHTML); - e.originalEvent.dataTransfer.setData('feed-id', e.target.getAttribute('data-feed-id')); + e.dataTransfer.effectAllowed = 'move'; + e.dataTransfer.setData('html', e.target.outerHTML); + e.dataTransfer.setData('feed-id', e.target.getAttribute('data-feed-id')); }); $('.box').on('dragend', feeds_draggable, function(e) { var parent = e.target.parentNode; parent.removeChild(e.target); + }); $('.box').on('dragenter', box_dropzone, function(e) { @@ -22,12 +25,12 @@ function init_draggable() { $(e.target).removeClass('drag-hover'); }); $('.box').on('dragover', box_dropzone, function(e) { - e.originalEvent.dataTransfer.dropEffect = "move"; + e.dataTransfer.dropEffect = "move"; return false; }); $('.box').on('drop', box_dropzone, function(e) { - var feed_id = e.originalEvent.dataTransfer.getData('feed-id'), + var feed_id = e.dataTransfer.getData('feed-id'), cat_id = e.target.parentNode.getAttribute('data-cat-id'); $.ajax({ @@ -39,7 +42,7 @@ function init_draggable() { } }); - $(e.target).after(e.originalEvent.dataTransfer.getData('html')); + $(e.target).after(e.dataTransfer.getData('html')); $(e.target).removeClass('drag-hover'); return false; }); diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index cf6c9a2ef..c79f6cc4c 100644 --- a/p/themes/Origine/origine.css +++ b/p/themes/Origine/origine.css @@ -481,6 +481,7 @@ a.btn { border-radius: 5px 5px 0 0; } .box .box-content { + min-height: 2.5em; max-height: 260px; } -- cgit v1.2.3 From 6effa82cef4ea8fd98178e72b270de6ea4f9f80f Mon Sep 17 00:00:00 2001 From: Marien Fressinaud Date: Thu, 2 Oct 2014 15:02:42 +0200 Subject: 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 | 11 ++++--- p/scripts/category.js | 63 +++++++++++++++++++++++++++++--------- p/themes/Origine/origine.css | 9 ------ p/themes/base-theme/template.css | 12 ++++++++ 4 files changed, 67 insertions(+), 28 deletions(-) (limited to 'p') diff --git a/app/views/subscription/index.phtml b/app/views/subscription/index.phtml index 3a79a34e6..2c56f79ed 100644 --- a/app/views/subscription/index.phtml +++ b/app/views/subscription/index.phtml @@ -1,6 +1,6 @@ partial('aside_subscription'); ?> -
+

@@ -113,21 +113,24 @@
-
    +
      inError() ? ' error' : ''; $empty = $feed->nbEntries() == 0 ? ' empty' : ''; ?> -
    • +
    • ✇ name(); ?>
      • -
      • +
diff --git a/p/scripts/category.js b/p/scripts/category.js index 4378aa9cd..37ad36b17 100644 --- a/p/scripts/category.js +++ b/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; }); } diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css index c79f6cc4c..b25deab0c 100644 --- a/p/themes/Origine/origine.css +++ b/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 */ diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index e6c832ee4..06874c9fe 100644 --- a/p/themes/base-theme/template.css +++ b/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 */ /*===============*/ -- cgit v1.2.3 From 408ac31dd8751eba037db216243958d396df1c8e Mon Sep 17 00:00:00 2001 From: Marien Fressinaud Date: Thu, 2 Oct 2014 19:02:43 +0200 Subject: Hack for dragleave (triggered on children!) See https://github.com/marienfressinaud/FreshRSS/issues/646 --- app/Controllers/feedController.php | 7 ++++++- p/scripts/category.js | 33 ++++++++++++++++++++++++++------- 2 files changed, 32 insertions(+), 8 deletions(-) (limited to 'p') diff --git a/app/Controllers/feedController.php b/app/Controllers/feedController.php index 315665ef3..b2b53185e 100755 --- a/app/Controllers/feedController.php +++ b/app/Controllers/feedController.php @@ -389,7 +389,12 @@ class FreshRSS_feed_Controller extends Minz_ActionController { 'category' => $cat_id, ); - $feedDAO->updateFeed($feed_id, $values); + if (!$feedDAO->updateFeed($feed_id, $values)) { + Minz_Error::error( + 404, + array('error' => array(_t('error_occurred'))) + ); + } } } diff --git a/p/scripts/category.js b/p/scripts/category.js index 37ad36b17..872d14490 100644 --- a/p/scripts/category.js +++ b/p/scripts/category.js @@ -4,6 +4,8 @@ var loading = false, dnd_successful = false; function dragend_process(t) { + t.style.display = 'none'; + if (loading) { window.setTimeout(function() { dragend_process(t); @@ -11,13 +13,13 @@ function dragend_process(t) { } if (!dnd_successful) { + t.style.display = 'block'; t.style.opacity = 1.0; } else { t.parentNode.removeChild(t); } } - function init_draggable() { if (!(window.$ && window.url_freshrss)) { if (window.console) { @@ -45,14 +47,31 @@ function init_draggable() { }); $('.drop-section').on('dragenter', dropzone, function(e) { - $(e.target).addClass('drag-hover'); + $(this).addClass('drag-hover'); + + e.preventDefault(); }); $('.drop-section').on('dragleave', dropzone, function(e) { - $(e.target).removeClass('drag-hover'); + var pos_this = $(this).position(), + scroll_top = $(document).scrollTop(), + top = pos_this.top, + left = pos_this.left, + right = left + $(this).width(), + bottom = top + $(this).height(), + mouse_x = e.originalEvent.screenX, + mouse_y = e.originalEvent.clientY + scroll_top; + + if (left <= mouse_x && mouse_x <= right && + top <= mouse_y && mouse_y <= bottom) { + // HACK because dragleave is triggered when hovering children! + return; + } + $(this).removeClass('drag-hover'); }); $('.drop-section').on('dragover', dropzone, function(e) { e.dataTransfer.dropEffect = "move"; + e.preventDefault(); return false; }); $('.drop-section').on('drop', dropzone, function(e) { @@ -70,14 +89,14 @@ function init_draggable() { } }).success(function() { $(e.target).after(e.dataTransfer.getData('text/html')); - loading = false; - }).complete(function() { dnd_successful = true; + }).complete(function() { + loading = false; }); - $(e.target).removeClass('drag-hover'); + $(this).removeClass('drag-hover'); - return false; + e.preventDefault(); }); } -- cgit v1.2.3 From ce43b1761b810c89e5e8660e8ae2638e97ca6339 Mon Sep 17 00:00:00 2001 From: Marien Fressinaud Date: Thu, 2 Oct 2014 19:47:02 +0200 Subject: Fix box when no feed in category See https://github.com/marienfressinaud/FreshRSS/issues/646 --- app/views/helpers/javascript_vars.phtml | 1 + p/scripts/category.js | 10 +++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) (limited to 'p') diff --git a/app/views/helpers/javascript_vars.phtml b/app/views/helpers/javascript_vars.phtml index 1139eb446..71798369d 100644 --- a/app/views/helpers/javascript_vars.phtml +++ b/app/views/helpers/javascript_vars.phtml @@ -54,6 +54,7 @@ echo 'authType="', $authType, '",', echo 'str_confirmation_default="', Minz_Translate::t('confirm_action'), '"', ",\n"; echo 'str_notif_title_articles="', Minz_Translate::t('notif_title_new_articles'), '"', ",\n"; echo 'str_notif_body_articles="', Minz_Translate::t('notif_body_new_articles'), '"', ",\n"; +echo 'str_category_empty="', Minz_Translate::t('category_empty'), '"', ",\n"; echo 'html5_notif_timeout=', $this->conf->html5_notif_timeout,",\n"; diff --git a/p/scripts/category.js b/p/scripts/category.js index 872d14490..dc5df67e4 100644 --- a/p/scripts/category.js +++ b/p/scripts/category.js @@ -16,7 +16,12 @@ function dragend_process(t) { t.style.display = 'block'; t.style.opacity = 1.0; } else { - t.parentNode.removeChild(t); + var parent = $(t.parentNode); + $(t).remove(); + + if (parent.children().length <= 0) { + parent.append('
  • ' + str_category_empty + '
    • '); + } } } @@ -89,6 +94,9 @@ function init_draggable() { } }).success(function() { $(e.target).after(e.dataTransfer.getData('text/html')); + if ($(e.target).hasClass('disabled')) { + $(e.target).remove(); + } dnd_successful = true; }).complete(function() { loading = false; -- cgit v1.2.3