diff --git a/app/assets/javascripts/admin/treeview.js b/app/assets/javascripts/admin/treeview.js index 800389ececddd2de416b40443247ea0ffd63750a..5ef95956fd6d34e39dc6ee0ba9603fbc8e3649e1 100644 --- a/app/assets/javascripts/admin/treeview.js +++ b/app/assets/javascripts/admin/treeview.js @@ -19,7 +19,19 @@ window.osuny.treeView = { group: 'nested', animation: 150, fallbackOnBody: true, - swapThreshold: 0.65 + swapThreshold: 0.65, + onEnd: function (/**Event*/evt) { + console.log(evt); + var itemEl = evt.item; // dragged HTMLElement + evt.to; // target list + evt.from; // previous list + evt.oldIndex; // element's old index within old parent + evt.newIndex; // element's new index within new parent + evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements + evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements + evt.clone // the clone element + evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving + }, }); } }, diff --git a/app/views/admin/communication/website/pages/_treebranch.html.erb b/app/views/admin/communication/website/pages/_treebranch.html.erb index a8e0ffd92d1e57185751041bca0dd35542cbf06a..0b66fe003a5fec0247ef8a38b01e57fc6b1843b5 100644 --- a/app/views/admin/communication/website/pages/_treebranch.html.erb +++ b/app/views/admin/communication/website/pages/_treebranch.html.erb @@ -9,7 +9,7 @@ <% end %> <% end %> <%= link_to page, admin_communication_website_page_path(website_id: page.website.id, id: page.id) %> - <span class="move_btn py-2 ps-2"><i class="fas fa-arrows-alt"></i></span> + <span class="move_btn py-2 ps-2"><i class="fas fa-sort"></i></span> </div> <% if page.has_children? %> <ul class="list-unstyled treeview__children js-treeview-children js-treeview-sortable ms-4"> diff --git a/app/views/admin/communication/website/pages/children.js.erb b/app/views/admin/communication/website/pages/children.js.erb index a53965a7e008eedd2295324e4fa438f82bfb6947..900cd91c5058f607b696afeafe8cf5a6c03f2512 100644 --- a/app/views/admin/communication/website/pages/children.js.erb +++ b/app/views/admin/communication/website/pages/children.js.erb @@ -1,3 +1,29 @@ $branch = $('.js-treeview-branch[data-id=<%= @page.id %>]'); $('.js-treeview-children', $branch).html("<%= escape_javascript(render 'treebranch', pages: @children) %>"); $branch.addClass('treeview__branch--loaded'); + + +var nestedSortables, + i; + +nestedSortables = [].slice.call(document.querySelectorAll('.js-treeview-sortable')); +for (i = 0; i < nestedSortables.length; i += 1) { + new Sortable(nestedSortables[i], { + group: 'nested', + animation: 150, + fallbackOnBody: true, + swapThreshold: 0.65, + onEnd: function (/**Event*/evt) { + console.log(evt); + var itemEl = evt.item; // dragged HTMLElement + evt.to; // target list + evt.from; // previous list + evt.oldIndex; // element's old index within old parent + evt.newIndex; // element's new index within new parent + evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements + evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements + evt.clone // the clone element + evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving + }, + }); +} diff --git a/app/views/admin/communication/website/pages/index.html.erb b/app/views/admin/communication/website/pages/index.html.erb index 3f9798a952b2b46f2fa86e7d4c8e1d090fef45cd..dec92adbb5a625e57cbeb161f9b21729680a1048 100644 --- a/app/views/admin/communication/website/pages/index.html.erb +++ b/app/views/admin/communication/website/pages/index.html.erb @@ -1,6 +1,6 @@ <% content_for :title, Communication::Website::Page.model_name.human(count: 2) %> -<ul id="test" class="list-unstyled treeview js-treeview js-treeview-sortable"> +<ul class="list-unstyled treeview js-treeview js-treeview-sortable"> <%= render 'treebranch', pages: @pages %> </ul> <%#= render 'admin/communication/website/pages/list', pages: @pages %>