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