Hello. I try to make my own meteor app, based on adminlte 2 FREE template. So i took the page starter.html, converted it into layout.html + layout.js, put the css files in the clinet folder, and manually imported javascripts like so layout.js:
import '/public/js/bootstrap'
import '/public/js/adminlte.min'
import '../parts/sidebar'
import './layout.html'
BlazeLayout.setRoot('body');
So everything works, but i get the same problem as shown here
According to this issue thread on github https://github.com/ColorlibHQ/AdminLTE/issues/1797 i found out that the solution should be to do this in Template.layout.onRendered
:
$('body').layout('fix');
But the problem is that, the layout is a jquery plugin, and it looks like this (from adminlte.js
):
> 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',
> logo : '.main-header .logo'
> };
>
> 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',
> 'min-height': '100%'
> });
> }
>
> if (!this.bindedResize) {
> $(window).resize(function () {
> this.fix();
> this.fixSidebar();
>
> $(Selector.logo + ', ' + Selector.sidebar).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
> this.fix();
> this.fixSidebar();
> }.bind(this));
> }.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 headerHeight = $(Selector.mainHeader).outerHeight() || 0;
> var neg = headerHeight + footerHeight;
> var windowHeight = $(window).height();
> var sidebarHeight = $(Selector.sidebar).height() || 0;
>
> // Set the min-height of the content and sidebar based on
> // the height of the document.
> if ($('body').hasClass(ClassName.fixed)) {
> $(Selector.contentWrapper).css('min-height', windowHeight - footerHeight);
> } else {
> var postSetHeight;
>
> if (windowHeight >= sidebarHeight + headerHeight) {
> $(Selector.contentWrapper).css('min-height', windowHeight - neg);
> postSetHeight = windowHeight - neg;
> } else {
> $(Selector.contentWrapper).css('min-height', sidebarHeight);
> postSetHeight = sidebarHeight;
> }
>
> // Fix for the control sidebar height
> var $controlSidebar = $(Selector.controlSidebar);
> if (typeof $controlSidebar !== 'undefined') {
> if ($controlSidebar.height() > postSetHeight)
> $(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'
> });
> }
> }
> };
>
> // 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'));
> });
So as you can see it iis nitiliazed via $(window).on('load')
but of course it never gets executed beacause blaze have its own trigger. Is there a way i can load this js somehow with all the events, without rewriting it? And if i have to rewrite it, can someone kick me in the right direction, how to do it. I mean there are prototype/classes used, can i use those in Template.layout
? By the way i use BlazeLayout
. Hope someone helps