From 6683ab7303c9f2078b5d21826574b80e3c32cd3d Mon Sep 17 00:00:00 2001 From: Abdullah Almsaeed Date: Sun, 19 Feb 2017 10:43:19 -0500 Subject: [PATCH] Create Layout widget --- build/js/Layout.js | 148 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 build/js/Layout.js diff --git a/build/js/Layout.js b/build/js/Layout.js new file mode 100644 index 000000000..aaff7f45f --- /dev/null +++ b/build/js/Layout.js @@ -0,0 +1,148 @@ +/* Layout + * ====== + * Fixes the layout height in case min-height fails. + * + * @usage activated automatically upon window load + */ ++function ($) { + 'use strict' + + var DataKey = 'lte.layout' + + var Default = { + slimscroll: 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' + } + + var Layout = function (options) { + this.options = options + this.activate() + } + + Layout.prototype.activate = function () { + this.fix() + this.fixSidebar() + + $('body').removeClass('hold-transition') + $('body, html, ' + Selector.wrapper).css('height', 'auto') + + $(window).resize(function () { + this.fix() + this.fixSidebar() + }.bind(this)) + + $(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) + var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option) + + if (!data) $this.data(DataKey, (data = new Layout(options))) + }) + } + + 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'), $('body').data()) + }) +}(jQuery)