Hi,
is there a possibility to improve the performance if I navigate from one page to another?
Currently the issue is that the menu on the left side is loading for a short moment as soon the page is loading, but this means also the content (from the middle of the page) is for a moment bigger than it should be.
After the menu is opened (loaded completely), the content will be reduced and it´s also the correct size.
If I compare this with other layout, like https://www.primefaces.org/babylon/input.xhtml the speed is much more quicker here.
Can you fix this, please?
Thank you
Improve performance for load menu
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Sorry for the delayed response! I'll check the differences between Babylon and Manhattan.
Also, can you add a video about this problem so that we can reproduce this problem more easily?
Best Regards,
Sorry for the delayed response! I'll check the differences between Babylon and Manhattan.
Also, can you add a video about this problem so that we can reproduce this problem more easily?
Best Regards,
Github Profile: https://github.com/mertsincan
Thank you very much.
I have not a video, but it can be reproduce very easy from the showcase:
https://www.primefaces.org/morpheus/dashboard.xhtml
If you navigate from one page to another it´s like this:
- At first the menu is not expanded:
approx: 500ms later, it will be expanded (depends on the number of components in the content area etc.):
It´s a little bit frustrating, if a user clicks on a button or in a input field in the content area, but during this moment, the menu is expanded and instead the cursor is in the inputtext, it will be executed a link from the menu (due to this delay) and redirect to another page..
If you compare that to Babylon, it´s not that case. The performance is much more better.
Many thanks in advance.
I have not a video, but it can be reproduce very easy from the showcase:
https://www.primefaces.org/morpheus/dashboard.xhtml
If you navigate from one page to another it´s like this:
- At first the menu is not expanded:
approx: 500ms later, it will be expanded (depends on the number of components in the content area etc.):
It´s a little bit frustrating, if a user clicks on a button or in a input field in the content area, but during this moment, the menu is expanded and instead the cursor is in the inputtext, it will be executed a link from the menu (due to this delay) and redirect to another page..
If you compare that to Babylon, it´s not that case. The performance is much more better.
Many thanks in advance.
PF 8.0
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Sorry for the delayed response! I checked this issue. Maybe, it can be related to $(window).trigger('resize'); in layout.js. Could you please try this issue after removing $(window).trigger('resize');? Also, could you please test it on empty page demo (../morpheus/empty.xhtml)? The images and charts in the dashboard may be causing the performance issues.
(Note: Apart from trigger('resize'), there is no difference in the application with other layouts.)
Best Regards,
Sorry for the delayed response! I checked this issue. Maybe, it can be related to $(window).trigger('resize'); in layout.js. Could you please try this issue after removing $(window).trigger('resize');? Also, could you please test it on empty page demo (../morpheus/empty.xhtml)? The images and charts in the dashboard may be causing the performance issues.
(Note: Apart from trigger('resize'), there is no difference in the application with other layouts.)
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Could you please make the following changes in layout.js?
Please change PrimeFaces.widget.Morpheus with new one.
Code: Select all
PrimeFaces.widget.Morpheus = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
this.wrapper = $(document.body).children('.layout-wrapper');
this.sidebar = this.wrapper.children('.layout-sidebar');
this.tabMenu = this.jq;
this.tabMenuNav = this.tabMenu.children('.layout-tabmenu-nav');
this.tabMenuNavItems = this.tabMenuNav.children('li');
this.tabMenuNavLinks = this.tabMenuNav.find('a');
this.topbar = this.wrapper.children('.topbar');
this.topbarMenu = this.topbar.children('.topbar-menu');
this.topbarItems = this.topbarMenu.children('li');
this.topbarLinks = this.topbarItems.children('a');
this.menuButton = $('#menu-button');
this.topbarMenuButton = $('#topbar-menu-button');
this.menuActive = false;
this.sidebarClick = false;
this.topbarLinkClick = false;
this.topbarMenuClick = false;
this._bindEvents();
},
_bindEvents: function() {
var $this = this;
this.menuButton.off('click.menu').on('click.menu', function(e) {
if($this.wrapper.hasClass('layout-wrapper-menu-active')) {
$this.hideMenu();
}
else {
var activeItem = $this.tabMenuNavItems.filter('.active-item');
activeItem = activeItem.length > 0 ? activeItem : $this.tabMenuNavItems.eq(0);
$this.openMenu(activeItem.children('a'));
}
$this.sidebarClick = true;
e.preventDefault();
});
this.tabMenuNavLinks.off('click.menu').on('click.menu', function(e) {
var link = $(this);
link.parent().siblings('.active-item').removeClass('active-item');
$this.openMenu(link);
$(this).children('.layout-tabmenu-tooltip').hide();
e.preventDefault();
});
$(document.body).off('click.layoutBody').on('click.layoutBody', function() {
if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
$this.topbarItems.filter('.active-topmenuitem').removeClass('active-topmenuitem');
$this.topbarMenu.removeClass('topbar-menu-visible');
}
if(!$this.sidebarClick && ($this.isOverlayMenu() || !$this.isDesktop())) {
$this.wrapper.removeClass('layout-wrapper-menu-active');
}
$this.topbarLinkClick = false;
$this.topbarMenuClick = false;
$this.sidebarClick = false;
});
},
openMenu: function(link, restore) {
this.sidebar.css('overflow','hidden');
var parent = link.parent();
parent.addClass('active-item');
this.wrapper.addClass('layout-wrapper-menu-active');
if(restore) {
this.wrapper.addClass('layout-wrapper-menu-active-restore');
}
this.tabMenu.children('.layout-tabmenu-contents').children('.layout-tabmenu-content').removeClass('layout-tabmenu-content-active').
eq(parent.index()).addClass('layout-tabmenu-content-active');
},
hideMenu: function() {
this.sidebar.css('overflow','visible');
this.wrapper.removeClass('layout-wrapper-menu-active layout-wrapper-menu-active-restore');
},
fireTabChangeEvent: function(tab) {
if (this.cfg.behaviors && this.cfg.behaviors['tabChange']) {
var ext = {
params: [
{name: this.id + '_newTab', value: tab.attr('id')},
{name: this.id + '_tabindex', value: tab.index()}
]
};
this.cfg.behaviors['tabChange'].call(this, ext);
}
},
isTablet: function() {
var width = window.innerWidth;
return width <= 1024 && width > 640;
},
isDesktop: function() {
return window.innerWidth > 1024;
},
isMobile: function() {
return window.innerWidth <= 640;
},
isOverlayMenu: function() {
return this.wrapper.hasClass('layout-overlay-menu');
},
isIOS: function(e) {
return ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)));
},
saveTabState: function(id) {
$.cookie('morpheus_expandedtab', id, {path: '/'});
},
clearTabState: function() {
$.removeCookie('morpheus_expandedtab', {path: '/'});
},
restoreTabState: function() {
this.expandedTab = $.cookie('morpheus_expandedtab');
if (this.expandedTab) {
var tab = $("#" + this.expandedTab.replace(/:/g, "\\:"));
this.openMenu(tab.children('a'), true);
}
else if(this.cfg.activeIndex) {
var active = this.tabMenuNavItems.eq(parseInt(this.cfg.activeIndex));
this.openMenu(active.children('a'), true);
}
}
});
/**
* PrimeFaces MorpheusMenu Component
*/
PrimeFaces.widget.MorpheusMenu = PrimeFaces.widget.BaseWidget.extend({
...
})
...
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 0 guests