AdminLTE/dist/js/demo.js

/**
 * 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);