13
setTimeout(function () {
14
if (window.___browserSync___ === undefined && Number(localStorage.getItem('AdminLTE:Demo:MessageShowed')) < Date.now()) {
15
localStorage.setItem('AdminLTE:Demo:MessageShowed', (Date.now()) + (15 * 60 * 1000))
17
alert('You load AdminLTE\'s "demo.js", \nthis file is only created for testing purposes!')
21
function capitalizeFirstLetter(string) {
22
return string.charAt(0).toUpperCase() + string.slice(1)
25
function createSkinBlock(colors, callback, noneSelected) {
26
var $block = $('<select />', {
27
class: noneSelected ? 'custom-select mb-3 border-0' : 'custom-select mb-3 text-light border-0 ' + colors[0].replace(/accent-|navbar-/, 'bg-')
31
var $default = $('<option />', {
35
$block.append($default)
38
colors.forEach(function (color) {
39
var $color = $('<option />', {
40
class: (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-'),
41
text: capitalizeFirstLetter((typeof color === 'object' ? color.join(' ') : color).replace(/navbar-|accent-|bg-/, '').replace('-', ' '))
47
$block.on('change', callback)
53
var $sidebar = $('.control-sidebar')
54
var $container = $('<div />', {
55
class: 'p-3 control-sidebar-content'
58
$sidebar.append($container)
63
'<h5>Customize AdminLTE</h5><hr class="mb-2"/>'
66
var $dark_mode_checkbox = $('<input />', {
69
checked: $('body').hasClass('dark-mode'),
71
}).on('click', function () {
72
if ($(this).is(':checked')) {
73
$('body').addClass('dark-mode')
75
$('body').removeClass('dark-mode')
78
var $dark_mode_container = $('<div />', { class: 'mb-4' }).append($dark_mode_checkbox).append('<span>Dark Mode</span>')
79
$container.append($dark_mode_container)
81
$container.append('<h6>Header Options</h6>')
82
var $header_fixed_checkbox = $('<input />', {
85
checked: $('body').hasClass('layout-navbar-fixed'),
87
}).on('click', function () {
88
if ($(this).is(':checked')) {
89
$('body').addClass('layout-navbar-fixed')
91
$('body').removeClass('layout-navbar-fixed')
94
var $header_fixed_container = $('<div />', { class: 'mb-1' }).append($header_fixed_checkbox).append('<span>Fixed</span>')
95
$container.append($header_fixed_container)
97
var $dropdown_legacy_offset_checkbox = $('<input />', {
100
checked: $('.main-header').hasClass('dropdown-legacy'),
102
}).on('click', function () {
103
if ($(this).is(':checked')) {
104
$('.main-header').addClass('dropdown-legacy')
106
$('.main-header').removeClass('dropdown-legacy')
109
var $dropdown_legacy_offset_container = $('<div />', { class: 'mb-1' }).append($dropdown_legacy_offset_checkbox).append('<span>Dropdown Legacy Offset</span>')
110
$container.append($dropdown_legacy_offset_container)
112
var $no_border_checkbox = $('<input />', {
115
checked: $('.main-header').hasClass('border-bottom-0'),
117
}).on('click', function () {
118
if ($(this).is(':checked')) {
119
$('.main-header').addClass('border-bottom-0')
121
$('.main-header').removeClass('border-bottom-0')
124
var $no_border_container = $('<div />', { class: 'mb-4' }).append($no_border_checkbox).append('<span>No border</span>')
125
$container.append($no_border_container)
127
$container.append('<h6>Sidebar Options</h6>')
129
var $sidebar_collapsed_checkbox = $('<input />', {
132
checked: $('body').hasClass('sidebar-collapse'),
134
}).on('click', function () {
135
if ($(this).is(':checked')) {
136
$('body').addClass('sidebar-collapse')
137
$(window).trigger('resize')
139
$('body').removeClass('sidebar-collapse')
140
$(window).trigger('resize')
143
var $sidebar_collapsed_container = $('<div />', { class: 'mb-1' }).append($sidebar_collapsed_checkbox).append('<span>Collapsed</span>')
144
$container.append($sidebar_collapsed_container)
146
$(document).on('collapsed.lte.pushmenu', '[data-widget="pushmenu"]', function () {
147
$sidebar_collapsed_checkbox.prop('checked', true)
149
$(document).on('shown.lte.pushmenu', '[data-widget="pushmenu"]', function () {
150
$sidebar_collapsed_checkbox.prop('checked', false)
153
var $sidebar_fixed_checkbox = $('<input />', {
156
checked: $('body').hasClass('layout-fixed'),
158
}).on('click', function () {
159
if ($(this).is(':checked')) {
160
$('body').addClass('layout-fixed')
161
$(window).trigger('resize')
163
$('body').removeClass('layout-fixed')
164
$(window).trigger('resize')
167
var $sidebar_fixed_container = $('<div />', { class: 'mb-1' }).append($sidebar_fixed_checkbox).append('<span>Fixed</span>')
168
$container.append($sidebar_fixed_container)
170
var $sidebar_mini_checkbox = $('<input />', {
173
checked: $('body').hasClass('sidebar-mini'),
175
}).on('click', function () {
176
if ($(this).is(':checked')) {
177
$('body').addClass('sidebar-mini')
179
$('body').removeClass('sidebar-mini')
182
var $sidebar_mini_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_checkbox).append('<span>Sidebar Mini</span>')
183
$container.append($sidebar_mini_container)
185
var $sidebar_mini_md_checkbox = $('<input />', {
188
checked: $('body').hasClass('sidebar-mini-md'),
190
}).on('click', function () {
191
if ($(this).is(':checked')) {
192
$('body').addClass('sidebar-mini-md')
194
$('body').removeClass('sidebar-mini-md')
197
var $sidebar_mini_md_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_md_checkbox).append('<span>Sidebar Mini MD</span>')
198
$container.append($sidebar_mini_md_container)
200
var $sidebar_mini_xs_checkbox = $('<input />', {
203
checked: $('body').hasClass('sidebar-mini-xs'),
205
}).on('click', function () {
206
if ($(this).is(':checked')) {
207
$('body').addClass('sidebar-mini-xs')
209
$('body').removeClass('sidebar-mini-xs')
212
var $sidebar_mini_xs_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_xs_checkbox).append('<span>Sidebar Mini XS</span>')
213
$container.append($sidebar_mini_xs_container)
215
var $flat_sidebar_checkbox = $('<input />', {
218
checked: $('.nav-sidebar').hasClass('nav-flat'),
220
}).on('click', function () {
221
if ($(this).is(':checked')) {
222
$('.nav-sidebar').addClass('nav-flat')
224
$('.nav-sidebar').removeClass('nav-flat')
227
var $flat_sidebar_container = $('<div />', { class: 'mb-1' }).append($flat_sidebar_checkbox).append('<span>Nav Flat Style</span>')
228
$container.append($flat_sidebar_container)
230
var $legacy_sidebar_checkbox = $('<input />', {
233
checked: $('.nav-sidebar').hasClass('nav-legacy'),
235
}).on('click', function () {
236
if ($(this).is(':checked')) {
237
$('.nav-sidebar').addClass('nav-legacy')
239
$('.nav-sidebar').removeClass('nav-legacy')
242
var $legacy_sidebar_container = $('<div />', { class: 'mb-1' }).append($legacy_sidebar_checkbox).append('<span>Nav Legacy Style</span>')
243
$container.append($legacy_sidebar_container)
245
var $compact_sidebar_checkbox = $('<input />', {
248
checked: $('.nav-sidebar').hasClass('nav-compact'),
250
}).on('click', function () {
251
if ($(this).is(':checked')) {
252
$('.nav-sidebar').addClass('nav-compact')
254
$('.nav-sidebar').removeClass('nav-compact')
257
var $compact_sidebar_container = $('<div />', { class: 'mb-1' }).append($compact_sidebar_checkbox).append('<span>Nav Compact</span>')
258
$container.append($compact_sidebar_container)
260
var $child_indent_sidebar_checkbox = $('<input />', {
263
checked: $('.nav-sidebar').hasClass('nav-child-indent'),
265
}).on('click', function () {
266
if ($(this).is(':checked')) {
267
$('.nav-sidebar').addClass('nav-child-indent')
269
$('.nav-sidebar').removeClass('nav-child-indent')
272
var $child_indent_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_indent_sidebar_checkbox).append('<span>Nav Child Indent</span>')
273
$container.append($child_indent_sidebar_container)
275
var $child_hide_sidebar_checkbox = $('<input />', {
278
checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'),
280
}).on('click', function () {
281
if ($(this).is(':checked')) {
282
$('.nav-sidebar').addClass('nav-collapse-hide-child')
284
$('.nav-sidebar').removeClass('nav-collapse-hide-child')
287
var $child_hide_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('<span>Nav Child Hide on Collapse</span>')
288
$container.append($child_hide_sidebar_container)
290
var $no_expand_sidebar_checkbox = $('<input />', {
293
checked: $('.main-sidebar').hasClass('sidebar-no-expand'),
295
}).on('click', function () {
296
if ($(this).is(':checked')) {
297
$('.main-sidebar').addClass('sidebar-no-expand')
299
$('.main-sidebar').removeClass('sidebar-no-expand')
302
var $no_expand_sidebar_container = $('<div />', { class: 'mb-4' }).append($no_expand_sidebar_checkbox).append('<span>Disable Hover/Focus Auto-Expand</span>')
303
$container.append($no_expand_sidebar_container)
305
$container.append('<h6>Footer Options</h6>')
306
var $footer_fixed_checkbox = $('<input />', {
309
checked: $('body').hasClass('layout-footer-fixed'),
311
}).on('click', function () {
312
if ($(this).is(':checked')) {
313
$('body').addClass('layout-footer-fixed')
315
$('body').removeClass('layout-footer-fixed')
318
var $footer_fixed_container = $('<div />', { class: 'mb-4' }).append($footer_fixed_checkbox).append('<span>Fixed</span>')
319
$container.append($footer_fixed_container)
321
$container.append('<h6>Small Text Options</h6>')
323
var $text_sm_body_checkbox = $('<input />', {
326
checked: $('body').hasClass('text-sm'),
328
}).on('click', function () {
329
if ($(this).is(':checked')) {
330
$('body').addClass('text-sm')
332
$('body').removeClass('text-sm')
335
var $text_sm_body_container = $('<div />', { class: 'mb-1' }).append($text_sm_body_checkbox).append('<span>Body</span>')
336
$container.append($text_sm_body_container)
338
var $text_sm_header_checkbox = $('<input />', {
341
checked: $('.main-header').hasClass('text-sm'),
343
}).on('click', function () {
344
if ($(this).is(':checked')) {
345
$('.main-header').addClass('text-sm')
347
$('.main-header').removeClass('text-sm')
350
var $text_sm_header_container = $('<div />', { class: 'mb-1' }).append($text_sm_header_checkbox).append('<span>Navbar</span>')
351
$container.append($text_sm_header_container)
353
var $text_sm_brand_checkbox = $('<input />', {
356
checked: $('.brand-link').hasClass('text-sm'),
358
}).on('click', function () {
359
if ($(this).is(':checked')) {
360
$('.brand-link').addClass('text-sm')
362
$('.brand-link').removeClass('text-sm')
365
var $text_sm_brand_container = $('<div />', { class: 'mb-1' }).append($text_sm_brand_checkbox).append('<span>Brand</span>')
366
$container.append($text_sm_brand_container)
368
var $text_sm_sidebar_checkbox = $('<input />', {
371
checked: $('.nav-sidebar').hasClass('text-sm'),
373
}).on('click', function () {
374
if ($(this).is(':checked')) {
375
$('.nav-sidebar').addClass('text-sm')
377
$('.nav-sidebar').removeClass('text-sm')
380
var $text_sm_sidebar_container = $('<div />', { class: 'mb-1' }).append($text_sm_sidebar_checkbox).append('<span>Sidebar Nav</span>')
381
$container.append($text_sm_sidebar_container)
383
var $text_sm_footer_checkbox = $('<input />', {
386
checked: $('.main-footer').hasClass('text-sm'),
388
}).on('click', function () {
389
if ($(this).is(':checked')) {
390
$('.main-footer').addClass('text-sm')
392
$('.main-footer').removeClass('text-sm')
395
var $text_sm_footer_container = $('<div />', { class: 'mb-4' }).append($text_sm_footer_checkbox).append('<span>Footer</span>')
396
$container.append($text_sm_footer_container)
400
var navbar_dark_skins = [
418
var navbar_light_skins = [
425
var sidebar_colors = [
444
var accent_colors = [
463
var sidebar_skins = [
464
'sidebar-dark-primary',
465
'sidebar-dark-warning',
467
'sidebar-dark-danger',
468
'sidebar-dark-success',
469
'sidebar-dark-indigo',
470
'sidebar-dark-lightblue',
472
'sidebar-dark-purple',
473
'sidebar-dark-fuchsia',
475
'sidebar-dark-maroon',
476
'sidebar-dark-orange',
479
'sidebar-dark-olive',
480
'sidebar-light-primary',
481
'sidebar-light-warning',
482
'sidebar-light-info',
483
'sidebar-light-danger',
484
'sidebar-light-success',
485
'sidebar-light-indigo',
486
'sidebar-light-lightblue',
487
'sidebar-light-navy',
488
'sidebar-light-purple',
489
'sidebar-light-fuchsia',
490
'sidebar-light-pink',
491
'sidebar-light-maroon',
492
'sidebar-light-orange',
493
'sidebar-light-lime',
494
'sidebar-light-teal',
495
'sidebar-light-olive'
500
$container.append('<h6>Navbar Variants</h6>')
502
var $navbar_variants = $('<div />', {
505
var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins)
506
var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function () {
507
var color = $(this).find('option:selected').attr('class')
508
var $main_header = $('.main-header')
509
$main_header.removeClass('navbar-dark').removeClass('navbar-light')
510
navbar_all_colors.forEach(function (color) {
511
$main_header.removeClass(color)
514
$(this).removeClass().addClass('custom-select mb-3 text-light border-0 ')
516
if (navbar_dark_skins.indexOf(color) > -1) {
517
$main_header.addClass('navbar-dark')
518
$(this).addClass(color).addClass('text-light')
520
$main_header.addClass('navbar-light')
521
$(this).addClass(color)
524
$main_header.addClass(color)
527
var active_navbar_color = null
528
$('.main-header')[0].classList.forEach(function (className) {
529
if (navbar_all_colors.indexOf(className) > -1 && active_navbar_color === null) {
530
active_navbar_color = className.replace('navbar-', 'bg-')
534
$navbar_variants_colors.find('option.' + active_navbar_color).prop('selected', true)
535
$navbar_variants_colors.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_navbar_color)
537
$navbar_variants.append($navbar_variants_colors)
539
$container.append($navbar_variants)
543
$container.append('<h6>Accent Color Variants</h6>')
544
var $accent_variants = $('<div />', {
547
$container.append($accent_variants)
548
$container.append(createSkinBlock(accent_colors, function () {
549
var color = $(this).find('option:selected').attr('class')
550
var $body = $('body')
551
accent_colors.forEach(function (skin) {
552
$body.removeClass(skin)
555
var accent_color_class = color.replace('bg-', 'accent-')
557
$body.addClass(accent_color_class)
560
var active_accent_color = null
561
$('body')[0].classList.forEach(function (className) {
562
if (accent_colors.indexOf(className) > -1 && active_accent_color === null) {
563
active_accent_color = className.replace('navbar-', 'bg-')
570
$container.append('<h6>Dark Sidebar Variants</h6>')
571
var $sidebar_variants_dark = $('<div />', {
574
$container.append($sidebar_variants_dark)
575
var $sidebar_dark_variants = createSkinBlock(sidebar_colors, function () {
576
var color = $(this).find('option:selected').attr('class')
577
var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '')
578
var $sidebar = $('.main-sidebar')
579
sidebar_skins.forEach(function (skin) {
580
$sidebar.removeClass(skin)
581
$sidebar_light_variants.removeClass(skin.replace('sidebar-dark-', 'bg-')).removeClass('text-light')
584
$(this).removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color)
586
$sidebar_light_variants.find('option').prop('selected', false)
587
$sidebar.addClass(sidebar_class)
588
$('.sidebar').removeClass('os-theme-dark').addClass('os-theme-light')
590
$container.append($sidebar_dark_variants)
592
var active_sidebar_dark_color = null
593
$('.main-sidebar')[0].classList.forEach(function (className) {
594
var color = className.replace('sidebar-dark-', 'bg-')
595
if (sidebar_colors.indexOf(color) > -1 && active_sidebar_dark_color === null) {
596
active_sidebar_dark_color = color
600
$sidebar_dark_variants.find('option.' + active_sidebar_dark_color).prop('selected', true)
601
$sidebar_dark_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_dark_color)
603
$container.append('<h6>Light Sidebar Variants</h6>')
604
var $sidebar_variants_light = $('<div />', {
607
$container.append($sidebar_variants_light)
608
var $sidebar_light_variants = createSkinBlock(sidebar_colors, function () {
609
var color = $(this).find('option:selected').attr('class')
610
var sidebar_class = 'sidebar-light-' + color.replace('bg-', '')
611
var $sidebar = $('.main-sidebar')
612
sidebar_skins.forEach(function (skin) {
613
$sidebar.removeClass(skin)
614
$sidebar_dark_variants.removeClass(skin.replace('sidebar-light-', 'bg-')).removeClass('text-light')
617
$(this).removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color)
619
$sidebar_dark_variants.find('option').prop('selected', false)
620
$sidebar.addClass(sidebar_class)
621
$('.sidebar').removeClass('os-theme-light').addClass('os-theme-dark')
623
$container.append($sidebar_light_variants)
625
var active_sidebar_light_color = null
626
$('.main-sidebar')[0].classList.forEach(function (className) {
627
var color = className.replace('sidebar-light-', 'bg-')
628
if (sidebar_colors.indexOf(color) > -1 && active_sidebar_light_color === null) {
629
active_sidebar_light_color = color
633
if (active_sidebar_light_color !== null) {
634
$sidebar_light_variants.find('option.' + active_sidebar_light_color).prop('selected', true)
635
$sidebar_light_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_light_color)
638
var logo_skins = navbar_all_colors
639
$container.append('<h6>Brand Logo Variants</h6>')
640
var $logo_variants = $('<div />', {
643
$container.append($logo_variants)
644
var $clear_btn = $('<a />', {
646
}).text('clear').on('click', function (e) {
648
var $logo = $('.brand-link')
649
logo_skins.forEach(function (skin) {
650
$logo.removeClass(skin)
654
var $brand_variants = createSkinBlock(logo_skins, function () {
655
var color = $(this).find('option:selected').attr('class')
656
var $logo = $('.brand-link')
658
if (color === 'navbar-light' || color === 'navbar-white') {
659
$logo.addClass('text-black')
661
$logo.removeClass('text-black')
664
logo_skins.forEach(function (skin) {
665
$logo.removeClass(skin)
669
$(this).removeClass().addClass('custom-select mb-3 border-0').addClass(color).addClass(color !== 'navbar-light' && color !== 'navbar-white' ? 'text-light' : '')
671
$(this).removeClass().addClass('custom-select mb-3 border-0')
674
$logo.addClass(color)
675
}, true).append($clear_btn)
676
$container.append($brand_variants)
678
var active_brand_color = null
679
$('.brand-link')[0].classList.forEach(function (className) {
680
if (logo_skins.indexOf(className) > -1 && active_brand_color === null) {
681
active_brand_color = className.replace('navbar-', 'bg-')
685
if (active_brand_color) {
686
$brand_variants.find('option.' + active_brand_color).prop('selected', true)
687
$brand_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_brand_color)