wip treeview

app/assets/javascripts/admin/treeview.js

@@ -4,7 +4,7 @@ window.osuny.treeView = {
 
     init: function () {
         'use strict';
-        $('.js-treeview').on('click', '.js-treeview-element', this.branchClicked.bind(this));
+        $('.js-treeview').on('click', '.js-treeview-openzone', this.branchClicked.bind(this));
         this.initSortable();
     },
 
@@ -20,18 +20,18 @@ window.osuny.treeView = {
                 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
-            	},
+                onEnd: function (evt) {
+                    var from = evt.from,
+                        to = evt.to,
+                        ids = [],
+                        parentId;
+                    $('> .js-treeview-element', to).each(function () {
+                        ids.push($(this).attr('data-id'));
+                    });
+                    parentId = to.dataset.id;
+                    console.log(parentId, ids, from === to);
+                    // TODO
+                }
             });
         }
     },

app/assets/stylesheets/admin/treeview.sass

@@ -2,8 +2,8 @@
     &__branch, &__leaf
         & > .treeview__label
             & > .move_btn
-                transition: opacity 0.1s
                 opacity: 0
+                transition: opacity 0.1s
         &:hover
             & > .treeview__label
                 & > .move_btn

app/views/admin/communication/website/pages/_treebranch.html.erb

 <% pages.each do |page| %>
-  <li class="<%= page.has_children? ? 'treeview__branch js-treeview-branch' : 'treeview__leaf' %>" data-id="<%= page.id %>">
+  <li class="js-treeview-element <%= page.has_children? ? 'treeview__branch js-treeview-branch' : 'treeview__leaf' %>" data-id="<%= page.id %>" data-parent="<%= page.parent_id %>">
     <div class="d-flex align-items-center treeview__label border-bottom p-1">
       <% if page.has_children? %>
         <%= link_to children_admin_communication_website_page_path(website_id: page.website.id, id: page.id),
-                    class: 'js-treeview-element d-inline-block p-2 ps-0', style: 'width: 22px', remote: true do %>
+                    class: 'js-treeview-openzone d-inline-block p-2 ps-0', style: 'width: 22px', remote: true do %>
           <span class="open_btn"><i class="fas fa-folder"></i></span>
           <span class="close_btn"><i class="fas fa-folder-open"></i></span>
         <% end %>
@@ -12,7 +12,7 @@
       <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">
+      <ul class="list-unstyled treeview__children js-treeview-children js-treeview-sortable ms-4" data-id="<%= page.id %>">
         <li>loading...</li>
       </ul>
     <% end %>

app/views/admin/communication/website/pages/index.html.erb

 <% content_for :title, Communication::Website::Page.model_name.human(count: 2) %>
 
-<ul class="list-unstyled treeview js-treeview js-treeview-sortable">
+<ul class="list-unstyled treeview js-treeview js-treeview-sortable" data-id="">
   <%= render 'treebranch', pages: @pages %>
 </ul>
-<%#= render 'admin/communication/website/pages/list', pages: @pages %>
-<%#= paginate @pages, theme: 'bootstrap-5' %>
 
 <% content_for :action_bar_right do %>
   <%= create_link Communication::Website::Page %>