101 lines
3.6 KiB
JavaScript
101 lines
3.6 KiB
JavaScript
!function(window, document, $) { "use strict";
|
|
var $body = $(document.body);
|
|
var $navbar = $('.site-navbar');
|
|
var $menubar = $('.site-menubar');
|
|
|
|
$.customizer = {
|
|
navbarType: null,
|
|
navbarSkin: null,
|
|
menubarType: null,
|
|
init: function() {
|
|
if (typeof $.settings != "undefined" && $.settings.isStored()) {
|
|
this.menubarType = $.settings.get('menubar').type;
|
|
this.navbarType = $.settings.get('navbar').type;
|
|
this.navbarSkin = $.settings.get('navbar').skin;
|
|
this.setMenubarTheme(this.menubarType);
|
|
this.setNavbarTheme(this.navbarType, this.navbarSkin);
|
|
} else {
|
|
this.menubarType = this._getAppliedMenubarType,
|
|
this.navbarType = this._getAppliedNavbarType,
|
|
this.navbarSkin = this._getAppliedNavbarSkin;
|
|
}
|
|
|
|
// check the the theme on load
|
|
this.checkTheme();
|
|
},
|
|
save: function() {
|
|
$.settings.set("navbar", {
|
|
type: this.navbarType,
|
|
skin: this.navbarSkin
|
|
}).set("menubar", {
|
|
type: this.menubarType
|
|
}).save();
|
|
},
|
|
reset: function() {
|
|
$.settings.clear(), location.reload();
|
|
},
|
|
setTheme: function(trigger) {
|
|
var options = typeof trigger === 'object' ? trigger instanceof HTMLElement ? $(trigger).data() : trigger : {};
|
|
|
|
if ($.isEmptyObject(options)) {
|
|
console.warn("You must specify options object or a DOM Element containing data-* attributes");
|
|
}
|
|
|
|
if (options.menubarType) {
|
|
this.setMenubarTheme(options.menubarType);
|
|
}
|
|
|
|
if (options.navbarType && options.navbarSkin) {
|
|
this.setNavbarTheme(options.navbarType, options.navbarSkin);
|
|
}
|
|
|
|
return this.checkTheme(), this;
|
|
},
|
|
setNavbarTheme: function(type, skin) {
|
|
// set navbar theme (inverse|light)
|
|
if (type === 'light' && $navbar.is('.navbar-inverse')) {
|
|
this.navbarType = 'light', $navbar.addClass('navbar-light').removeClass('navbar-inverse');
|
|
} else if (type === 'inverse' && $navbar.is('.navbar-light')) {
|
|
this.navbarType = 'inverse', $navbar.addClass('navbar-inverse').removeClass('navbar-light');
|
|
}
|
|
|
|
// set navbar background (primary, faded, warning, etc..)
|
|
var currentSkin = this._getAppliedNavbarSkin();
|
|
this.navbarSkin = skin, currentSkin !== skin && $navbar.addClass(skin).removeClass(currentSkin);
|
|
|
|
return this;
|
|
},
|
|
setMenubarTheme: function(type) {
|
|
// set menubar theme (light|inverse)
|
|
if (type === 'light' && $body.is('.menubar-inverse')) {
|
|
this.menubarType = 'light', $body.addClass('menubar-light').removeClass('menubar-inverse');
|
|
} else if (type === 'inverse' && $body.is('.menubar-light')) {
|
|
this.menubarType = 'inverse', $body.addClass('menubar-inverse').removeClass('menubar-light');
|
|
}
|
|
|
|
return this;
|
|
},
|
|
checkTheme: function() {
|
|
return $('[name="theme-option"][data-menubar-type="'+this.menubarType+'"][data-navbar-type="'+this.navbarType+'"][data-navbar-skin="'+this.navbarSkin+'"]').prop('checked', true),
|
|
$('[name="navbar-skin-option"][data-navbar-type="'+this.navbarType+'"][data-navbar-skin="'+this.navbarSkin+'"]').prop('checked', true),
|
|
$('[name="menubar-type-option"][data-menubar-type="'+this.menubarType+'"]').prop('checked', true), this;
|
|
},
|
|
_getAppliedNavbarSkin: function() {
|
|
var navbar = document.querySelector('.site-navbar');
|
|
var currentSkin = null;
|
|
|
|
$.each(navbar.classList, function (index, className) {
|
|
className.search('bg') !== -1 && (currentSkin = className);
|
|
});
|
|
|
|
return currentSkin;
|
|
},
|
|
_getAppliedNavbarType: function() {
|
|
return $navbar.is('.navbar-inverse') ? 'inverse' : 'light';
|
|
},
|
|
_getAppliedMenubarType: function() {
|
|
return $body.is('.menubar-inverse') ? 'inverse' : 'light';
|
|
}
|
|
};
|
|
}(window, document, jQuery);
|