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 (function ($) {
  22         $(".main > .loading").fadeOut();
  23
  24         /**
  25          * trim text, Remove spaces, wrap
  26          * @param text
  27          * @returns {string}
  28          */
  29         function trimText(text) {
  30                 return text.replace(/[ \t\n\r]+/g, " ");
  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
 132         /**
 133          * Sidebar expand
 134          */
 135         var showSide = false;
 136         $(".showSide").click(function () {
 137                 if (showSide) {
 138                         $(".darkMask").stop(true).fadeOut("fast");
 139                         $(".main-left").stop(true).animate({
 140                                 width: "0"
 141                         }, "fast");
 142                         $(".main-right").css("overflow-y", "visible");
 143                         showSide = false;
 144                 } else {
 145                         $(".darkMask").stop(true).fadeIn("fast");
 146                         $(".main-left").stop(true).animate({
 147                                 width: "15rem"
 148                         }, "fast");
 149                         $(".main-right").css("overflow-y", "hidden");
 150                         showSide = true;
 151                 }
 152         });
 153
 154         $(".darkMask").click(function () {
 155                 if (showSide) {
 156                         showSide = false;
 157                         $(".darkMask").stop(true).fadeOut("fast");
 158                         $(".main-left").stop(true).animate({
 159                                 width: "0"
 160                         }, "fast");
 161                         $(".main-right").css("overflow-y", "visible");
 162                 }
 163         });
 164
 165         $(window).resize(function () {
 166                 if ($(window).width() > 921) {
 167                         $(".main-left").css("width", "");
 168                         $(".darkMask").stop(true);
 169                         $(".darkMask").css("display", "none");
 170                         showSide = false;
 171                 }
 172         });
 173
 174         /**
 175          * fix legend position
 176          */
 177         $("legend").each(function () {
 178                 var that = $(this);
 179                 that.after("<span class='panel-title'>" + that.text() + "</span>");
 180         });
 181
 182         $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
 183                 var that = $(this);
 184                 if (that.text().trim() == ""){
 185                         that.css("display", "none");
 186                 }
 187         });
 188
 189         $(".main-right").focus();
 190         $(".main-right").blur();
 191         $("input").attr("size", "0");
 192         $(".cbi-button-up").val("__");
 193         $(".cbi-button-down").val("__");
 194         $(".slide > a").removeAttr("href");
 195
 196         if (mainNodeName != undefined) {
 197                 console.log(mainNodeName);
 198                 switch (mainNodeName) {
 199                         case "node-status-system_log":
 200                         case "node-status-kernel_log":
 201                                 $("#syslog").focus(function () {
 202                                         $("#syslog").blur();
 203                                         $(".main-right").focus();
 204                                         $(".main-right").blur();
 205                                 });
 206                                 break;
 207                         case "node-status-firewall":
 208                                 var button = $(".node-status-firewall > .main fieldset li > a");
 209                                 button.addClass("cbi-button cbi-button-reset a-to-btn");
 210                                 break;
 211                         case "node-system-reboot":
 212                                 var button = $(".node-system-reboot > .main > .main-right p > a");
 213                                 button.addClass("cbi-button cbi-input-reset a-to-btn");
 214                                 break;
 215                 }
 216         }
 217
 218 })(jQuery);