327 lines
17 KiB
JavaScript
327 lines
17 KiB
JavaScript
/**
|
|
* AdminLTE Demo Menu
|
|
* ------------------
|
|
* You should not use this file in production.
|
|
* This file is for demo purposes only.
|
|
*/
|
|
(function ($, AdminLTE) {
|
|
|
|
'use strict'
|
|
|
|
/**
|
|
* 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 menu
|
|
var demo_settings = $('<div />', {
|
|
'class': 'p-3'
|
|
})
|
|
|
|
// Layout options
|
|
demo_settings.append(
|
|
'<h5 class=\'control-sidebar-heading\'>'
|
|
+ 'Layout Options'
|
|
+ '</h5>'
|
|
// Fixed layout
|
|
+ '<div class=\'form-check\'>'
|
|
+ '<label class=\'form-control-label d-block\'>'
|
|
+ '<input type=\'checkbox\' data-layout=\'fixed\' class=\'form-check-input float-xs-right\'/> '
|
|
+ 'Fixed layout'
|
|
+ '</label>'
|
|
+ '<small class=\'form-text\'>Activate the fixed layout. You can\'t use fixed and boxed layouts together</small>'
|
|
+ '</div>'
|
|
// Boxed layout
|
|
+ '<div class=\'form-group\'>'
|
|
+ '<label class=\'form-control-label d-block\'>'
|
|
+ '<input type=\'checkbox\' data-layout=\'layout-boxed\'class=\'float-xs-right\'/> '
|
|
+ 'Boxed Layout'
|
|
+ '</label>'
|
|
+ '<small class=\'form-text\'>Activate the boxed layout</small>'
|
|
+ '</div>'
|
|
// Sidebar Toggle
|
|
+ '<div class=\'form-group\'>'
|
|
+ '<label class=\'form-control-label d-block\'>'
|
|
+ '<input type=\'checkbox\' data-layout=\'sidebar-collapse\' class=\'float-xs-right\'/> '
|
|
+ 'Toggle Sidebar'
|
|
+ '</label>'
|
|
+ '<small class=\'form-text\'>Toggle the left sidebar\'s state (open or collapse)</small>'
|
|
+ '</div>'
|
|
// Sidebar mini expand on hover toggle
|
|
+ '<div class=\'form-group\'>'
|
|
+ '<label class=\'form-control-label d-block\'>'
|
|
+ '<input type=\'checkbox\' data-enable=\'expandOnHover\' class=\'float-xs-right\'/> '
|
|
+ 'Sidebar Expand on Hover'
|
|
+ '</label>'
|
|
+ '<small class=\'form-text\'>Let the sidebar mini expand on hover</small>'
|
|
+ '</div>'
|
|
// Control Sidebar Toggle
|
|
+ '<div class=\'form-group\'>'
|
|
+ '<label class=\'form-control-label d-block\'>'
|
|
+ '<input type=\'checkbox\' data-controlsidebar=\'control-sidebar-open\' class=\'float-xs-right\'/> '
|
|
+ 'Toggle Right Sidebar Slide'
|
|
+ '</label>'
|
|
+ '<small class=\'form-text\'>Toggle between slide over content and push content effects</small>'
|
|
+ '</div>'
|
|
// Control Sidebar Skin Toggle
|
|
+ '<div class=\'form-group\'>'
|
|
+ '<label class=\'form-control-label d-block\'>'
|
|
+ '<input type=\'checkbox\' data-sidebarskin=\'toggle\' class=\'float-xs-right\'/> '
|
|
+ 'Toggle Right Sidebar Skin'
|
|
+ '</label>'
|
|
+ '<small class=\'form-text\'>Toggle between dark and light skins for the right sidebar</small>'
|
|
+ '</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: #367fa9;\'></span><span class=\'bg-primary\' style=\'display:block; width: 80%; float: left; height: 7px;\'></span></div>'
|
|
+ '<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>'
|
|
+ '</a>'
|
|
+ '<p class=\'text-xs-center no-margin\'>Blue</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: #fefefe;\'></span><span style=\'display:block; width: 80%; float: left; height: 7px; background: #fefefe;\'></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: #f4f5f7;\'></span></div>'
|
|
+ '</a>'
|
|
+ '<p class=\'text-xs-center no-margin\'>Black</p>')
|
|
skins_list.append(skin_black)
|
|
var skin_purple =
|
|
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' })
|
|
.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\'>'
|
|
+ '<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>'
|
|
+ '<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>'
|
|
+ '</a>'
|
|
+ '<p class=\'text-xs-center no-margin\'>Purple</p>')
|
|
skins_list.append(skin_purple)
|
|
var skin_green =
|
|
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' })
|
|
.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\'>'
|
|
+ '<div><span style=\'display:block; width: 20%; float: left; height: 7px;\' class=\'bg-success-active\'></span><span class=\'bg-success\' style=\'display:block; width: 80%; float: left; height: 7px;\'></span></div>'
|
|
+ '<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>'
|
|
+ '</a>'
|
|
+ '<p class=\'text-xs-center no-margin\'>Green</p>')
|
|
skins_list.append(skin_green)
|
|
var skin_red =
|
|
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' })
|
|
.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\'>'
|
|
+ '<div><span style=\'display:block; width: 20%; float: left; height: 7px;\' class=\'bg-danger-active\'></span><span class=\'bg-danger\' style=\'display:block; width: 80%; float: left; height: 7px;\'></span></div>'
|
|
+ '<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>'
|
|
+ '</a>'
|
|
+ '<p class=\'text-xs-center no-margin\'>Red</p>')
|
|
skins_list.append(skin_red)
|
|
var skin_yellow =
|
|
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' })
|
|
.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\'>'
|
|
+ '<div><span style=\'display:block; width: 20%; float: left; height: 7px;\' class=\'bg-warning-active\'></span><span class=\'bg-warning\' style=\'display:block; width: 80%; float: left; height: 7px;\'></span></div>'
|
|
+ '<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>'
|
|
+ '</a>'
|
|
+ '<p class=\'text-xs-center no-margin\'>Yellow</p>')
|
|
skins_list.append(skin_yellow)
|
|
|
|
// Light sidebar skins
|
|
var skin_blue_light =
|
|
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' })
|
|
.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\'>'
|
|
+ '<div><span style=\'display:block; width: 20%; float: left; height: 7px; background: #367fa9;\'></span><span class=\'bg-primary\' style=\'display:block; width: 80%; float: left; height: 7px;\'></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-xs-center no-margin\' style=\'font-size: 12px\'>Blue Light</p>')
|
|
skins_list.append(skin_blue_light)
|
|
var skin_black_light =
|
|
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' })
|
|
.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\'>'
|
|
+ '<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>'
|
|
+ '<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-xs-center no-margin\' style=\'font-size: 12px\'>Black Light</p>')
|
|
skins_list.append(skin_black_light)
|
|
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;\' class=\'bg-purple-active\'></span><span class=\'bg-purple\' style=\'display:block; width: 80%; float: left; height: 7px;\'></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-xs-center no-margin\' style=\'font-size: 12px\'>Purple Light</p>')
|
|
skins_list.append(skin_purple_light)
|
|
var skin_green_light =
|
|
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' })
|
|
.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\'>'
|
|
+ '<div><span style=\'display:block; width: 20%; float: left; height: 7px;\' class=\'bg-success-active\'></span><span class=\'bg-success\' style=\'display:block; width: 80%; float: left; height: 7px;\'></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-xs-center no-margin\' style=\'font-size: 12px\'>Green Light</p>')
|
|
skins_list.append(skin_green_light)
|
|
var skin_red_light =
|
|
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' })
|
|
.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\'>'
|
|
+ '<div><span style=\'display:block; width: 20%; float: left; height: 7px;\' class=\'bg-danger-active\'></span><span class=\'bg-danger\' style=\'display:block; width: 80%; float: left; height: 7px;\'></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-xs-center no-margin\' style=\'font-size: 12px\'>Red Light</p>')
|
|
skins_list.append(skin_red_light)
|
|
var skin_yellow_light =
|
|
$('<li />', { style: 'float:left; width: 33.33333%; padding: 5px;' })
|
|
.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\'>'
|
|
+ '<div><span style=\'display:block; width: 20%; float: left; height: 7px;\' class=\'bg-warning-active\'></span><span class=\'bg-warning\' style=\'display:block; width: 80%; float: left; height: 7px;\'></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-xs-center no-margin\' style=\'font-size: 12px;\'>Yellow Light</p>')
|
|
skins_list.append(skin_yellow_light)
|
|
|
|
demo_settings.append('<h5 class=\'control-sidebar-heading\'>Skins</h5>')
|
|
demo_settings.append(skins_list)
|
|
|
|
$('.control-sidebar').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()
|
|
// 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.layout.activate()
|
|
}
|
|
AdminLTE.controlSidebar._fix($('.control-sidebar-bg'))
|
|
AdminLTE.controlSidebar._fix($('.control-sidebar'))
|
|
}
|
|
|
|
/**
|
|
* 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 {
|
|
window.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 {
|
|
window.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);
|