define(['jquery', 'sent', 'adminlte'], function($, sent, AdminLTE){
//Create the new tab
var tab_pane = $("", {
"id": "control-sidebar-theme-demo-options-tab",
"class": "tab-pane active"
});
//Create the tab button
var tab_button = $("", {"class": "active"})
.html(""
+ ""
+ "");
//Create the menu
var demo_settings = $("");
//Layout options
demo_settings.append(
""
//Fixed layout
+ ""
+ ""
+ "
"
//Boxed layout
+ ""
+ ""
+ "
"
//Sidebar Toggle
+ ""
+ ""
+ "
"
//Sidebar mini expand on hover toggle
+ ""
+ ""
+ "
"
//Control Sidebar Skin Toggle
+ ""
+ ""
+ "
"
);
var skins_list = $("", {"class": 'list-unstyled clearfix'});
//Dark sidebar skins
var skin_blue =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "蓝色
");
skins_list.append(skin_blue);
var skin_black =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "黑色
");
skins_list.append(skin_black);
var skin_purple =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "紫色
");
skins_list.append(skin_purple);
var skin_green =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "绿色
");
skins_list.append(skin_green);
var skin_red =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "红色
");
skins_list.append(skin_red);
var skin_yellow =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "黄色
");
skins_list.append(skin_yellow);
//Light sidebar skins
var skin_blue_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "亮蓝
");
skins_list.append(skin_blue_light);
var skin_black_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "亮
");
skins_list.append(skin_black_light);
var skin_purple_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "亮紫
");
skins_list.append(skin_purple_light);
var skin_green_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "亮绿
");
skins_list.append(skin_green_light);
var skin_red_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "亮红
");
skins_list.append(skin_red_light);
var skin_yellow_light =
$("", {style: "float:left; width: 33.33333%; padding: 5px;"})
.append(""
+ "
"
+ "
"
+ ""
+ "亮黄
");
skins_list.append(skin_yellow_light);
demo_settings.append("");
demo_settings.append(skins_list);
tab_pane.append(demo_settings);
$("#control-sidebar-content").append(tab_pane);
var backend = {
/**
* List of all the available skins
*
* @type Array
*/
mySkins: ['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'],
change_layout: function(){
layout = sent.store.get({name: 'layout'}) || [{name: 'fixed', value: false}, {name: 'layout-boxed', value: false}, {name: 'sidebar-collapse', value: false}];
if (typeof(layout) == 'string'){ return false; }
for (i in layout) {
var item = layout[i];
if (item.value) {
$("[data-layout='"+item.name+"']").attr('checked', 'checked');
$("body").hasClass(item.name) || $("body").addClass(item.name);
if ($('body').hasClass('fixed') && item.name == 'fixed') {
AdminLTE.pushMenu.expandOnHover();
AdminLTE.layout.activate();
}
}else{
$("body").removeClass(item.name);
}
}
AdminLTE.layout.fixSidebar();
},
change_skin: function(cls){
$.each(backend.mySkins, function (i) {
$('body').removeClass(backend.mySkins[i])
})
$('body').addClass(cls)
sent.store.set({name:'skin', content:cls})
return false
},
init: function(){
var skin = sent.store.get({name:'skin'});
if (skin && $.inArray(skin, backend.my_skins))
backend.change_skin(skin);
//Add the change skin listener
$("[data-skin]").on('click', function (e) {
if($(this).hasClass('knob'))
return;
e.preventDefault();
backend.change_skin($(this).data('skin'));
});
backend.change_layout();
//Add the layout manager
$("[data-layout]").on('click', function () {
var layout = [];
$("[data-layout]").each(function(i, item){
layout.push({name:$(item).data('layout'), value: $(item).is(':checked')})
})
sent.store.set({name:'layout', content: layout});
backend.change_layout();
});
$("[data-sidebarskin='toggle']").on('click', function () {
var sidebar = $(".control-sidebar");
if (sidebar.hasClass("control-sidebar-dark")) {
sidebar.removeClass("control-sidebar-dark")
sidebar.addClass("control-sidebar-light")
} else {
sidebar.removeClass("control-sidebar-light")
sidebar.addClass("control-sidebar-dark")
}
});
$("[data-enable='expandOnHover']").on('click', function () {
$(this).attr('disabled', true);
AdminLTE.pushMenu.expandOnHover();
if (!$('body').hasClass('sidebar-collapse'))
$("[data-layout='sidebar-collapse']").click();
});
if ($('.editable').size() > 0) {
require(['bootstrap-editable'], function(){
$.fn.editable.defaults.mode = 'popup';
$('.editable').editable();
})
}
}
}
backend.init();
return backend;
})