//[Preview Menu Javascript] //Project: MinimalLite Admin - Responsive Admin Template //Primary use: This file is for demo purposes only. $(function () { 'use strict' /** * Get access to plugins */ $('[data-toggle="control-sidebar"]').controlSidebar() $('[data-toggle="push-menu"]').pushMenu() var $pushMenu = $('[data-toggle="push-menu"]').data('lte.pushmenu') var $controlSidebar = $('[data-toggle="control-sidebar"]').data('lte.controlsidebar') var $layout = $('body').data('lte.layout') /** * List of all the available skins * * @type Array */ var 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' ] /** * 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!') } } /** * 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!') } } /** * Toggles layout classes * * @param String cls the layout class to toggle * @returns void */ function changeLayout(cls) { $('body').toggleClass(cls) $layout.fixSidebar() if ($('body').hasClass('fixed') && cls == 'fixed') { $pushMenu.expandOnHover() $layout.activate() } $controlSidebar.fix() } /** * 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 changeSkin(cls) { $.each(mySkins, function (i) { $('body').removeClass(mySkins[i]) }) $('body').addClass(cls) store('skin', cls) return false } /** * Retrieve default settings and apply them to the template * * @returns void */ function setup() { var tmp = get('skin') if (tmp && $.inArray(tmp, mySkins)) changeSkin(tmp) // Add the change skin listener $('[data-skin]').on('click', function (e) { if ($(this).hasClass('knob')) return e.preventDefault() changeSkin($(this).data('skin')) }) // Add the layout manager $('[data-layout]').on('click', function () { changeLayout($(this).data('layout')); // alert(1); }) $('[data-controlsidebar]').on('click', function () { changeLayout($(this).data('controlsidebar')) var slide = !$controlSidebar.options.slide $controlSidebar.options.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) $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') } } // Create the new tab var $tabPane = $('
', { 'id' : 'control-sidebar-theme-demo-options-tab', 'class': 'tab-pane active' }) // Create the tab button var $tabButton = $('', { 'class': 'active nav-item' }) .html('' + '' + '') // Add the tab button to the right sidebar tabs $('[href="#control-sidebar-home-tab"]') .parent() .before($tabButton) // Create the menu var $demoSettings = $('') // Layout options $demoSettings.append( 'Blue
') $skinsList.append($skinBlue) var $skinBlack = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Black
') $skinsList.append($skinBlack) var $skinPurple = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Purple
') $skinsList.append($skinPurple) var $skinGreen = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Green
') $skinsList.append($skinGreen) var $skinRed = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Red
') $skinsList.append($skinRed) var $skinYellow = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Yellow
') $skinsList.append($skinYellow) // Light sidebar skins var $skinBlueLight = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Blue Light
') $skinsList.append($skinBlueLight) var $skinBlackLight = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Black Light
') $skinsList.append($skinBlackLight) var $skinPurpleLight = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Purple Light
') $skinsList.append($skinPurpleLight) var $skinGreenLight = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Green Light
') $skinsList.append($skinGreenLight) var $skinRedLight = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Red Light
') $skinsList.append($skinRedLight) var $skinYellowLight = $('', { style: 'float:left; width: 33.33333%; padding: 5px;' }) .append('' + 'Yellow Light
') $skinsList.append($skinYellowLight) $demoSettings.append('