Page 1 of 1
pa:tab onHide event
Posted: 14 Jun 2018, 16:43
by Babas007
Is it possible to add onHide client side event on this component please?
Re: pa:tab onHide event
Posted: 18 Jun 2018, 09:55
by mert.sincan
I think onTabChange might be better. I added it to next version. For now, please make the following changes;
primefaces-barcelona.taglib.xml
Code: Select all
//line 135
<attribute>
<name>onTabChange</name>
<required>false</required>
<type>java.lang.String</type>
<description>Client side callback to execute when a tab is clicked.</description>
</attribute>
TabMenu.java
Code: Select all
//line 24
public enum PropertyKeys {
widgetVar,
activeIndex,
onTabChange;
...
//line 68
public java.lang.String getOnTabChange() {
return (java.lang.String) getStateHelper().eval(PropertyKeys.onTabChange, null);
}
public void setOnTabChange(java.lang.String _onTabChange) {
getStateHelper().put(PropertyKeys.onTabChange, _onTabChange);
}
TabMenuRenderer.java
Code: Select all
//line 113
WidgetBuilder wb = getWidgetBuilder(context);
wb.init("Barcelona", tabMenu.resolveWidgetVar(), clientId)
.callback("onTabChange", "function(index)", tabMenu.getOnTabChange());
wb.finish();
layout.js
Code: Select all
//line 60
this.tabMenuNavLinks.on('click', function(e) {
$this.sidebar.css('overflow','hidden');
setTimeout(function() {
$this.sidebar.css('overflow','');
}, 301);
var link = $(this),
index = link.parent().index();
//Call user onTabChange callback
if($this.cfg.onTabChange) {
var result = $this.cfg.onTabChange.call($this, index);
if(result === false)
return false;
}
link.parent().addClass('active-item').siblings('.active-item').removeClass('active-item');
...
Re: pa:tab onHide event
Posted: 18 Jun 2018, 09:57
by mert.sincan
Exp;
Code: Select all
...
<pa:tabMenu onTabChange="return test(index)">
...
<script type="text/javascript">
function test(index) {
console.log(index);
if(index%2===0) {
return true;
}
else {
return false;
}
}
</script>
Re: pa:tab onHide event
Posted: 18 Jun 2018, 16:36
by Babas007
Ah I see, but I need an event when the menu is closing, and depending which tab was active I need to execute a callback
Re: pa:tab onHide event
Posted: 26 Jun 2018, 11:15
by mert.sincan
How do you hide pa:tab? using menu-button icon that is in layout-submenu-title or by clicking on the other tabs. Which menu mode are you using?
Re: pa:tab onHide event
Posted: 26 Jun 2018, 12:01
by Babas007
Clicking on menubutton icon or clicking outside the menu
Re: pa:tab onHide event
Posted: 28 Jun 2018, 09:51
by mert.sincan
Ok, thanks a lot for the update! I'll work on it and get back to you.
Re: pa:tab onHide event
Posted: 28 Jun 2018, 10:21
by mert.sincan
I added onTabChange and onTabClose callbacks to next version. For now, please make the following changes;
primefaces-barcelona.taglib.xml
Code: Select all
//line 135
<attribute>
<name>onTabChange</name>
<required>false</required>
<type>java.lang.String</type>
<description>Client side callback to execute when a tab is clicked.</description>
</attribute>
<attribute>
<name>onTabClose</name>
<required>false</required>
<type>java.lang.String</type>
<description>Client side callback to execute before a tab is closed. Return false to prevent closing.</description>
</attribute>
TabMenu.java
Code: Select all
//line 24
public enum PropertyKeys {
widgetVar,
activeIndex,
onTabChange,
onTabClose;
...
//line 68
public java.lang.String getOnTabChange() {
return (java.lang.String) getStateHelper().eval(PropertyKeys.onTabChange, null);
}
public void setOnTabChange(java.lang.String _onTabChange) {
getStateHelper().put(PropertyKeys.onTabChange, _onTabChange);
}
public java.lang.String getOnTabClose() {
return (java.lang.String) getStateHelper().eval(PropertyKeys.onTabClose, null);
}
public void setOnTabClose(java.lang.String _onTabClose) {
getStateHelper().put(PropertyKeys.onTabClose, _onTabClose);
}
TabMenuRenderer.java
Code: Select all
//line 113
WidgetBuilder wb = getWidgetBuilder(context);
wb.init("Barcelona", tabMenu.resolveWidgetVar(), clientId)
.callback("onTabChange", "function(index)", tabMenu.getOnTabChange())
.callback("onTabClose", "function(index)", tabMenu.getOnTabClose());
wb.finish();
layout.js
Code: Select all
//line 37
this.tabMenu.find('.menu-button').on('click', function(e) {
//Call user onTabClose callback
if($this.cfg.onTabClose) {
var index = $this.tabMenuNav.find('.active-item').index(),
result = $this.cfg.onTabClose.call($this, index);
if(result === false)
return false;
}
$this.wrapper.removeClass('layout-wrapper-menu-active');
...
//line 60
this.tabMenuNavLinks.on('click', function(e) {
$this.sidebar.css('overflow','hidden');
setTimeout(function() {
$this.sidebar.css('overflow','');
}, 301);
var link = $(this),
index = link.parent().index();
//Call user onTabChange callback
if($this.cfg.onTabChange) {
var result = $this.cfg.onTabChange.call($this, index);
if(result === false)
return false;
}
link.parent().addClass('active-item').siblings('.active-item').removeClass('active-item');
...
//line 234
$(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())) {
//Call user onTabClose callback
if($this.cfg.onTabClose) {
var index = $this.tabMenuNav.find('.active-item').index(),
result = $this.cfg.onTabClose.call($this, index);
if(result === false)
return false;
}
$this.wrapper.removeClass('layout-wrapper-menu-active');
}
...