Menu Modes - Horizontal or Vertical

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
User avatar
ajotta
Posts: 71
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

27 Jun 2018, 14:23

Hello
I would really like the theme Paradise to be implemented in the possibility of choosing between the menu: Horizontal or Vertical ..

I realized that most of the new themes (ecuador, serenity, ultima, apollo) have this functionality, I would be very grateful if this customization in Paradise could be possible.

Thank you very much for your cooperation.
--
Jarciano Silva
CEO - Chief Executive Officer
ajotta | https://ajotta.com

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

28 Jun 2018, 09:47

We'll discuss it and get back to you.

User avatar
ajotta
Posts: 71
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

14 Sep 2018, 20:23

Hello

If it's been almost 3 months, do you have a position on a request?

Thanks!
--
Jarciano Silva
CEO - Chief Executive Officer
ajotta | https://ajotta.com

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

17 Sep 2018, 12:00

Sorry for the delayed response. Unfortunately, we don't think of adding Horizontal menu option.

Best Regards,

User avatar
ajotta
Posts: 71
Joined: 16 Feb 2016, 13:41
Location: Brasil
Contact:

17 Sep 2018, 12:07

Hello

What pessima news, I was so confident to have this functionality in this thema so beautiful, I even had plans to acquire the full license for another project, but under these conditions we will abort the idea.

Still thankful for attention.
--
Jarciano Silva
CEO - Chief Executive Officer
ajotta | https://ajotta.com

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

17 Sep 2018, 13:43

Maybe you can override css and layout.js. I made some changes for you. Please try;

//custom css

Code: Select all

    <style type="text/css">
        .layout-wrapper .layout-menu-wrapper .nano > .nano-content.menu-scroll-content {
            display: block;
            height: 100%;
            position: relative;
            overflow: scroll;
            overflow-x: hidden;
       }
       
       .layout-wrapper.layout-menu-horizontal .layout-menu-wrapper {
            padding-top: 15px;
            left: -240px;
            z-index: 100;
       }
       
       .layout-wrapper.layout-menu-horizontal.layout-menu-overlay-active .layout-menu-wrapper {
           left: 0px;
       }
       
       @media (min-width: 1025px) {
           .layout-wrapper.layout-menu-horizontal .layout-menu-container .layout-menu > li {
               display: inline-block;
               width: auto;
               padding: 0;
               height: 40px;
               position: relative;
           }

           .layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu {
               padding: 0;
               margin: 0;
           }

           .layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .nano > .nano-content.menu-scroll-content {
               display: block;
               height: auto;
               position: static;
               overflow: visible;
               overflow-x: visible;
           }
           
           .layout-wrapper.layout-menu-horizontal .layout-menu-wrapper  {
                width: 100%;
                height: auto;
                left: 0;
                z-index: 99;
                position: fixed;
                padding: 0 12px;
                border: 0 none;
                -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
                -moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
                box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
            }
            
            .layout-wrapper.layout-menu-horizontal .layout-content {
                padding-top: 120px;
            }
            
            .layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu > li > a {
                height: 40px;
            }
            
            .layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu > li > ul {
                background-color: #ffffff;
                top: 110px;
                left: auto;
                min-width: 250px;
                position: fixed;
                z-index: 1;
                margin: 0;
                overflow: auto;
                max-height: 450px;
                -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
                -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
                -moz-border-radius: 2px;
                -webkit-border-radius: 2px;
                border-radius: 2px;
            }
            
            .layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu li > ul li a {
                padding-left: 16px;
            }
            
            .layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu ul li li a {
                padding-left: 32px;
            }
            
            .layout-wrapper.layout-menu-horizontal .layout-menu-wrapper .layout-menu ul li li li a {
                padding-left: 48px;
            }
       }
    </style>
//new layout.js

Code: Select all

    <script type="text/javascript">
//<![CDATA[
 	/** 
 * PrimeFaces Paradise Layout
 */
