Skip to content

Instantly share code, notes, and snippets.

@antmrdevlabs

antmrdevlabs/jquery.layout-manager.js

Created February 24, 2014 21:20
Show Gist options
  • Save antmrdevlabs/9197366 to your computer and use it in GitHub Desktop.
Save antmrdevlabs/9197366 to your computer and use it in GitHub Desktop.
Download ZIP
Simple jQuery Layout Manager
Raw
jquery.layout-manager.js
/**
* jqLaMa - jQuery Layout Manager
*
* @author Antmr
* @version 1.0
*
* USAGE:
*
* layout-mgr-Attributes:
* -------------------------------------------------------------------
* layout-mgr-resize-height
* layout-mgr-resize-width
* layout-mgr-padding-top
* layout-mgr-set-width
* layout-mgr-set-height
* layout-mgr-view-has-tabs
* layout-mgr-splitpane-container="true"/"false"
* layout-mgr-splitpane-direction="horizontal"
* layout-mgr-splitpane-item="<num>"
* layout-mgr-splitpane-item-height="auto"
* layout-mgr-splitpane-item-visibility="toggle"|"visible"
*/
; (function ($) {
$.layout = (function (options, callback) {
var config = { };
var windowWidth = 0;
var windowHeight = 0;
var heightWindowNav = 0;
var heightOfSectionHeader = 0;
var heightOfSectionContent = 0;
var availableHeightWindowContent = 0;
var availableWidthWindowContent = 0;
var lastTotalHeight = 0;
var resizeDirection = 0; // none | -1 = shrink | +1 = enlarge
var currentViewportHasTabs = true;
var defaultPaddingContentAside = 18; //px
var tabBarPaddingContentAside = 34; //px
var heightTabBar = 0;
// Extend the settings with those the user has provided
if(options && typeof options == "object") $.extend(config, options);
// Just in case the user passed in a function without options
if(options && typeof options == "function") callback = options;
// Initialize when document is ready
$(document).ready(_init);
// For chaining
//return this;
// ----------------------------------------------------------------
// _init
// ----------------------------------------------------------------
function _init() {
$(window).resize(_adjustLayout); // bind to window resize event
_measureElements();
_resizeElements();
_bindEventHandlers();
}
// ----------------------------------------------------------------
// _adjustLayout
// ----------------------------------------------------------------
function _adjustLayout() {
_measureElements();
_resizeElements();
//_logToConsole("adjust");
};
// ----------------------------------------------------------------
// _measureElements
// ----------------------------------------------------------------
function _measureElements() {
var $section = $("section");
var $sectionPageHeader = $("section .page-header");
// compute heights
windowHeight = $(document).outerHeight(true);
heightWindowNav = 53;
var heightOffset = $section.outerHeight(true) - $section.innerHeight();
availableHeightWindowContent = windowHeight
- heightWindowNav
- parseInt($section.css("padding-top"))
- parseInt($section.css("padding-bottom"))
- heightOffset;
heightOfSectionHeader = $sectionPageHeader.outerHeight();
heightOfSectionContent = availableHeightWindowContent - heightOfSectionHeader;
// compute widths
windowWidth = $(document).outerWidth();
var widthOffset = $section.outerWidth(true) - $section.innerWidth();
availableWidthWindowContent = windowWidth
- parseInt($section.css("padding-left"))
- parseInt($section.css("padding-right"))
- widthOffset;
};
// ----------------------------------------------------------------
// _resizeElements
// ----------------------------------------------------------------
function _resizeElements() {
var $content = $("#content");
var $contentAside = $("#content aside");
var $contentArticle = $("#content article");
var $contentArticleTabBar = $("#content article div:first-child");
var $contentArticleTableHeader = $("#content article .table-header");
var $contentArticleScrollableTableWrapper = $("#content article div.scroll");
// adjust HEIGHT
if ($content.attr('layout-mgr-resize-height') === false || typeof $content.attr('layout-mgr-resize-height') === 'undefined' || $content.attr('layout-mgr-resize-height') == "true") {
$content.height(availableHeightWindowContent);
}
if ($contentAside.attr('layout-mgr-resize-height') === false || typeof $contentAside.attr('layout-mgr-resize-height') === 'undefined' || $contentAside.attr('layout-mgr-resize-height') == "true") {
if ($contentArticleScrollableTableWrapper.length > 0) {
if ($contentAside.length > 0) {
// || currentViewportHasTabs == true
// with tabs for table sorting etc.
heightTabBar = $contentArticleTabBar.height();
heightContentAside = heightOfSectionContent - heightTabBar;
$contentAside.css({'padding-top': '34px'});
$contentAside.height(heightContentAside);
}
}
else {
// no tabs, but aside section
if ($contentAside.length > 0) {
if ($contentAside.attr('layout-mgr-padding-top') === false || typeof $contentAside.attr('layout-mgr-padding-top') === 'undefined' || $contentAside.attr('layout-mgr-padding-top') != "none") {
heightContentAside = heightOfSectionContent - defaultPaddingContentAside;
$contentAside.css('padding-top',defaultPaddingContentAside + "px");
$contentAside.height(heightContentAside);
}
else {
$contentAside.css('padding-top','0');
$contentAside.height(heightOfSectionContent);
}
}
else {
$contentAside.css('padding-top','0');
$contentAside.height(heightOfSectionContent);
}
}
}
if ($contentArticle.attr('layout-mgr-resize-height') === false || typeof $contentArticle.attr('layout-mgr-resize-height') === 'undefined' || $contentArticle.attr('layout-mgr-resize-height') == "true") {
$contentArticle.height(heightOfSectionContent);
heightTabBar = $contentArticleTabBar.height();
heightContentArticleTableHeader = $contentArticleTableHeader.outerHeight(true);
var heightScrollableContent = heightOfSectionContent;
if ($contentArticleScrollableTableWrapper.length > 0) {
heightScrollableContent = heightOfSectionContent - heightTabBar - heightContentArticleTableHeader;
$contentArticleScrollableTableWrapper.height(heightScrollableContent);
}
}
// adjust WIDTH
if ($content.attr('layout-mgr-resize-width') === false || typeof $content.attr('layout-mgr-resize-width') === 'undefined' || $content.attr('layout-mgr-resize-width') == "true") {
$content.width(availableWidthWindowContent);
}
//if ($contentArticle.attr('layout-mgr-resize-width') === false || typeof $contentArticle.attr('layout-mgr-resize-width') === 'undefined' || $contentArticle.attr('layout-mgr-resize-width') == "true") {
//$contentArticle.width();
//}
_evalLayoutMgrSetWithAndSetHeightAttr();
_evalSplitpane();
};
// ----------------------------------------------------------------
// _evalLayoutMgrSetWithAndSetHeightAttr
// ----------------------------------------------------------------
function _evalLayoutMgrSetWithAndSetHeightAttr() {
$("#content").find("*[layout-mgr-set-width]").each(function(){
var $this = $(this);
var sourceElement = $this.attr('layout-mgr-set-width');
var $source = $(sourceElement);
// border width left/right of element to resize
var borderLeftWidth = parseInt($this.css('borderLeftWidth'),10);
var borderRightWidth = parseInt($this.css('borderRightWidth'),10);
var newWidth = $source.width() - borderLeftWidth - borderRightWidth;
// set new width on element
$this.width(newWidth);
});
$("#content").find("*[layout-mgr-set-height]").each(function(){
var $this = $(this);
var sourceElement = $this.attr('layout-mgr-set-height');
var $source = $(sourceElement);
// border width left/right of element to resize
var borderTopWidth = parseInt($this.css('borderTopWidth'),10);
var borderBottomWidth = parseInt($this.css('borderBottomWidth'),10);
var newHeight = $source.width() - borderTopWidth - borderBottomWidth;
// set new height on element
$this.width(newHeight);
});
};
// ----------------------------------------------------------------
// _evalsplitpane
// ----------------------------------------------------------------
//layout-mgr-splitpane-container="true"
function _evalSplitpane() {
$("#content").find("*[layout-mgr-splitpane=true]").each(function() {
var splitpaneDirection;
$splitpane = $(this);
splitpaneDirection = $splitpane.attr("layout-mgr-splitpane-direction");
console.log($splitpane);
});
};
// ----------------------------------------------------------------
// _bindEventHandlers: special event handlers
// ----------------------------------------------------------------
function _bindEventHandlers() {
// ----------------------------------------------------------------
// handle click event for buttons with having
// attr: layout-mgr-view-has-tabs = ["true"|"false"]
// ----------------------------------------------------------------
$("#content").on("click", ".btn", function(){
var $this = $(this);
var $contentAside = $("#content aside");
var $contentArticle = $("#content article");
var $contentArticleTabBar = $("#content article div:first-child");
var heightTabBar = $contentArticleTabBar.height();
var heightContentAside = heightOfSectionContent - heightTabBar;
if ($this.attr('layout-mgr-view-has-tabs') == "true") {
currentViewportHasTabs = true;
$contentArticle.addClass("no-scroll");
$contentAside.css('padding-top','34px');
heightTabBar = $contentArticleTabBar.height();
var tmpHeight = heightOfSectionContent - heightTabBar;
$contentAside.height(tmpHeight);
$("#content article .scroll").height(heightOfSectionContent);
}
else if ($this.attr('layout-mgr-view-has-tabs') == "false") {
currentViewportHasTabs = false;
console.log($contentArticle);
$contentArticle.removeClass('no-scroll');
$contentAside.css('padding-top',defaultPaddingContentAside + 'px');
var tmpHeight = heightOfSectionContent - defaultPaddingContentAside;
$contentAside.height(tmpHeight);
//$("#content article .scroll").removeClass('scroll').height(heightOfSectionContent);
}
});
};
// ----------------------------------------------------------------
// _logToConsole
// ----------------------------------------------------------------
function _logToConsole(source) {
console.log(source);
console.log("-------------------------------------------");
console.log("windowHeight: " + windowHeight);
console.log("heightWindowNav: " + heightWindowNav);
console.log("availableHeightWindowContent: " + availableHeightWindowContent);
console.log("heightOfSectionHeader: " + heightOfSectionHeader);
console.log("heightOfSectionContent: " + heightOfSectionContent);
console.log("windowWidth: " + windowWidth);
console.log("availableWidthWindowContent: " + availableWidthWindowContent);
console.log($("section").outerWidth(true));
console.log($("section").innerWidth());
console.log("-------------------------------------------");
};
// ----------------------------------------------------------------
// return functions for calling methods directly,
// e.g. $.layout.handlesplitpane();
// ----------------------------------------------------------------
return {
resizeElements: _resizeElements,
evalSplitpane: _evalSplitpane,
measureElements: _measureElements
};
})();
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment