tree pages

app/assets/javascripts/admin/pages/communication/website/pages.js

@@ -4,29 +4,30 @@ window.osuny.pagesTree = {
 
     init: function () {
         'use strict';
-        $('.js-tree-element').click(this.branchClicked.bind(this));
+        $('.js-treeview').on('click', '.js-treeview-element', this.branchClicked.bind(this));
     },
 
     branchClicked: function (e) {
         'use strict';
         var $target = $(e.currentTarget),
-            $branch = $target.parents('.js-treeview-element');
+            $branch = $target.closest('.js-treeview-branch');
 
         e.preventDefault();
         e.stopPropagation();
 
-        $branch.toggleClass('opened');
+        $branch.toggleClass('treeview__branch--opened');
 
-        if ($branch.hasClass('opened') && !$branch.hasClass('loaded')) {
+        if ($branch.hasClass('treeview__branch--opened') && !$branch.hasClass('treeview__branch--loaded')) {
             this.loadBranch($branch, $target.attr('href'));
         }
     },
 
     loadBranch: function ($branch, url) {
         'use strict';
-        // TODO
-        console.log('ok');
-        $branch.addClass('loaded');
+        $.get(url, function (data) {
+            $('.js-treeview-children', $branch).html(data);
+            $branch.addClass('treeview__branch--loaded');
+        });
     },
 
     invoke: function () {

app/assets/stylesheets/admin/treeview.sass

 .treeview
-    .branch
-        .close_btn
-            display: none
-        .open_btn
-            display: inline
-        .children
+    &__branch
+        & > .treeview__label
+            & > a .close_btn
+                display: none
+            & > a .open_btn
+                display: inline
+        & > .treeview__children
             display: none
             margin-left: 15px
 
-        &.opened
-            .close_btn
-                display: inline
-            .open_btn
-                display: none
-            .children
+        &--opened
+            & > .treeview__label
+                & > a .close_btn
+                    display: inline
+                & > a .open_btn
+                    display: none
+            & > .treeview__children
                 display: block
+
+    &__leaf
+        & > .treeview__label
+            & > a .close_btn
+                display: none
+            & > a .open_btn
+                display: none
+
+        & > .treeview__children
+            display: none

app/controllers/admin/communication/website/pages_controller.rb

@@ -10,6 +10,9 @@ class Admin::Communication::Website::PagesController < Admin::Communication::Web
     return unless request.xhr?
     page = @website.pages.find(params[:id])
     @children = page.children.ordered
+    respond_to do |format|
+      format.html { render :layout => false }
+    end
   end
 
   def show

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 %>">
+    <div class="d-flex align-items-center treeview__label">
+      <% if page.has_children? %>
+        <%= link_to children_admin_communication_website_page_path(website_id: page.website.id, id: page.id),
+                    class: 'js-treeview-element' do %>
+          <span class="open_btn">+</span>
+          <span class="close_btn">-</span>
+          <%= page %>
+        <% end %>
+      <% else %>
+        <%= page %>
+      <% end %>
+      <%= link_to 'Voir', admin_communication_website_page_path(website_id: page.website.id, id: page.id), class: button_classes %>
+    </div>
+    <% if page.has_children? %>
+      <ul class="list-unstyled treeview__children js-treeview-children">
+        <li>loading...</li>
+      </ul>
+    <% end %>
+  </li>
+<% end %>

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

+<%= render 'treebranch', format: :js, pages: @children %>

app/views/admin/communication/website/pages/children.js.erb

-$('.js-treeview-element-<%= @page.id %>').addClass('opened');

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">
-  <% @pages.each do |page| %>
-    <li class="branch <%= 'with-children' if page.has_children? %> js-treeview-element js-treeview-element-<%= page.id %>">
-      <div class="d-flex align-items-center">
-        <%= link_to children_admin_communication_website_page_path(website_id: page.website.id, id: page.id),
-                    class: 'js-tree-element' do %>
-          <span class="open_btn">+</span>
-          <span class="close_btn">-</span>
-          <%= page %>
-        <% end %>
-        <%= link_to 'Voir', admin_communication_website_page_path(website_id: page.website.id, id: page.id), class: button_classes %>
-      </div>
-      <ul class="list-unstyled children">
-        <li>loading...</li>
-      </ul>
-
-    </li>
-  <% end %>
+  <%= render 'treebranch', pages: @pages %>
 </ul>
 <%#= render 'admin/communication/website/pages/list', pages: @pages %>
 <%#= paginate @pages, theme: 'bootstrap-5' %>