]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
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); |