manager: toggle pages in manager home (#27618)

combo/manager/static/css/combo.manager.css

@@ -16,6 +16,23 @@ div#pages-list div.page {
 	align-items: center;
 }
 
+div#pages-list span.togglable {
+	padding: 1em 2ex;
+	cursor: pointer;
+}
+
+div#pages-list div.page.untoggled span.togglable:after {
+	font-family: FontAwesome;
+	content: "\f107"; /* angle-down */
+	cursor: pointer;
+}
+
+div#pages-list div.page.toggled span.togglable:after {
+	font-family: FontAwesome;
+	content: "\f106"; /* angle-up */
+	cursor: pointer;
+}
+
 div.cell-list > div {
 	background: white;
 	border: 1px solid #eee;

combo/manager/static/js/combo.manager.js

@@ -79,10 +79,64 @@ function multisort(element)
   });
 }
 
-function init_pages_list()
+function get_page_children($page) {
+  var children = [];
+  $page.nextAll().each(function() {
+    var level = parseInt($(this).data('level'), 10);
+    if (level <= parseInt($page.data('level'), 10)) {
+      return false;
+    }
+    children.push($(this));
+  });
+  return children;
+}
+
+function show_page_children($page) {
+  $.each(get_page_children($page), function() {
+    $child = $(this);
+    var level = parseInt($child.data('level'), 10);
+    if (level == parseInt($page.data('level'), 10) + 1) {
+      $child.show();
+      if ($child.hasClass('toggled')) {
+        show_page_children($child);
+      }
+    }
+  });
+}
+
+function hide_page_children($page) {
+  $.each(get_page_children($page), function() {
+    $(this).hide();
+  });
+}
+
+function init_pages_toggle() {
+  $('.page').each(function() {
+    if (!get_page_children($(this)).length) {
+      $(this).removeClass('toggled').removeClass('untoggled').find('.togglable').remove();
+    }
+  });
+  $('div.page.untoggled').each(function() {
+    hide_page_children($(this));
+  });
+  $('div.page.toggled[level=1]').each(function() {
+    show_page_children($(this));
+  });
+}
+
+function init_pages_list(toggle_state)
 {
   if ($('#pages-list').length == 0)
     return;
+  init_pages_toggle();
+  // if toggle_state is defined, restore toggled pages
+  if (toggle_state) {
+    $('div.page').each(function() {
+      if (toggle_state.includes($(this).data('page-id'))) {
+        $('span.togglable', $(this)).trigger('click');
+      }
+    });
+  }
   var list_offset = $('#pages-list').offset().left;
   $('#pages-list').sortable({
      handle: '.handle',
@@ -112,6 +166,14 @@ function init_pages_list()
        $(ui.item).data('level', new_level).attr('data-level', new_level);
 
        var new_order = $('#pages-list div').map(function() { return $(this).data('page-id'); }).get().join();
+       // keep actuel toggled pages + new parent to restore display on init_pages_list
+       var old_toggle_state = [];
+       $('div.page.toggled').each(function() {
+         old_toggle_state.push($(this).data('page-id'));
+       });
+       if (!old_toggle_state.includes(new_parent)) {
+         old_toggle_state.push(new_parent);
+       }
 
        $.ajax({
            url: $('#pages-list').data('page-order-url'),
@@ -121,7 +183,7 @@ function init_pages_list()
            },
            success: function(data, status) {
              $('#pages-list').replaceWith($(data).find('#pages-list'));
-             init_pages_list();
+             init_pages_list(old_toggle_state);
            }
        });
      }
@@ -137,6 +199,14 @@ $(function() {
     return false;
   });
   init_pages_list();
+  $(document).on('click', 'div.page.untoggled span.togglable', function() {
+    $(this).parent().toggleClass('toggled').toggleClass('untoggled');
+    show_page_children($(this).parent());
+  });
+  $(document).on('click', 'div.page.toggled span.togglable', function() {
+    $(this).parent().toggleClass('toggled').toggleClass('untoggled');
+    hide_page_children($(this).parent());
+  });
 
   function init_cells_lists() {
     $('.cell-list').each(function() {

combo/manager/templates/combo/manager_home.html

@@ -29,7 +29,7 @@ Use drag and drop with the ⣿ handles to reorder and change hierarchy of pages.
 
 <div class="objects-list" id="pages-list" data-page-order-url="{% url 'combo-manager-page-order' %}">
  {% for page in object_list %}
- <div class="page level-{{page.level}}" data-page-id="{{page.id}}" data-level="{{page.level}}">
+ <div class="page level-{{page.level}}{% if collapse_pages %} untoggled{% endif %}" data-page-id="{{page.id}}" data-level="{{page.level}}">
     <span class="handle">⣿</span>
     <span class="group1">
       <a href="{% url 'combo-manager-page-view' pk=page.id %}">{{ page.title }}</a>
@@ -44,6 +44,7 @@ Use drag and drop with the ⣿ handles to reorder and change hierarchy of pages.
     {% endwith %}
     </span>
     {% endif %}
+    <span class="togglable"></span>
  </div>
  {% endfor %}
 </div>

combo/manager/views.py

@@ -54,8 +54,10 @@ class HomepageView(ListView):
         self.object_list = Page.get_as_reordered_flat_hierarchy(self.object_list)
         context = super(HomepageView, self).get_context_data(**kwargs)
         context['extra_actions'] = plugins.get_extra_manager_actions()
+        context['collapse_pages'] = settings.COMBO_MANAGE_HOME_COLLAPSE_PAGES
         return context
 
+
 homepage = HomepageView.as_view()
 
 

combo/settings.py

@@ -274,6 +274,9 @@ COMBO_DASHBOARD_ENABLED = False
 
 COMBO_DASHBOARD_NEW_TILE_POSITION = 'last'
 
+# collapse pages on combo home
+COMBO_MANAGE_HOME_COLLAPSE_PAGES = False
+
 # default position on maps
 COMBO_MAP_DEFAULT_POSITION = {'lat': '48.83369263315934',
                               'lng': '2.3233688436448574'

tests/test_manager.py

@@ -56,6 +56,18 @@ def test_access(app, admin_user):
     assert "This site doesn't have any page yet." in resp.text
 
 
+@pytest.mark.parametrize('collapse', [True, False])
+def test_pages_collapse(settings, app, admin_user, collapse):
+    Page.objects.create(title='One', slug='one')
+    settings.COMBO_MANAGE_HOME_COLLAPSE_PAGES = collapse
+
+    app = login(app)
+    resp = app.get('/manage/', status=200)
+    assert resp.context['collapse_pages'] is collapse
+    assert ('class="page level-0 untoggled"' in resp.text) is collapse
+    assert ('class="page level-0"' in resp.text) is not collapse
+
+
 def test_add_page(app, admin_user):
     app = login(app)
     resp = app.get('/manage/', status=200)