After several guerilla tests, users expects the menu to close after clicking once again on menu item. Clicking on the "kebab" icon is not intuitive for them (to close it), and once they know about it, they feel like exra effort. I share their opinion
Would it be possible to add that on next version?
Closing menu on second click
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
Could you please try the following Js code?
Code: Select all
<script type="text/javascript">
//<![CDATA[
/**
* PrimeFaces Barcelona Layout
*/
PrimeFaces.widget.Barcelona.prototype._bindEvents = function() {
var $this = this;
this.tabMenu.find('.menu-button').on('click', function(e) {
$this.wrapper.removeClass('layout-wrapper-menu-active');
$this.tabMenuContents.find('.ripple-animate').remove();
if(!$this.isOverlayMenu()) {
setTimeout(function() {
$(window).trigger('resize');
}, 310);
}
e.preventDefault();
});
this.tabMenu.find('.menu-pin-button').on('click', function(e) {
var icon = $(this).children('i');
if(icon.hasClass('fa-rotate-90'))
$this._saveMenuState($(this).closest('.layout-tabmenu-content').index());
else
$this.clearMenuState();
$this.tabMenuContents.find('.menu-pin-button').children('i').toggleClass('fa-rotate-90');
e.preventDefault();
});
this.tabMenuNavLinks.on('click', function(e) {
$this.sidebar.css('overflow','hidden');
setTimeout(function() {
$this.sidebar.css('overflow','');
}, 301);
var link = $(this);
link.parent().addClass('active-item').siblings('.active-item').removeClass('active-item');
var tabContent = $this.tabMenuContents.eq(link.parent().index()),
isTabContentOpen = tabContent.hasClass('layout-tabmenu-content-active');
if(isTabContentOpen)
$this.wrapper.removeClass('layout-wrapper-menu-active');
else
$this.wrapper.addClass('layout-wrapper-menu-active');
$this.tabMenuContents.find('.ripple-animate').remove();
$this.tabMenuContents.removeClass('layout-tabmenu-content-active');
if(!isTabContentOpen) {
tabContent.addClass('layout-tabmenu-content-active');
var nanoInContent = tabContent.children('.layout-submenu-content').find('.nano');
if(nanoInContent.length) {
nanoInContent.nanoScroller();
}
}
if(!$this.isOverlayMenu()) {
setTimeout(function() {
$(window).trigger('resize');
}, 310);
}
var pinbutton = tabContent.find('.menu-pin-button');
if(pinbutton.length && !pinbutton.children('i').hasClass('fa-rotate-90')) {
$this._saveMenuState(link.parent().index());
}
$(this).siblings('.layout-tabmenu-tooltip').hide();
e.preventDefault();
});
if(!this.isIOS()) {
this.tabMenuNavLinks.on('mouseenter', function(e) {
var link = $(this);
if(!link.parent().hasClass('active-item')||!$this.wrapper.hasClass('layout-wrapper-menu-active')) {
link.siblings('.layout-tabmenu-tooltip').show();
}
})
.on('mouseleave', function(e) {
$(this).siblings('.layout-tabmenu-tooltip').hide();
});
}
this.topbarMenuButton.on('click', function(e) {
$this.topbarMenuClick = true;
$this.topbarMenu.find('ul').removeClass('fadeInDown fadeOutUp');
if($this.topbarMenu.hasClass('topbar-menu-visible')) {
$this.topbarMenu.addClass('fadeOutUp');
setTimeout(function() {
$this.topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
},500);
}
else {
$this.topbarMenu.addClass('topbar-menu-visible fadeInDown');
}
e.preventDefault();
});
$this.topbarUsermenuButton.off('click').on('click', function (e) {
//TODO: Move to CSS
$this.topbarMenuClick = true;
if ($this.topbarUserMenu.hasClass('usermenu-active')) {
$this.topbarUserMenu.removeClass('fadeInDown').addClass('fadeOutUp');
setTimeout(function () {
$this.topbarUserMenu.removeClass('usermenu-active fadeOutUp');
}, 250);
}
else {
$this.topbarUserMenu.addClass('usermenu-active fadeInDown');
}
e.preventDefault();
});
$this.topbarUserMenu.off('click').on('click', function (e) {
$this.topbarMenuClick = true;
});
$this.usermenuLinks.on('click', function (e) {
var link = $(this),
item = link.parent(),
submenu = link.next();
$this.usermenuLinkClick = true;
item.siblings('.menuitem-active').removeClass('menuitem-active').children('ul').slideUp();
if (item.hasClass('menuitem-active')) {
item.removeClass('menuitem-active');
submenu.slideUp();
}
else {
item.addClass('menuitem-active');
submenu.slideDown();
}
if (submenu.length) {
e.preventDefault();
}
});
this.topbarLinks.on('click', function(e) {
var link = $(this),
item = link.parent(),
submenu = link.next();
$this.topbarLinkClick = true;
item.siblings('.active-topmenuitem').removeClass('active-topmenuitem');
if($this.isDesktop()) {
if(submenu.length) {
if(item.hasClass('active-topmenuitem')) {
submenu.addClass('fadeOutUp');
setTimeout(function() {
item.removeClass('active-topmenuitem'),
submenu.removeClass('fadeOutUp');
},500);
}
else {
item.addClass('active-topmenuitem');
submenu.addClass('fadeInDown');
}
}
}
else {
item.children('ul').removeClass('fadeInDown fadeOutUp');
item.toggleClass('active-topmenuitem');
}
var href = link.attr('href');
if(href && href !== '#') {
window.location.href = href;
}
e.preventDefault();
});
this.topbarMenu.children('.search-item').on('click', function(e) {
$this.topbarLinkClick = true;
});
this.sidebar.off('click.sidebar').on('click.sidebar', function(e) {
$this.sidebarClick = true;
});
$(document.body).on('click', 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');
}
if (!$this.topbarMenuClick && $this.topbarUserMenu.hasClass('usermenu-active')) {
$this.topbarUserMenu.removeClass('usermenu-active')
}
$this.topbarLinkClick = false;
$this.topbarMenuClick = false;
$this.sidebarClick = false;
});
};
//]]>
</script>
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I added comment to show my changes into the following codes.
Code: Select all
<script type="text/javascript">
//<![CDATA[
/**
* PrimeFaces Barcelona Layout
*/
PrimeFaces.widget.Barcelona.prototype._bindEvents = function() {
var $this = this;
this.tabMenu.find('.menu-button').on('click', function(e) {
$this.wrapper.removeClass('layout-wrapper-menu-active');
$this.tabMenuContents.find('.ripple-animate').remove();
if(!$this.isOverlayMenu()) {
setTimeout(function() {
$(window).trigger('resize');
}, 310);
}
e.preventDefault();
});
this.tabMenu.find('.menu-pin-button').on('click', function(e) {
var icon = $(this).children('i');
if(icon.hasClass('fa-rotate-90'))
$this._saveMenuState($(this).closest('.layout-tabmenu-content').index());
else
$this.clearMenuState();
$this.tabMenuContents.find('.menu-pin-button').children('i').toggleClass('fa-rotate-90');
e.preventDefault();
});
this.tabMenuNavLinks.on('click', function(e) {
$this.sidebar.css('overflow','hidden');
setTimeout(function() {
$this.sidebar.css('overflow','');
}, 301);
/******************************** Please use the following codes instead of the old codes in Barcelona ************************/
var link = $(this);
link.parent().addClass('active-item').siblings('.active-item').removeClass('active-item');
var tabContent = $this.tabMenuContents.eq(link.parent().index()),
isTabContentOpen = tabContent.hasClass('layout-tabmenu-content-active');
if(isTabContentOpen)
$this.wrapper.removeClass('layout-wrapper-menu-active');
else
$this.wrapper.addClass('layout-wrapper-menu-active');
$this.tabMenuContents.find('.ripple-animate').remove();
$this.tabMenuContents.removeClass('layout-tabmenu-content-active');
if(!isTabContentOpen) {
tabContent.addClass('layout-tabmenu-content-active');
var nanoInContent = tabContent.children('.layout-submenu-content').find('.nano');
if(nanoInContent.length) {
nanoInContent.nanoScroller();
}
}
/*************************************** End *****************************************/
if(!$this.isOverlayMenu()) {
setTimeout(function() {
$(window).trigger('resize');
}, 310);
}
var pinbutton = tabContent.find('.menu-pin-button');
if(pinbutton.length && !pinbutton.children('i').hasClass('fa-rotate-90')) {
$this._saveMenuState(link.parent().index());
}
$(this).siblings('.layout-tabmenu-tooltip').hide();
e.preventDefault();
});
if(!this.isIOS()) {
this.tabMenuNavLinks.on('mouseenter', function(e) {
var link = $(this);
if(!link.parent().hasClass('active-item')||!$this.wrapper.hasClass('layout-wrapper-menu-active')) {
link.siblings('.layout-tabmenu-tooltip').show();
}
})
.on('mouseleave', function(e) {
$(this).siblings('.layout-tabmenu-tooltip').hide();
});
}
this.topbarMenuButton.on('click', function(e) {
$this.topbarMenuClick = true;
$this.topbarMenu.find('ul').removeClass('fadeInDown fadeOutUp');
if($this.topbarMenu.hasClass('topbar-menu-visible')) {
$this.topbarMenu.addClass('fadeOutUp');
setTimeout(function() {
$this.topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
},500);
}
else {
$this.topbarMenu.addClass('topbar-menu-visible fadeInDown');
}
e.preventDefault();
});
$this.topbarUsermenuButton.off('click').on('click', function (e) {
//TODO: Move to CSS
$this.topbarMenuClick = true;
if ($this.topbarUserMenu.hasClass('usermenu-active')) {
$this.topbarUserMenu.removeClass('fadeInDown').addClass('fadeOutUp');
setTimeout(function () {
$this.topbarUserMenu.removeClass('usermenu-active fadeOutUp');
}, 250);
}
else {
$this.topbarUserMenu.addClass('usermenu-active fadeInDown');
}
e.preventDefault();
});
$this.topbarUserMenu.off('click').on('click', function (e) {
$this.topbarMenuClick = true;
});
$this.usermenuLinks.on('click', function (e) {
var link = $(this),
item = link.parent(),
submenu = link.next();
$this.usermenuLinkClick = true;
item.siblings('.menuitem-active').removeClass('menuitem-active').children('ul').slideUp();
if (item.hasClass('menuitem-active')) {
item.removeClass('menuitem-active');
submenu.slideUp();
}
else {
item.addClass('menuitem-active');
submenu.slideDown();
}
if (submenu.length) {
e.preventDefault();
}
});
this.topbarLinks.on('click', function(e) {
var link = $(this),
item = link.parent(),
submenu = link.next();
$this.topbarLinkClick = true;
item.siblings('.active-topmenuitem').removeClass('active-topmenuitem');
if($this.isDesktop()) {
if(submenu.length) {
if(item.hasClass('active-topmenuitem')) {
submenu.addClass('fadeOutUp');
setTimeout(function() {
item.removeClass('active-topmenuitem'),
submenu.removeClass('fadeOutUp');
},500);
}
else {
item.addClass('active-topmenuitem');
submenu.addClass('fadeInDown');
}
}
}
else {
item.children('ul').removeClass('fadeInDown fadeOutUp');
item.toggleClass('active-topmenuitem');
}
var href = link.attr('href');
if(href && href !== '#') {
window.location.href = href;
}
e.preventDefault();
});
this.topbarMenu.children('.search-item').on('click', function(e) {
$this.topbarLinkClick = true;
});
this.sidebar.off('click.sidebar').on('click.sidebar', function(e) {
$this.sidebarClick = true;
});
$(document.body).on('click', 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');
}
if (!$this.topbarMenuClick && $this.topbarUserMenu.hasClass('usermenu-active')) {
$this.topbarUserMenu.removeClass('usermenu-active')
}
$this.topbarLinkClick = false;
$this.topbarMenuClick = false;
$this.sidebarClick = false;
});
};
//]]>
</script>
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 5 guests