calculate menu active status from server

Author: wuyue92tree

adminlteui/core.py

@@ -55,9 +55,14 @@ def make(self, request, models=None, deep=1, deep_limit=0):
         menu_item['target_blank'] = self.target_blank
         menu_item['menu_type'] = self.menu_type or 'group'
 
+        if menu_item['menu_type'] != 'group':
+            if menu_item['url'] == request.path:
+                menu_item['active'] = True
+
         if self.child:
             if deep_limit == 0 or deep <= deep_limit:
                 child_list = []
+                has_child_active = False
                 for child in self.child:
                     deep += 1
                     child_menu = child.make(request, models, deep, deep_limit)
@@ -66,8 +71,13 @@ def make(self, request, models=None, deep=1, deep_limit=0):
                         if child_menu.get('menu_type', 'group') == 'group':
                             if len(child_menu.get('child')) == 0:
                                 continue
+                        if child_menu.get('active') is True:
+                            has_child_active = True
+
                         child_list.append(child_menu)
                 menu_item['child'] = child_list
+                if has_child_active is True:
+                    menu_item['active'] = True
             else:
                 return None
         return menu_item

adminlteui/templates/admin/base.html

@@ -441,56 +441,6 @@ <h3 class="control-sidebar-heading">Chat Settings</h3>
 {% if adminlte.demo %}
     <script src={% static "admin/dist/js/demo.js" %}></script>
 {% endif %}
-<script>
-    // use js control active status of siderbar-menu
-    $(function() {
-        var menuActions = document.querySelectorAll('.sidebar-menu a')
-        var pathname = document.querySelector('#adminIndex').pathname
-        for (var i in menuActions) {
-            try {
-                if (window.location.pathname === pathname) {
-                    menuActions[i].parentNode.setAttribute('class', 'active')
-                    break
-                }
-
-                if (window.location.href.indexOf(menuActions[i].href) !== -1) {
-                    if (menuActions[i].href===window.location.origin + pathname) {
-                        continue
-                    }
-                    console.log('menu matched.', window.location.href, menuActions[i].href);
-                    menuActions[i].parentNode.setAttribute('class', 'active');
-
-                    let parent = menuActions[i].parentNode;
-                    while (true) {
-                        if (parent.parentNode.getAttribute('class') !== 'sidebar-menu tree') {
-                            if (parent.parentNode.getAttribute('class').indexOf('treeview-menu') !== -1) {
-                                parent.parentNode.setAttribute('class', 'treeview-menu menu-open');
-                                parent.parentNode.parentNode.setAttribute('class', 'treeview active');
-                            }
-                            parent = parent.parentNode;
-                        } else {
-                            break
-                        }
-                    }
-                    break
-                }
-            } catch (e) {
-                console.log(window.location.href, menuActions[i].href, e)
-            }
-        }
-
-        var topMenuActions = document.querySelectorAll('.top-menu a')
-        for (var j in topMenuActions) {
-            if (window.location.href.indexOf(topMenuActions[j].href) !== -1) {
-                topMenuActions[j].parentNode.setAttribute('class', 'active');
-                if (topMenuActions[j].parentNode.parentNode.getAttribute('class') === 'dropdown-menu') {
-                    topMenuActions[j].parentNode.parentNode.parentNode.setAttribute('class', 'dropdown active');
-                }
-                console.log('top menu matched.', window.location.href, topMenuActions[j].href);
-            }
-        }
-    })
-</script>
 
 <script>
     // sidebar push menu control

adminlteui/templatetags/adminlte_menu.py

@@ -30,22 +30,29 @@ def render_main_menu(menu):
     for menu_item in menu:
         child = menu_item.get('child', [])
         if child:
+            if menu_item.get('active') is True:
+                treeview_class = 'treeview active menu-open'
+                treeview_menu_class = 'treeview-menu menu-open'
+            else:
+                treeview_class = 'treeview'
+                treeview_menu_class = 'treeview-menu'
             menu_item_html = f'''
-            <li class="treeview">
+            <li class="{treeview_class}">
                 <a href="javascript:void(0)">
                     <i class="fa {menu_item.get('icon')}"></i>
                     <span style="overflow: hidden; display: inline-block; vertical-align:top;">{menu_item.get('name')}</span>
                     <span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span>
                 </a>
-                <ul class="treeview-menu">
+                <ul class="{treeview_menu_class}">
                     {render_main_menu(child)}
                 </ul>
             </li>
             '''
         else:
             target_blank = '' if menu_item.get('target_blank') is False else 'target="_blank"'
+            flag = 'active' if menu_item.get('active') is True else ''
             menu_item_html = f'''
-            <li><a {target_blank} href="{menu_item.get('url')}"><i class="fa {menu_item.get('icon')}"></i><span> {menu_item.get('name')}</span></a></li>
+            <li class="{flag}"><a {target_blank} href="{menu_item.get('url')}"><i class="fa {menu_item.get('icon')}"></i><span> {menu_item.get('name')}</span></a></li>
             '''
         html += menu_item_html
     return html
@@ -64,8 +71,9 @@ def render_top_menu(menu):
     for menu_item in menu:
         child = menu_item.get('child', [])
         if child:
+            flag = 'active' if menu_item.get('active') is True else ''
             menu_item_html = f'''
-            <li class="dropdown">
+            <li class="dropdown {flag}">
                 <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                     {menu_item.get('name')} <span class="caret"></span>
                 </a>
@@ -76,8 +84,9 @@ def render_top_menu(menu):
             '''
         else:
             target_blank = '' if menu_item.get('target_blank') is False else 'target="_blank"'
+            flag = 'active' if menu_item.get('active') is True else ''
             menu_item_html = f'''
-            <li><a {target_blank} href="{menu_item.get('url')}"> {menu_item.get('name')}</a></li>
+            <li class="{flag}"><a {target_blank} href="{menu_item.get('url')}"> {menu_item.get('name')}</a></li>
             '''
         html += menu_item_html
     return html