/**
Core script to handle the entire theme and core functions
**/
var Layout = function () {
var layoutImgPath = 'img/';
//* BEGIN:CORE HANDLERS *//
// this function handles responsive layout on screen size resize or mobile device rotate.
// Set proper height for sidebar and content. The content and sidebar height must be synced always.
var handleSidebarAndContentHeight = function () {
var content = $('.page-content');
var sidebar = $('.page-sidebar');
var body = $('body');
var height;
if (body.hasClass("page-footer-fixed") === true && body.hasClass("page-sidebar-fixed") === false) {
var available_height = $(window).height() - $('.page-footer').outerHeight() - $('.page-header').outerHeight();
if (content.height() < available_height) {
content.attr('style', 'min-height:' + available_height + 'px');
}
} else {
if (body.hasClass('page-sidebar-fixed')) {
height = _calculateFixedSidebarViewportHeight();
if (body.hasClass('page-footer-fixed') === false) {
height = height - $('.page-footer').outerHeight();
}
} else {
height = sidebar.height() + 20;
var headerHeight = $('.page-header').outerHeight();
var footerHeight = $('.page-footer').outerHeight();
if ($(window).width() > 1024 && (height + headerHeight + footerHeight) < $(window).height()) {
height = $(window).height() - headerHeight - footerHeight;
}
}
content.attr('style', 'min-height:' + height + 'px');
}
}
// Handle sidebar menu
var handleSidebarMenu = function () {
jQuery('.page-sidebar').on('click', 'li > a', function (e) {
if ($(this).next().hasClass('sub-menu') == false) {
if ($('.btn-navbar').hasClass('collapsed') == false) {
$('.btn-navbar').click();
}
return;
}
if ($(this).next().hasClass('sub-menu always-open')) {
return;
}
var parent = $(this).parent().parent();
var the = $(this);
var menu = $('.page-sidebar-menu');
var sub = jQuery(this).next();
var autoScroll = menu.data("auto-scroll") ? menu.data("auto-scroll") : true;
var slideSpeed = menu.data("slide-speed") ? parseInt(menu.data("slide-speed")) : 200;
parent.children('li.open').children('a').children('.arrow').removeClass('open');
parent.children('li.open').children('.sub-menu:not(.always-open)').slideUp(200);
parent.children('li.open').removeClass('open');
var slideOffeset = -200;
if (sub.is(":visible")) {
jQuery('.arrow', jQuery(this)).removeClass("open");
jQuery(this).parent().removeClass("open");
sub.slideUp(slideSpeed, function () {
if (autoScroll == true && $('body').hasClass('page-sidebar-closed') == false) {
if ($('body').hasClass('page-sidebar-fixed')) {
menu.slimScroll({'scrollTo': (the.position()).top});
} else {
Metronic.scrollTo(the, slideOffeset);
}
}
handleSidebarAndContentHeight();
});
} else {
jQuery('.arrow', jQuery(this)).addClass("open");
jQuery(this).parent().addClass("open");
sub.slideDown(slideSpeed, function () {
if (autoScroll == true && $('body').hasClass('page-sidebar-closed') == false) {
if ($('body').hasClass('page-sidebar-fixed')) {
menu.slimScroll({'scrollTo': (the.position()).top});
} else {
Metronic.scrollTo(the, slideOffeset);
}
}
handleSidebarAndContentHeight();
});
}
e.preventDefault();
});
// handle ajax links within sidebar menu
jQuery('.page-sidebar').on('click', ' li > a.ajaxify', function (e) {
e.preventDefault();
Metronic.scrollTop();
var url = $(this).attr("href");
var menuContainer = jQuery('.page-sidebar ul');
var pageContent = $('.page-content');
var pageContentBody = $('.page-content .page-content-body');
menuContainer.children('li.active').removeClass('active');
menuContainer.children('arrow.open').removeClass('open');
$(this).parents('li').each(function () {
$(this).addClass('active');
$(this).children('a > span.arrow').addClass('open');
});
$(this).parents('li').addClass('active');
Metronic.startPageLoading();
if ($(window).width() <= 991 && $('.page-sidebar').hasClass("in")) {
$('.navbar-toggle').click();
}
var the = $(this);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function (res) {
if (the.parents('li.open').size() === 0) {
$('.page-sidebar-menu > li.open > a').click();
}
Metronic.stopPageLoading();
pageContentBody.html(res);
Layout.fixContentHeight(); // fix content height
Metronic.initAjax(); // initialize core stuff
},
error: function (xhr, ajaxOptions, thrownError) {
Metronic.stopPageLoading();
pageContentBody.html('
Could not load the requested content.
');
}
});
});
// handle ajax link within main content
jQuery('.page-content').on('click', '.ajaxify', function (e) {
e.preventDefault();
Metronic.scrollTop();
var url = $(this).attr("href");
var pageContent = $('.page-content');
var pageContentBody = $('.page-content .page-content-body');
Metronic.startPageLoading();
if ($(window).width() <= 991 && $('.page-sidebar').hasClass("in")) {
$('.navbar-toggle').click();
}
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function (res) {
Metronic.stopPageLoading();
pageContentBody.html(res);
Layout.fixContentHeight(); // fix content height
Metronic.initAjax(); // initialize core stuff
},
error: function (xhr, ajaxOptions, thrownError) {
pageContentBody.html('Could not load the requested content.
');
Metronic.stopPageLoading();
}
});
});
}
// Helper function to calculate sidebar height for fixed sidebar layout.
var _calculateFixedSidebarViewportHeight = function () {
var sidebarHeight = $(window).height() - $('.page-header').outerHeight();
if ($('body').hasClass("page-footer-fixed")) {
sidebarHeight = sidebarHeight - $('.page-footer').outerHeight();
}
return sidebarHeight;
}
// Handles fixed sidebar
var handleFixedSidebar = function () {
var menu = $('.page-sidebar-menu');
if (menu.parent('.slimScrollDiv').size() === 1) { // destroy existing instance before updating the height
menu.slimScroll({
destroy: true
});
menu.removeAttr('style');
$('.page-sidebar').removeAttr('style').removeAttr('data-initialized');
}
if ($('.page-sidebar-fixed').size() === 0) {
handleSidebarAndContentHeight();
return;
}
var viewport = Metronic.getViewPort();
if (viewport.width >= 992) {
var sidebarHeight = _calculateFixedSidebarViewportHeight();
menu.slimScroll({
size: '7px',
color: '#a1b2bd',
opacity: .3,
position: Metronic.isRTL() ? 'left' : 'right',
height: sidebarHeight,
allowPageScroll: false,
disableFadeOut: false
});
handleSidebarAndContentHeight();
}
}
// Handles sidebar toggler to close/hide the sidebar.
var _initFixedSidebarHoverEffect = function() {
var body = $('body');
if (body.hasClass('page-sidebar-fixed')) {
$('.page-sidebar-menu').on('mouseenter', function(){
if (body.hasClass('page-sidebar-closed')) {
$(this).removeClass('page-sidebar-menu-closed');
}
}).on('mouseleave', function(){
if (body.hasClass('page-sidebar-closed')) {
$(this).addClass('page-sidebar-menu-closed');
}
});
}
}
// Hanles sidebar toggler
var handleSidebarToggler = function () {
var viewport = Metronic.getViewPort();
var body = $('body');
if ($.cookie && $.cookie('sidebar_closed') === '1' && viewport.width >= 992) {
$('body').addClass('page-sidebar-closed');
$('.page-sidebar-menu').addClass('page-sidebar-menu-closed');
}
// handle sidebar show/hide
$('.page-sidebar, .page-header').on('click', '.sidebar-toggler', function (e) {
var sidebar = $('.page-sidebar');
var sidebarMenu = $('.page-sidebar-menu');
$(".sidebar-search", sidebar).removeClass("open");
if (body.hasClass("page-sidebar-closed")) {
body.removeClass("page-sidebar-closed");
sidebarMenu.removeClass("page-sidebar-menu-closed");
if ($.cookie) {
$.cookie('sidebar_closed', '0');
}
} else {
body.addClass("page-sidebar-closed");
sidebarMenu.addClass("page-sidebar-menu-closed");
if (body.hasClass("page-sidebar-fixed")) {
sidebarMenu.trigger("mouseleave");
}
if ($.cookie) {
$.cookie('sidebar_closed', '1');
}
}
$(window).trigger('resize');
});
_initFixedSidebarHoverEffect();
// handle the search bar close
$('.page-sidebar').on('click', '.sidebar-search .remove', function (e) {
e.preventDefault();
$('.sidebar-search').removeClass("open");
});
// handle the search query submit on enter press
$('.page-sidebar .sidebar-search').on('keypress', 'input.form-control', function (e) {
if (e.which == 13) {
$('.sidebar-search').submit();
return false; //<---- Add this line
}
});
// handle the search submit(for sidebar search and responsive mode of the header search)
$('.sidebar-search .submit').on('click', function (e) {
e.preventDefault();
if ($('body').hasClass("page-sidebar-closed")) {
if ($('.sidebar-search').hasClass('open') == false) {
if ($('.page-sidebar-fixed').size() === 1) {
$('.page-sidebar .sidebar-toggler').click(); //trigger sidebar toggle button
}
$('.sidebar-search').addClass("open");
} else {
$('.sidebar-search').submit();
}
} else {
$('.sidebar-search').submit();
}
});
}
// Handles the horizontal menu
var handleHorizontalMenu = function () {
//handle tab click
$('.page-header').on('click', '.hor-menu a[data-toggle="tab"]', function (e) {
e.preventDefault();
var nav = $(".hor-menu .nav");
var active_link = nav.find('li.current');
$('li.active', active_link).removeClass("active");
$('.selected', active_link).remove();
var new_link = $(this).parents('li').last();
new_link.addClass("current");
new_link.find("a:first").append('');
});
// handle search box expand/collapse
$('.page-header').on('click', '.search-form', function (e) {
$(this).addClass("open");
$(this).find('.form-control').focus();
$('.page-header .search-form .form-control').on('blur', function(e){
$(this).closest('.search-form').removeClass("open");
$(this).unbind("blur");
});
});
// handle hor menu search form on enter press
$('.page-header').on('keypress', '.hor-menu .search-form .form-control', function (e) {
if (e.which == 13) {
$(this).closest('.search-form').submit();
return false;
}
});
// handle header search button click
$('.page-header').on('mousedown', '.search-form.open .submit', function (e) {
e.preventDefault();
e.stopPropagation();
$(this).closest('.search-form').submit();
});
$(document).on('click', '.mega-menu-dropdown .dropdown-menu', function(e) {
e.stopPropagation();
});
}
// Handles Bootstrap Tabs.
var handleTabs = function () {
// fix content height on tab click
$('body').on('shown.bs.tab', 'a[data-toggle="tab"]', function () {
handleSidebarAndContentHeight();
});
}
// Handles the go to top button at the footer
var handleGoTop = function () {
/* set variables locally for increased performance */
jQuery('.page-footer').on('click', '.go-top', function (e) {
Metronic.scrollTo();
e.preventDefault();
});
}
// Hanlde 100% height elements(block, portlet, etc)
var handle100HeightContent = function() {
// helper function to reinit slimscroll
var reinitSlimscroll = function(target) {
if (target.find(".slimScrollDiv").size() === 1) { // destroy existing instance before updating the height
target.find(".full-height-content-body").slimScroll({
destroy: true
});
target.find(".full-height-content-body").removeAttr('style').removeAttr('data-initialized');
}
}
var target = $('.full-height-content');
if (target.size() === 0 || $(window).width() < 992) {
reinitSlimscroll(target); // reinit slimscroll
return;
}
var height;
var body = $('body');
if (body.hasClass('page-footer-fixed')) {
height = $(window).height() - $('.page-header').outerHeight() - $('.page-footer').outerHeight();
} else {
height = $(window).height() -
$('.page-header').outerHeight() -
$('.page-footer').outerHeight() -
$('.page-title').outerHeight(true) -
$('.page-breadcrumb').outerHeight(true);
}
reinitSlimscroll(target); // reinit slimscroll
if (target.hasClass('portlet')) {
var portletBody = target.find('.portlet-body');
height = height -
target.find('.portlet-title').outerHeight(true) -
parseInt(target.find('.portlet-body').css('padding-top')) -
parseInt(target.find('.portlet-body').css('padding-bottom')) - 2;
if (target.hasClass("full-height-content-scrollable")) {
height = height - 20;
portletBody.find('.full-height-content-body').css('height', height);
Metronic.initSlimScroll(portletBody.find('.full-height-content-body'));
} else {
portletBody.css('min-height', height);
}
} else {
if (target.hasClass("full-height-content-scrollable")) {
height = height - 20;
target.find('.full-height-content-body').css('height', height);
Metronic.initSlimScroll(target.find('.full-height-content-body'));
} else {
target.css('min-height', height);
}
}
}
// Handle Theme Settings
var handleTheme = function () {
var panel = $('.theme-panel');
if ($('body').hasClass('page-boxed') == false) {
$('.layout-option', panel).val("fluid");
}
$('.sidebar-option', panel).val("default");
$('.page-header-option', panel).val("fixed");
$('.page-footer-option', panel).val("default");
if ( $('.sidebar-pos-option').attr("disabled") === false) {
$('.sidebar-pos-option', panel).val(Metronic.isRTL() ? 'right' : 'left');
}
//handle theme layout
var resetLayout = function () {
$("body").
removeClass("page-boxed").
removeClass("page-footer-fixed").
removeClass("page-sidebar-fixed").
removeClass("page-header-fixed").
removeClass("page-sidebar-reversed");
$('.page-header > .page-header-inner').removeClass("container");
if ($('.page-container').parent(".container").size() === 1) {
$('.page-container').insertAfter('body > .clearfix');
}
if ($('.page-footer > .container').size() === 1) {
$('.page-footer').html($('.page-footer > .container').html());
} else if ($('.page-footer').parent(".container").size() === 1) {
$('.page-footer').insertAfter('.page-container');
}
$('body > .container').remove();
}
var lastSelectedLayout = '';
var setLayout = function () {
var layoutOption = $('.layout-option', panel).val();
var sidebarOption = $('.sidebar-option', panel).val();
var headerOption = $('.page-header-option', panel).val();
var footerOption = $('.page-footer-option', panel).val();
var sidebarPosOption = $('.sidebar-pos-option', panel).val();
if (sidebarOption == "fixed" && headerOption == "default") {
alert('Default Header with Fixed Sidebar option is not supported. Proceed with Fixed Header with Fixed Sidebar.');
$('.page-header-option', panel).val("fixed");
$('.sidebar-option', panel).val("fixed");
sidebarOption = 'fixed';
headerOption = 'fixed';
}
resetLayout(); // reset layout to default state
if (layoutOption === "boxed") {
$("body").addClass("page-boxed");
// set header
$('.page-header > .page-header-inner').addClass("container");
var cont = $('body > .clearfix').after('');
// set content
$('.page-container').appendTo('body > .container');
// set footer
if (footerOption === 'fixed') {
$('.page-footer').html('' + $('.page-footer').html() + '
');
} else {
$('.page-footer').appendTo('body > .container');
}
}
if (lastSelectedLayout != layoutOption) {
//layout changed, run responsive handler:
Metronic.runResizeHandlers();
}
lastSelectedLayout = layoutOption;
//header
if (headerOption === 'fixed') {
$("body").addClass("page-header-fixed");
$(".page-header").removeClass("navbar-static-top").addClass("navbar-fixed-top");
} else {
$("body").removeClass("page-header-fixed");
$(".page-header").removeClass("navbar-fixed-top").addClass("navbar-static-top");
}
//sidebar
if ($('body').hasClass('page-full-width') === false) {
if (sidebarOption === 'fixed') {
$("body").addClass("page-sidebar-fixed");
$("page-sidebar-menu").addClass("page-sidebar-menu-fixed");
$("page-sidebar-menu").removeClass("page-sidebar-menu-default");
_initFixedSidebarHoverEffect();
} else {
$("body").removeClass("page-sidebar-fixed");
$("page-sidebar-menu").addClass("page-sidebar-menu-default");
$("page-sidebar-menu").removeClass("page-sidebar-menu-fixed");
$('.page-sidebar-menu').unbind('mouseenter').unbind('mouseleave');
}
}
//footer
if (footerOption === 'fixed') {
$("body").addClass("page-footer-fixed");
} else {
$("body").removeClass("page-footer-fixed");
}
//sidebar position
if (Metronic.isRTL()) {
if (sidebarPosOption === 'left') {
$("body").addClass("page-sidebar-reversed");
$('#frontend-link').tooltip('destroy').tooltip({placement: 'right'});
} else {
$("body").removeClass("page-sidebar-reversed");
$('#frontend-link').tooltip('destroy').tooltip({placement: 'left'});
}
} else {
if (sidebarPosOption === 'right') {
$("body").addClass("page-sidebar-reversed");
$('#frontend-link').tooltip('destroy').tooltip({placement: 'left'});
} else {
$("body").removeClass("page-sidebar-reversed");
$('#frontend-link').tooltip('destroy').tooltip({placement: 'right'});
}
}
handleSidebarAndContentHeight(); // fix content height
handleFixedSidebar(); // reinitialize fixed sidebar
}
// handle theme colors
var setColor = function (color) {
var color_ = (Metronic.isRTL() ? color + '-rtl' : color);
$('#style_color').attr("href", "css/themes/" + color_ + ".css");
if (color == 'light2') {
$('.page-logo img').attr('src', '../../assets/admin/layout/img/logo-invert.png');
} else {
$('.page-logo img').attr('src', '../../assets/admin/layout/img/logo.png');
}
if ($.cookie) {
$.cookie('style_color', color);
}
}
$('.toggler', panel).click(function () {
$('.toggler').hide();
$('.toggler-close').show();
$('.theme-panel > .theme-options').show();
});
$('.toggler-close', panel).click(function () {
$('.toggler').show();
$('.toggler-close').hide();
$('.theme-panel > .theme-options').hide();
});
$('.theme-colors > ul > li', panel).click(function () {
var color = $(this).attr("data-style");
setColor(color);
$('ul > li', panel).removeClass("current");
$(this).addClass("current");
});
$('.layout-option, .page-header-option, .sidebar-option, .page-footer-option, .sidebar-pos-option', panel).change(setLayout);
if ($.cookie && $.cookie('style_color')) {
setColor($.cookie('style_color'));
}
}
//* END:CORE HANDLERS *//
return {
//main function to initiate the theme
init: function () {
//IMPORTANT!!!: Do not modify the core handlers call order.
// reinitialize the layout on window resize
Metronic.addResizeHandler(handleSidebarAndContentHeight); // recalculate sidebar & content height on window resize
Metronic.addResizeHandler(handleFixedSidebar); // reinitialize fixed sidebar on window resize
Metronic.addResizeHandler(handle100HeightContent); // reinitialize content height on window resize
//layout handlers
handleFixedSidebar(); // handles fixed sidebar menu
handleSidebarMenu(); // handles main menu
handleHorizontalMenu(); // handles horizontal menu
handleSidebarToggler(); // handles sidebar hide/show
handle100HeightContent(); // handles 100% height elements(block, portlet, etc)
handleGoTop(); //handles scroll to top functionality in the footer
handleTabs(); // handle bootstrah tabs
handleTheme(); // handles style customer tool
},
//public function to fix the sidebar and content height accordingly
fixContentHeight: function () {
handleSidebarAndContentHeight();
},
getLayoutImgPath: function () {
return layoutImgPath;
}
};
}();