How to Change icon when pm:menu is open

Post Reply
jmflores
Posts: 4
Joined: 26 Aug 2016, 07:45
Contact:

19 Oct 2016, 17:19

Hello, I am using yours modena theme. I have develope one <pm:menu .../> and I want to change the icon that appears in the menu label when I click it. Now we can see the + symbol and I want to change to - symbol when somebody click it and open the menu.

Image

I debug and see that css are using <i class="icon-add Fright Fs16"></i> to paint icon. So I suppose that I need change the class by icon-minus class in layaout.js. I have tried modify the function

Code: Select all

this.menulinks.on('click',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent();

            ...
            else {
                ...
                
                var logo = menuitem.context.children[3].classList[0];
                
                if(logo == 'icon-add'){                
                	menuitem.removeClass('icon-add');
                	menuitem.context.children[3].classList[0] = 'icon-minus';
                }

                menuitem.addClass('active-menu-parent');
                menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
                $this.addMenuitem(menuitem.attr('id'));
            }
            ...
        });
But not working, I think that maybe there is another easy way to solved my problem that modify layout.js. Any suggestions?

Regards.

Update:

I modify my icon and now the icon changes, but changes all children icons, even if they don't click it. I have changed

Code: Select all

var logo = menuitem.find('i.icon-add');
                
                if(logo.hasClass('icon-add')){                	
                	logo.removeClass('icon-add');
                	logo.addClass('icon-minus');
                }
The entire function.

Code: Select all

this.menulinks.on('click',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent();

            if(menuitem.hasClass('active-menu-parent')) {
            	var logo = menuitem.find('i.icon-minus');
            	
            	if(logo.hasClass('icon-minus')){                	
                	logo.removeClass('icon-minus');
                	logo.addClass('icon-add');
                }
            	
                menuitem.removeClass('active-menu-parent');
                menuitemLink.removeClass('active-menu active-menu-restore').next('ul').removeClass('active-menu active-menu-restore');
                $this.removeMenuitem(menuitem.attr('id'));
            }
            else {
                var activeSibling = menuitem.siblings('.active-menu-parent');
                if(activeSibling.length) {
                    activeSibling.removeClass('active-menu-parent');
                    $this.removeMenuitem(activeSibling.attr('id'));

                    activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu active-menu-restore');
                    activeSibling.find('li.active-menu-parent').each(function() {
                        var menuitem = $(this);
                        menuitem.removeClass('active-menu-parent');
                        $this.removeMenuitem(menuitem.attr('id'));
                    });
                }
                
                //var logo = menuitem.context.children[3].classList[0];
                var logo = menuitem.find('i.icon-add');
                
                if(logo.hasClass('icon-add')){                	
                	logo.removeClass('icon-add');
                	logo.addClass('icon-minus');
                }

                menuitem.addClass('active-menu-parent');
                menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
                $this.addMenuitem(menuitem.attr('id'));
            }

            if(menuitemLink.next().is('ul')) {
                e.preventDefault();
            }
            else {
                $this.menuWrapper.removeClass('showmenu');
                $this.mobileMenuButton.removeClass('MenuClose');
            }

            $this.saveMenuState();
            
            if(!$this.mobile) {
                $this.menuWrapper.perfectScrollbar("update");
            }
        });
I continue working in solution but I hope another solution easiest.

Solution:

Finally I get my objective. I have iterated every level until get the icon-add class . Copy the entire function, It works on modena theme. My code is between //jmf comment.

Code: Select all

bindEvents: function() {
        var $this = this;
        
        if(this.mobile) {
            this.menuWrapper.css('overflow-y', 'auto');
        }
        else {
            this.menuWrapper.perfectScrollbar({suppressScrollX: true});
        }
	
        this.menulinks.on('click',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent();

            if(menuitem.hasClass('active-menu-parent')) {
            	//jmf
            	var enlace = menuitem.children();
            	
            	if(enlace.length){
            		var vinculo = enlace.first();
            		
            		if(vinculo.length){
                		var lineasVinculo = vinculo.children();
                    	
                    	if(lineasVinculo.length){
                    		var logo = lineasVinculo.last();
                    		
                    		if(logo.length){
                    			if(logo.hasClass('icon-minus')){
                    				logo.removeClass('icon-minus');
                                	logo.addClass('icon-add');                    				
                    			}                    			                    			
                    		}                    		
                    	}               		
                	}
            	}
            	//fin jmf
            	
                menuitem.removeClass('active-menu-parent');
                menuitemLink.removeClass('active-menu active-menu-restore').next('ul').removeClass('active-menu active-menu-restore');
                $this.removeMenuitem(menuitem.attr('id'));
            }
            else {
                var activeSibling = menuitem.siblings('.active-menu-parent');
                if(activeSibling.length) {
                    activeSibling.removeClass('active-menu-parent');
                    $this.removeMenuitem(activeSibling.attr('id'));

                    activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu active-menu-restore');
                    activeSibling.find('li.active-menu-parent').each(function() {
                        var menuitem = $(this);
                        menuitem.removeClass('active-menu-parent');
                        $this.removeMenuitem(menuitem.attr('id'));
                    });
                }            	
                
                //jmf
                var enlace = menuitem.children();
                
                if(enlace.length){
                	var vinculo = enlace.first();
                	
                	if(vinculo.length){
                		var lineasVinculo = vinculo.children();
                    	
                    	if(lineasVinculo.length){
                    		var logo = lineasVinculo.last();
                    		
                    		if(logo.length){
                    			if(logo.hasClass('icon-add')){
                    				logo.removeClass('icon-add');
                                	logo.addClass('icon-minus');                    				
                    			}                    			                    			
                    		}                    		
                    	}               		
                	}
                }    
                //fin jmf

                menuitem.addClass('active-menu-parent');
                menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
                $this.addMenuitem(menuitem.attr('id'));
            }

            if(menuitemLink.next().is('ul')) {
                e.preventDefault();
            }
            else {
                $this.menuWrapper.removeClass('showmenu');
                $this.mobileMenuButton.removeClass('MenuClose');
            }

            $this.saveMenuState();
            
            if(!$this.mobile) {
                $this.menuWrapper.perfectScrollbar("update");
            }
        });
Primefaces version: 5.3 - Modena Theme
JSF version: 2.2.13
Tomcat 8

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

22 Feb 2017, 12:27

Sorry for my late reply. Other solution, you can change icon class in ModenaMenuRendere.java.

Post Reply

Return to “Modena”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest