Layout.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. /* Layout()
  2. * ========
  3. * Implements AdminLTE layout.
  4. * Fixes the layout height in case min-height fails.
  5. *
  6. * @usage activated automatically upon window load.
  7. * Configure any options by passing data-option="value"
  8. * to the body tag.
  9. */
  10. +function ($) {
  11. 'use strict';
  12. var DataKey = 'lte.layout';
  13. var Default = {
  14. slimscroll : true,
  15. resetHeight: true
  16. };
  17. var Selector = {
  18. wrapper : '.wrapper',
  19. contentWrapper: '.content-wrapper',
  20. layoutBoxed : '.layout-boxed',
  21. mainFooter : '.main-footer',
  22. mainHeader : '.main-header',
  23. sidebar : '.sidebar',
  24. controlSidebar: '.control-sidebar',
  25. fixed : '.fixed',
  26. sidebarMenu : '.sidebar-menu',
  27. logo : '.main-header .logo'
  28. };
  29. var ClassName = {
  30. fixed : 'fixed',
  31. holdTransition: 'hold-transition'
  32. };
  33. var Layout = function (options) {
  34. this.options = options;
  35. this.bindedResize = false;
  36. this.activate();
  37. };
  38. Layout.prototype.activate = function () {
  39. this.fix();
  40. this.fixSidebar();
  41. $('body').removeClass(ClassName.holdTransition);
  42. if (this.options.resetHeight) {
  43. $('body, html, ' + Selector.wrapper).css({
  44. 'height' : 'auto',
  45. 'min-height': '100%'
  46. });
  47. }
  48. if (!this.bindedResize) {
  49. $(window).resize(function () {
  50. this.fix();
  51. this.fixSidebar();
  52. $(Selector.logo + ', ' + Selector.sidebar).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
  53. this.fix();
  54. this.fixSidebar();
  55. }.bind(this));
  56. }.bind(this));
  57. this.bindedResize = true;
  58. }
  59. $(Selector.sidebarMenu).on('expanded.tree', function () {
  60. this.fix();
  61. this.fixSidebar();
  62. }.bind(this));
  63. $(Selector.sidebarMenu).on('collapsed.tree', function () {
  64. this.fix();
  65. this.fixSidebar();
  66. }.bind(this));
  67. };
  68. Layout.prototype.fix = function () {
  69. // Remove overflow from .wrapper if layout-boxed exists
  70. $(Selector.layoutBoxed + ' > ' + Selector.wrapper).css('overflow', 'hidden');
  71. // Get window height and the wrapper height
  72. var footerHeight = $(Selector.mainFooter).outerHeight() || 0;
  73. var headerHeight = $(Selector.mainHeader).outerHeight() || 0;
  74. var neg = headerHeight + footerHeight;
  75. var windowHeight = $(window).height();
  76. var sidebarHeight = $(Selector.sidebar).height() || 0;
  77. // Set the min-height of the content and sidebar based on
  78. // the height of the document.
  79. if ($('body').hasClass(ClassName.fixed)) {
  80. $(Selector.contentWrapper).css('min-height', windowHeight - footerHeight);
  81. } else {
  82. var postSetHeight;
  83. if (windowHeight >= sidebarHeight + headerHeight) {
  84. $(Selector.contentWrapper).css('min-height', windowHeight - neg);
  85. postSetHeight = windowHeight - neg;
  86. } else {
  87. $(Selector.contentWrapper).css('min-height', sidebarHeight);
  88. postSetHeight = sidebarHeight;
  89. }
  90. // Fix for the control sidebar height
  91. var $controlSidebar = $(Selector.controlSidebar);
  92. if (typeof $controlSidebar !== 'undefined') {
  93. if ($controlSidebar.height() > postSetHeight)
  94. $(Selector.contentWrapper).css('min-height', $controlSidebar.height());
  95. }
  96. }
  97. };
  98. Layout.prototype.fixSidebar = function () {
  99. // Make sure the body tag has the .fixed class
  100. if (!$('body').hasClass(ClassName.fixed)) {
  101. if (typeof $.fn.slimScroll !== 'undefined') {
  102. $(Selector.sidebar).slimScroll({ destroy: true }).height('auto');
  103. }
  104. return;
  105. }
  106. // Enable slimscroll for fixed layout
  107. if (this.options.slimscroll) {
  108. if (typeof $.fn.slimScroll !== 'undefined') {
  109. // Destroy if it exists
  110. // $(Selector.sidebar).slimScroll({ destroy: true }).height('auto')
  111. // Add slimscroll
  112. $(Selector.sidebar).slimScroll({
  113. height: ($(window).height() - $(Selector.mainHeader).height()) + 'px'
  114. });
  115. }
  116. }
  117. };
  118. // Plugin Definition
  119. // =================
  120. function Plugin(option) {
  121. return this.each(function () {
  122. var $this = $(this);
  123. var data = $this.data(DataKey);
  124. if (!data) {
  125. var options = $.extend({}, Default, $this.data(), typeof option === 'object' && option);
  126. $this.data(DataKey, (data = new Layout(options)));
  127. }
  128. if (typeof option === 'string') {
  129. if (typeof data[option] === 'undefined') {
  130. throw new Error('No method named ' + option);
  131. }
  132. data[option]();
  133. }
  134. });
  135. }
  136. var old = $.fn.layout;
  137. $.fn.layout = Plugin;
  138. $.fn.layout.Constuctor = Layout;
  139. // No conflict mode
  140. // ================
  141. $.fn.layout.noConflict = function () {
  142. $.fn.layout = old;
  143. return this;
  144. };
  145. // Layout DATA-API
  146. // ===============
  147. $(window).on('load', function () {
  148. Plugin.call($('body'));
  149. });
  150. }(jQuery);