luci-base: replace uci change pages with client side modal dialog
[oweals/luci.git] / 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 request  = disp.context.path
19         local request2 = disp.context.request
20
21         local category = request[1]
22         local cattree  = category and disp.node(category)
23
24         local leaf = request2[#request2]
25
26         local tree = disp.node()
27         local node = disp.context.dispatched
28
29         local categories = disp.node_childs(tree)
30
31         local c = tree
32         local i, r
33
34         -- tag all nodes leading to this page
35         for i, r in ipairs(request) do
36                 if c.nodes and c.nodes[r] then
37                         c = c.nodes[r]
38                         c._menu_selected = true
39                 end
40         end
41
42         http.prepare_content("application/xhtml+xml")
43
44         local function nodeurl(prefix, name, query)
45                 local u = url(prefix, name)
46                 if query then
47                         u = u .. http.build_querystring(query)
48                 end
49                 return pcdata(u)
50         end
51
52         local function render_menu(prefix, node, level)
53                 if not level then
54                         level = 1
55                 end
56
57                 local childs = disp.node_childs(node)
58                 if #childs > 0 then
59                         write('<ul class="mainmenu l%d">' % level)
60
61                         local i, v
62                         for i, v in ipairs(childs) do
63                                 local nnode = node.nodes[v]
64
65                                 write('<li class="mainmenu-item-%s %s"><a href="%s">%s</a>' %{
66                                         v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'selected' or '',
67                                         nodeurl(prefix, v, nnode.query),
68                                         striptags(translate(nnode.title))
69                                 })
70
71                                 if level < 2 then
72                                         render_menu(prefix .. "/" .. v, nnode, level + 1)
73                                 end
74
75                                 write('</li>')
76                         end
77
78                         write('</ul>')
79                 end
80         end
81
82         local function render_tabmenu(prefix, node, level)
83                 if not level then
84                         level = 1
85                 end
86
87                 local childs = disp.node_childs(node)
88                 if #childs > 0 then
89                         if level > 2 then
90                                 if level == 3 then
91                                         write('<div id="tabmenu">')
92                                 end
93                                 write('<ul class="cbi-tabmenu">')
94                         end
95
96                         local selected_node
97                         local selected_name
98                         local i, v
99
100                         for i, v in ipairs(childs) do
101                                 local nnode = node.nodes[v]
102                                 if nnode._menu_selected then
103                                         selected_node = nnode
104                                         selected_name = v
105                                 end
106
107                                 if level > 2 then
108                                         write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{
109                                                 v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'cbi-tab' or '',
110                                                 nodeurl(prefix, v, nnode.query),
111                                                 striptags(translate(nnode.title))
112                                         })
113                                 end
114                         end
115
116                         if level > 2 then
117                                 write('</ul>')
118                                 if level == 3 then
119                                         write('</div>')
120                                 end
121                         end
122
123                         if selected_node then
124                                 render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1)
125                         end
126                 end
127         end
128 -%>
129
130 <?xml version="1.0" encoding="utf-8"?>
131 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
132 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%=luci.i18n.context.lang%>" lang="<%=luci.i18n.context.lang%>">
133 <head>
134 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
135 <meta name="viewport" content="width=device-width, initial-scale=1" />
136 <meta http-equiv="Content-Script-Type" content="text/javascript" />
137 <link rel="stylesheet" type="text/css" media="screen" href="<%=media%>/cascade.css" />
138 <% if node and node.css then %><link rel="stylesheet" type="text/css" media="screen" href="<%=resource%>/<%=node.css%>" />
139 <% end -%>
140 <% if css then %><style title="text/css">
141 <%= css %>
142 </style>
143 <% end -%>
144 <script type="text/javascript" src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
145 <script type="text/javascript" src="<%=resource%>/cbi.js"></script>
146 <script type="text/javascript" src="<%=resource%>/xhr.js"></script>
147 <script type="text/javascript">//<![CDATA[
148         document.addEventListener('DOMContentLoaded', function() {
149                 var event = ('ontouchstart' in window) ? 'touchstart' : 'click';
150
151                 document.querySelectorAll('ul.mainmenu.l1 > li > a').forEach(function(a) {
152                         a.addEventListener(event, function(ev) {
153                                 var a = ev.target, ul1 = a.parentNode.parentNode, ul2 = a.nextElementSibling;
154
155                                 document.querySelectorAll('ul.mainmenu.l1 > li.active').forEach(function(li) {
156                                         if (li !== a.parentNode)
157                                                 li.classList.remove('active');
158                                 });
159
160                                 if (!ul2)
161                                         return;
162
163                                 if (ul2.parentNode.offsetLeft + ul2.offsetWidth <= ul1.offsetLeft + ul1.offsetWidth)
164                                         ul2.classList.add('align-left');
165
166                                 ul1.classList.add('active');
167                                 a.parentNode.classList.add('active');
168                                 a.blur();
169
170                                 ev.preventDefault();
171                                 ev.stopPropagation();
172                         });
173                 });
174
175                 document.addEventListener(event, function(ev) {
176                         var t = ev.target;
177
178                         while (t && t.id != 'mainmenu')
179                                 t = t.parentNode;
180
181                         if (!t)
182                                 document.querySelectorAll('ul.mainmenu > li.active').forEach(function(li) {
183                                         li.classList.remove('active');
184                                 });
185                 });
186         });
187 //]]></script>
188 <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
189 </head>
190 <body class="lang_<%=luci.i18n.context.lang%>" data-page="<%= table.concat(disp.context.requestpath, "-") %>">
191
192 <p class="skiplink">
193 <span id="skiplink1"><a href="#navigation"><%:Skip to navigation%></a></span>
194 <span id="skiplink2"><a href="#content"><%:Skip to content%></a></span>
195 </p>
196
197 <div id="menubar">
198 <h2 class="navigation"><a id="navigation" name="navigation"><%:Navigation%></a></h2>
199
200 <div class="hostinfo">
201         <%=(boardinfo.hostname or "?")%> | <%=ver.distversion%> |
202         <%:Load%>: <%="%.2f" % (loadinfo[1] / 65535.0)%> <%="%.2f" % (loadinfo[2] / 65535.0)%> <%="%.2f" % (loadinfo[3] / 65535.0)%>
203         <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
204                 | <%:Auto Refresh%>:
205                 <span id="xhr_poll_status_on"><%:on%></span>
206                 <span id="xhr_poll_status_off" style="display:none"><%:off%></span>
207         </span>
208 </div>
209
210 <% if #categories > 1 then %>
211         <ul id="modemenu">
212                 <% for i, r in ipairs(categories) do %>
213                         <li><a<% if request[1] == r then %> class="active"<%end%> href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a></li>
214                 <% end %>
215         </ul>
216 <% end %>
217
218 <div class="clear"></div>
219 </div>
220
221 <div id="maincontainer">
222         <div id="mainmenu">
223                 <% if category then render_menu(category, cattree) end %>
224         </div>
225
226         <div id="maincontent">
227                 <% if category then render_tabmenu(category, cattree) end %>
228
229                 <noscript>
230                         <div class="alert-message warning">
231                                 <h4><%:JavaScript required!%></h4>
232                                 <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
233                         </div>
234                 </noscript>
235
236                 <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") and category ~= "failsafe" then -%>
237                 <div class="alert-message warning">
238                         <h4><%:No password set!%></h4>
239                         <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p>
240                         <% if disp.lookup("admin/system/admin") then %>
241                                 <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
242                         <% end %>
243                 </div>
244                 <%- end -%>