1#@!#!123s

32767 1#@!#!123s
: / home / rakcha / public_html / user / js /
Filename : demo.js
back
//[Preview Menu Javascript]



//Project:	Maximum Admin - Responsive Admin Template

//Version:	1.1.0

//Last change:	11/09/2017

//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'

  ]



  /**

   * 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'))

    })



    $('[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 = $('<div />', {

    'id'   : 'control-sidebar-theme-demo-options-tab',

    'class': 'tab-pane active'

  })



  // Create the tab button

  var $tabButton = $('<li />', { 'class': 'active nav-item' })

    .html('<a href=\'#control-sidebar-theme-demo-options-tab\' data-toggle=\'tab\'>'

      + '<i class="fa fa-wrench"></i>'

      + '</a>')



  // Add the tab button to the right sidebar tabs

  $('[href="#control-sidebar-home-tab"]')

    .parent()

    .before($tabButton)



  // Create the menu

  var $demoSettings = $('<div />')



  // Layout options

  $demoSettings.append(

    '<h4 class="control-sidebar-heading">'

    + 'Layout Options'

    + '</h4>'

    // Fixed layout

    + '<div class="form-group">'    

    + '<input id="layout_fixed" type="checkbox"data-layout="fixed" class="pull-right chk-col-grey"/> '

	+ '<label for="layout_fixed" class="control-sidebar-subheading">'

    + 'Fixed layout'

    + '</label>'

    + '<p>Activate the fixed layout. You can\'t use fixed and boxed layouts together</p>'

    + '</div>'

    // Boxed layout

	+ '<div class="form-group">'    

    + '<input id="layout_boxed" type="checkbox"data-layout="layout-boxed" class="pull-right chk-col-grey"/> '

	+ '<label for="layout_boxed" class="control-sidebar-subheading">'

    + 'Boxed Layout'

    + '</label>'

    + '<p>Activate the boxed layout</p>'

    + '</div>'

    // Sidebar Toggle

	+ '<div class="form-group">'    

    + '<input id="toggle_sidebar" type="checkbox"data-layout="sidebar-collapse" class="pull-right chk-col-grey"/> '

	+ '<label for="toggle_sidebar" class="control-sidebar-subheading">'

    + 'Toggle Sidebar'

    + '</label>'

    + '<p>Toggle the left sidebar\'s state (open or collapse)</p>'

    + '</div>'

    // Control Sidebar Toggle

	+ '<div class="form-group">'    

    + '<input id="toggle_right_sidebar" type="checkbox"data-controlsidebar="control-sidebar-open" class="pull-right chk-col-grey"/> '

	+ '<label for="toggle_right_sidebar" class="control-sidebar-subheading">'

    + 'Toggle Right Sidebar Slide'

    + '</label>'

    + '<p>Toggle between slide over content and push content effects</p>'

    + '</div>'	

    // Control Sidebar Skin Toggle

	+ '<div class="form-group">'    

    + '<input id="toggle_right_sidebar_skin" type="checkbox"data-sidebarskin="toggle" class="pull-right chk-col-grey"/> '

	+ '<label for="toggle_right_sidebar_skin" class="control-sidebar-subheading">'

    + 'Toggle Right Sidebar Skin'

    + '</label>'

    + '<p>Toggle between dark and light skins for the right sidebar</p>'

    + '</div>'

  )

  var $skinsList = $('<ul />', { 'class': 'list-unstyled clearfix' })



  // Dark sidebar skins

  var $skinBlue =

        $('<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:#1c81d9"></span><span style="display:block; width: 80%; float: left; height: 7px; background:#389af0;"></span></div>'

            + '<div><span style="display:block; width: 20%; float: left; height: 20px; background: #ffffff"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #eef5f9"></span></div>'

            + '</a>'

            + '<p class="text-center no-margin">Blue</p>')

  $skinsList.append($skinBlue)

  var $skinBlack =

        $('<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: #313131"></span><span style="display:block; width: 80%; float: left; height: 7px; background: #232323"></span></div>'

            + '<div><span style="display:block; width: 20%; float: left; height: 20px; background: #ffffff"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #eef5f9"></span></div>'

            + '</a>'

            + '<p class="text-center no-margin">Black</p>')

  $skinsList.append($skinBlack)

  var $skinPurple =

        $('<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; background: #614ed3" ></span><span style="display:block; width: 80%; float: left; height: 7px; background: #7460ee"></span></div>'

            + '<div><span style="display:block; width: 20%; float: left; height: 20px; background: #ffffff"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #eef5f9"></span></div>'

            + '</a>'

            + '<p class="text-center no-margin">Purple</p>')

  $skinsList.append($skinPurple)

  var $skinGreen =

        $('<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; background: #17acbf" ></span><span style="display:block; width: 80%; float: left; height: 7px; background: #26C6DA"></span></div>'

            + '<div><span style="display:block; width: 20%; float: left; height: 20px; background: #ffffff"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #eef5f9"></span></div>'

            + '</a>'

            + '<p class="text-center no-margin">Green</p>')

  $skinsList.append($skinGreen)

  var $skinRed =

        $('<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; background: #e03656" ></span><span style="display:block; width: 80%; float: left; height: 7px; background: #fc4b6c"></span></div>'

            + '<div><span style="display:block; width: 20%; float: left; height: 20px; background: #ffffff"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #eef5f9"></span></div>'

            + '</a>'

            + '<p class="text-center no-margin">Red</p>')

  $skinsList.append($skinRed)

  var $skinYellow =

        $('<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; background: #eba11f" ></span><span style="display:block; width: 80%; float: left; height: 7px; background: #ffb22b"></span></div>'

            + '<div><span style="display:block; width: 20%; float: left; height: 20px; background: #ffffff"></span><span style="display:block; width: 80%; float: left; height: 20px; background: #eef5f9"></span></div>'

            + '</a>'

            + '<p class="text-center no-margin">Yellow</p>')

  $skinsList.append($skinYellow)



  



  $demoSettings.append('<h4 class="control-sidebar-heading">Skins</h4>')

  $demoSettings.append($skinsList)



  $tabPane.append($demoSettings)

  $('#control-sidebar-home-tab').after($tabPane)



  setup()



  $('[data-toggle="tooltip"]').tooltip()

});// End of use strict