themes/luci-theme-openwrt/luasrc/view/themes/openwrt.org/header.htm

   1 <%#
   2  Copyright 2008 Steven Barth <steven@midlink.org>
   3  Copyright 2008-2010 Jo-Philipp Wich <jow@openwrt.org>
   4  Licensed to the public under the Apache License 2.0.
   5 -%>
   6
   7 <%
   8         local sys  = require "luci.sys"
   9         local util = require "luci.util"
  10         local http = require "luci.http"
  11         local disp = require "luci.dispatcher"
  12         local ver  = require "luci.version"
  13
  14         local sysinfo = util.ubus("system", "info") or { }
  15         local loadinfo = sysinfo.load or { 0, 0, 0 }
  16         local boardinfo = util.ubus("system", "board") or { }
  17
  18         local node = disp.context.dispatched
  19
  20         http.prepare_content("application/xhtml+xml")
  21 -%>
  22
  23 <?xml version="1.0" encoding="utf-8"?>
  24 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  25 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%=luci.i18n.context.lang%>" lang="<%=luci.i18n.context.lang%>">
  26 <head>
  27 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  28 <meta name="viewport" content="width=device-width, initial-scale=1" />
  29 <meta http-equiv="Content-Script-Type" content="text/javascript" />
  30 <link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
  31 <% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" />
  32 <% end -%>
  33 <% if css then %><style title="text/css">
  34 <%= css %>
  35 </style>
  36 <% end -%>
  37 <script type="text/javascript" src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
  38 <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
  39 <script type="text/javascript" src="<%=resource%>/xhr.js"></script>
  40 <script type="text/javascript">//<![CDATA[
  41         (function() {
  42                 function get_children(node) {
  43                         var children = [];
  44
  45                         for (var k in node.children) {
  46                                 if (!node.children.hasOwnProperty(k))
  47                                         continue;
  48
  49                                 if (!node.children[k].satisfied)
  50                                         continue;
  51
  52                                 if (!node.children[k].hasOwnProperty('title'))
  53                                         continue;
  54
  55                                 children.push(Object.assign(node.children[k], { name: k }));
  56                         }
  57
  58                         return children.sort(function(a, b) {
  59                                 return ((a.order || 1000) - (b.order || 1000));
  60                         });
  61                 }
  62
  63                 function handle_mainmenu_expand(ev) {
  64                         var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling;
  65
  66                         document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) {
  67                                 if (li !== a.parentNode)
  68                                         li.classList.remove('active');
  69                         });
  70
  71                         if (!ul2)
  72                                 return;
  73
  74                         if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth)
  75                                 ul2.classList.add('align-left');
  76
  77                         ul1.classList.add('active');
  78                         a.parentNode.classList.add('active');
  79                         a.blur();
  80
  81                         ev.preventDefault();
  82                         ev.stopPropagation();
  83                 }
  84
  85                 function render_mainmenu(tree, url, level) {
  86                         var l = (level || 0) + 1,
  87                             ul = E('ul', { 'class': 'mainmenu l%d'.format(l) }),
  88                             children = get_children(tree);
  89
  90                         if (children.length == 0 || l > 2)
  91                                 return E([]);
  92
  93                         for (var i = 0; i < children.length; i++) {
  94                                 var isActive = (L.env.dispatchpath[l] == children[i].name),
  95                                     activeClass = 'mainmenu-item-%s%s'.format(children[i].name, isActive ? ' selected' : '');
  96
  97                                 ul.appendChild(E('li', { 'class': activeClass }, [
  98                                         E('a', {
  99                                                 'href': L.url(url, children[i].name),
 100                                                 'click': (l == 1) ? handle_mainmenu_expand : null,
 101                                         }, [ _(children[i].title) ]),
 102                                         render_mainmenu(children[i], url + '/' + children[i].name, l)
 103                                 ]));
 104                         }
 105
 106                         if (l == 1) {
 107                                 var container = document.querySelector('#mainmenu');
 108
 109                                 container.appendChild(ul);
 110                                 container.style.display = '';
 111                         }
 112
 113                         return ul;
 114                 }
 115
 116                 function render_modemenu(tree) {
 117                         var ul = document.querySelector('#modemenu'),
 118                             children = get_children(tree);
 119
 120                         for (var i = 0; i < children.length; i++) {
 121                                 var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
 122
 123                                 ul.appendChild(E('li', {}, [
 124                                         E('a', {
 125                                                 'href': L.url(children[i].name),
 126                                                 'class': isActive ? 'active' : null
 127                                         }, [ _(children[i].title) ])
 128                                 ]));
 129
 130                                 if (isActive)
 131                                         render_mainmenu(children[i], children[i].name);
 132                         }
 133
 134                         if (ul.children.length > 1)
 135                                 ul.style.display = '';
 136                 }
 137
 138                 function render_tabmenu(tree, url, level) {
 139                         var container = document.querySelector('#tabmenu'),
 140                             l = (level || 0) + 1,
 141                             ul = E('ul', { 'class': 'cbi-tabmenu' }),
 142                             children = get_children(tree),
 143                             activeNode = null;
 144
 145                         if (children.length == 0)
 146                                 return E([]);
 147
 148                         for (var i = 0; i < children.length; i++) {
 149                                 var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
 150                                     activeClass = isActive ? ' cbi-tab' : '',
 151                                     className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
 152
 153                                 ul.appendChild(E('li', { 'class': className }, [
 154                                         E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
 155                                 ]));
 156
 157                                 if (isActive)
 158                                         activeNode = children[i];
 159                         }
 160
 161                         container.appendChild(ul);
 162                         container.style.display = '';
 163
 164                         if (activeNode)
 165                                 container.appendChild(render_tabmenu(activeNode, url + '/' + activeNode.name, l));
 166
 167                         return ul;
 168                 }
 169
 170                 document.addEventListener('luci-loaded', function(ev) {
 171                         var tree = <%= luci.http.write_json(luci.dispatcher.context.authsession and luci.dispatcher.menu_json() or {}) %>,
 172                             node = tree,
 173                             url = '';
 174
 175                         render_modemenu(tree);
 176
 177                         if (L.env.dispatchpath.length >= 3) {
 178                                 for (var i = 0; i < 3 && node; i++) {
 179                                         node = node.children[L.env.dispatchpath[i]];
 180                                         url = url + (url ? '/' : '') + L.env.dispatchpath[i];
 181                                 }
 182
 183                                 if (node)
 184                                         render_tabmenu(node, url);
 185                         }
 186                 });
 187         })();
 188 //]]></script>
 189 <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
 190 </head>
 191 <body class="lang_<%=luci.i18n.context.lang%>" data-page="<%= table.concat(disp.context.requestpath, "-") %>">
 192
 193 <p class="skiplink">
 194 <span id="skiplink1"><a href="#navigation"><%:Skip to navigation%></a></span>
 195 <span id="skiplink2"><a href="#content"><%:Skip to content%></a></span>
 196 </p>
 197
 198 <div id="menubar">
 199 <h2 class="navigation"><a id="navigation" name="navigation"><%:Navigation%></a></h2>
 200
 201 <div class="hostinfo">
 202         <%=(boardinfo.hostname or "?")%> | <%=ver.distversion%> |
 203         <%:Load%>: <%="%.2f" % (loadinfo[1] / 65535.0)%> <%="%.2f" % (loadinfo[2] / 65535.0)%> <%="%.2f" % (loadinfo[3] / 65535.0)%>
 204         <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
 205                 | <%:Auto Refresh%>:
 206                 <span id="xhr_poll_status_on"><%:on%></span>
 207                 <span id="xhr_poll_status_off" style="display:none"><%:off%></span>
 208         </span>
 209 </div>
 210
 211 <ul id="modemenu" style="display:none"></ul>
 212
 213 <div class="clear"></div>
 214 </div>
 215
 216 <div id="maincontainer">
 217         <div id="mainmenu" style="display:none"></div>
 218
 219         <div id="maincontent">
 220                 <div id="tabmenu" style="display:none"></div>
 221
 222                 <noscript>
 223                         <div class="alert-message warning">
 224                                 <h4><%:JavaScript required!%></h4>
 225                                 <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
 226                         </div>
 227                 </noscript>
 228
 229                 <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and category ~= "failsafe" then -%>
 230                 <div class="alert-message warning">
 231                         <h4><%:No password set!%></h4>
 232                         <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p>
 233                         <% if disp.lookup("admin/system/admin") then %>
 234                                 <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
 235                         <% end %>
 236                 </div>
 237                 <%- end -%>