themes/luci-theme-material/htdocs/luci-static/material/js/script.js

   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 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 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 (function ($) {
  21     $(".main > .loading").fadeOut();
  22
  23     /**
  24      * trim text, Remove spaces, wrap
  25      * @param text
  26      * @returns {string}
  27      */
  28     function trimText(text) {
  29         return text.replace(/[ \t\n\r]+/g, " ");
  30     }
  31
  32
  33     var lastNode = undefined;
  34     var mainNodeName = undefined;
  35
  36     var nodeUrl = "";
  37     (function(node){
  38         var luciLocation;
  39         if (node[0] == "admin"){
  40             luciLocation = [node[1], node[2]];
  41         }else{
  42             luciLocation = node;
  43         }
  44
  45         for(var i in luciLocation){
  46             nodeUrl += luciLocation[i];
  47             if (i != luciLocation.length - 1){
  48                 nodeUrl += "/";
  49             }
  50         }
  51     })(luciLocation);
  52
  53     /**
  54      * get the current node by Burl (primary)
  55      * @returns {boolean} success?
  56      */
  57     function getCurrentNodeByUrl() {
  58         var ret = false;
  59         if (!$('body').hasClass('logged-in')) {
  60             luciLocation = ["Main", "Login"];
  61             return true;
  62         }
  63
  64         $(".main > .main-left > .nav > .slide > .menu").each(function () {
  65             var ulNode = $(this);
  66             ulNode.next().find("a").each(function () {
  67                 var that = $(this);
  68                 var href = that.attr("href");
  69
  70                 if (href.indexOf(nodeUrl) != -1) {
  71                     ulNode.click();
  72                     ulNode.next(".slide-menu").stop(true, true);
  73                     lastNode = that.parent();
  74                     lastNode.addClass("active");
  75                     ret = true;
  76                     return true;
  77                 }
  78             });
  79         });
  80         return ret;
  81     }
  82
  83     /**
  84      * menu click
  85      */
  86     $(".main > .main-left > .nav > .slide > .menu").click(function () {
  87         var ul = $(this).next(".slide-menu");
  88         var menu = $(this);
  89         if (!ul.is(":visible")) {
  90             menu.addClass("active");
  91             ul.addClass("active");
  92             ul.stop(true).slideDown("fast");
  93         } else {
  94             ul.stop(true).slideUp("fast", function () {
  95                 menu.removeClass("active");
  96                 ul.removeClass("active");
  97             });
  98         }
  99         return false;
 100     });
 101
 102     /**
 103      * hook menu click and add the hash
 104      */
 105     $(".main > .main-left > .nav > .slide > .slide-menu > li > a").click(function () {
 106         if (lastNode != undefined) lastNode.removeClass("active");
 107         $(this).parent().addClass("active");
 108         $(".main > .loading").fadeIn("fast");
 109         return true;
 110     });
 111
 112     /**
 113      * fix menu click
 114      */
 115     $(".main > .main-left > .nav > .slide > .slide-menu > li").click(function () {
 116         if (lastNode != undefined) lastNode.removeClass("active");
 117         $(this).addClass("active");
 118         $(".main > .loading").fadeIn("fast");
 119         window.location = $($(this).find("a")[0]).attr("href");
 120         return false;
 121     });
 122
 123     /**
 124      * get current node and open it
 125      */
 126     if (getCurrentNodeByUrl()) {
 127         mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
 128         mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
 129         $("body").addClass(mainNodeName);
 130     }
 131     $(".cbi-button-up").val("");
 132     $(".cbi-button-down").val("");
 133
 134
 135     /**
 136      * hook other "A Label" and add hash to it.
 137      */
 138     $("#maincontent > .container").find("a").each(function () {
 139         var that = $(this);
 140         var onclick = that.attr("onclick");
 141         if (onclick == undefined || onclick == "") {
 142             that.click(function () {
 143                 var href = that.attr("href");
 144                 if (href.indexOf("#") == -1) {
 145                     $(".main > .loading").fadeIn("fast");
 146                     return true;
 147                 }
 148             });
 149         }
 150     });
 151
 152     /**
 153      * Sidebar expand
 154      */
 155     var showSide = false;
 156     $(".showSide").click(function () {
 157         if (showSide) {
 158             $(".darkMask").stop(true).fadeOut("fast");
 159             $(".main-left").stop(true).animate({
 160                 width: "0"
 161             }, "fast");
 162             $(".main-right").css("overflow-y", "auto");
 163             showSide = false;
 164         } else {
 165             $(".darkMask").stop(true).fadeIn("fast");
 166             $(".main-left").stop(true).animate({
 167                 width: "15rem"
 168             }, "fast");
 169             $(".main-right").css("overflow-y", "hidden");
 170             showSide = true;
 171         }
 172     });
 173
 174
 175     $(".darkMask").click(function () {
 176         if (showSide) {
 177             showSide = false;
 178             $(".darkMask").stop(true).fadeOut("fast");
 179             $(".main-left").stop(true).animate({
 180                 width: "0"
 181             }, "fast");
 182             $(".main-right").css("overflow-y", "auto");
 183         }
 184     });
 185
 186     $(window).resize(function () {
 187         if ($(window).width() > 921) {
 188             $(".main-left").css("width", "");
 189             $(".darkMask").stop(true);
 190             $(".darkMask").css("display", "none");
 191             showSide = false;
 192         }
 193     });
 194
 195     /**
 196      * fix legend position
 197      */
 198     $("legend").each(function () {
 199         var that = $(this);
 200         that.after("<span class='panel-title'>" + that.text() + "</span>");
 201     });
 202
 203     $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
 204         var that = $(this);
 205         if (that.text().trim() == ""){
 206             that.css("display", "none");
 207         }
 208     });
 209
 210
 211     $(".main-right").focus();
 212     $(".main-right").blur();
 213     $("input").attr("size", "0");
 214
 215     if (mainNodeName != undefined) {
 216         console.log(mainNodeName);
 217         switch (mainNodeName) {
 218             case "node-status-system_log":
 219             case "node-status-kernel_log":
 220                 $("#syslog").focus(function () {
 221                     $("#syslog").blur();
 222                     $(".main-right").focus();
 223                     $(".main-right").blur();
 224                 });
 225                 break;
 226             case "node-status-firewall":
 227                 var button = $(".node-status-firewall > .main fieldset li > a");
 228                 button.addClass("cbi-button cbi-button-reset a-to-btn");
 229                 break;
 230             case "node-system-reboot":
 231                 var button = $(".node-system-reboot > .main > .main-right p > a");
 232                 button.addClass("cbi-button cbi-input-reset a-to-btn");
 233                 break;
 234         }
 235     }
 236
 237 })(jQuery);