src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/dist/js/demo.js

   1 /**
   2  * AdminLTE Demo Menu
   3  * ------------------
   4  * You should not use this file in production.
   5  * This file is for demo purposes only.
   6  */
   7 (function ($, AdminLTE) {
   8
   9   "use strict";
  10
  11   /**
  12    * List of all the available skins
  13    *
  14    * @type Array
  15    */
  16   var my_skins = [
  17     "skin-blue",
  18     "skin-black",
  19     "skin-red",
  20     "skin-yellow",
  21     "skin-purple",
  22     "skin-green",
  23     "skin-blue-light",
  24     "skin-black-light",
  25     "skin-red-light",
  26     "skin-yellow-light",
  27     "skin-purple-light",
  28     "skin-green-light"
  29   ];
  30
  31   //Create the new tab
  32   var tab_pane = $("<div />", {
  33     "id": "control-sidebar-theme-demo-options-tab",
  34     "class": "tab-pane active"
  35   });
  36
  37   //Create the tab button
  38   var tab_button = $("<li />", {"class": "active"})
  39       .html("<a href='#control-sidebar-theme-demo-options-tab' data-toggle='tab'>"
  40       + "<i class='fa fa-wrench'></i>"
  41       + "</a>");
  42
  43   //Add the tab button to the right sidebar tabs
  44   $("[href='#control-sidebar-home-tab']")
  45       .parent()
  46       .before(tab_button);
  47
  48   //Create the menu
  49   var demo_settings = $("<div />");
  50
  51   //Layout options
  52   demo_settings.append(
  53       "<h4 class='control-sidebar-heading'>"
  54       + "Layout Options"
  55       + "</h4>"
  56         //Fixed layout
  57       + "<div class='form-group'>"
  58       + "<label class='control-sidebar-subheading'>"
  59       + "<input type='checkbox' data-layout='fixed' class='pull-right'/> "
  60       + "Fixed layout"
  61       + "</label>"
  62       + "<p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>"
  63       + "</div>"
  64         //Boxed layout
  65       + "<div class='form-group'>"
  66       + "<label class='control-sidebar-subheading'>"
  67       + "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> "
  68       + "Boxed Layout"
  69       + "</label>"
  70       + "<p>Activate the boxed layout</p>"
  71       + "</div>"
  72         //Sidebar Toggle
  73       + "<div class='form-group'>"
  74       + "<label class='control-sidebar-subheading'>"
  75       + "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
  76       + "Toggle Sidebar"
  77       + "</label>"
  78       + "<p>Toggle the left sidebar's state (open or collapse)</p>"
  79       + "</div>"
  80         //Sidebar mini expand on hover toggle
  81       + "<div class='form-group'>"
  82       + "<label class='control-sidebar-subheading'>"
  83       + "<input type='checkbox' data-enable='expandOnHover' class='pull-right'/> "
  84       + "Sidebar Expand on Hover"
  85       + "</label>"
  86       + "<p>Let the sidebar mini expand on hover</p>"
  87       + "</div>"
  88         //Control Sidebar Toggle
  89       + "<div class='form-group'>"
  90       + "<label class='control-sidebar-subheading'>"
  91       + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
  92       + "Toggle Right Sidebar Slide"
  93       + "</label>"
  94       + "<p>Toggle between slide over content and push content effects</p>"
  95       + "</div>"
  96         //Control Sidebar Skin Toggle
  97       + "<div class='form-group'>"
  98       + "<label class='control-sidebar-subheading'>"
  99       + "<input type='checkbox' data-sidebarskin='toggle' class='pull-right'/> "
 100       + "Toggle Right Sidebar Skin"
 101       + "</label>"
 102       + "<p>Toggle between dark and light skins for the right sidebar</p>"
 103       + "</div>"
 104   );
 105   var skins_list = $("<ul />", {"class": 'list-unstyled clearfix'});
 106
 107   //Dark sidebar skins
 108   var skin_blue =
 109       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 110           .append("<a href='javascript:void(0);' data-skin='skin-blue' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 111           + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
 112           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 113           + "</a>"
 114           + "<p class='text-center no-margin'>Blue</p>");
 115   skins_list.append(skin_blue);
 116   var skin_black =
 117       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 118           .append("<a href='javascript:void(0);' data-skin='skin-black' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 119           + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
 120           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 121           + "</a>"
 122           + "<p class='text-center no-margin'>Black</p>");
 123   skins_list.append(skin_black);
 124   var skin_purple =
 125       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 126           .append("<a href='javascript:void(0);' data-skin='skin-purple' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 127           + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
 128           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 129           + "</a>"
 130           + "<p class='text-center no-margin'>Purple</p>");
 131   skins_list.append(skin_purple);
 132   var skin_green =
 133       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 134           .append("<a href='javascript:void(0);' data-skin='skin-green' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 135           + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
 136           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 137           + "</a>"
 138           + "<p class='text-center no-margin'>Green</p>");
 139   skins_list.append(skin_green);
 140   var skin_red =
 141       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 142           .append("<a href='javascript:void(0);' data-skin='skin-red' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 143           + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
 144           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 145           + "</a>"
 146           + "<p class='text-center no-margin'>Red</p>");
 147   skins_list.append(skin_red);
 148   var skin_yellow =
 149       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 150           .append("<a href='javascript:void(0);' data-skin='skin-yellow' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 151           + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
 152           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 153           + "</a>"
 154           + "<p class='text-center no-margin'>Yellow</p>");
 155   skins_list.append(skin_yellow);
 156
 157   //Light sidebar skins
 158   var skin_blue_light =
 159       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 160           .append("<a href='javascript:void(0);' data-skin='skin-blue-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 161           + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
 162           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 163           + "</a>"
 164           + "<p class='text-center no-margin' style='font-size: 12px'>Blue Light</p>");
 165   skins_list.append(skin_blue_light);
 166   var skin_black_light =
 167       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 168           .append("<a href='javascript:void(0);' data-skin='skin-black-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 169           + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
 170           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 171           + "</a>"
 172           + "<p class='text-center no-margin' style='font-size: 12px'>Black Light</p>");
 173   skins_list.append(skin_black_light);
 174   var skin_purple_light =
 175       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 176           .append("<a href='javascript:void(0);' data-skin='skin-purple-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 177           + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
 178           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 179           + "</a>"
 180           + "<p class='text-center no-margin' style='font-size: 12px'>Purple Light</p>");
 181   skins_list.append(skin_purple_light);
 182   var skin_green_light =
 183       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 184           .append("<a href='javascript:void(0);' data-skin='skin-green-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 185           + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
 186           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 187           + "</a>"
 188           + "<p class='text-center no-margin' style='font-size: 12px'>Green Light</p>");
 189   skins_list.append(skin_green_light);
 190   var skin_red_light =
 191       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 192           .append("<a href='javascript:void(0);' data-skin='skin-red-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 193           + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
 194           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 195           + "</a>"
 196           + "<p class='text-center no-margin' style='font-size: 12px'>Red Light</p>");
 197   skins_list.append(skin_red_light);
 198   var skin_yellow_light =
 199       $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
 200           .append("<a href='javascript:void(0);' data-skin='skin-yellow-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
 201           + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
 202           + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
 203           + "</a>"
 204           + "<p class='text-center no-margin' style='font-size: 12px;'>Yellow Light</p>");
 205   skins_list.append(skin_yellow_light);
 206
 207   demo_settings.append("<h4 class='control-sidebar-heading'>Skins</h4>");
 208   demo_settings.append(skins_list);
 209
 210   tab_pane.append(demo_settings);
 211   $("#control-sidebar-home-tab").after(tab_pane);
 212
 213   setup();
 214
 215   /**
 216    * Toggles layout classes
 217    *
 218    * @param String cls the layout class to toggle
 219    * @returns void
 220    */
 221   function change_layout(cls) {
 222     $("body").toggleClass(cls);
 223     AdminLTE.layout.fixSidebar();
 224     //Fix the problem with right sidebar and layout boxed
 225     if (cls == "layout-boxed")
 226       AdminLTE.controlSidebar._fix($(".control-sidebar-bg"));
 227     if ($('body').hasClass('fixed') && cls == 'fixed') {
 228       AdminLTE.pushMenu.expandOnHover();
 229       AdminLTE.layout.activate();
 230     }
 231     AdminLTE.controlSidebar._fix($(".control-sidebar-bg"));
 232     AdminLTE.controlSidebar._fix($(".control-sidebar"));
 233   }
 234
 235   /**
 236    * Replaces the old skin with the new skin
 237    * @param String cls the new skin class
 238    * @returns Boolean false to prevent link's default action
 239    */
 240   function change_skin(cls) {
 241     $.each(my_skins, function (i) {
 242       $("body").removeClass(my_skins[i]);
 243     });
 244
 245     $("body").addClass(cls);
 246     store('skin', cls);
 247     return false;
 248   }
 249
 250   /**
 251    * Store a new settings in the browser
 252    *
 253    * @param String name Name of the setting
 254    * @param String val Value of the setting
 255    * @returns void
 256    */
 257   function store(name, val) {
 258     if (typeof (Storage) !== "undefined") {
 259       localStorage.setItem(name, val);
 260     } else {
 261       window.alert('Please use a modern browser to properly view this template!');
 262     }
 263   }
 264
 265   /**
 266    * Get a prestored setting
 267    *
 268    * @param String name Name of of the setting
 269    * @returns String The value of the setting | null
 270    */
 271   function get(name) {
 272     if (typeof (Storage) !== "undefined") {
 273       return localStorage.getItem(name);
 274     } else {
 275       window.alert('Please use a modern browser to properly view this template!');
 276     }
 277   }
 278
 279   /**
 280    * Retrieve default settings and apply them to the template
 281    *
 282    * @returns void
 283    */
 284   function setup() {
 285     var tmp = get('skin');
 286     if (tmp && $.inArray(tmp, my_skins))
 287       change_skin(tmp);
 288
 289     //Add the change skin listener
 290     $("[data-skin]").on('click', function (e) {
 291       if($(this).hasClass('knob'))
 292         return;
 293       e.preventDefault();
 294       change_skin($(this).data('skin'));
 295     });
 296
 297     //Add the layout manager
 298     $("[data-layout]").on('click', function () {
 299       change_layout($(this).data('layout'));
 300     });
 301
 302     $("[data-controlsidebar]").on('click', function () {
 303       change_layout($(this).data('controlsidebar'));
 304       var slide = !AdminLTE.options.controlSidebarOptions.slide;
 305       AdminLTE.options.controlSidebarOptions.slide = slide;
 306       if (!slide)
 307         $('.control-sidebar').removeClass('control-sidebar-open');
 308     });
 309
 310     $("[data-sidebarskin='toggle']").on('click', function () {
 311       var sidebar = $(".control-sidebar");
 312       if (sidebar.hasClass("control-sidebar-dark")) {
 313         sidebar.removeClass("control-sidebar-dark")
 314         sidebar.addClass("control-sidebar-light")
 315       } else {
 316         sidebar.removeClass("control-sidebar-light")
 317         sidebar.addClass("control-sidebar-dark")
 318       }
 319     });
 320
 321     $("[data-enable='expandOnHover']").on('click', function () {
 322       $(this).attr('disabled', true);
 323       AdminLTE.pushMenu.expandOnHover();
 324       if (!$('body').hasClass('sidebar-collapse'))
 325         $("[data-layout='sidebar-collapse']").click();
 326     });
 327
 328     // Reset options
 329     if ($('body').hasClass('fixed')) {
 330       $("[data-layout='fixed']").attr('checked', 'checked');
 331     }
 332     if ($('body').hasClass('layout-boxed')) {
 333       $("[data-layout='layout-boxed']").attr('checked', 'checked');
 334     }
 335     if ($('body').hasClass('sidebar-collapse')) {
 336       $("[data-layout='sidebar-collapse']").attr('checked', 'checked');
 337     }
 338
 339   }
 340 })(jQuery, $.AdminLTE);