pa:tab onHide event

Post Reply
Babas007
Posts: 250
Joined: 24 May 2011, 09:42

14 Jun 2018, 16:43

Is it possible to add onHide client side event on this component please?

User avatar
aragorn
Posts: 3164
Joined: 29 Jun 2013, 12:38

18 Jun 2018, 09:55

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');
            ...

User avatar
aragorn
Posts: 3164
Joined: 29 Jun 2013, 12:38

18 Jun 2018, 09:57

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>

Babas007
Posts: 250
Joined: 24 May 2011, 09:42

18 Jun 2018, 16:36

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

User avatar
aragorn
Posts: 3164
Joined: 29 Jun 2013, 12:38

26 Jun 2018, 11:15

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?

Babas007
Posts: 250
Joined: 24 May 2011, 09:42

26 Jun 2018, 12:01

Clicking on menubutton icon or clicking outside the menu

User avatar
aragorn
Posts: 3164
Joined: 29 Jun 2013, 12:38

28 Jun 2018, 09:51

Ok, thanks a lot for the update! I'll work on it and get back to you.

User avatar
aragorn
Posts: 3164
Joined: 29 Jun 2013, 12:38

28 Jun 2018, 10:21

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');
            }
            ...

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest