/**
* AdminLTE Demo Menu
* ------------------
* You should not use this file in production.
* This file is for demo purposes only.
*/
(function ($) {
/**
* List of all the available skins
*
* @type Array
*/
var my_skins = [
"skin-blue",
"skin-black",
"skin-red",
"skin-yellow",
"skin-purple",
"skin-green",
"skin-blue-light",
"skin-black-light",
"skin-red-light",
"skin-yellow-light",
"skin-purple-light",
"skin-green-light"
];
/**
* CSS rules for the menu
*
* @type Object
*/
var menu_css = {
"padding": "10px",
"position": "fixed",
"top": "70px",
"right": "-250px",
"background": "#fff",
"border": "0px solid #ddd",
"width": "250px",
"z-index": "99999",
"box-shadow": "0 1px 3px rgba(0,0,0,0.1)"
};
/**
* CSS rules for the demo handle button
*
* @type Object
*/
var handle_css = {
"position": "fixed",
"top": "70px",
"right": "0",
"background": "#fff",
"border-radius": "5px 0px 0px 5px",
"padding": "10px 15px",
"font-size": "16px",
"z-index": "99999",
"cursor": "pointer",
"color": "#3c8dbc",
"box-shadow": "0 1px 3px rgba(0,0,0,0.1)"
};
//Create the handle
var demo = $("")
.css(handle_css)
.html("")
.addClass("no-print");
//Create the menu
var demo_settings = $("")
.css(menu_css)
.addClass("no-print");
demo_settings.append(
""
+ "Layout Options"
+ "
"
//Fixed layout
+ ""
//Boxed layout
+ ""
//Sidebar Toggle
+ ""
//Control Sidebar Toggle
+ ""
);
var skins_list = $("", {"class": 'list-unstyled'});
//Dark sidebar skins
var skin_blue =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Blue
");
skins_list.append(skin_blue);
var skin_black =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Black
");
skins_list.append(skin_black);
var skin_purple =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Purple
");
skins_list.append(skin_purple);
var skin_green =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Green
");
skins_list.append(skin_green);
var skin_red =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Red
");
skins_list.append(skin_red);
var skin_yellow =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Yellow
");
skins_list.append(skin_yellow);
//Light sidebar skins
var skin_blue_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Blue Light
");
skins_list.append(skin_blue_light);
var skin_black_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Black Light
");
skins_list.append(skin_black_light);
var skin_purple_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Purple Light
");
skins_list.append(skin_purple_light);
var skin_green_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Green Light
");
skins_list.append(skin_green_light);
var skin_red_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Red Light
");
skins_list.append(skin_red_light);
var skin_yellow_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "Yellow Light
");
skins_list.append(skin_yellow_light);
demo_settings.append("Skins
");
demo_settings.append(skins_list);
demo.click(function () {
if (!$(this).hasClass("open")) {
$(this).animate({"right": "250px"});
demo_settings.animate({"right": "0"});
$(this).addClass("open");
} else {
$(this).animate({"right": "0"});
demo_settings.animate({"right": "-250px"});
$(this).removeClass("open");
}
});
$("body").append(demo);
$("body").append(demo_settings);
setup();
/**
* Toggles layout classes
*
* @param String cls the layout class to toggle
* @returns void
*/
function change_layout(cls) {
$("body").toggleClass(cls);
$.AdminLTE.layout.fixSidebar();
}
/**
* Replaces the old skin with the new skin
* @param String cls the new skin class
* @returns Boolean false to prevent link's default action
*/
function change_skin(cls) {
$.each(my_skins, function (i) {
$("body").removeClass(my_skins[i]);
});
$("body").addClass(cls);
store('skin', cls);
return false;
}
/**
* Store a new settings in the browser
*
* @param String name Name of the setting
* @param String val Value of the setting
* @returns void
*/
function store(name, val) {
if (typeof (Storage) !== "undefined") {
localStorage.setItem(name, val);
} else {
alert('Please use a modern browser to properly view this template!');
}
}
/**
* Get a prestored setting
*
* @param String name Name of of the setting
* @returns String The value of the setting | null
*/
function get(name) {
if (typeof (Storage) !== "undefined") {
return localStorage.getItem(name);
} else {
alert('Please use a modern browser to properly view this template!');
}
}
/**
* Retrieve default settings and apply them to the template
*
* @returns void
*/
function setup() {
var tmp = get('skin');
if (tmp && $.inArray(tmp, my_skins))
change_skin(tmp);
//Add the change skin listener
$("[data-skin]").on('click', function (e) {
e.preventDefault();
change_skin($(this).data('skin'));
});
//Add the layout manager
$("[data-layout]").on('click', function () {
change_layout($(this).data('layout'));
});
$("[data-controlsidebar]").on('click', function () {
change_layout($(this).data('controlsidebar'));
var slide = !$.AdminLTE.options.controlSidebarOptions.slide;
$.AdminLTE.options.controlSidebarOptions.slide = slide;
if(!slide)
$('.control-sidebar').removeClass('control-sidebar-open');
});
}
})(jQuery);