PrimeFaces.widget.Paradise = PrimeFaces.widget.BaseWidget.extend({
    
    init: function(cfg) {
        this._super(cfg);
        this.wrapper = $(document.body).children('.layout-wrapper');
        this.topbar = this.wrapper.children('.topbar');
        this.menuWrapper = this.wrapper.find('> .layout-main > .layout-menu-wrapper');
        this.menuButton = $('#menu-button');
        this.userDisplay = $('#user-display');
        this.topbarMenu = $('#topbar-menu');
        this.topbarLinks = this.topbarMenu.find('a');
        this.menu = this.menuWrapper.find('ul.layout-menu');
        this.menulinks = this.menu.find('a');
        this.expandedMenuitems = this.expandedMenuitems || [];     
        this.nano = this.menuWrapper.children('.nano');

        var isHorizontalMenu = this.wrapper.hasClass('layout-horizontal');

        if(!this.isSlim() && !this.isHorizontalMenu()) {
            this.restoreMenuState();
        }
        
        if(!this.isSlim() && !isHorizontalMenu) {
            this.nano.nanoScroller({flash:true});
            this.nano.children('.nano-content').removeAttr('tabindex');
        }
        
        this.bindEvents();
    },
    
    bindEvents: function() {
        var $this = this;
        
        if(!this.wrapper.hasClass('layout-menu-slim')) {
            this.nano.nanoScroller();
        }
        
        this.menuWrapper.on('click', function(e) {
            $this.menuClick = true;
        });
        
        this.menuButton.on('click', function(e) {
            if($this.wrapper.hasClass('layout-menu-horizontal')) {
                $this.wrapper.toggleClass('layout-menu-overlay-active');
            }
            else if($this.isMobile()) {
                $this.wrapper.toggleClass('layout-menu-active');
                
                if($this.wrapper.hasClass('layout-menu-active'))
                    $this.wrapper.append('<div class="layout-mask"></div>');
                else
                    $this.wrapper.children('.layout-mask').remove();
                
            }
            else {
                if($this.wrapper.hasClass('layout-menu-overlay'))
                    $this.wrapper.toggleClass('layout-menu-overlay-active');
                else
                    $this.wrapper.toggleClass('layout-menu-static-inactive');
            }
            
            $this.nano.nanoScroller();
            
            $this.menuButtonClick = true;
            e.preventDefault();
            setTimeout(function() {
                $(window).trigger('resize');
            }, 320);
        });
        
        this.menulinks.off('click mouseenter').on('click', function(e) {
            var link = $(this),
            item = link.parent(),
            submenu = item.children('ul');
            
            if($this.isSlim() && item.parent().hasClass('layout-menu')) {
                if(item.hasClass('active-menuitem')) {
                    if(submenu.length) {
                        $this.removeMenuitem(item.attr('id'));
                        item.removeClass('active-menuitem');
                        submenu.hide();
                        $this.menuHoverActive = false;
                    }
                }
                else {
                    item.addClass('active-menuitem');
                    $this.addMenuitem(item.attr('id'));
                    $this.deactivateItems(item.siblings(), false);
                    submenu.show();
                    $this.menuHoverActive = true;
                }
            }
            else {
                if(item.hasClass('active-menuitem')) {
                    if(submenu.length) {
                        $this.removeMenuitem(item.attr('id'));
                        item.removeClass('active-menuitem');
                        submenu.slideUp();
                    }
                }
                else {
                    $this.addMenuitem(item.attr('id'));
                    $this.deactivateItems(item.siblings(), true);
                    $this.activate(item);
                }
            }

            setTimeout(function() {
                if(!$this.isSlim()) {
                    $this.nano.nanoScroller();
                }
            }, 500);
                                    
            if(submenu.length) {
                e.preventDefault();
            }
        }).on('mouseenter', function(e) {
            var link = $(this),
            item = link.parent(),
            submenu = item.children('ul');
    
            if($this.isSlim() && item.parent().hasClass('layout-menu') && $this.menuHoverActive && !item.hasClass('active-menuitem')) {
                $this.deactivateItems($this.menu.children('.active-menuitem'), false);
                item.addClass('active-menuitem');
                submenu.show();
            }
        });
        
        this.userDisplay.on('click', function(e) {
            $this.topbarMenuButtonClick = true;

            if($this.topbarMenu.hasClass('topbar-menu-visible')) {
                $this.hideTopBar();
            }
            else {
                $this.topbarMenu.addClass('topbar-menu-visible fadeInDown');
            }
                        
            e.preventDefault();
        });
        
        this.topbarLinks.on('click', function(e) {
            var link = $(this),
            item = link.parent(),
            submenu = link.next();
            
            $this.topbarLinkClick = true;
            item.siblings('.menuitem-active').removeClass('menuitem-active');
            
            if(item.hasClass('menuitem-active')) {
                item.removeClass('menuitem-active');
                link.next('ul').slideUp();
            }
            else {
                item.addClass('menuitem-active');
                link.next('ul').slideDown();
            }
            
            if(submenu.length) {
                e.preventDefault();   
            }
        });
        
        $(document.body).off('click').on('click', function() {                   
            if(!$this.topbarMenuButtonClick && !$this.topbarLinkClick) {
                $this.hideTopBar();
            }
            
            if(!$this.menuClick && ($this.isSlim() || $this.isHorizontalMenu())) {
                $this.deactivateItems($this.menu.children('.active-menuitem'), false);
                $this.menuHoverActive = false;
            }
            
            if(($this.wrapper.hasClass('layout-menu-overlay-active') || $this.wrapper.hasClass('layout-menu-active')) && (!$this.menuClick && !$this.menuButtonClick)) {
                $this.wrapper.removeClass('layout-menu-overlay-active layout-menu-active');
                $this.wrapper.children('.layout-mask').remove();
            }
            
            $this.topbarLinkClick = false;
            $this.topbarMenuButtonClick = false;
            $this.menuClick = false;
            $this.menuButtonClick = false;
        });
        
    },
    
    activate: function(item) {
        var submenu = item.children('ul');
        item.addClass('active-menuitem');

        if(submenu.length) {
            submenu.slideDown();
        }
    },
    
    deactivate: function(item) {
        var submenu = item.children('ul');
        item.removeClass('active-menuitem');
        
        if(submenu.length) {
            submenu.hide();
        }
    },
        
    deactivateItems: function(items, animate) {
        var $this = this;
        
        for(var i = 0; i < items.length; i++) {
            var item = items.eq(i),
            submenu = item.children('ul');
            
            if(submenu.length) {
                if(item.hasClass('active-menuitem')) {
                    var activeSubItems = item.find('.active-menuitem');
                    item.removeClass('active-menuitem');
                    
                    if(animate) {
                        submenu.slideUp('normal', function() {
                            $(this).parent().find('.active-menuitem').each(function() {
                                $this.deactivate($(this));
                            });
                        });
                    }
                    else {
                        submenu.hide();
                        item.find('.active-menuitem').each(function() {
                            $this.deactivate($(this));
                        });
                    }
                    
                    $this.removeMenuitem(item.attr('id'));
                    activeSubItems.each(function() {
                        $this.removeMenuitem($(this).attr('id'));
                    });
                }
                else {
                    item.find('.active-menuitem').each(function() {
                        var subItem = $(this);
                        $this.deactivate(subItem);
                        $this.removeMenuitem(subItem.attr('id'));
                    });
                }
            }
            else if(item.hasClass('active-menuitem')) {
                $this.deactivate(item);
                $this.removeMenuitem(item.attr('id'));
            }
        }
    },
    
    removeMenuitem: function (id) {
        this.expandedMenuitems = $.grep(this.expandedMenuitems, function (value) {
            return value !== id;
        });
        this.saveMenuState();
    },
    
    addMenuitem: function (id) {
        if ($.inArray(id, this.expandedMenuitems) === -1) {
            this.expandedMenuitems.push(id);
        }
        this.saveMenuState();
    },
    
    saveMenuState: function() {
        $.cookie('paradise_expandeditems', this.expandedMenuitems.join(','), {path: '/'});
    },
    
    clearMenuState: function() {
        $.removeCookie('paradise_expandeditems', {path: '/'});
    },
    
    restoreMenuState: function() {
        var menucookie = $.cookie('paradise_expandeditems');
        if (menucookie) {
            this.expandedMenuitems = menucookie.split(',');
            for (var i = 0; i < this.expandedMenuitems.length; i++) {
                var id = this.expandedMenuitems[i];
                if (id) {
                    var menuitem = $("#" + this.expandedMenuitems[i].replace(/:/g, "\\:"));
                    menuitem.addClass('active-menuitem');
                    
                    var submenu = menuitem.children('ul');
                    if(submenu.length) {
                        submenu.show();
                    }
                }
            }
        }
    },
    
    hideTopBar: function() {
        var $this = this;
        this.topbarMenu.addClass('fadeOutUp');
        
        setTimeout(function() {
            $this.topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
        },500);
    },
    
    isHorizontalMenu: function() {
        return this.wrapper.hasClass('layout-menu-horizontal') && this.isDesktop();
    },
    
    isMobile: function() {
        return window.innerWidth <= 640;
    },
    
    isDesktop: function() {
        return window.innerWidth > 1024;
    },
    
    isSlim: function() {
        return !this.isMobile() && this.wrapper.hasClass('layout-menu-slim');
    }
});

