2019-07-15 15:32:00 +02:00
/ * *
* AdminLTE Demo Menu
* -- -- -- -- -- -- -- -- --
* You should not use this file in production .
* This file is for demo purposes only .
* /
( function ( $ ) {
'use strict'
var $sidebar = $ ( '.control-sidebar' )
var $container = $ ( '<div />' , {
class : 'p-3 control-sidebar-content'
} )
$sidebar . append ( $container )
var navbar _dark _skins = [
'navbar-primary' ,
'navbar-secondary' ,
'navbar-info' ,
'navbar-success' ,
'navbar-danger' ,
'navbar-indigo' ,
'navbar-purple' ,
'navbar-pink' ,
2020-01-17 09:05:37 +01:00
'navbar-navy' ,
'navbar-lightblue' ,
2019-07-15 15:32:00 +02:00
'navbar-teal' ,
'navbar-cyan' ,
'navbar-dark' ,
'navbar-gray-dark' ,
'navbar-gray' ,
]
var navbar _light _skins = [
'navbar-light' ,
'navbar-warning' ,
'navbar-white' ,
'navbar-orange' ,
]
$container . append (
'<h5>Customize AdminLTE</h5><hr class="mb-2"/>'
)
2019-10-02 12:44:03 +02:00
var $no _border _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-1' } ) . append ( $no _border _checkbox ) . append ( '<span>No Navbar border</span>' )
$container . append ( $no _border _container )
var $text _sm _body _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-1' } ) . append ( $text _sm _body _checkbox ) . append ( '<span>Body small text</span>' )
$container . append ( $text _sm _body _container )
var $text _sm _header _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-1' } ) . append ( $text _sm _header _checkbox ) . append ( '<span>Navbar small text</span>' )
$container . append ( $text _sm _header _container )
var $text _sm _sidebar _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-1' } ) . append ( $text _sm _sidebar _checkbox ) . append ( '<span>Sidebar nav small text</span>' )
$container . append ( $text _sm _sidebar _container )
2019-10-19 11:38:03 +02:00
var $text _sm _footer _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-1' } ) . append ( $text _sm _footer _checkbox ) . append ( '<span>Footer small text</span>' )
$container . append ( $text _sm _footer _container )
2019-10-02 12:44:03 +02:00
var $flat _sidebar _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-1' } ) . append ( $flat _sidebar _checkbox ) . append ( '<span>Sidebar nav flat style</span>' )
$container . append ( $flat _sidebar _container )
2019-11-02 13:54:26 +01:00
var $legacy _sidebar _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-1' } ) . append ( $legacy _sidebar _checkbox ) . append ( '<span>Sidebar nav legacy style</span>' )
$container . append ( $legacy _sidebar _container )
2019-10-02 12:44:03 +02:00
var $compact _sidebar _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-1' } ) . append ( $compact _sidebar _checkbox ) . append ( '<span>Sidebar nav compact</span>' )
$container . append ( $compact _sidebar _container )
var $child _indent _sidebar _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-1' } ) . append ( $child _indent _sidebar _checkbox ) . append ( '<span>Sidebar nav child indent</span>' )
$container . append ( $child _indent _sidebar _container )
var $no _expand _sidebar _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-1' } ) . append ( $no _expand _sidebar _checkbox ) . append ( '<span>Main Sidebar disable hover/focus auto expand</span>' )
$container . append ( $no _expand _sidebar _container )
var $text _sm _brand _checkbox = $ ( '<input />' , {
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 = $ ( '<div />' , { 'class' : 'mb-4' } ) . append ( $text _sm _brand _checkbox ) . append ( '<span>Brand small text</span>' )
$container . append ( $text _sm _brand _container )
$container . append ( '<h6>Navbar Variants</h6>' )
2019-07-15 15:32:00 +02:00
var $navbar _variants = $ ( '<div />' , {
'class' : 'd-flex'
} )
var navbar _all _colors = navbar _dark _skins . concat ( navbar _light _skins )
var $navbar _variants _colors = createSkinBlock ( navbar _all _colors , function ( e ) {
var color = $ ( this ) . data ( 'color' )
var $main _header = $ ( '.main-header' )
$main _header . removeClass ( 'navbar-dark' ) . removeClass ( 'navbar-light' )
navbar _all _colors . map ( 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' ,
'bg-info' ,
'bg-danger' ,
2019-07-28 19:16:16 +02:00
'bg-success' ,
'bg-indigo' ,
2020-01-17 09:05:37 +01:00
'bg-lightblue' ,
2019-07-28 19:16:16 +02:00
'bg-navy' ,
'bg-purple' ,
'bg-fuchsia' ,
'bg-pink' ,
'bg-maroon' ,
'bg-orange' ,
'bg-lime' ,
'bg-teal' ,
'bg-olive'
2019-07-15 15:32:00 +02:00
]
2019-10-19 11:38:03 +02:00
var accent _colors = [
'accent-primary' ,
'accent-warning' ,
'accent-info' ,
'accent-danger' ,
'accent-success' ,
'accent-indigo' ,
2020-01-17 09:05:37 +01:00
'accent-lightblue' ,
2019-10-19 11:38:03 +02:00
'accent-navy' ,
'accent-purple' ,
'accent-fuchsia' ,
'accent-pink' ,
'accent-maroon' ,
'accent-orange' ,
'accent-lime' ,
'accent-teal' ,
'accent-olive'
]
2019-07-15 15:32:00 +02:00
var sidebar _skins = [
'sidebar-dark-primary' ,
'sidebar-dark-warning' ,
'sidebar-dark-info' ,
'sidebar-dark-danger' ,
'sidebar-dark-success' ,
2019-07-28 19:16:16 +02:00
'sidebar-dark-indigo' ,
2020-01-17 09:05:37 +01:00
'sidebar-dark-lightblue' ,
2019-07-28 19:16:16 +02:00
'sidebar-dark-navy' ,
'sidebar-dark-purple' ,
'sidebar-dark-fuchsia' ,
'sidebar-dark-pink' ,
'sidebar-dark-maroon' ,
'sidebar-dark-orange' ,
'sidebar-dark-lime' ,
'sidebar-dark-teal' ,
'sidebar-dark-olive' ,
2019-07-15 15:32:00 +02:00
'sidebar-light-primary' ,
'sidebar-light-warning' ,
'sidebar-light-info' ,
'sidebar-light-danger' ,
2019-07-28 19:16:16 +02:00
'sidebar-light-success' ,
'sidebar-light-indigo' ,
2020-01-17 09:05:37 +01:00
'sidebar-light-lightblue' ,
2019-07-28 19:16:16 +02:00
'sidebar-light-navy' ,
'sidebar-light-purple' ,
'sidebar-light-fuchsia' ,
'sidebar-light-pink' ,
'sidebar-light-maroon' ,
'sidebar-light-orange' ,
'sidebar-light-lime' ,
'sidebar-light-teal' ,
'sidebar-light-olive'
2019-07-15 15:32:00 +02:00
]
2019-10-19 11:38:03 +02:00
$container . append ( '<h6>Accent Color Variants</h6>' )
var $accent _variants = $ ( '<div />' , {
'class' : 'd-flex'
} )
$container . append ( $accent _variants )
$container . append ( createSkinBlock ( accent _colors , function ( ) {
var color = $ ( this ) . data ( 'color' )
var accent _class = color
var $body = $ ( 'body' )
accent _colors . map ( function ( skin ) {
$body . removeClass ( skin )
} )
$body . addClass ( accent _class )
} ) )
2019-07-15 15:32:00 +02:00
$container . append ( '<h6>Dark Sidebar Variants</h6>' )
2020-01-17 09:05:37 +01:00
var $sidebar _variants _dark = $ ( '<div />' , {
2019-07-15 15:32:00 +02:00
'class' : 'd-flex'
} )
2020-01-17 09:05:37 +01:00
$container . append ( $sidebar _variants _dark )
2019-07-15 15:32:00 +02:00
$container . append ( createSkinBlock ( sidebar _colors , function ( ) {
var color = $ ( this ) . data ( 'color' )
var sidebar _class = 'sidebar-dark-' + color . replace ( 'bg-' , '' )
var $sidebar = $ ( '.main-sidebar' )
sidebar _skins . map ( function ( skin ) {
$sidebar . removeClass ( skin )
} )
$sidebar . addClass ( sidebar _class )
} ) )
$container . append ( '<h6>Light Sidebar Variants</h6>' )
2020-01-17 09:05:37 +01:00
var $sidebar _variants _light = $ ( '<div />' , {
2019-07-15 15:32:00 +02:00
'class' : 'd-flex'
} )
2020-01-17 09:05:37 +01:00
$container . append ( $sidebar _variants _light )
2019-07-15 15:32:00 +02:00
$container . append ( createSkinBlock ( sidebar _colors , function ( ) {
var color = $ ( this ) . data ( 'color' )
var sidebar _class = 'sidebar-light-' + color . replace ( 'bg-' , '' )
var $sidebar = $ ( '.main-sidebar' )
sidebar _skins . map ( function ( skin ) {
$sidebar . removeClass ( skin )
} )
$sidebar . addClass ( sidebar _class )
} ) )
var logo _skins = navbar _all _colors
$container . append ( '<h6>Brand Logo Variants</h6>' )
var $logo _variants = $ ( '<div />' , {
'class' : 'd-flex'
} )
$container . append ( $logo _variants )
var $clear _btn = $ ( '<a />' , {
href : 'javascript:void(0)'
} ) . text ( 'clear' ) . on ( 'click' , function ( ) {
var $logo = $ ( '.brand-link' )
logo _skins . map ( function ( skin ) {
$logo . removeClass ( skin )
} )
} )
$container . append ( createSkinBlock ( logo _skins , function ( ) {
var color = $ ( this ) . data ( 'color' )
var $logo = $ ( '.brand-link' )
logo _skins . map ( function ( skin ) {
$logo . removeClass ( skin )
} )
$logo . addClass ( color )
} ) . append ( $clear _btn ) )
function createSkinBlock ( colors , callback ) {
var $block = $ ( '<div />' , {
'class' : 'd-flex flex-wrap mb-3'
} )
colors . map ( function ( color ) {
var $color = $ ( '<div />' , {
2019-10-19 11:38:03 +02:00
'class' : ( typeof color === 'object' ? color . join ( ' ' ) : color ) . replace ( 'navbar-' , 'bg-' ) . replace ( 'accent-' , 'bg-' ) + ' elevation-2'
2019-07-15 15:32:00 +02:00
} )
$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
}
2020-04-01 15:20:05 +02:00
$ ( '.product-image-thumb' ) . on ( 'click' , function ( ) {
const image _element = $ ( this ) . find ( 'img' ) ;
$ ( '.product-image' ) . prop ( 'src' , $ ( image _element ) . attr ( 'src' ) )
$ ( '.product-image-thumb.active' ) . removeClass ( 'active' ) ;
$ ( this ) . addClass ( 'active' ) ;
} ) ;
2019-07-15 15:32:00 +02:00
} ) ( jQuery )