treeview sortable

app/assets/javascripts/admin.js

@@ -11,16 +11,3 @@
 //= require trix
 //= require sortablejs/Sortable
 //= require_tree ./admin
-
-// Nested demo
-var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
-
-// Loop through each nested sortable element
-for (var i = 0; i < nestedSortables.length; i++) {
-	new Sortable(nestedSortables[i], {
-		group: 'nested',
-		animation: 150,
-		fallbackOnBody: true,
-		swapThreshold: 0.65
-	});
-}

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

-/* global $ */
+/* global $, Sortable */
 window.osuny = window.osuny || {};
-window.osuny.pagesTree = {
+window.osuny.treeView = {
 
     init: function () {
         'use strict';
         $('.js-treeview').on('click', '.js-treeview-element', this.branchClicked.bind(this));
+        this.initSortable();
+    },
+
+    initSortable: function () {
+        'use strict';
+        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
+            });
+        }
     },
 
     branchClicked: function (e) {
@@ -30,5 +47,5 @@ window.osuny.pagesTree = {
 
 document.addEventListener('DOMContentLoaded', function () {
     'use strict';
-    window.osuny.pagesTree.init();
+    window.osuny.treeView.init();
 });

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

@@ -14,7 +14,7 @@
       <%= 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 nested-sortable">
+      <ul class="list-unstyled treeview__children js-treeview-children js-treeview-sortable">
         <li>loading...</li>
       </ul>
     <% end %>

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

-<%#= render 'treebranch', format: :js, pages: @children %>
-
 $branch = $('.js-treeview-branch[data-id=<%= @page.id %>]');
 $('.js-treeview-children', $branch).html("<%= escape_javascript(render 'treebranch', pages: @children) %>");
 $branch.addClass('treeview__branch--loaded');

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

 <% content_for :title, Communication::Website::Page.model_name.human(count: 2) %>
 
-<ul id="test" class="list-unstyled treeview js-treeview nested-sortable">
+<ul id="test" class="list-unstyled treeview js-treeview js-treeview-sortable">
   <%= render 'treebranch', pages: @pages %>
 </ul>
 <%#= render 'admin/communication/website/pages/list', pages: @pages %>