demo.js
10 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
/**
* AdminLTE Demo Menu
* ------------------
* You should not use this file in production.
* This file is for demo purposes only.
*/
(function ($, AdminLTE) {
/**
* 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"
];
//Create the new tab
var tab_pane = $("<div />", {
"id": "control-sidebar-theme-demo-options-tab",
"class": "tab-pane active"
});
//Create the tab button
var tab_button = $("<li />", {"class": "active"})
.html("<a href='#control-sidebar-theme-demo-options-tab' data-toggle='tab'>"
+ "<i class='fa fa-wrench'></i>"
+ "</a>");
//Add the tab button to the right sidebar tabs
$("[href='#control-sidebar-home-tab']")
.parent()
.before(tab_button);
//Create the menu
var demo_settings = $("<div />");
//Layout options
demo_settings.append(
"<h4 class='control-sidebar-heading'>"
+ "Параметри макета"
+ "</h4>"
//Sidebar Toggle
+ "<div class='form-group'>"
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
+ "Перемкнути бічну панель"
+ "</label>"
+ "<p>Переключити стан лівій бічній панелі (відкрита або згорнута)</p>"
+ "</div>"
/* //Sidebar mini expand on hover toggle
+ "<div class='form-group'>"
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-enable='expandOnHover' class='pull-right'/> "
+ "Розширювати бічну панель при наведенні курсору миші"
+ "</label>"
+ "<p>Дозволити бічній панелі розширюватися при наведенні курсору миші</p>"
+ "</div>"*/
//Control Sidebar Toggle
+ "<div class='form-group'>"
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
+ "Переключити ковзання правій бічній панелі"
+ "</label>"
+ "<p>Переключити між ковзати по вмісту і натисненням ефектів вмісту</p>"
+ "</div>"
//Control Sidebar Skin Toggle
+ "<div class='form-group'>"
+ "<label class='control-sidebar-subheading'>"
+ "<input type='checkbox' data-sidebarskin='toggle' class='pull-right'/> "
+ "Переключити оболонку правій бічній панелі"
+ "</label>"
+ "<p>Переключити між темною і світлою оболонкою на правій бічній панелі</p>"
+ "</div>"
);
var skins_list = $("<ul />", {"class": 'list-unstyled clearfix'});
//Dark sidebar skins
var skin_blue =
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.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'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #DADADA;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px; background: #DADADA!important;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #67B73E;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #FFFFFF;'></span></div>"
+ "</a>"
+ "<p class='text-center no-margin' style='font-size: 12px;'>Стандартна</p>");
skins_list.append(skin_blue);
var skin_black =
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.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'>"
+ "<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: #DADADA;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #DADADA;'></span></div>"
+ "<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: #FFFFFF;'></span></div>"
+ "</a>"
+ "<p class='text-center no-margin'>Чорна</p>");
skins_list.append(skin_black);
var skin_purple_light =
$("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
.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'>"
+ "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #DADADA;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #DADADA;'></span></div>"
+ "<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>"
+ "</a>"
+ "<p class='text-center no-margin' style='font-size: 12px'>Біла</p>");
skins_list.append(skin_purple_light);
demo_settings.append("<h4 class='control-sidebar-heading'>Оболонки</h4>");
demo_settings.append(skins_list);
tab_pane.append(demo_settings);
$("#control-sidebar-home-tab").after(tab_pane);
setup();
/**
* Toggles layout classes
*
* @param String cls the layout class to toggle
* @returns void
*/
function change_layout(cls) {
$("body").toggleClass(cls);
AdminLTE.layout.fixSidebar();
//Fix the problem with right sidebar and layout boxed
if (cls == "layout-boxed")
AdminLTE.controlSidebar._fix($(".control-sidebar-bg"));
if ($('body').hasClass('fixed') && cls == 'fixed') {
AdminLTE.pushMenu.expandOnHover();
AdminLTE.controlSidebar._fixForFixed($('.control-sidebar'));
AdminLTE.layout.activate();
}
}
/**
* 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');
});
$("[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();
});
// Reset options
if($('body').hasClass('fixed')) {
$("[data-layout='fixed']").attr('checked', 'checked');
}
if($('body').hasClass('layout-boxed')) {
$("[data-layout='layout-boxed']").attr('checked', 'checked');
}
if($('body').hasClass('sidebar-collapse')) {
$("[data-layout='sidebar-collapse']").attr('checked', 'checked');
}
}
})(jQuery, $.AdminLTE);