diff --git a/dist/js/demo.js b/dist/js/demo.js index b18b9bb3f..af6e13372 100644 --- a/dist/js/demo.js +++ b/dist/js/demo.js @@ -6,245 +6,40 @@ */ (function ($, AdminLTE) { - "use strict"; + '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" + 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' ]; - //Create the new tab - var tab_pane = $("
", { - "id": "control-sidebar-theme-demo-options-tab", - "class": "tab-pane active" - }); - - //Create the tab button - var tab_button = $("
  • ", {"class": "active"}) - .html("" - + "" - + ""); - - //Add the tab button to the right sidebar tabs - $("[href='#control-sidebar-home-tab']") - .parent() - .before(tab_button); - - //Create the menu - var demo_settings = $("
    "); - - //Layout options - demo_settings.append( - "

    " - + "Layout Options" - + "

    " - //Fixed layout - + "
    " - + "" - + "

    Activate the fixed layout. You can't use fixed and boxed layouts together

    " - + "
    " - //Boxed layout - + "
    " - + "" - + "

    Activate the boxed layout

    " - + "
    " - //Sidebar Toggle - + "
    " - + "" - + "

    Toggle the left sidebar's state (open or collapse)

    " - + "
    " - //Sidebar mini expand on hover toggle - + "
    " - + "" - + "

    Let the sidebar mini expand on hover

    " - + "
    " - //Control Sidebar Toggle - + "
    " - + "" - + "

    Toggle between slide over content and push content effects

    " - + "
    " - //Control Sidebar Skin Toggle - + "
    " - + "" - + "

    Toggle between dark and light skins for the right sidebar

    " - + "
    " - ); - var skins_list = $("
      ", {"class": 'list-unstyled clearfix'}); - - //Dark sidebar skins - var skin_blue = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Blue

      "); - skins_list.append(skin_blue); - var skin_black = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Black

      "); - skins_list.append(skin_black); - var skin_purple = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Purple

      "); - skins_list.append(skin_purple); - var skin_green = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Green

      "); - skins_list.append(skin_green); - var skin_red = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Red

      "); - skins_list.append(skin_red); - var skin_yellow = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Yellow

      "); - skins_list.append(skin_yellow); - - //Light sidebar skins - var skin_blue_light = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Blue Light

      "); - skins_list.append(skin_blue_light); - var skin_black_light = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Black Light

      "); - skins_list.append(skin_black_light); - var skin_purple_light = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Purple Light

      "); - skins_list.append(skin_purple_light); - var skin_green_light = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Green Light

      "); - skins_list.append(skin_green_light); - var skin_red_light = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Red Light

      "); - skins_list.append(skin_red_light); - var skin_yellow_light = - $("
    • ", {style: "float:left; width: 33.33333%; padding: 5px;"}) - .append("" - + "
      " - + "
      " - + "      " - + "

      Yellow Light

      "); - skins_list.append(skin_yellow_light); - - demo_settings.append("

      Skins

      "); - demo_settings.append(skins_list); - - tab_pane.append(demo_settings); - $("#control-sidebar-home-tab").after(tab_pane); - - setup(); - /** - * Toggles layout classes + * Get a prestored setting * - * @param String cls the layout class to toggle - * @returns void + * @param String name Name of of the setting + * @returns String The value of the setting | null */ - 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(); + function get(name) { + if (typeof (Storage) !== 'undefined') { + return localStorage.getItem(name); + } else { + window.alert('Please use a modern browser to properly view this template!'); } - 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; } /** @@ -255,7 +50,7 @@ * @returns void */ function store(name, val) { - if (typeof (Storage) !== "undefined") { + if (typeof (Storage) !== 'undefined') { localStorage.setItem(name, val); } else { window.alert('Please use a modern browser to properly view this template!'); @@ -263,17 +58,38 @@ } /** - * Get a prestored setting + * Toggles layout classes * - * @param String name Name of of the setting - * @returns String The value of the setting | null + * @param String cls the layout class to toggle + * @returns void */ - function get(name) { - if (typeof (Storage) !== "undefined") { - return localStorage.getItem(name); - } else { - window.alert('Please use a modern browser to properly view this template!'); + function changeLayout(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 changeSkin(cls) { + $.each(mySkins, function (i) { + $('body').removeClass(mySkins[i]); + }); + + $('body').addClass(cls); + store('skin', cls); + return false; } /** @@ -283,58 +99,242 @@ */ function setup() { var tmp = get('skin'); - if (tmp && $.inArray(tmp, my_skins)) - change_skin(tmp); + if (tmp && $.inArray(tmp, mySkins)) + changeSkin(tmp); - //Add the change skin listener - $("[data-skin]").on('click', function (e) { - if($(this).hasClass('knob')) + // Add the change skin listener + $('[data-skin]').on('click', function (e) { + if ($(this).hasClass('knob')) return; e.preventDefault(); - change_skin($(this).data('skin')); + changeSkin($(this).data('skin')); }); - //Add the layout manager - $("[data-layout]").on('click', function () { - change_layout($(this).data('layout')); + // Add the layout manager + $('[data-layout]').on('click', function () { + changeLayout($(this).data('layout')); }); - $("[data-controlsidebar]").on('click', function () { - change_layout($(this).data('controlsidebar')); - var slide = !AdminLTE.options.controlSidebarOptions.slide; + $('[data-controlsidebar]').on('click', function () { + changeLayout($(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") + $('[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") + $sidebar.removeClass('control-sidebar-light') + $sidebar.addClass('control-sidebar-dark') } }); - $("[data-enable='expandOnHover']").on('click', function () { + $('[data-enable="expandOnHover"]').on('click', function () { $(this).attr('disabled', true); AdminLTE.pushMenu.expandOnHover(); if (!$('body').hasClass('sidebar-collapse')) - $("[data-layout='sidebar-collapse']").click(); + $('[data-layout="sidebar-collapse"]').click(); }); - // Reset options + // Reset options if ($('body').hasClass('fixed')) { - $("[data-layout='fixed']").attr('checked', 'checked'); + $('[data-layout="fixed"]').attr('checked', 'checked'); } if ($('body').hasClass('layout-boxed')) { - $("[data-layout='layout-boxed']").attr('checked', 'checked'); + $('[data-layout="layout-boxed"]').attr('checked', 'checked'); } if ($('body').hasClass('sidebar-collapse')) { - $("[data-layout='sidebar-collapse']").attr('checked', 'checked'); + $('[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' }) + .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( + '

      ' + + 'Layout Options' + + '

      ' + // Fixed layout + + '
      ' + + '' + + '

      Activate the fixed layout. You can\'t use fixed and boxed layouts together

      ' + + '
      ' + // Boxed layout + + '
      ' + + '' + + '

      Activate the boxed layout

      ' + + '
      ' + // Sidebar Toggle + + '
      ' + + '' + + '

      Toggle the left sidebar\'s state (open or collapse)

      ' + + '
      ' + // Sidebar mini expand on hover toggle + + '
      ' + + '' + + '

      Let the sidebar mini expand on hover

      ' + + '
      ' + // Control Sidebar Toggle + + '
      ' + + '' + + '

      Toggle between slide over content and push content effects

      ' + + '
      ' + // Control Sidebar Skin Toggle + + '
      ' + + '' + + '

      Toggle between dark and light skins for the right sidebar

      ' + + '
      ' + ); + var $skinsList = $('
        ', { 'class': 'list-unstyled clearfix' }); + + // Dark sidebar skins + var $skinBlue = + $('
      • ', { style: 'float:left; width: 33.33333%; padding: 5px;' }) + .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('

        Skins

        '); + $demoSettings.append($skinsList); + + $tabPane.append($demoSettings); + $('#control-sidebar-home-tab').after($tabPane); + + setup(); })(jQuery, $.AdminLTE);