themes/luci-theme-material/luasrc/view/themes/material/header.htm

   1 <%#
   2         Material is a clean HTML5 theme for LuCI. It is based on luci-theme-bootstrap and MUI
   3
   4         luci-theme-material
   5         Copyright 2015-2017 Lutty Yang <lutty@wcan.in>
   6
   7         Have a bug? Please create an issue here on GitHub!
   8         https://github.com/LuttyYang/luci-theme-material/issues
   9
  10         luci-theme-bootstrap:
  11         Copyright 2008 Steven Barth <steven@midlink.org>
  12         Copyright 2008-2016 Jo-Philipp Wich <jow@openwrt.org>
  13         Copyright 2012 David Menting <david@nut-bolt.nl>
  14
  15         MUI:
  16         https://github.com/muicss/mui
  17
  18         Licensed to the public under the Apache License 2.0
  19 -%>
  20
  21 <%
  22         local sys  = require "luci.sys"
  23         local util = require "luci.util"
  24         local http = require "luci.http"
  25         local disp = require "luci.dispatcher"
  26
  27         local boardinfo = util.ubus("system", "board")
  28
  29         local node = disp.context.dispatched
  30
  31         -- send as HTML5
  32         http.prepare_content("text/html")
  33 -%>
  34 <!DOCTYPE html>
  35 <html lang="<%=luci.i18n.context.lang%>">
  36 <head>
  37         <meta charset="utf-8">
  38         <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
  39         <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
  40         <meta name="apple-mobile-web-app-capable" content="yes">
  41         <meta name="mobile-web-app-capable" content="yes">
  42         <meta name="theme-color" content="#09c">
  43         <meta name="msapplication-tap-highlight" content="no">
  44         <meta name="msapplication-TileColor" content="#09c">
  45         <meta name="application-name" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
  46         <meta name="apple-mobile-web-app-title" content="<%=striptags( (boardinfo.hostname or "?") ) %> - LuCI">
  47         <link rel="stylesheet" href="<%=media%>/cascade.css">
  48         <link rel="shortcut icon" href="<%=media%>/favicon.ico">
  49         <% if node and node.css then %>
  50                 <link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
  51         <% end -%>
  52         <% if css then %>
  53                 <style title="text/css"><%= css %></style>
  54         <% end -%>
  55         <script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
  56         <script src="<%=resource%>/cbi.js"></script>
  57         <script src="<%=resource%>/xhr.js"></script>
  58         <script type="text/javascript">//<![CDATA[
  59                 (function() {
  60                         function get_children(node) {
  61                                 var children = [];
  62
  63                                 for (var k in node.children) {
  64                                         if (!node.children.hasOwnProperty(k))
  65                                                 continue;
  66
  67                                         if (!node.children[k].satisfied)
  68                                                 continue;
  69
  70                                         if (!node.children[k].hasOwnProperty('title'))
  71                                                 continue;
  72
  73                                         children.push(Object.assign(node.children[k], { name: k }));
  74                                 }
  75
  76                                 return children.sort(function(a, b) {
  77                                         return ((a.order || 1000) - (b.order || 1000));
  78                                 });
  79                         }
  80
  81                         function render_mainmenu(tree, url, level) {
  82                                 var l = (level || 0) + 1,
  83                                     ul = E('ul', { 'class': level ? 'slide-menu' : 'nav' }),
  84                                     children = get_children(tree);
  85
  86                                 if (children.length == 0 || l > 2)
  87                                         return E([]);
  88
  89                                 for (var i = 0; i < children.length; i++) {
  90                                         var submenu = render_mainmenu(children[i], url + '/' + children[i].name, l),
  91                                             hasChildren = submenu.children.length;
  92
  93                                         ul.appendChild(E('li', { 'class': hasChildren ? 'slide' : null }, [
  94                                                 E('a', {
  95                                                         'href': hasChildren ? '#' : L.url(url, children[i].name),
  96                                                         'class': hasChildren ? 'menu' : null,
  97                                                         'data-title': hasChildren ? null : _(children[i].title),
  98                                                 }, [ _(children[i].title) ]),
  99                                                 submenu
 100                                         ]));
 101                                 }
 102
 103                                 if (l == 1) {
 104                                         var container = document.querySelector('#mainmenu');
 105
 106                                         container.appendChild(ul);
 107                                         container.style.display = '';
 108                                 }
 109
 110                                 return ul;
 111                         }
 112
 113                         function render_modemenu(tree) {
 114                                 var ul = document.querySelector('#modemenu'),
 115                                     children = get_children(tree);
 116
 117                                 for (var i = 0; i < children.length; i++) {
 118                                         var isActive = (L.env.requestpath.length ? children[i].name == L.env.requestpath[0] : i == 0);
 119
 120                                         ul.appendChild(E('li', {}, [
 121                                                 E('a', {
 122                                                         'href': L.url(children[i].name),
 123                                                         'class': isActive ? 'active' : null
 124                                                 }, [ _(children[i].title) ])
 125                                         ]));
 126
 127                                         if (isActive)
 128                                                 render_mainmenu(children[i], children[i].name);
 129                                 }
 130
 131                                 if (ul.children.length > 1)
 132                                         ul.style.display = '';
 133                         }
 134
 135                         function render_tabmenu(tree, url, level) {
 136                                 var container = document.querySelector('#tabmenu'),
 137                                     l = (level || 0) + 1,
 138                                     ul = E('ul', { 'class': 'tabs' }),
 139                                     children = get_children(tree),
 140                                     activeNode = null;
 141
 142                                 if (children.length == 0)
 143                                         return E([]);
 144
 145                                 for (var i = 0; i < children.length; i++) {
 146                                         var isActive = (L.env.dispatchpath[l + 2] == children[i].name),
 147                                             activeClass = isActive ? ' active' : '',
 148                                             className = 'tabmenu-item-%s %s'.format(children[i].name, activeClass);
 149
 150                                         ul.appendChild(E('li', { 'class': className }, [
 151                                                 E('a', { 'href': L.url(url, children[i].name) }, [ _(children[i].title) ] )
 152                                         ]));
 153
 154                                         if (isActive)
 155                                                 activeNode = children[i];
 156                                 }
 157
 158                                 container.appendChild(ul);
 159                                 container.style.display = '';
 160
 161                                 if (activeNode)
 162                                         container.appendChild(render_tabmenu(activeNode, url + '/' + activeNode.name, l));
 163
 164                                 return ul;
 165                         }
 166
 167                         document.addEventListener('luci-loaded', function(ev) {
 168                                 var tree = <%= luci.http.write_json(luci.dispatcher.menu_json() or {}) %>,
 169                                     node = tree,
 170                                     url = '';
 171
 172                                 render_modemenu(tree);
 173
 174                                 if (L.env.dispatchpath.length >= 3) {
 175                                         for (var i = 0; i < 3 && node; i++) {
 176                                                 node = node.children[L.env.dispatchpath[i]];
 177                                                 url = url + (url ? '/' : '') + L.env.dispatchpath[i];
 178                                         }
 179
 180                                         if (node)
 181                                                 render_tabmenu(node, url);
 182                                 }
 183                         });
 184                 })();
 185         //]]></script>
 186 </head>
 187 <body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><% end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %>" data-page="<%= pcdata(table.concat(disp.context.requestpath, "-")) %>">
 188 <header>
 189         <div class="fill">
 190                 <div class="container">
 191                         <span class="showSide"></span>
 192                         <a id="logo" href="<% if luci.dispatcher.context.authsession then %><%=url('admin/status/overview')%><% else %>#<% end %>"><img src="<%=media%>/brand.png" alt="OpenWrt"></a>
 193                         <a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
 194                         <div class="status" id="indicators">
 195                                 <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
 196                                         <span class="label success" id="xhr_poll_status_on"><span class="mobile-hide"><%:Auto Refresh%></span> <%:on%></span>
 197                                         <span class="label" id="xhr_poll_status_off" style="display:none"><span class="mobile-hide"><%:Auto Refresh%></span> <%:off%></span>
 198                                 </span>
 199                         </div>
 200                 </div>
 201         </div>
 202 </header>
 203 <div class="main">
 204         <div style="" class="loading"><span><div class="loading-img"></div><%:Collecting data...%></span></div>
 205         <div class="main-left" id="mainmenu" style="display:none"></div>
 206         <div class="main-right">
 207                 <div class="darkMask"></div>
 208                 <div id="maincontent">
 209                         <div class="container">
 210                                 <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
 211                                         <div class="alert-message warning">
 212                                                 <h4><%:No password set!%></h4>
 213                                                 <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p>
 214                                                 <% if disp.lookup("admin/system/admin") then %>
 215                                                         <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
 216                                                 <% end %>
 217                                         </div>
 218                                 <%- end -%>
 219
 220                                 <noscript>
 221                                         <div class="alert-message warning">
 222                                                 <h4><%:JavaScript required!%></h4>
 223                                                 <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
 224                                         </div>
 225                                 </noscript>
 226
 227                                 <div id="tabmenu" style="display:none"></div>