Page 1 of 1
Closing menu on second click
Posted: 22 May 2018, 11:54
by Babas007
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?
Re: Closing menu on second click
Posted: 29 May 2018, 08:20
by mert.sincan
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>
Re: Closing menu on second click
Posted: 14 Jun 2018, 17:15
by Babas007
There is a lot of code, can you point me what you modified please?
Re: Closing menu on second click
Posted: 18 Jun 2018, 08:38
by mert.sincan
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>