themes/luci-theme-bootstrap/htdocs/luci-static/resources/menu-bootstrap.js

   1 'use strict';
   2 'require baseclass';
   3 'require ui';
   4
   5 return baseclass.extend({
   6         __init__: function() {
   7                 ui.menu.load().then(L.bind(this.render, this));
   8         },
   9
  10         render: function(tree) {
  11                 var node = tree,
  12                     url = '';
  13
  14                 this.renderModeMenu(tree);
  15
  16                 if (L.env.dispatchpath.length >= 3) {
  17                         for (var i = 0; i < 3 && node; i++) {
  18                                 node = node.children[L.env.dispatchpath[i]];
  19                                 url = url + (url ? '/' : '') + L.env.dispatchpath[i];
  20                         }
  21
  22                         if (node)
  23                                 this.renderTabMenu(node, url);
  24                 }
  25
  26                 document.addEventListener('poll-start', this.handleBodyMargin);
  27                 document.addEventListener('poll-stop', this.handleBodyMargin);
  28                 document.addEventListener('uci-new-changes', this.handleBodyMargin);
  29                 document.addEventListener('uci-clear-changes', this.handleBodyMargin);
  30                 window.addEventListener('resize', this.handleBodyMargin);
  31
  32                 this.handleBodyMargin();
  33         },
  34
  35         renderTabMenu: function(tree, url, level) {
  36                 var container = document.querySelector('#tabmenu'),
  37                     ul = E('ul', { 'class': 'tabs' }),
  38                     children = ui.menu.getChildren(tree),
  39                     activeNode = null;
  40
  41                 for (var i = 0; i < children.length; i++) {
  42                         var isActive = (L.env.dispatchpath[3 + (level || 0)] == children[i].name),
  43                             activeClass = isActive ? ' active' : '',
  44                             className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
  45
  46                         ul.appendChild(E('li', { 'class': className }, [
  47                                 E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )]));
  48
  49                         if (isActive)
  50                                 activeNode = children[i];
  51                 }
  52
  53                 if (ul.children.length == 0)
  54                         return E([]);
  55
  56                 container.appendChild(ul);
  57                 container.style.display = '';
  58
  59                 if (activeNode)
  60                         this.renderTabMenu(activeNode, url + '/' + activeNode.name, (level || 0) + 1);
  61
  62                 return ul;
  63         },
  64
  65         renderMainMenu: function(tree, url, level) {
  66                 var ul = level ? E('ul', { 'class': 'dropdown-menu' }) : document.querySelector('#topmenu'),
  67                     children = ui.menu.getChildren(tree);
  68
  69                 if (children.length == 0 || level > 1)
  70                         return E([]);
  71
  72                 for (var i = 0; i < children.length; i++) {
  73                         var submenu = this.renderMainMenu(children[i], url + '/' + children[i].name, (level || 0) + 1),
  74                             subclass = (!level && submenu.firstElementChild) ? 'dropdown' : null,
  75                             linkclass = (!level && submenu.firstElementChild) ? 'menu' : null,
  76                             linkurl = submenu.firstElementChild ? '#' : L.url(url, children[i].name);
  77
  78                         var li = E('li', { 'class': subclass }, [
  79                                 E('a', { 'class': linkclass, 'href': linkurl }, [ _(children[i].title) ]),
  80                                 submenu
  81                         ]);
  82
  83                         ul.appendChild(li);
  84                 }
  85
  86                 ul.style.display = '';
  87
  88                 return ul;
  89         },
  90
  91         renderModeMenu: function(tree) {
  92                 var ul = document.querySelector('#modemenu'),
  93                     children = ui.menu.getChildren(tree);
  94
  95                 for (var i = 0; i < children.length; i++) {
  96                         var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
  97
  98                         ul.appendChild(E('li', { 'class': isActive ? 'active' : null }, [
  99                                 E('a', { 'href': L.url(children[i].name) }, [ _(children[i].title) ]),
 100                                 ' ',
 101                                 E('span', { 'class': 'divider' }, [ '|' ])
 102                         ]));
 103
 104                         if (isActive)
 105                                 this.renderMainMenu(children[i], children[i].name);
 106                 }
 107
 108                 if (ul.children.length > 1)
 109                         ul.style.display = '';
 110         },
 111
 112         handleBodyMargin: function(ev) {
 113                 var body = document.querySelector('body'),
 114                     head = document.querySelector('header');
 115
 116                 body.style.marginTop = head.offsetHeight + 'px';
 117         }
 118 });