Merge pull request #429 from davecranwell/feature/ajax-explorer-menu

Ajax explorer menu

wagtail/wagtailadmin/static/wagtailadmin/js/core.js

@@ -12,7 +12,7 @@ $(function(){
     $('body').addClass('ready');
 
     // Enable toggle to open/close nav
-    $('#nav-toggle').click(function(){
+    $(document).on('click', '#nav-toggle', function(){
         $('body').toggleClass('nav-open');
         if(!$('body').hasClass('nav-open')){
             $('body').addClass('nav-closed');
@@ -21,12 +21,30 @@ $(function(){
         }
     });
 
-    // Enable swishy section navigation menu
+    // Dynamically load menu on request.
-    $('.explorer').addClass('dl-menuwrapper').dlmenu({
+    $(document).on('click', '.dl-trigger', function(){
-        animationClasses : {
+        var $this = $(this);
-            classin : 'dl-animate-in-2',
+        var $explorer = $('#explorer');
-            classout : 'dl-animate-out-2'
+
+        $this.addClass('icon-spinner');
+
+        if(!$explorer.children().length){
+            $explorer.load(window.explorer_menu_url, function() {
+                $this.removeClass('icon-spinner');
+
+                $explorer.addClass('dl-menuwrapper').dlmenu({
+                    animationClasses : {
+                        classin : 'dl-animate-in-2',
+                        classout : 'dl-animate-out-2'
+                    }
+                });
+                $explorer.dlmenu('openMenu');          
+            });
+        }else{
+            $explorer.dlmenu('openMenu');          
         }
+
+        return false;
     });
 
     // Resize nav to fit height of window. This is an unimportant bell/whistle to make it look nice
@@ -35,9 +53,6 @@ $(function(){
         $('.nav-main').each(function(){
             var thisHeight = $(this).height();
             var footerHeight = $('.footer', $(this)).height();
-
-            // $(this).css({'height':thisHeight - footerHeight, 'overflow-y':'scroll'});
-            // $('> ul', $(this)).height(thisHeight)
         });
     };
     fitNav();
@@ -86,22 +101,6 @@ $(function(){
         }
     });
 
-    /* Bulk-selection */
-    $(document).on('click', 'thead .bulk', function(){
-        $(this).closest('table').find('tbody .bulk input').each(function(){
-            $(this).prop('checked', !$(this).prop('checked'));
-        });
-    });
-
-    $('#menu-search input').bind('focus', function(){
-        $('#menu-search').addClass('focussed');
-    }).bind('blur', function(){
-        $('#menu-search').removeClass('focussed');
-    });
-    $('#menu-search').bind('focus click', function(){
-        $(this).addClass('focussed');
-    });
-
     /* Header search behaviour */
     if(window.headerSearch){
         var search_current_index = 0;

wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss

@@ -103,7 +103,6 @@ body{
     }
 
     .nav-main{
-
         top: 43px;
         bottom: 0px;
         overflow: auto;
@@ -166,6 +165,15 @@ body{
             &:hover{
                 color:white;
             }
+
+            /* only really used for spinners */
+            &:after{
+                font-size:1.5em;
+                margin:0;
+                position:absolute;
+                right:0.5em;
+                margin-top:0.15em;
+            }
         }
 
         .avatar{

wagtail/wagtailadmin/templates/wagtailadmin/admin_base.html

@@ -22,6 +22,9 @@
         <script src="{{ STATIC_URL }}wagtailadmin/js/vendor/bootstrap-tab.js"></script>
         <script src="{{ STATIC_URL }}wagtailadmin/js/vendor/jquery.dlmenu.js"></script>
         <script src="{{ STATIC_URL }}wagtailadmin/js/core.js"></script>
+        <script>
+            window.explorer_menu_url = "{% url 'wagtailadmin_explorer_nav' %}";
+        </script>
     {% endcompress %}
     
     {% block extra_js %}{% endblock %}

wagtail/wagtailadmin/templates/wagtailadmin/base.html

@@ -8,11 +8,7 @@
             {% main_nav %}
         </div>
 
-        <nav class="explorer">
+        <nav id="explorer" class="explorer"></nav>
-            <ul class="dl-menu">
-                {% explorer_nav %}
-            </ul>
-        </nav>
     </div>
 
     <div class="content-wrapper">

wagtail/wagtailadmin/templates/wagtailadmin/shared/explorer_nav.html

@@ -1,13 +1,5 @@
 {% load wagtailadmin_tags %}
 
-{% for page, children in nodes %}
+<ul class="dl-menu">
-    <li {% if children %}class="has-children"{% endif %}>
+    {% include "wagtailadmin/shared/explorer_nav_child.html" %}
-        <a href="{% url 'wagtailadmin_explore' page.id %}" class="icon icon-folder-open-inverse">{{ page.title }}</a>
+</ul>
-        {% if children %}
-            <div class="children icon icon-arrow-right"></div>
-            <ul class="dl-submenu">
-                {% explorer_subnav children %}
-            </ul>
-        {% endif %}
-    </li>
-{% endfor %}

wagtail/wagtailadmin/templates/wagtailadmin/shared/explorer_nav_child.html

@@ -0,0 +1,13 @@
+{% load wagtailadmin_tags %}
+
+{% for page, children in nodes %}
+	<li {% if children %}class="has-children"{% endif %}>
+	    <a href="{% url 'wagtailadmin_explore' page.id %}" class="icon icon-folder-open-inverse">{{ page.title }}</a>
+	    {% if children %}
+	        <div class="children icon icon-arrow-right"></div>
+	        <ul class="dl-submenu">
+	            {% explorer_subnav children %}
+	        </ul>
+	    {% endif %}
+	</li>
+{% endfor %}

wagtail/wagtailadmin/templatetags/wagtailadmin_tags.py

@@ -21,7 +21,7 @@ def explorer_nav():
     }
 
 
-@register.inclusion_tag('wagtailadmin/shared/explorer_nav.html')
+@register.inclusion_tag('wagtailadmin/shared/explorer_nav_child.html')
 def explorer_subnav(nodes):
     return {
         'nodes': nodes
@@ -31,7 +31,7 @@ def explorer_subnav(nodes):
 @register.inclusion_tag('wagtailadmin/shared/main_nav.html', takes_context=True)
 def main_nav(context):
     menu_items = [
-        MenuItem(_('Explorer'), '#', classnames='icon icon-folder-open-inverse dl-trigger', order=100),
+        MenuItem(_('Explorer'), urlresolvers.reverse('wagtailadmin_explore_root'), classnames='icon icon-folder-open-inverse dl-trigger', order=100),
         MenuItem(_('Search'), urlresolvers.reverse('wagtailadmin_pages_search'), classnames='icon icon-search', order=200),
     ]
 

wagtail/wagtailadmin/urls.py

@@ -38,6 +38,8 @@ urlpatterns += [
 
     url(r'^failwhale/$', home.error_test, name='wagtailadmin_error_test'),
 
+    url(r'^explorer-nav/$', pages.explorer_nav, name='wagtailadmin_explorer_nav'),
+
     url(r'^pages/$', pages.index, name='wagtailadmin_explore_root'),
     url(r'^pages/(\d+)/$', pages.index, name='wagtailadmin_explore'),
 

wagtail/wagtailadmin/views/pages.py

@@ -17,10 +17,17 @@ from wagtail.wagtailadmin.forms import SearchForm
 from wagtail.wagtailadmin import tasks, signals
 
 from wagtail.wagtailcore import hooks
-from wagtail.wagtailcore.models import Page, PageRevision
+from wagtail.wagtailcore.models import Page, PageRevision, get_navigation_menu_items
 from wagtail.wagtailcore.signals import page_published
 
 
+@permission_required('wagtailadmin.access_admin')
+def explorer_nav(request):
+    return render(request, 'wagtailadmin/shared/explorer_nav.html', {
+        'nodes': get_navigation_menu_items(),
+    })
+
+
 @permission_required('wagtailadmin.access_admin')
 def index(request, parent_page_id=None):
     if parent_page_id: