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

   1 /**
   2  *  Rosy is a theme for LuCI. It is based on luci-theme-bootstrap
   3  *
   4  *  luci-theme-rosy
   5  *     Copyright 2018 Rosy Song <rosysong@rosinson.com>
   6  *     Copyright 2018 Yan Lan Shen <yanlan.shen@rosinson.com>
   7  *
   8  *   Have a bug? Please create an issue here on GitHub!
   9  *       https://github.com/rosywrt/luci-theme-rosy/issues
  10  *
  11  *  luci-theme-bootstrap:
  12  *      Copyright 2008 Steven Barth <steven@midlink.org>
  13  *      Copyright 2008 Jo-Philipp Wich <jow@openwrt.org>
  14  *      Copyright 2012 David Menting <david@nut-bolt.nl>
  15  *
  16  *  Licensed to the public under the Apache License 2.0
  17  */
  18
  19 (function (win, $) {
  20     $(".loading").fadeOut();
  21
  22     /**
  23      * trim text, Remove spaces, wrap
  24      * @param text
  25      * @returns {string}
  26      */
  27     function trimText(text) {
  28         return text.replace(/[ \t\n\r]+/g, " ");
  29     }
  30
  31
  32     var lastNode = undefined;
  33     var mainNodeName = undefined;
  34
  35     var nodeUrl = "";
  36     (function (node) {
  37         var luciLocation;
  38         if (node[0] == "admin") {
  39             luciLocation = [node[1], node[2]];
  40         } else {
  41             luciLocation = node;
  42         }
  43
  44         for (var i in luciLocation) {
  45             nodeUrl += luciLocation[i];
  46             if (i != luciLocation.length - 1) {
  47                 nodeUrl += "/";
  48             }
  49         }
  50     })(luciLocation);
  51
  52     /**
  53      * get the current node by Burl (primary)
  54      * @returns {boolean} success?
  55      */
  56     function getCurrentNodeByUrl() {
  57         var ret = false;
  58         if (!$('body').hasClass('logged-in')) {
  59             luciLocation = ["Main", "Login"];
  60             return true;
  61         }
  62
  63         $(".main-left .nav > .slide > .menu").each(function () {
  64             var ulNode = $(this);
  65             ulNode.next().find("a").each(function () {
  66                 var that = $(this);
  67                 var href = that.attr("href");
  68
  69                 if (href.indexOf(nodeUrl) != -1) {
  70                     ulNode.click();
  71                     ulNode.next(".slide-menu").stop(true, true);
  72                     lastNode = that.parent();
  73                     lastNode.addClass("active");
  74                     ret = true;
  75                     return true;
  76                 }
  77             });
  78         });
  79         return ret;
  80     }
  81
  82     /**
  83      * menu click
  84      */
  85     if ($('.nav').length > 0 && $(window).width() > 992) {
  86         var oScroll = new MyScrollBar({
  87             selId: 'navBox',
  88             time: 100,
  89             bgColor: 'transprent',
  90             barColor: '#839dd67a',
  91             enterColor: '#839dd6cc',
  92             enterShow: false
  93         });
  94     }
  95     $(".main-left .nav > .slide > .menu").click(function () {
  96         var ul = $(this).next(".slide-menu");
  97         var menu = $(this);
  98         if (!ul.is(":visible")) {
  99             menu.addClass("active");
 100             ul.addClass("active");
 101             ul.stop(true).slideDown("fast");
 102         } else {
 103             ul.stop(true).slideUp("fast", function () {
 104                 menu.removeClass("active");
 105                 ul.removeClass("active");
 106             });
 107         }
 108         if ($('.nav').length > 0 && $(window).width() > 992) {
 109             oScroll.setSize(200);
 110         }
 111         setInterval(function () {
 112             if ($('.nav').height() < $('.navbar-container').height()) {
 113                 $('.nav').css('transform', 'translate(0px, 0px)');
 114             }
 115         }, 300);
 116         return false;
 117     });
 118
 119     /**
 120      * hook menu click and add the hash
 121      */
 122     $(".main-left .nav > .slide > .slide-menu > li > a").click(function () {
 123         if (lastNode != undefined) lastNode.removeClass("active");
 124         $(this).parent().addClass("active");
 125         $(".loading").fadeIn("fast");
 126         return true;
 127     });
 128
 129     /**
 130      * fix menu click
 131      */
 132     $(".main-left .nav > .slide > .slide-menu > li").click(function () {
 133         if (lastNode != undefined) lastNode.removeClass("active");
 134         $(this).addClass("active");
 135         $(".loading").fadeIn("fast");
 136         win.location = $($(this).find("a")[0]).attr("href");
 137         return false;
 138     });
 139
 140     /**
 141      * get current node and open it
 142      */
 143     if (getCurrentNodeByUrl()) {
 144         mainNodeName = "node-" + luciLocation[0] + "-" + luciLocation[1];
 145         mainNodeName = mainNodeName.replace(/[ \t\n\r\/]+/g, "_").toLowerCase();
 146         $("body").addClass(mainNodeName);
 147     }
 148     $(".cbi-button-up").val("");
 149     $(".cbi-button-down").val("");
 150
 151
 152     /**
 153      * hook other "A Label" and add hash to it.
 154      */
 155     $("#maincontent > .container").find("a").each(function () {
 156         var that = $(this);
 157         var onclick = that.attr("onclick");
 158         if (onclick == undefined || onclick == "") {
 159             that.click(function () {
 160                 var href = that.attr("href");
 161                 if (href.indexOf("#") == -1) {
 162                     $(".loading").fadeIn("fast");
 163                     return true;
 164                 }
 165             });
 166         }
 167     });
 168
 169     /**
 170      * Sidebar expand
 171      */
 172     var showSide = false;
 173     $(".showSide").click(function () {
 174         if (showSide) {
 175             $(".darkMask").stop(true).fadeOut("fast");
 176             $(".main-left").stop(true).fadeOut("fast");
 177             $(".main-right").css("overflow-y", "visible");
 178             showSide = false;
 179         } else {
 180             $(".darkMask").stop(true).fadeIn("fast");
 181             $(".main-left").stop(true).animate({
 182                 width: "100%"
 183             }, "fast").fadeIn("fast");
 184             $(".main-right").css("overflow-y", "hidden");
 185             showSide = true;
 186         }
 187     });
 188     if($(win).width() <= 992){
 189         $(".main-left").click(function(e) {
 190             e.preventDefault();
 191             $(".main-left").stop(true).fadeOut("fast");
 192             showSide = false;
 193         });
 194     }
 195
 196
 197     $(".darkMask").click(function () {
 198         if (showSide) {
 199             showSide = false;
 200             $(".darkMask").stop(true).fadeOut("fast");
 201             $(".main-left").stop(true).animate({
 202                 width: "0"
 203             }, "fast");
 204             $(".main-right").css("overflow-y", "visible");
 205         }
 206     });
 207
 208     $(win).resize(function () {
 209         if ($(win).width() > 921) {
 210             $(".main-left").css("width", "");
 211             $(".darkMask").stop(true);
 212             $(".darkMask").css("display", "none");
 213             showSide = false;
 214         }
 215
 216         $('body.login').height($(win).height());
 217     });
 218
 219     /**
 220      * fix legend position
 221      */
 222     $("legend").each(function () {
 223         var that = $(this);
 224         that.after("<span class='panel-title'>" + that.text() + "</span>");
 225     });
 226
 227     $(".cbi-section-table-titles, .cbi-section-table-descr, .cbi-section-descr").each(function () {
 228         var that = $(this);
 229         if (that.text().trim() == "") {
 230             that.css("display", "none");
 231         }
 232     });
 233
 234
 235     $(".main-right").focus();
 236     $(".main-right").blur();
 237     $("input").attr("size", "0");
 238
 239     if (mainNodeName != undefined) {
 240         console.log(mainNodeName);
 241         switch (mainNodeName) {
 242             case "node-status-system_log":
 243             case "node-status-kernel_log":
 244                 $("#syslog").focus(function () {
 245                     $("#syslog").blur();
 246                     $(".main-right").focus();
 247                     $(".main-right").blur();
 248                 });
 249                 break;
 250             case "node-status-firewall":
 251                 var button = $(".node-status-firewall > .main fieldset li > a");
 252                 button.addClass("cbi-button cbi-button-reset a-to-btn");
 253                 break;
 254             case "node-system-reboot":
 255                 var button = $(".node-system-reboot > .main > .main-right p > a");
 256                 button.addClass("cbi-button cbi-input-reset a-to-btn");
 257                 break;
 258         }
 259     }
 260
 261     $('.lang_enInterfaces .ifacebox-head').each(function () {
 262         $(this).next().css('border-color', $(this).css('background-color'));
 263     });
 264
 265     $('<div class="eye"></div>').appendTo('.login > .main .cbi-value-last > .cbi-value-field');
 266     $('.login > .main .cbi-value-last > .cbi-value-field .eye').click(function () {
 267         var className = $(this).attr('class');
 268         if (className.indexOf('op-eye') > (-1)) {
 269             $('.login > .main .cbi-value-last > .cbi-value-field').children().prop('type', 'text');
 270             $(this).addClass('eye').removeClass('op-eye');
 271         } else {
 272             $('.login > .main .cbi-value-last > .cbi-value-field').children().prop('type', 'password');
 273             $(this).addClass('op-eye').removeClass('eye');
 274         }
 275     });
 276
 277 })(window, jQuery);