diff options
Diffstat (limited to 'p/scripts/category.js')
| -rw-r--r-- | p/scripts/category.js | 178 |
1 files changed, 99 insertions, 79 deletions
diff --git a/p/scripts/category.js b/p/scripts/category.js index caa4fa22f..86d8542f1 100644 --- a/p/scripts/category.js +++ b/p/scripts/category.js @@ -1,6 +1,6 @@ "use strict"; -/* globals i18n */ -/* jshint globalstrict: true */ +/* globals context */ +/* jshint esversion:6, strict:global */ var loading = false, dnd_successful = false; @@ -9,7 +9,7 @@ function dragend_process(t) { t.setAttribute('draggable', 'false'); if (loading) { - window.setTimeout(function() { + setTimeout(function() { dragend_process(t); }, 50); return; @@ -20,11 +20,11 @@ function dragend_process(t) { t.style.opacity = ''; t.setAttribute('draggable', 'true'); } else { - var parent = $(t.parentNode); - $(t).remove(); + const p = t.parentElement; + t.remove(); - if (parent.children().length <= 0) { - parent.append('<li class="item disabled" dropzone="move">' + i18n.category_empty + '</li>'); + if (p.childElementCount <= 0) { + p.insertAdjacentHTML('beforeend', '<li class="item disabled" dropzone="move">' + context.i18n.category_empty + '</li>'); } } } @@ -33,89 +33,109 @@ var dragFeedId = '', dragHtml = ''; function init_draggable() { - if (!(window.$ && window.i18n)) { + if (!window.context) { if (window.console) { - console.log('FreshRSS waiting for JS…'); + console.log('FreshRSS category waiting for JS…'); } - window.setTimeout(init_draggable, 50); + setTimeout(init_draggable, 50); return; } - var draggable = '[draggable="true"]', - dropzone = '[dropzone="move"]'; - - $('.drop-section').on('dragstart', draggable, function(e) { - var drag = $(e.target).closest('[draggable]')[0]; - e.originalEvent.dataTransfer.effectAllowed = 'move'; - dragHtml = drag.outerHTML; - dragFeedId = drag.getAttribute('data-feed-id'); - e.originalEvent.dataTransfer.setData('text', dragFeedId); - drag.style.opacity = 0.3; - - dnd_successful = false; - }); - $('.drop-section').on('dragend', draggable, function(e) { - dragend_process(e.target); - }); - - $('.drop-section').on('dragenter', dropzone, function(e) { - $(this).addClass('drag-hover'); - - e.preventDefault(); - }); - $('.drop-section').on('dragleave', dropzone, function(e) { - 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.originalEvent.dataTransfer.dropEffect = "move"; - - e.preventDefault(); - return false; - }); - $('.drop-section').on('drop', dropzone, function(e) { - loading = true; - - $.ajax({ - type: 'POST', - url: './?c=feed&a=move', - data: { - f_id: dragFeedId, - c_id: e.target.parentNode.getAttribute('data-cat-id'), - _csrf: context.csrf, + const draggable = '[draggable="true"]', + dropzone = '[dropzone="move"]', + dropSection = document.querySelector('.drop-section'); + + dropSection.ondragstart = function(ev) { + const li = ev.target.closest ? ev.target.closest(draggable) : null; + if (li) { + 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; + dnd_successful = false; } - }).done(function() { - $(e.target).after(dragHtml); - if ($(e.target).hasClass('disabled')) { - $(e.target).remove(); + }; + + dropSection.ondragend = function(ev) { + const li = ev.target.closest ? ev.target.closest(draggable) : null; + if (li) { + dragend_process(li); } - dnd_successful = true; - }).always(function() { - loading = false; - dragFeedId = ''; - dragHtml = ''; - }); + }; - $(this).removeClass('drag-hover'); + dropSection.ondragenter = function(ev) { + const li = ev.target.closest ? ev.target.closest(dropzone) : null; + if (li) { + li.classList.add('drag-hover'); + return false; + } + }; + + dropSection.onddragleave = function(ev) { + const li = ev.target.closest ? ev.target.closest(dropzone) : null; + if (li) { + const scroll_top = document.documentElement.scrollTop, + top = li.offsetTop, + left = li.offsetLeft, + right = left + li.clientWidth, + bottom = top + li.clientHeight, + mouse_x = ev.screenX, + mouse_y = ev.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; + } + li.classList.remove('drag-hover'); + } + }; - e.preventDefault(); - }); + dropSection.ondragover = function(ev) { + const li = ev.target.closest ? ev.target.closest(dropzone) : null; + if (li) { + ev.dataTransfer.dropEffect = "move"; + return false; + } + }; + + dropSection.ondrop = function(ev) { + const li = ev.target.closest ? ev.target.closest(dropzone) : null; + if (li) { + loading = true; + + const req = new XMLHttpRequest(); + req.open('POST', './?c=feed&a=move', true); + req.responseType = 'json'; + req.onload = function (e) { + if (this.status == 200) { + li.insertAdjacentHTML('afterend', dragHtml); + if (li.classList.contains('disabled')) { + li.remove(); + } + dnd_successful = true; + } + }; + req.onloadend = function (e) { + loading = false; + dragFeedId = ''; + dragHtml = ''; + }; + req.setRequestHeader('Content-Type', 'application/json'); + req.send(JSON.stringify({ + f_id: dragFeedId, + c_id: li.parentElement.getAttribute('data-cat-id'), + _csrf: context.csrf, + })); + + li.classList.remove('drag-hover'); + return false; + } + }; } - if (document.readyState && document.readyState !== 'loading') { init_draggable(); } else if (document.addEventListener) { |