/*!
 * jQuery Cookie Plugin v1.4.1
 * https://github.com/carhartl/jquery-cookie
 *
 * Copyright 2006, 2014 Klaus Hartl
 * Released under the MIT license
 */
(function (factory) {
	if (typeof define === 'function' && define.amd) {
		// AMD (Register as an anonymous module)
		define(['jquery'], factory);
	} else if (typeof exports === 'object') {
		// Node/CommonJS
		module.exports = factory(require('jquery'));
	} else {
		// Browser globals
		factory(jQuery);
	}
}(function ($) {

	var pluses = /\+/g;

	function encode(s) {
		return config.raw ? s : encodeURIComponent(s);
	}

	function decode(s) {
		return config.raw ? s : decodeURIComponent(s);
	}

	function stringifyCookieValue(value) {
		return encode(config.json ? JSON.stringify(value) : String(value));
	}

	function parseCookieValue(s) {
		if (s.indexOf('"') === 0) {
			// This is a quoted cookie as according to RFC2068, unescape...
			s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
		}

		try {
			// Replace server-side written pluses with spaces.
			// If we can't decode the cookie, ignore it, it's unusable.
			// If we can't parse the cookie, ignore it, it's unusable.
			s = decodeURIComponent(s.replace(pluses, ' '));
			return config.json ? JSON.parse(s) : s;
		} catch(e) {}
	}

	function read(s, converter) {
		var value = config.raw ? s : parseCookieValue(s);
		return $.isFunction(converter) ? converter(value) : value;
	}

	var config = $.cookie = function (key, value, options) {

		// Write

		if (arguments.length > 1 && !$.isFunction(value)) {
			options = $.extend({}, config.defaults, options);

			if (typeof options.expires === 'number') {
				var days = options.expires, t = options.expires = new Date();
				t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
			}

			return (document.cookie = [
				encode(key), '=', stringifyCookieValue(value),
				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
				options.path    ? '; path=' + options.path : '',
				options.domain  ? '; domain=' + options.domain : '',
				options.secure  ? '; secure' : ''
			].join(''));
		}

		// Read

		var result = key ? undefined : {},
			// To prevent the for loop in the first place assign an empty array
			// in case there are no cookies at all. Also prevents odd result when
			// calling $.cookie().
			cookies = document.cookie ? document.cookie.split('; ') : [],
			i = 0,
			l = cookies.length;

		for (; i < l; i++) {
			var parts = cookies[i].split('='),
				name = decode(parts.shift()),
				cookie = parts.join('=');

			if (key === name) {
				// If second argument (value) is a function it's a converter...
				result = read(cookie, value);
				break;
			}

			// Prevent storing a cookie that we couldn't decode.
			if (!key && (cookie = read(cookie)) !== undefined) {
				result[name] = cookie;
			}
		}

		return result;
	};

	config.defaults = {};

	$.removeCookie = function (key, options) {
		// Must not alter options, thus extending a fresh object...
		$.cookie(key, '', $.extend({}, options, { expires: -1 }));
		return !$.cookie(key);
	};

}));

/* Issue #924 is fixed for 5.3+ and 6.0. (compatibility with 5.3) */
if(window['PrimeFaces'] && window['PrimeFaces'].widget.Dialog) {
    PrimeFaces.widget.Dialog = PrimeFaces.widget.Dialog.extend({
        
        enableModality: function() {
            this._super();
            $(document.body).children(this.jqId + '_modal').addClass('ui-dialog-mask');
        },
        
        syncWindowResize: function() {}
    });
}
//]]>
   </script>


//template.xhtml

Code: Select all

<h:body>
        <div class="layout-wrapper layout-menu-horizontal">

Post Reply

Return to “Paradise - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest