Purple theme V2.0

Signed-off-by: YanlanShen <yanlan.Shen@rosinson.com>

luci-theme-purple/htdocs/luci-static/purple/js/script.js

@@ -1,273 +1,76 @@
 /**
- *  Purple is a theme for LuCI. It is based on luci-theme-bootstrap
+ *  Purple is a pure HTML5 theme for LuCI.
  *
  *  luci-theme-purple
  *     Copyright 2018 Rosy Song <rosysong@rosinson.com>
  *     Copyright 2018 Yan Lan Shen <yanlan.shen@rosinson.com>
  *
- *   Have a bug? Please create an issue here on GitHub!
- *       https://github.com/rosywrt/luci-theme-purple/issues
- *
- *  luci-theme-bootstrap:
- *      Copyright 2008 Steven Barth <steven@midlink.org>
- *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
- *      Copyright 2012 David Menting <david@nut-bolt.nl>
+ *  Have a bug? Please create an issue here on GitHub!
+ *      https://github.com/rosywrt/luci-theme-purple/issues
  *
  *  Licensed to the public under the Apache License 2.0
  */
-$(".main > .loading").fadeIn('fast');
-(function ($) {
-    $(".main > .loading").fadeOut('fast');
 
-    /**
-     * trim text, Remove spaces, wrap
-     * @param text
-     * @returns {string}
-     */
-    function trimText(text) {
-        return text.replace(/[ \t\n\r]+/g, " ");
-    }
+(function(win, dom, $){
+ 
+    $('.logged-in .loading').fadeOut('slow');
 
-
-    var lastNode = undefined;
-    var mainNodeName = undefined;
-
-    var nodeUrl = "";
-    (function (node) {
-        var luciLocation;
-        if (node[0] == "admin") {
-            luciLocation = [node[1], node[2]];
-        } else {
-            luciLocation = node;
-        }
-
-        for (var i in luciLocation) {
-            nodeUrl += luciLocation[i];
-            if (i != luciLocation.length - 1) {
-                nodeUrl += "/";
-            }
-        }
-    })(luciLocation);
-
-    /**
-     * get the current node by Burl (primary)
-     * @returns {boolean} success?
-     */
-    function getCurrentNodeByUrl() {
-        var ret = false;
-        if (!$('body').hasClass('logged-in')) {
-            luciLocation = ["Main", "Login"];
-            return true;
-        }
-
-        $(".main > .main-left .nav > .slide > .menu").each(function () {
-            var ulNode = $(this);
-            ulNode.next().find("a").each(function () {
-                var that = $(this);
-                var href = that.attr("href");
-
-                if (href.indexOf(nodeUrl) != -1) {
-                    ulNode.click();
-                    ulNode.next(".slide-menu").stop(true, true);
-                    lastNode = that.parent();
-                    lastNode.addClass("active");
-                    ret = true;
-                    return true;
-                }
-            });
-        });
-
-        return ret;
-    }
-
-
-    /**
-     * hook menu click and add the hash
-     */
-    $(".main > .main-left .nav > .slide > .slide-menu > li > a").click(function () {
-        if (lastNode != undefined) lastNode.removeClass("active");
-        $(this).parent().addClass("active");
-        $(".main > .loading").fadeIn("fast");
-        return true;
+    // Detect the height required for the login interface
+    $('.login').height($(win).height());
+    $('.logged-in .main-right .container').css('min-height', $(win).height());
+    $(win).resize(function(){
+        $('.login').height($(win).height());
+        $('.logged-in .main-right .container').css('min-height', $(win).height());
     });
 
-    /**
-     * fix menu click
-     */
-    $(".main > .main-left .nav > .slide > .slide-menu > li").click(function () {
-        if (lastNode != undefined) lastNode.removeClass("active");
-        $(this).addClass("active");
-        $(".main > .loading").fadeIn("fast");
-        window.location = $($(this).find("a")[0]).attr("href");
-        return false;
-    });
+    // Whether the menu displays click events
+    $('header .label.open-menu').click(function(){
+        var className = $(this).attr('class');
 
-    /**
-     * get current node and open it
-     */
-    if (getCurrentNodeByUrl()) {
-        mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
-        mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
-        $("body").addClass(mainNodeName);
-    }
-    $(".cbi-button-up").val("");
-    $(".cbi-button-down").val("");
-
-
-    /**
-     * hook other "A Label" and add hash to it.
-     */
-    $("#maincontent > .container").find("a").each(function () {
-        var that = $(this);
-        var onclick = that.attr("onclick");
-        if (onclick == undefined || onclick == "") {
-            that.click(function () {
-                var href = that.attr("href");
-                if (href.indexOf("#") == -1) {
-                    $(".main > .loading").fadeIn("fast");
-                    return true;
-                }
-            });
+        if(className.indexOf('open-menu') != (-1)){
+            $(this).removeClass('open-menu').addClass('close-menu');
+            $('.main-left').fadeIn('fast');
+            $('.showSide .label-hide').text('close menu');
+        }else {
+            $(this).removeClass('close-menu').addClass('open-menu');
+            $('.main-left').fadeOut('fast');
+            $('.showSide .label-hide').text('open menu');
         }
     });
 
-    /**
-     * fix legend position
-     */
-    $("legend").each(function () {
-        var that = $(this);
-        that.after("<span class='panel-title'>" + that.text() + "</span>");
-    });
+    // When the page is just logged in
+    $('.logged-in .main-left .top-menu li:first-child a').addClass('active');
+    $('.logged-in .main-left .all-menu .slide:first-child .slide-menu li:first-child').addClass('active');
 
-    $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
-        var that = $(this);
-        if (that.text().trim() == "") {
-            that.css("display", "none");
+    // Add the active class name to the menu
+    var currentURL = win.location.pathname;
+    var dataTitle = '';
+    $('.logged-in .main-left .all-menu .slide-menu li a').each(function(){
+        var allURL = $(this).attr('href');
+        if(currentURL.indexOf(allURL) != (-1)){
+            $('.logged-in .main-left .all-menu .slide-menu li a').parent('li').removeClass('active');
+            dataTitle = $(this).parent('li').addClass('active').parent().prev().attr('data-title');
         }
     });
-
-
-    $(".main-right").focus();
-    $(".main-right").blur();
-    $("input").attr("size", "0");
-
-    if (mainNodeName != undefined) {
-        console.log(mainNodeName);
-        switch (mainNodeName) {
-            case "node-status-system_log":
-            case "node-status-kernel_log":
-                $("#syslog").focus(function () {
-                    $("#syslog").blur();
-                    $(".main-right").focus();
-                    $(".main-right").blur();
-                });
-                break;
-            case "node-status-firewall":
-                var button = $(".node-status-firewall > .main fieldset li > a");
-                button.addClass("cbi-button cbi-button-reset a-to-btn");
-                break;
-            case "node-system-reboot":
-                var button = $(".node-system-reboot > .main > .main-right p > a");
-                button.addClass("cbi-button cbi-input-reset a-to-btn");
-                break;
-        }
-    }
-
-    /*
-     * Empty the login button value
-     */
-    if ($('.node-main-login>.main form .cbi-button-apply')[0]) {
-        $('.node-main-login>.main form .cbi-button-apply')[0].value = '';
-    }
-
-    /*
-     * Make navigation first character bigger.
-     */
-    $('.main .nav-shell > .nav .slide-menu a').each(function (i, e) {
-        var elemFir = $(this).text();
-        var b = `<span>${elemFir[0]}</span>`;
-        var small = elemFir.substr(1, elemFir.length);
-        small = `<samll>${small}</samll>`;
-        $(this).html(b + small);
-    });
-
-    /*
-     * Remove the class name on the right level of navigation.
-     */
-    $('.main .main-left .top-menu .nav .slide a').removeClass('col-xs-1');
-
-    /*
-     * Add the class name on the right level of navigation.
-     */
-    var shell = '';
-    $('.nav-shell .nav .slide-menu li').each(function (i, e) {
-        if ($(this).attr('class')) {
-            var domClass = $(this).attr('class').indexOf('active');
-        }
-
-        if (domClass > -1) {
-            shell = $(this).parent().prev().text();
-        }
-    });
-
-    $('.main .main-left .top-menu .nav .slide').each(function () {
-        if ($(this).text() == shell) {
+    $('.logged-in .main-left .top-menu li a').each(function(){
+        if($(this).attr('data-title') == dataTitle) {
+            $('.logged-in .main-left .top-menu li a').removeClass('active');
             $(this).addClass('active');
         }
     });
-
-    /*
-     * Menu button event
-     */
-    $('.main .sidebar .close').click(function () {
-        $('.main-left').fadeOut('fast');
-        $(this).fadeOut('fast');
-        $('.main .sidebar .root-btn').fadeIn('fast');
-        $('.main .sidebar .open').fadeIn('fast');
-    });
-    $('.main .sidebar .open').click(function () {
-        $('.main-left').fadeIn('fast');
-        $('.main .sidebar .close').fadeIn('fast');
-        $(this).fadeOut('fast');
-        $('.main .sidebar .root-btn').fadeOut('fast');
-    });
-    $('header .close').click(function () {
-        $('.main-left').fadeOut('fast');
-        $(this).css('display', 'none');
-        $('header .open').css('display', 'inline-block');
-    });
-    $('header .open').click(function () {
-        $('.main-left').fadeIn('fast');
-        $(this).css('display', 'none');
-        $('header .close').css('display', 'inline-block');
+    $('.btn').prev('input').css({
+        'border-radius': '4px 0 0 4px'
     });
 
-    var waringL = $('.node-main-login form .alert-message.warning').length;
-    var inp = $('.node-main-login>.main form .cbi-button-apply');
-    var top = parseInt($('.node-main-login>.main form .cbi-button-apply').css('top'));
-    if(waringL > 0){
-        inp.css('top', 48 + top);
-    }
+    // Add a new class name to body
+    $('body.logged-in').addClass(luciLocation[1]);
 
-    /*
-     * auto refresh on / off
-     */
-    $('.main .sidebar #xhr_poll_status_on').click(function () {
-        $(this).css('display', 'none');
-        $('.main .sidebar #xhr_poll_status_off').fadeIn();
-    });
-    $('.main .sidebar #xhr_poll_status_off').click(function () {
-        $(this).css('display', 'none');
-        $('.main .sidebar #xhr_poll_status_on').fadeIn();
+    $('.cbi-dropdown ul li input').click(function(){
+        $(this).attr('checked', 'true');
     });
 
-    $('.logged-in .container').css('min-height', $(window).height());
-    $('.node-main-login').height($(window).height());
-    $(window).resize(function(){
-        $('.logged-in .container').css('min-height', $(window).height());
-        $('.node-main-login').height($(window).height());
+    $('.logged-in .main-left .all-menu .slide-menu li a').click(function(){
+        $(".logged-in .loading").fadeIn("fast");
     });
 
-    $('.table').wrap('<div class="table-container"></div>');
-
-})(jQuery);
+})(window, document, jQuery);

luci-theme-purple/luasrc/view/themes/purple/footer.htm

@@ -1,20 +1,16 @@
-<%#                                   
-    Purple is a theme for LuCI. It is based on luci-theme-bootstrap
-    luci-theme-purple
-        Copyright 2018 Rosy Song <rosysong@rosinson.com>
-        Copyright 2018 Yan Lan Shen <yanlan.shen@rosinson.com>
-    
-    Have a bug? Please create an issue here on GitHub!
-        https://github.com/rosywrt/luci-theme-purple/issues
+<%#
+	Purple is a pure HTML5 theme for LuCI.
 
-    luci-theme-bootstrap:
-        Copyright 2008 Steven Barth <steven@midlink.org>
-        Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
-        Copyright 2012 David Menting <david@nut-bolt.nl>
+	luci-theme-purple
+		Copyright 2018 Rosy Song <rosysong@rosinson.com>
+     		Copyright 2018 Yan Lan Shen <yanlan.shen@rosinson.com>
 
-    Licensed to the public under the Apache License 2.0
+	Have a bug? Please create an issue here on GitHub!
+		https://github.com/rosywrt/luci-theme-purple/issues
 
+	Licensed to the public under the Apache License 2.0
 -%>
+
 <%
     local ver = require "luci.version"
     local disp = require "luci.dispatcher"
@@ -22,10 +18,13 @@
     local category = request[1]
     local tree = disp.node()
     local categories = disp.node_childs(tree)
+    local log = require "luci.log"
 %>
 
+</div>
 </div>
 <footer class="mobile-hide">
+<% log.print_r(luci.dispatcher.context.path) %>
     <a href="https://github.com/openwrt/luci">Powered by<%= ver.luciname %> (<%= ver.luciversion %>)</a> /
     <%= ver.distversion %>
     <% if #categories > 1 then %>
@@ -36,8 +35,6 @@
     </ul>
     <% end %>
 </footer>
-</div>
-</div>
 
 <script>                                         
     var luciLocation = <%= luci.http.write_json(luci.dispatcher.context.path) %>;

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

@@ -1,20 +1,16 @@
-<%#                                   
-    Purple is a theme for LuCI. It is based on luci-theme-bootstrap
-    luci-theme-purple
-        Copyright 2018 Rosy Song <rosysong@rosinson.com>
-        Copyright 2018 Yan Lan Shen <yanlan.shen@rosinson.com>
-    
-    Have a bug? Please create an issue here on GitHub!
-        https://github.com/rosywrt/luci-theme-purple/issues
+<%#
+	Purple is a pure HTML5 theme for LuCI.
 
-    luci-theme-bootstrap:
-        Copyright 2008 Steven Barth <steven@midlink.org>
-        Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
-        Copyright 2012 David Menting <david@nut-bolt.nl>
+	luci-theme-purple
+		Copyright 2018 Rosy Song <rosysong@rosinson.com>
+     		Copyright 2018 Yan Lan Shen <yanlan.shen@rosinson.com>
 
-    Licensed to the public under the Apache License 2.0
+	Have a bug? Please create an issue here on GitHub!
+		https://github.com/rosywrt/luci-theme-purple/issues
 
+	Licensed to the public under the Apache License 2.0
 -%>
+
 <%
 	local sys  = require "luci.sys"
 	local util = require "luci.util"
@@ -102,13 +98,13 @@
 	local function render_submenu(prefix, node)
 		local childs = disp.node_childs(node)
 		if #childs > 0 then
-			write('<ul class="slide-menu row">')
+			write('<ul class="slide-menu">')
 
 			for i, r in ipairs(childs) do
 				local nnode = node.nodes[r]
 				local title = pcdata(striptags(translate(nnode.title)))
 
-				write('<li class="col-zs-6 col-xs-4 col-sm-4 col-md-3"><a data-title="%s" href="%s">%s</a></li>' %{
+				write('<li><a data-title="%s" href="%s">%s</a></li>' %{
 					title,
 					nodeurl(prefix, r, nnode.query),
 					title
@@ -119,7 +115,7 @@
 		end
 	end
 
-	local function render_topmenu(sign)
+	local function render_topmenu(show_submenu)
 		local childs = disp.node_childs(cattree)
 		if #childs > 0 then
 			write('<ul class="nav">')
@@ -129,28 +125,16 @@
 				local grandchildren = disp.node_childs(nnode)
 
 				if #grandchildren > 0 then
-					if sign then
-						local title = pcdata(striptags(translate(nnode.title)))
+					local title = pcdata(striptags(translate(nnode.title)))
 
-						write('<li class="slide row"><a class="menu" id="%s" data-title="%s" href="#">%s</a>' %{
-							title,
-							title,
-							title
-						})
-	
+					write('<li class="slide"><a class="menu" data-title="%s" href="#">%s</a>' %{
+						title,
+						title
+					})
+					if show_submenu then
 						render_submenu(category .. "/" .. r, nnode)
-						write('</li>')
-					else
-						local title = pcdata(striptags(translate(nnode.title)))           
-                                                                                                                          
-                                        	write('<li class="slide"><a class="menu" data-title="%s" href="#%s">%s</a>' %{
-                                                	title,                                 
-	                                                title,
-							title
-                	                        })                              
-                        	                                                                                  
-                                	        write('</li>')
 					end
+					write('</li>')
 				end
 			end
 
@@ -169,10 +153,10 @@
                                 if #grandchildren <= 0 then
                                         local title = pcdata(striptags(translate(nnode.title)))                      
                                                                                           
-                                        write('<span class="label logout"><div class="mobile-hide">%s</div><a data-title="%s" href="%s"></a></span>' %{                      
-                                                title,
-						title,
+                                        write('<a class="label logout" data-title="%s" href="%s"><span class="label-hide">%s</span></a>' %{
+                                                title,                                    
                                                 nodeurl(category, r, nnode.query),
+						title
                                         })                                                                           
                                 end                                                       
                         end                                                                                          
@@ -195,7 +179,7 @@
 			end
 
 			if ucichanges > 0 then
-				write('<a class="uci_change_indicator label notice" href="%s?redir=%s"><span class="mobile-hide">%s:</span> %d</a>' %{
+				write('<a class="uci_change_indicator label notice" href="%s?redir=%s"><span class="label-hide">%s</span> %d</a>' %{
 					url(category, 'uci/changes'),
 					http.urlencode(http.formvalue('redir') or table.concat(disp.context.request, "/")),
 					translate('Unsaved Changes'),
@@ -204,6 +188,26 @@
 			end
 		end
 	end
+
+	local function auth_level()
+		local childs = disp.node_childs(cattree)                               
+                if #childs > 0 then
+                        for i, r in ipairs(childs) do                                                                     
+                                local nnode = cattree.nodes[r]                  
+                                local grandchildren = disp.node_childs(nnode)          
+                                                     
+                                if #grandchildren > 0 then
+					-- If this value is returned, the current interface is the logged-in data output interface
+					return "auth"
+				else
+					-- If this value is returned, it indicates that the current interface is a data output interface that does not require login.
+					return "noauth"
+                                end                                       
+                        end                                     
+                end
+		-- If this value is returned, the current interface is the login interface
+		return "login"
+        end
 -%>
 <!DOCTYPE html>
 <html lang="<%=luci.i18n.context.lang%>">
@@ -231,7 +235,7 @@
 	<link rel="icon" href="<%=media%>/logo.png" sizes="144x144">
 	<link rel="apple-touch-icon-precomposed" href="<%=media%>/logo.png" sizes="144x144">
 
-	<link rel="stylesheet" href="<%=media%>/cascade.css">
+	<link rel="stylesheet" href="<%=media%>/cascade.css?v=git-19.048.53009-55cd0c4">
 	<link rel="shortcut icon" href="<%=media%>/favicon.ico">
 	<% if node and node.css then %>
 	<link rel="stylesheet" href="<%=resource%>/<%=node.css%>">
@@ -243,72 +247,46 @@
 	<% end -%>
 	<script src="<%=resource%>/cbi.js"></script>
 	<script src="<%=resource%>/xhr.js"></script>
+	<script src="<%=media%>/js/ScrollY.js"></script>
 </head>
 
-<body class="lang_<%=luci.i18n.context.lang%> <%- if node then %><%= striptags( node.title ) %><%- end %> <% if luci.dispatcher.context.authsession then %>logged-in<% end %>">
+<body class="lang_<%=luci.i18n.context.lang%> <%- if node then %> <%= striptags( node.title ) %><%- end %> <%- if auth_level() == "auth" then %> logged-in<%- end %> <%- if auth_level() == "noauth" then %> login-info<%- end %> <%- if auth_level() == "login" then %> login<%- end %>">
 	<header>
-		<div class="fill">
-			<div class="logo-con pull-left">
-				<img src="<%=media%>/logo.png">
-				<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
-			</div>
-			<div class="btn-con pull-right">
-				<button class="label open"></button>
-				<button class="label close"></button>
+		<div class="container">
+			<a class="label brand place top" href="#"><span class="label-hide"><%=boardinfo.hostname or "?"%></span></a>
+			<span class="label showSide place center open-menu"><span class="label-hide">open menu</span></span>
+			<div class="place bottom">
 				<% 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"><span class="mobile-hide">
-							<%:Auto Refresh%></span>
-						<%:on%></span>
-					<span class="label" id="xhr_poll_status_off" style="display:none"><span class="mobile-hide">
-							<%:Auto Refresh%></span>
-						<%:off%></span>
+					<span class="label success" id="xhr_poll_status_on"><span class="label-hide"><%:Auto Refresh%></span><%:on%></span>
+					<span class="label" id="xhr_poll_status_off" style="display:none"><span class="label-hide"><%:Auto Refresh%></span><%:off%></span>
 				</span>
 				<% render_logout() %>
 			</div>
 		</div>
 	</header>
+	<div style="" class="loading">
+		<span>                                                                                                                                                 
+                	<div class="loading-img">                                                                           
+                        	<img src="<%=media%>/loading.svg">                                                          
+                        </div>Loading...                                                                    
+                </span>
+	</div>
 	<div class="main">
-		<div style="" class="loading"><span>
-				<div class="loading-img">
-					<img src="<%=media%>/loading.svg">
-				</div>Loading...
-			</span></div>
-		<div class="sidebar">
-			<a class="label brand" href="#"><div class="mobile-hide"><%=boardinfo.hostname or "?"%></div></a>
-			<button class="label open"><div class="mobile-hide">open menu</div></button>
-			<button class="label close"><div class="mobile-hide">close menu</div></button>
-			<div class="root-btn">
-				<% render_changes() %>
-				<span id="xhr_poll_status" onclick="XHR.running() ? XHR.halt() : XHR.run()">
-					<span class="label success" id="xhr_poll_status_on">
-						<span class="mobile-hide"><%:Auto Refresh%></span><%:on%>
-					</span>
-					<span class="label" id="xhr_poll_status_off" style="display:none">
-						<span class="mobile-hide"><%:Auto Refresh%></span><%:off%>
-					</span>
-				</span>
-				<% render_logout() %>
-			</div>
-		</div>
 		<div class="main-left">
-			<div class="nav-shell">
-				<% render_topmenu(true) %>
+			<div class="top-menu">
+				<% render_topmenu(false) %>
 			</div>
-			<div class="top-menu mobile-hide">
-				<div class="nav-container">
-					<% render_topmenu(false) %>
-				</div>
+			<div class="all-menu">
+				<% render_topmenu(true) %>
 			</div>
 		</div>
 		<div class="main-right">
-			<div id="maincontent">
 				<div class="container">
-					<a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
+					<a class="brand PC-hide" href="#"><%=boardinfo.hostname or "?"%></a>
 					<%- 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>
-							<img src="<%=media%>/no-pwd.png">
 							<%:No password set!%>
 						</h4>
 						<p>