/* Layout() * ======== * Implements AdminLTE layout. * Fixes the layout height in case min-height fails. * * @usage activated automatically upon window load. * Configure any options by passing data-option="value" * to the body tag. */ +function ($) { 'use strict' var DataKey = 'lte.layout' var Default = { slimscroll : true, resetHeight: true } var Selector = { wrapper : '.wrapper', contentWrapper: '.content-wrapper', layoutBoxed : '.layout-boxed', mainFooter : '.main-footer', mainHeader : '.main-header', sidebar : '.sidebar', controlSidebar: '.control-sidebar', fixed : '.fixed', sidebarMenu : '.sidebar-menu' } var ClassName = { fixed : 'fixed', holdTransition: 'hold-transition' } var Layout = function (options) { this.options = options this.bindedResize = false this.activate() } Layout.prototype.activate = function () { this.fix() this.fixSidebar() $('body').removeClass(ClassName.holdTransition) if (this.options.resetHeight) { $('body, html, ' + Selector.wrapper).css('height', 'auto') } if (!this.bindedResize) { $(window).resize(function () { this.fix() this.fixSidebar() }.bind(this)) this.bindedResize = true; } $(Selector.sidebarMenu).on('expanded.tree', function () { this.fix() this.fixSidebar() }.bind(this)) $(Selector.sidebarMenu).on('collapsed.tree', function () { this.fix() this.fixSidebar() }.bind(this)) } Layout.prototype.fix = function () { // Remove overflow from .wrapper if layout-boxed exists $(Selector.layoutBoxed + ' > ' + Selector.wrapper).css('overflow', 'hidden') // Get window height and the wrapper height var footerHeight = $(Selector.mainFooter).outerHeight() || 0 var neg = $(Selector.mainHeader).outerHeight() + footerHeight var windowHeight = $(window).height() var sidebarHeight = $(Selector.sidebar).height() || 0 // Set the min-height of the content and sidebar based on the // the height of the document. if ($('body').hasClass(ClassName.fixed)) { $(Selector.contentWrapper).css('min-height', windowHeight - footerHeight) } else { var postSetWidth if (windowHeight >= sidebarHeight) { $(Selector.contentWrapper).css('min-height', windowHeight - neg) postSetWidth = windowHeight - neg } else { $(Selector.contentWrapper).css('min-height', sidebarHeight) postSetWidth = sidebarHeight } // Fix for the control sidebar height var $controlSidebar = $(Selector.controlSidebar) if (typeof $controlSidebar !== 'undefined') { if ($controlSidebar.height() > postSetWidth) $(Selector.contentWrapper).css('min-height', $controlSidebar.height()) } } } Layout.prototype.fixSidebar = function () { // Make sure the body tag has the .fixed class if (!$('body').hasClass(ClassName.fixed)) { if (typeof $.fn.slimScroll != 'undefined') { $(Selector.sidebar).slimScroll({ destroy: true }).height('auto') } return } // Enable slimscroll for fixed layout if (this.options.slimscroll) { if (typeof $.fn.slimScroll != 'undefined') { // Destroy if it exists $(Selector.sidebar).slimScroll({ destroy: true }).height('auto') // Add slimscroll $(Selector.sidebar).slimScroll({ height: ($(window).height() - $(Selector.mainHeader).height()) + 'px', color : 'rgba(0,0,0,0.2)', size : '3px' }) } } } // Plugin Definition // ================= function Plugin(option) { return this.each(function () { var $this = $(this) var data = $this.data(DataKey) if (!data) { var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option) $this.data(DataKey, (data = new Layout(options))) } if (typeof option == 'string') { if (typeof data[option] == 'undefined') { throw new Error('No method named ' + option) } data[option]() } }) } var old = $.fn.layout $.fn.layout = Plugin $.fn.layout.Constuctor = Layout // No conflict mode // ================ $.fn.layout.noConflict = function () { $.fn.layout = old return this } // Layout DATA-API // =============== $(window).on('load', function () { Plugin.call($('body')) }) }(jQuery)