diff --git a/dist/js/demo.js b/dist/js/demo.js index ae4c79d05..6b7caca31 100644 --- a/dist/js/demo.js +++ b/dist/js/demo.js @@ -10,6 +10,44 @@ (function ($) { 'use strict' + function capitalizeFirstLetter(string) { + return string.charAt(0).toUpperCase() + string.slice(1) + } + + function createSkinBlock(colors, callback, noneSelected) { + var $block = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('dark-mode'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('dark-mode') + } else { + $('body').removeClass('dark-mode') + } + }) + var $dark_mode_container = $('
', { class: 'mb-4' }).append($dark_mode_checkbox).append('Dark Mode') + $container.append($dark_mode_container) + + $container.append('
Header Options
') + var $header_fixed_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('layout-navbar-fixed'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('layout-navbar-fixed') + } else { + $('body').removeClass('layout-navbar-fixed') + } + }) + var $header_fixed_container = $('
', { class: 'mb-1' }).append($header_fixed_checkbox).append('Fixed') + $container.append($header_fixed_container) + + var $dropdown_legacy_offset_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.main-header').hasClass('dropdown-legacy'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.main-header').addClass('dropdown-legacy') + } else { + $('.main-header').removeClass('dropdown-legacy') + } + }) + var $dropdown_legacy_offset_container = $('
', { class: 'mb-1' }).append($dropdown_legacy_offset_checkbox).append('Dropdown Legacy Offset') + $container.append($dropdown_legacy_offset_container) + + var $no_border_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.main-header').hasClass('border-bottom-0'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.main-header').addClass('border-bottom-0') + } else { + $('.main-header').removeClass('border-bottom-0') + } + }) + var $no_border_container = $('
', { class: 'mb-4' }).append($no_border_checkbox).append('No border') + $container.append($no_border_container) + + $container.append('
Sidebar Options
') + + var $sidebar_collapsed_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('sidebar-collapse'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('sidebar-collapse') + $(window).trigger('resize') + } else { + $('body').removeClass('sidebar-collapse') + $(window).trigger('resize') + } + }) + var $sidebar_collapsed_container = $('
', { class: 'mb-1' }).append($sidebar_collapsed_checkbox).append('Collapsed') + $container.append($sidebar_collapsed_container) + + $(document).on('collapsed.lte.pushmenu', '[data-widget="pushmenu"]', function() { + $sidebar_collapsed_checkbox.prop('checked', true) + }) + $(document).on('shown.lte.pushmenu', '[data-widget="pushmenu"]', function() { + $sidebar_collapsed_checkbox.prop('checked', false) + }) + + var $sidebar_fixed_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('layout-fixed'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('layout-fixed') + $(window).trigger('resize') + } else { + $('body').removeClass('layout-fixed') + $(window).trigger('resize') + } + }) + var $sidebar_fixed_container = $('
', { class: 'mb-1' }).append($sidebar_fixed_checkbox).append('Fixed') + $container.append($sidebar_fixed_container) + + var $sidebar_mini_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('sidebar-mini'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('sidebar-mini') + } else { + $('body').removeClass('sidebar-mini') + } + }) + var $sidebar_mini_container = $('
', { class: 'mb-1' }).append($sidebar_mini_checkbox).append('Sidebar Mini') + $container.append($sidebar_mini_container) + + var $sidebar_mini_md_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('sidebar-mini-md'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('sidebar-mini-md') + } else { + $('body').removeClass('sidebar-mini-md') + } + }) + var $sidebar_mini_md_container = $('
', { class: 'mb-1' }).append($sidebar_mini_md_checkbox).append('Sidebar Mini MD') + $container.append($sidebar_mini_md_container) + + var $sidebar_mini_xs_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('sidebar-mini-xs'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('sidebar-mini-xs') + } else { + $('body').removeClass('sidebar-mini-xs') + } + }) + var $sidebar_mini_xs_container = $('
', { class: 'mb-1' }).append($sidebar_mini_xs_checkbox).append('Sidebar Mini XS') + $container.append($sidebar_mini_xs_container) + + var $flat_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('nav-flat'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('nav-flat') + } else { + $('.nav-sidebar').removeClass('nav-flat') + } + }) + var $flat_sidebar_container = $('
', { class: 'mb-1' }).append($flat_sidebar_checkbox).append('Nav Flat Style') + $container.append($flat_sidebar_container) + + var $legacy_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('nav-legacy'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('nav-legacy') + } else { + $('.nav-sidebar').removeClass('nav-legacy') + } + }) + var $legacy_sidebar_container = $('
', { class: 'mb-1' }).append($legacy_sidebar_checkbox).append('Nav Legacy Style') + $container.append($legacy_sidebar_container) + + var $compact_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('nav-compact'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('nav-compact') + } else { + $('.nav-sidebar').removeClass('nav-compact') + } + }) + var $compact_sidebar_container = $('
', { class: 'mb-1' }).append($compact_sidebar_checkbox).append('Nav Compact') + $container.append($compact_sidebar_container) + + var $child_indent_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('nav-child-indent'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('nav-child-indent') + } else { + $('.nav-sidebar').removeClass('nav-child-indent') + } + }) + var $child_indent_sidebar_container = $('
', { class: 'mb-1' }).append($child_indent_sidebar_checkbox).append('Nav Child Indent') + $container.append($child_indent_sidebar_container) + + var $child_hide_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('nav-collapse-hide-child') + } else { + $('.nav-sidebar').removeClass('nav-collapse-hide-child') + } + }) + var $child_hide_sidebar_container = $('
', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('Nav Child Hide on Collapse') + $container.append($child_hide_sidebar_container) + + var $no_expand_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.main-sidebar').hasClass('sidebar-no-expand'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.main-sidebar').addClass('sidebar-no-expand') + } else { + $('.main-sidebar').removeClass('sidebar-no-expand') + } + }) + var $no_expand_sidebar_container = $('
', { class: 'mb-4' }).append($no_expand_sidebar_checkbox).append('Disable Hover/Focus Auto-Expand') + $container.append($no_expand_sidebar_container) + + $container.append('
Footer Options
') + var $footer_fixed_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('layout-footer-fixed'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('layout-footer-fixed') + } else { + $('body').removeClass('layout-footer-fixed') + } + }) + var $footer_fixed_container = $('
', { class: 'mb-4' }).append($footer_fixed_checkbox).append('Fixed') + $container.append($footer_fixed_container) + + $container.append('
Small Text Options
') + + var $text_sm_body_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('body').hasClass('text-sm'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('body').addClass('text-sm') + } else { + $('body').removeClass('text-sm') + } + }) + var $text_sm_body_container = $('
', { class: 'mb-1' }).append($text_sm_body_checkbox).append('Body') + $container.append($text_sm_body_container) + + var $text_sm_header_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.main-header').hasClass('text-sm'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.main-header').addClass('text-sm') + } else { + $('.main-header').removeClass('text-sm') + } + }) + var $text_sm_header_container = $('
', { class: 'mb-1' }).append($text_sm_header_checkbox).append('Navbar') + $container.append($text_sm_header_container) + + var $text_sm_brand_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.brand-link').hasClass('text-sm'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.brand-link').addClass('text-sm') + } else { + $('.brand-link').removeClass('text-sm') + } + }) + var $text_sm_brand_container = $('
', { class: 'mb-1' }).append($text_sm_brand_checkbox).append('Brand') + $container.append($text_sm_brand_container) + + var $text_sm_sidebar_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.nav-sidebar').hasClass('text-sm'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.nav-sidebar').addClass('text-sm') + } else { + $('.nav-sidebar').removeClass('text-sm') + } + }) + var $text_sm_sidebar_container = $('
', { class: 'mb-1' }).append($text_sm_sidebar_checkbox).append('Sidebar Nav') + $container.append($text_sm_sidebar_container) + + var $text_sm_footer_checkbox = $('', { + type: 'checkbox', + value: 1, + checked: $('.main-footer').hasClass('text-sm'), + class: 'mr-1' + }).on('click', function () { + if ($(this).is(':checked')) { + $('.main-footer').addClass('text-sm') + } else { + $('.main-footer').removeClass('text-sm') + } + }) + var $text_sm_footer_container = $('
', { class: 'mb-4' }).append($text_sm_footer_checkbox).append('Footer') + $container.append($text_sm_footer_container) + + // Color Arrays + var navbar_dark_skins = [ 'navbar-primary', 'navbar-secondary', @@ -42,232 +420,6 @@ 'navbar-orange' ] - $container.append( - '
Customize AdminLTE
' - ) - - var $no_border_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.main-header').hasClass('border-bottom-0'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.main-header').addClass('border-bottom-0') - } else { - $('.main-header').removeClass('border-bottom-0') - } - }) - var $no_border_container = $('
', { class: 'mb-1' }).append($no_border_checkbox).append('No Navbar border') - $container.append($no_border_container) - - var $text_sm_body_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('body').hasClass('text-sm'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('body').addClass('text-sm') - } else { - $('body').removeClass('text-sm') - } - }) - var $text_sm_body_container = $('
', { class: 'mb-1' }).append($text_sm_body_checkbox).append('Body small text') - $container.append($text_sm_body_container) - - var $text_sm_header_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.main-header').hasClass('text-sm'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.main-header').addClass('text-sm') - } else { - $('.main-header').removeClass('text-sm') - } - }) - var $text_sm_header_container = $('
', { class: 'mb-1' }).append($text_sm_header_checkbox).append('Navbar small text') - $container.append($text_sm_header_container) - - var $text_sm_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('text-sm'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('text-sm') - } else { - $('.nav-sidebar').removeClass('text-sm') - } - }) - var $text_sm_sidebar_container = $('
', { class: 'mb-1' }).append($text_sm_sidebar_checkbox).append('Sidebar nav small text') - $container.append($text_sm_sidebar_container) - - var $text_sm_footer_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.main-footer').hasClass('text-sm'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.main-footer').addClass('text-sm') - } else { - $('.main-footer').removeClass('text-sm') - } - }) - var $text_sm_footer_container = $('
', { class: 'mb-1' }).append($text_sm_footer_checkbox).append('Footer small text') - $container.append($text_sm_footer_container) - - var $flat_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('nav-flat'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('nav-flat') - } else { - $('.nav-sidebar').removeClass('nav-flat') - } - }) - var $flat_sidebar_container = $('
', { class: 'mb-1' }).append($flat_sidebar_checkbox).append('Sidebar nav flat style') - $container.append($flat_sidebar_container) - - var $legacy_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('nav-legacy'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('nav-legacy') - } else { - $('.nav-sidebar').removeClass('nav-legacy') - } - }) - var $legacy_sidebar_container = $('
', { class: 'mb-1' }).append($legacy_sidebar_checkbox).append('Sidebar nav legacy style') - $container.append($legacy_sidebar_container) - - var $compact_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('nav-compact'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('nav-compact') - } else { - $('.nav-sidebar').removeClass('nav-compact') - } - }) - var $compact_sidebar_container = $('
', { class: 'mb-1' }).append($compact_sidebar_checkbox).append('Sidebar nav compact') - $container.append($compact_sidebar_container) - - var $child_indent_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('nav-child-indent'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('nav-child-indent') - } else { - $('.nav-sidebar').removeClass('nav-child-indent') - } - }) - var $child_indent_sidebar_container = $('
', { class: 'mb-1' }).append($child_indent_sidebar_checkbox).append('Sidebar nav child indent') - $container.append($child_indent_sidebar_container) - - var $child_hide_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.nav-sidebar').addClass('nav-collapse-hide-child') - } else { - $('.nav-sidebar').removeClass('nav-collapse-hide-child') - } - }) - var $child_hide_sidebar_container = $('
', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('Sidebar nav child hide on collapse') - $container.append($child_hide_sidebar_container) - - var $no_expand_sidebar_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.main-sidebar').hasClass('sidebar-no-expand'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.main-sidebar').addClass('sidebar-no-expand') - } else { - $('.main-sidebar').removeClass('sidebar-no-expand') - } - }) - var $no_expand_sidebar_container = $('
', { class: 'mb-1' }).append($no_expand_sidebar_checkbox).append('Main Sidebar disable hover/focus auto expand') - $container.append($no_expand_sidebar_container) - - var $text_sm_brand_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('.brand-link').hasClass('text-sm'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('.brand-link').addClass('text-sm') - } else { - $('.brand-link').removeClass('text-sm') - } - }) - var $text_sm_brand_container = $('
', { class: 'mb-1' }).append($text_sm_brand_checkbox).append('Brand small text') - $container.append($text_sm_brand_container) - - var $dark_mode_checkbox = $('', { - type: 'checkbox', - value: 1, - checked: $('body').hasClass('dark-mode'), - class: 'mr-1' - }).on('click', function () { - if ($(this).is(':checked')) { - $('body').addClass('dark-mode') - } else { - $('body').removeClass('dark-mode') - } - }) - var $dark_mode_container = $('
', { class: 'mb-4' }).append($dark_mode_checkbox).append('Dark Mode') - $container.append($dark_mode_container) - - $container.append('
Navbar Variants
') - - var $navbar_variants = $('
', { - class: 'd-flex' - }) - var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins) - var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function () { - var color = $(this).data('color') - var $main_header = $('.main-header') - $main_header.removeClass('navbar-dark').removeClass('navbar-light') - navbar_all_colors.forEach(function (color) { - $main_header.removeClass(color) - }) - - if (navbar_dark_skins.indexOf(color) > -1) { - $main_header.addClass('navbar-dark') - } else { - $main_header.addClass('navbar-light') - } - - $main_header.addClass(color) - }) - - $navbar_variants.append($navbar_variants_colors) - - $container.append($navbar_variants) - var sidebar_colors = [ 'bg-primary', 'bg-warning', @@ -341,6 +493,51 @@ 'sidebar-light-olive' ] + // Navbar Variants + + $container.append('
Navbar Variants
') + + var $navbar_variants = $('
', { + class: 'd-flex' + }) + var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins) + var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function () { + var color = $(this).data('color') + var $main_header = $('.main-header') + $main_header.removeClass('navbar-dark').removeClass('navbar-light') + navbar_all_colors.forEach(function (color) { + $main_header.removeClass(color) + }) + + $(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0 ') + + if (navbar_dark_skins.indexOf(color) > -1) { + $main_header.addClass('navbar-dark') + $(this).parent().addClass(color).addClass('text-light') + } else { + $main_header.addClass('navbar-light') + $(this).parent().addClass(color) + } + + $main_header.addClass(color) + }) + + var active_navbar_color = null + $('.main-header')[0].classList.forEach(function (className) { + if (navbar_all_colors.indexOf(className) > -1 && active_navbar_color === null) { + active_navbar_color = className.replace('navbar-', 'bg-') + } + }) + + $navbar_variants_colors.find('option.' + active_navbar_color).prop('selected', true) + $navbar_variants_colors.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_navbar_color) + + $navbar_variants.append($navbar_variants_colors) + + $container.append($navbar_variants) + + // Sidebar Colors + $container.append('
Accent Color Variants
') var $accent_variants = $('
', { class: 'd-flex' @@ -355,39 +552,83 @@ }) $body.addClass(accent_class) - })) + }, true)) + + var active_accent_color = null + $('body')[0].classList.forEach(function (className) { + if (accent_colors.indexOf(className) > -1 && active_accent_color === null) { + active_accent_color = className.replace('navbar-', 'bg-') + } + }) + + // $accent_variants.find('option.' + active_accent_color).prop('selected', true) + // $accent_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_accent_color) $container.append('
Dark Sidebar Variants
') var $sidebar_variants_dark = $('
', { class: 'd-flex' }) $container.append($sidebar_variants_dark) - $container.append(createSkinBlock(sidebar_colors, function () { + var $sidebar_dark_variants = createSkinBlock(sidebar_colors, function () { var color = $(this).data('color') var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '') var $sidebar = $('.main-sidebar') sidebar_skins.forEach(function (skin) { $sidebar.removeClass(skin) + $sidebar_light_variants.removeClass(skin.replace('sidebar-dark-', 'bg-')).removeClass('text-light') }) + $(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color) + + $sidebar_light_variants.find('option').prop('selected', false) $sidebar.addClass(sidebar_class) - })) + }, true) + $container.append($sidebar_dark_variants) + + var active_sidebar_dark_color = null + $('.main-sidebar')[0].classList.forEach(function (className) { + var color = className.replace('sidebar-dark-', 'bg-') + if (sidebar_colors.indexOf(color) > -1 && active_sidebar_dark_color === null) { + active_sidebar_dark_color = color + } + }) + + $sidebar_dark_variants.find('option.' + active_sidebar_dark_color).prop('selected', true) + $sidebar_dark_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_dark_color) $container.append('
Light Sidebar Variants
') var $sidebar_variants_light = $('
', { class: 'd-flex' }) $container.append($sidebar_variants_light) - $container.append(createSkinBlock(sidebar_colors, function () { + var $sidebar_light_variants = createSkinBlock(sidebar_colors, function () { var color = $(this).data('color') var sidebar_class = 'sidebar-light-' + color.replace('bg-', '') var $sidebar = $('.main-sidebar') sidebar_skins.forEach(function (skin) { $sidebar.removeClass(skin) + $sidebar_dark_variants.removeClass(skin.replace('sidebar-light-', 'bg-')).removeClass('text-light') }) + $(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color) + + $sidebar_dark_variants.find('option').prop('selected', false) $sidebar.addClass(sidebar_class) - })) + }, true) + $container.append($sidebar_light_variants) + + var active_sidebar_light_color = null + $('.main-sidebar')[0].classList.forEach(function (className) { + var color = className.replace('sidebar-light-', 'bg-') + if (sidebar_colors.indexOf(color) > -1 && active_sidebar_light_color === null) { + active_sidebar_light_color = color + } + }) + + if (active_sidebar_light_color !== null) { + $sidebar_light_variants.find('option.' + active_sidebar_light_color).prop('selected', true) + $sidebar_light_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_light_color) + } var logo_skins = navbar_all_colors $container.append('
Brand Logo Variants
') @@ -404,57 +645,40 @@ $logo.removeClass(skin) }) }) - $container.append(createSkinBlock(logo_skins, function () { + + var $brand_variants = createSkinBlock(logo_skins, function () { var color = $(this).data('color') var $logo = $('.brand-link') + + if (color === 'navbar-light' || color === 'navbar-white') { + $logo.addClass('text-black') + } else { + $logo.removeClass('text-black') + } + logo_skins.forEach(function (skin) { $logo.removeClass(skin) }) + + if (color) { + $(this).parent().removeClass().addClass('custom-select mb-3 border-0').addClass(color).addClass(color !== 'navbar-light' && color !== 'navbar-white' ? 'text-light' : '') + } else { + $(this).parent().removeClass().addClass('custom-select mb-3 border-0') + } + $logo.addClass(color) - }).append($clear_btn)) + }, true).append($clear_btn) + $container.append($brand_variants) - function createSkinBlock(colors, callback) { - var $block = $('
', { - class: 'd-flex flex-wrap mb-3' - }) - - colors.forEach(function (color) { - var $color = $('
', { - class: (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-') + ' elevation-2' - }) - - $block.append($color) - - $color.data('color', color) - - $color.css({ - width: '40px', - height: '20px', - borderRadius: '25px', - marginRight: 10, - marginBottom: 10, - opacity: 0.8, - cursor: 'pointer' - }) - - $color.hover(function () { - $(this).css({ opacity: 1 }).removeClass('elevation-2').addClass('elevation-4') - }, function () { - $(this).css({ opacity: 0.8 }).removeClass('elevation-4').addClass('elevation-2') - }) - - if (callback) { - $color.on('click', callback) - } - }) - - return $block - } - - $('.product-image-thumb').on('click', function () { - var image_element = $(this).find('img') - $('.product-image').prop('src', $(image_element).attr('src')) - $('.product-image-thumb.active').removeClass('active') - $(this).addClass('active') + var active_brand_color = null + $('.brand-link')[0].classList.forEach(function (className) { + if (logo_skins.indexOf(className) > -1 && active_brand_color === null) { + active_brand_color = className.replace('navbar-', 'bg-') + } }) + + if (active_brand_color) { + $brand_variants.find('option.' + active_brand_color).prop('selected', true) + $brand_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_brand_color) + } })(jQuery) diff --git a/pages/examples/e-commerce.html b/pages/examples/e-commerce.html index 1dc4c4b4a..e0175893f 100644 --- a/pages/examples/e-commerce.html +++ b/pages/examples/e-commerce.html @@ -1019,5 +1019,15 @@ +