luci-theme-bootstrap: render menu on client side
[project/luci.git] / themes / luci-theme-bootstrap / luasrc / view / themes / bootstrap / header.htm
index 78b98e0355ebc53b1d1510855dd4b96b9634cd1e..56a1b230e40228c9c46e1391c55508cf4ce27319 100644 (file)
 
        local boardinfo = util.ubus("system", "board")
 
-       local request  = disp.context.path
-       local request2 = disp.context.request
-
-       local category = request[1]
-       local cattree  = category and disp.node(category)
-
-       local leaf = request2[#request2]
-
-       local tree = disp.node()
        local node = disp.context.dispatched
 
-       local categories = disp.node_childs(tree)
-
-       local c = tree
-       local i, r
-
-       -- tag all nodes leading to this page
-       for i, r in ipairs(request) do
-               if c.nodes and c.nodes[r] then
-                       c = c.nodes[r]
-                       c._menu_selected = true
-               end
-       end
-
        -- send as HTML5
        http.prepare_content("text/html")
-
-       local function nodeurl(prefix, name, query)
-               local u = url(prefix, name)
-               if query then
-                       u = u .. http.build_querystring(query)
-               end
-               return pcdata(u)
-       end
-
-       local function render_tabmenu(prefix, node, level)
-               if not level then
-                       level = 1
-               end
-
-               local childs = disp.node_childs(node)
-               if #childs > 0 then
-                       if level > 2 then
-                               write('<ul class="tabs">')
-                       end
-
-                       local selected_node
-                       local selected_name
-                       local i, v
-
-                       for i, v in ipairs(childs) do
-                               local nnode = node.nodes[v]
-                               if nnode._menu_selected then
-                                       selected_node = nnode
-                                       selected_name = v
-                               end
-
-                               if level > 2 then
-                                       write('<li class="tabmenu-item-%s %s"><a href="%s">%s</a></li>' %{
-                                               v, (nnode._menu_selected or (node.leaf and v == leaf)) and 'active' or '',
-                                               nodeurl(prefix, v, nnode.query),
-                                               striptags(translate(nnode.title))
-                                       })
-                               end
-                       end
-
-                       if level > 2 then
-                               write('</ul>')
-                       end
-
-                       if selected_node then
-                               render_tabmenu(prefix .. "/" .. selected_name, selected_node, level + 1)
-                       end
-               end
-       end
-
-       local function render_submenu(prefix, node)
-               local childs = disp.node_childs(node)
-               if #childs > 0 then
-                       write('<ul class="dropdown-menu">')
-
-                       for i, r in ipairs(childs) do
-                               local nnode = node.nodes[r]
-                               write('<li><a href="%s">%s</a></li>' %{
-                                       nodeurl(prefix, r, nnode.query),
-                                       pcdata(striptags(translate(nnode.title)))
-                               })
-                       end
-
-                       write('</ul>')
-               end
-       end
-
-       local function render_topmenu()
-               local childs = disp.node_childs(cattree)
-               if #childs > 0 then
-                       write('<ul class="nav">')
-
-                       for i, r in ipairs(childs) do
-                               local nnode = cattree.nodes[r]
-                               local grandchildren = disp.node_childs(nnode)
-
-                               if #grandchildren > 0 then
-                                       write('<li class="dropdown"><a class="menu" href="#">%s</a>' % pcdata(striptags(translate(nnode.title))))
-                                       render_submenu(category .. "/" .. r, nnode)
-                                       write('</li>')
-                               else
-                                       write('<li><a href="%s">%s</a></li>' %{
-                                               nodeurl(category, r, nnode.query),
-                                               pcdata(striptags(translate(nnode.title)))
-                                       })
-                               end
-                       end
-
-                       write('</ul>')
-               end
-       end
-
-       local function render_changes()
-               -- calculate the number of unsaved changes
-               if tree.nodes[category] and tree.nodes[category].ucidata then
-                       local ucichanges = 0
-
-                       for i, j in pairs(require("luci.model.uci").cursor():changes()) do
-                               for k, l in pairs(j) do
-                                       for m, n in pairs(l) do
-                                               ucichanges = ucichanges + 1;
-                                       end
-                               end
-                       end
-
-                       if ucichanges > 0 then
-                               write('<a class="label notice" href="%s?redir=%s">%s: %d</a>' %{
-                                       url(category, 'uci/changes'),
-                                       http.urlencode(http.formvalue('redir') or REQUEST_URI),
-                                       translate('Unsaved Changes'),
-                                       ucichanges
-                               })
-                       end
-               end
-       end
 -%>
 <!DOCTYPE html>
 <html lang="<%=luci.i18n.context.lang%>">
        <head>
                <meta charset="utf-8">
                <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
-               <!--[if lt IE 9]><script src="<%=media%>/html5.js"></script><![endif]-->
                <meta name="viewport" content="initial-scale=1.0">
                <link rel="stylesheet" href="<%=media%>/cascade.css">
                <link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="<%=media%>/mobile.css" type="text/css" />
-               <link rel="shortcut icon" href="<%=media%>/favicon.ico">
+               <link rel="shortcut icon" href="<%=media%>/favicon.png">
                <% if node and node.css then %>
                        <link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
                <% end -%>
                <% if css then %>
                        <style title="text/css"><%= css %></style>
                <% end -%>
+               <script src="<%=url('admin/translations', luci.i18n.context.lang)%><%# ?v=PKG_VERSION %>"></script>
+               <script src="<%=resource%>/cbi.js"></script>
                <script src="<%=resource%>/xhr.js"></script>
+
+               <% include("themes/bootstrap/json-menu") %>
        </head>
 
-       <body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %>">
+       <body class="lang_<%=luci.i18n.context.lang%> <% if node then %><%= striptags( node.title ) %><%- end %>" data-page="<%= table.concat(disp.context.requestpath, "-") %>">
                <header>
                        <div class="fill">
                                <div class="container">
                                        <a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
-                                       <% render_topmenu() %>
+                                       <ul class="nav" id="topmenu" style="display:none"></ul>
                                        <div class="pull-right">
-                                               <% render_changes() %>
                                                <span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
                                                        <span class="label success" id="xhr_poll_status_on"><%:Auto Refresh%> <%:on%></span>
                                                        <span class="label" id="xhr_poll_status_off" style="display:none"><%:Auto Refresh%> <%:off%></span>
                        </div>
                </header>
 
-               <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
-                       <div class="container">
+               <div id="maincontent" class="container">
+                       <%- if luci.sys.process.info("uid") == 0 and luci.sys.user.getuser("root") and not luci.sys.user.getpasswd("root") then -%>
                                <div class="alert-message warning">
                                        <h4><%:No password set!%></h4>
-                                       <%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%><br>
-                                       <a href="<%=pcdata(luci.dispatcher.build_url("admin/system/admin"))%>"><%:Go to password configuration...%></a>
+                                       <p><%:There is no password set on this router. Please configure a root password to protect the web interface and enable SSH.%></p>
+                                       <% if disp.lookup("admin/system/admin") then %>
+                                         <div class="right"><a class="btn" href="<%=url("admin/system/admin")%>"><%:Go to password configuration...%></a></div>
+                                       <% end %>
                                </div>
-                       </div>
-               <%- end -%>
+                       <%- end -%>
 
-               <noscript>
-                       <div class="alert-message warning">
-                               <strong><%:JavaScript required!%></strong><br />
-                               <%:You must enable JavaScript in your browser or LuCI will not work properly.%>
-                       </div>
-               </noscript>
+                       <noscript>
+                               <div class="alert-message warning">
+                                       <h4><%:JavaScript required!%></h4>
+                                       <p><%:You must enable JavaScript in your browser or LuCI will not work properly.%></p>
+                               </div>
+                       </noscript>
 
-               <div id="maincontent" class="container">
-                       <% if category then render_tabmenu(category, cattree) end %>
+                       <div id="tabmenu" style="display:none"></div>