Hi,
I have reviewed your code and noticed that you have used 'pr:menu'. However, if you examine the showcase, you won't find a component named 'pr:menu'. And also pr: menu is a custom primefaces component for layouts. it doesn't support all features of submenu. Therefore, perhaps you could find a suitable menu for your use by examining the showcase, and update your code accordingly. The solutions I recommended to you earlier may not apply to the use of 'pr:menu'.
Best Regards,
Scrollbar / Space missing for long list at left menu
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
Hi,
No, this is not a bug. The pr:menu in the Rain template works perfectly well. But as I mentioned, it doesn't support all submenu features because it's a custom PrimeFaces component. Therefore, I suggest you check out other components in the showcase, but you can be sure that this is not a bug and there's nothing to fix.
Best Regards,
No, this is not a bug. The pr:menu in the Rain template works perfectly well. But as I mentioned, it doesn't support all submenu features because it's a custom PrimeFaces component. Therefore, I suggest you check out other components in the showcase, but you can be sure that this is not a bug and there's nothing to fix.
Best Regards,
@olgubasak
It´s definitely a bug. I´m not sure if you understand the problem correctly.
In the template you provide the customer a menu and the user will be not able to see all items? Really?
There is a need to define a logic that the scrollbar cannot be higher than the screen itself. I don´t know to fix it, but it´s a bug in the template.
Currently I´m not able to see all items on the screen This is a show stopper for my project!
In the template which I bought from Primetek you have this example:
This is exactly the code which I´m also using for many many items, but I´m not able to see some items on the bottom from the screen.
I don´t know if this was ever tested with many items.
So please fix it.
Why should I try out other components???? I´m using exactly the same code as it is in the template, but with more items than in the template.
It´s definitely a bug. I´m not sure if you understand the problem correctly.
In the template you provide the customer a menu and the user will be not able to see all items? Really?
There is a need to define a logic that the scrollbar cannot be higher than the screen itself. I don´t know to fix it, but it´s a bug in the template.
Currently I´m not able to see all items on the screen This is a show stopper for my project!
In the template which I bought from Primetek you have this example:
Code: Select all
<pr:menu widgetVar="RainMenuWidget">
<p:submenu id="m_homepage" label="Favorites" icon="pi pi-home">
<p:menuitem id="m_dashboard" value="Dashboard" icon="pi pi-home" outcome="/dashboard" />
</p:submenu>
<p:submenu id="m_components" label="UI Kit" icon="pi pi-star-fill">
<p:menuitem id="m_formlayout" value="Form Layout" icon="pi pi-id-card" outcome="/formlayout" />....I don´t know if this was ever tested with many items.
So please fix it.
Why should I try out other components???? I´m using exactly the same code as it is in the template, but with more items than in the template.
Primefaces 12.0, WildFly 21
-
mert.sincan
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi,
Sorry for the delayed response! Could you please try the following layout.js file;
Sorry for the delayed response! Could you please try the following layout.js file;
Code: Select all
/**
* PrimeFaces Rain Layout
*/
PrimeFaces.widget.Rain = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
this.wrapper = $(document.body).children('.layout-wrapper');
var $this = this;
$(function() {
$this._init();
});
if(!this.wrapper.hasClass('layout-horizontal')) {
this.restoreMenuState();
}
this.expandedMenuitems = this.expandedMenuitems||[];
},
_init: function() {
this.contentWrapper = this.wrapper.children('.layout-main');
this.topbar = this.wrapper.find('.layout-topbar');
this.topbarItems = this.topbar.find('.layout-topbar-actions > li.topbar-item');
this.topbarLinks = this.topbarItems.children('a');
this.topbarSearchItemMenu = this.topbar.find('.search-item');
this.menuWrapper = this.wrapper.find('.menu-wrapper');
this.menu = this.menuWrapper.find('.layout-menu');
this.menuButton = this.topbar.find('.menu-button');
this.menulinks = this.menu.find('a');
this.profileContainer = $('.layout-profile');
this.profileButton = this.profileContainer.children('.layout-profile-button');
this.profileMenu = this.profileContainer.children('.layout-profile-menu');
this.rightpanel = this.wrapper.find('.layout-rightpanel');
this.rightpanelButton = this.topbar.find('.layout-rightpanel-button');
this.rightpanelExitButton = this.rightpanel.find('.rightpanel-exit-button');
this.configButton = $('#layout-config-button');
this.configMenu = $('#layout-config');
this.configMenuClose = this.configMenu.find('> .layout-config-content > .layout-config-close');
this.bindEvents();
},
toggleClass: function(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
}
else {
el.addClass(className);
}
},
bindEvents: function() {
var $this = this;
this.bindTopbarEvents();
this.bindMenuEvents();
this.bindRightPanelEvents();
this.bindConfigEvents();
$(document.body).off('click.layoutBody').on('click.layoutBody', function() {
if (!$this.menuClick) {
$this.wrapper.removeClass('layout-overlay-active layout-mobile-active');
$(document.body).removeClass('blocked-scroll');
if ($this.isHorizontal() || $this.isSlim() || $this.isSlimPlus() ) {
$this.menu.find('.active-menuitem').removeClass('active-menuitem');
$this.menuActive = false;
}
}
if (!$this.profileMenuClick && ($this.isHorizontal() || $this.isSlim() || $this.isSlimPlus())) {
$this.profileContainer.removeClass('layout-profile-active');
$this.profileMenu.addClass('fadeInDown').css('display', '');
}
if (!$this.topbarItemClicked) {
$this.removeTopbarClassFromAllItems(null, 'active-topmenuitem', $this.topbarItems.filter('.active-topmenuitem'));
}
if (!$this.rightpanelClicked) {
$this.wrapper.removeClass('layout-rightpanel-active');
}
if (!$this.configMenuClicked && $this.configMenu.hasClass('layout-config-active')) {
if (!$this.wrapper.hasClass('layout-mobile-active') && !$this.wrapper.hasClass('layout-overlay-active')) {
$(document.body).removeClass('blocked-scroll');
}
$this.configMenu.removeClass('layout-config-active');
}
$this.topbarItemClicked = false;
$this.rightpanelClicked = false;
$this.menuClick = false;
$this.profileMenuClick = false;
$this.configMenuClicked = false;
});
},
bindConfigEvents: function() {
var $this = this;
this.configButton.off('click.config').on('click.config', function(e) {
$this.configMenuClicked = true;
if ($this.configMenu.hasClass('layout-config-active')) {
$this.configMenu.removeClass('layout-config-active');
$(document.body).removeClass('blocked-scroll');
}
else {
$this.configMenu.addClass('layout-config-active');
$(document.body).addClass('blocked-scroll');
}
e.preventDefault();
});
this.configMenuClose.off('click.config').on('click.config', function(e) {
$this.configMenu.removeClass('layout-config-active');
$this.configMenuClicked = true;
$(document.body).removeClass('blocked-scroll');
e.preventDefault();
});
this.configMenu.off('click.configMenu').on('click.configMenu', function() {
$this.configMenuClicked = true;
});
},
bindMenuEvents: function() {
var $this = this;
this.menuWrapper.off('click.menu').on('click.menu', function() {
if (!$this.profileMenuClick) {
$this.menuClick = true;
}
});
this.menuButton.off('click.menu').on('click.menu', function(e) {
$this.menuClick = true;
if ($this.isMobile()) {
if ($this.wrapper.hasClass('layout-mobile-active')) {
$this.wrapper.removeClass('layout-mobile-active');
$(document.body).removeClass('blocked-scroll');
}
else {
$this.wrapper.addClass('layout-mobile-active');
$(document.body).addClass('blocked-scroll');
}
}
else {
if ($this.isStatic()) {
$this.wrapper.toggleClass('layout-static-active');
}
else {
$this.wrapper.toggleClass('layout-overlay-active');
}
}
e.preventDefault();
});
this.menulinks.off('click.menu').on('click.menu', function(e) {
var link = $(this),
item = link.parent(),
submenu = item.children('ul');
horizontal = $this.isHorizontal();
$this.menuClick = true;
if ($this.isHorizontal() || $this.isSlim() || $this.isSlimPlus()) {
submenu.css('display','');
if (item.hasClass('active-menuitem')) {
if (submenu.length) {
item.removeClass('active-menuitem');
e.preventDefault();
}
if (item.parent().is($this.jq)) {
$this.menuActive = false;
}
}
else {
if (submenu.length > 0) {
e.preventDefault();
}
item.siblings('.active-menuitem').removeClass('active-menuitem');
item.addClass('active-menuitem');
if (item.parent().is($this.jq)) {
$this.menuActive = true;
}
}
}
else {
if(item.hasClass('active-menuitem')) {
if(submenu.length) {
$this.removeMenuitem(item.attr('id'));
item.removeClass('active-menuitem');
if(horizontal) {
if(item.parent().is($this.jq)) {
$this.menuActive = false;
}
$this.removeMenuitem(item.attr('id'));
item.removeClass('active-menuitem');
}
else {
submenu.slideUp(function() {
$this.removeMenuitem(item.attr('id'));
item.removeClass('active-menuitem');
});
}
}
}
else {
$this.addMenuitem(item.attr('id'));
if(horizontal) {
$this.deactivateItems(item.siblings());
item.addClass('active-menuitem');
$this.menuActive = true;
}
else {
$this.deactivateItems(item.siblings(), true);
var groupedItems = item.parent().closest('li');
if (groupedItems && groupedItems.length > 0) {
$this.deactivateItems(groupedItems.siblings(), true);
}
$this.activate(item);
}
}
}
$this.calculatePosition(submenu.get(0), item.get(0));
if(submenu.length) {
e.preventDefault();
}
});
this.menu.find('ul').off('click.menu').on('click.menu', function() {
if ($this.isHorizontal()) {
$this.horizontalMenuClick = true;
}
});
this.profileButton.off('click.profile').on('click.profile', function (e) {
if (!$this.isHorizontal() && !$this.isSlim() && !$this.isSlimPlus()) {
$this.profileContainer.toggleClass('layout-profile-active');
$this.profileMenu.slideToggle();
}
else {
$this.profileMenuClick = true;
if ($this.profileContainer.hasClass('layout-profile-active')) {
$this.profileMenu.addClass('fadeOutUp');
setTimeout(function () {
$this.profileContainer.removeClass('layout-profile-active');
$this.profileMenu.removeClass('fadeOutUp');
}, 150);
}
else {
$this.profileContainer.addClass('layout-profile-active');
$this.profileMenu.addClass('fadeInDown');
}
}
e.preventDefault();
});
this.menu.find('> li').on('mouseenter', function(e) {
if(($this.isHorizontal()|| $this.isSlim() || $this.isSlimPlus()) && $this.menuActive) {
var item = $(this),
submenu = item.children('ul');
if(!item.hasClass('active-menuitem')) {
$this.menu.find('.active-menuitem').removeClass('active-menuitem');
if($this.menuActive) {
item.addClass('active-menuitem');
}
}
$this.calculatePosition(submenu.get(0), item.get(0));
}
});
},
calculatePosition: function(overlay, target) {
if (overlay) {
// reset
overlay.style.top = overlay.style.left = '';
var rect = target.getBoundingClientRect();
var left = rect.left, top = rect.top;
var vWidth = window.innerWidth, vHeight = window.innerHeight;
var oWidth = overlay.offsetWidth, oHeight = overlay.offsetHeight;
var scrollbarWidth = this.calculateScrollbarWidth();
if (this.isHorizontal()) {
var width = left + oWidth + scrollbarWidth;
overlay.style.left = vWidth < width ? `${-1 * (width - vWidth)}px` : '0px';
} else if (this.isSlim() || this.isSlimPlus()) {
var height = top + oHeight;
overlay.style.top = vHeight < height ? `${-1 * (height - vHeight)}px` : '0px';
}
}
},
calculateScrollbarWidth: function() {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
},
bindTopbarEvents: function() {
var $this = this;
this.topbarLinks.off('click.topbar').on('click.topbar', function(e) {
var link = $(this),
item = link.parent(),
submenu = item.children('ul');
if ($this.isMobile()) {
$this.removeTopbarClassFromAllItems(null, 'active-topmenuitem', $this.topbarItems.filter('.active-topmenuitem').not(item));
}
else {
$this.removeTopbarClassFromAllItems(item, 'active-topmenuitem');
}
$this.addTopbarClass(item, 'active-topmenuitem');
$this.topbarItemClicked = true;
if (submenu.length) {
e.preventDefault();
}
});
this.topbarSearchItemMenu.off('click.topbar').on('click.topbar', function(e) {
$this.topbarItemClicked = true;
});
},
bindRightPanelEvents: function() {
var $this = this;
var changeRightpanelState = function(e) {
this.toggleClass(this.wrapper, 'layout-rightpanel-active');
this.rightpanelClicked = true;
e.preventDefault();
};
this.rightpanelButton.off('click.rightpanel').on('click.rightpanel', changeRightpanelState.bind(this));
this.rightpanelExitButton.off('click.rightpanel').on('click.rightpanel', changeRightpanelState.bind(this));
this.rightpanel.off('click.rightpanel').on('click.rightpanel', function() {
$this.rightpanelClicked = true;
});
},
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 {
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() {
if(this.isHorizontal()) {
return;
}
if(this.wrapper.hasClass('layout-wrapper-static'))
$.cookie('rain_menu_static', 'rain_menu_static', {path: '/'});
else
$.removeCookie('rain_menu_static', {path: '/'});
$.cookie('rain_expandeditems', this.expandedMenuitems.join(','), {path: '/'});
},
clearMenuState: function() {
this.expandedMenuitems = [];
$.removeCookie('rain_expandeditems', {path: '/'});
$.removeCookie('rain_menu_static', {path: '/'});
},
clearActiveItems: function() {
var activeItems = this.jq.find('li.active-menuitem'),
subContainers = activeItems.children('ul');
activeItems.removeClass('active-menuitem');
if(subContainers && subContainers.length) {
subContainers.hide();
}
},
clearLayoutState: function() {
this.clearMenuState();
this.clearActiveItems();
},
restoreMenuState: function() {
var menuCookie = $.cookie('rain_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();
}
}
}
}
var sidebarCookie = $.cookie('rain_menu_static');
if(sidebarCookie) {
this.wrapper.addClass('layout-wrapper-static layout-wrapper-static-restore');
}
},
removeTopbarClassFromAllItems: function(item, className, items) {
var activeItems = item != null ? item.siblings('.' + className) : items;
activeItems.removeClass(className);
activeItems.children('ul').removeClass('fadeInDown');
},
addTopbarClass: function(item, className) {
var submenu = item.children('ul');
if (submenu.length) {
if (item.hasClass(className)) {
submenu.removeClass('fadeInDown').addClass('fadeOutUp');
setTimeout(function() {
item.removeClass(className);
submenu.removeClass('fadeOutUp');
}, 100);
}
else {
item.addClass(className);
submenu.addClass('fadeInDown');
}
}
},
hideTopBar: function() {
var $this = this;
this.topbarMenu.addClass('fadeOutUp');
setTimeout(function() {
$this.topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
},500);
},
isMobile: function() {
return window.innerWidth <= 992;
},
isHorizontal: function() {
return this.wrapper.hasClass('layout-horizontal') && !this.isMobile();
},
isSlim: function() {
return this.wrapper.hasClass('layout-slim') && !this.isMobile();
},
isSlimPlus: function() {
return this.wrapper.hasClass('layout-slim-plus') && !this.isMobile();
},
isStatic: function() {
return this.wrapper.hasClass('layout-static') && !this.isMobile();
}
});
PrimeFaces.RainConfigurator = {
changeLayout: function(primaryColor, componentTheme, darkMode ) {
this.changePrimaryColor(primaryColor, darkMode);
this.changeDemo(darkMode);
this.changeComponentsTheme(componentTheme, darkMode);
this.changeSectionTheme( darkMode, 'layout-menu');
this.changeSectionTheme( darkMode , 'layout-topbar');
},
changePrimaryColor: function(newColor, darkMode) {
newLayout = this.getColor(newColor, darkMode);
var linkElement = $('link[href*="layout-"]');
var href = linkElement.attr('href');
var startIndexOf = href.indexOf('layout-') + 7;
var endIndexOf = href.indexOf('.css');
var currentColor = href.substring(startIndexOf, endIndexOf);
this.replaceLink(linkElement, href.replace(currentColor, newLayout));
},
changeDemo: function(darkMode) {
newLayout = '-' + darkMode;
var linkElement = $('link[href*="demo-"]');
var href = linkElement.attr('href');
var startIndexOf = href.indexOf('demo-') + 4;
var endIndexOf = href.indexOf('.css');
var currentColor = href.substring(startIndexOf, endIndexOf);
this.replaceLink(linkElement, href.replace(currentColor, newLayout));
},
changeComponentsTheme: function(themeColor, darkMode) {
theme = this.getColor(themeColor, darkMode);
var library = 'primefaces-rain';
var linkElement = $('link[href*="theme.css"]');
var href = linkElement.attr('href');
var index = href.indexOf(library) + 1;
var currentTheme = href.substring(index + library.length);
this.replaceLink(linkElement, href.replace(currentTheme, theme));
},
changeSectionTheme: function(theme, section) {
var wrapperElement = $('.layout-wrapper');
var styleClass = wrapperElement.attr('class');
var tokens = styleClass.split(' ');
var sectionClass;
for (var i = 0; i < tokens.length; i++) {
if (tokens[i].indexOf(section + '-') > -1) {
sectionClass = tokens[i];
break;
}
}
wrapperElement.attr('class', styleClass.replace(sectionClass, section + '-' + theme));
},
changeMenuMode: function(menuMode) {
var wrapper = $(document.body).children('.layout-wrapper');
switch (menuMode) {
case 'layout-static layout-static-active':
wrapper.addClass('layout-static layout-static-active').removeClass('layout-overlay layout-slim layout-horizontal layout-slim-plus');
this.clearLayoutState();
break;
case 'layout-overlay':
wrapper.addClass('layout-overlay').removeClass('layout-static layout-slim layout-horizontal layout-slim-plus layout-static-active');
this.clearLayoutState();
break;
case 'layout-horizontal':
wrapper.addClass('layout-horizontal').removeClass('layout-static layout-overlay layout-slim layout-slim-plus layout-static-active');
this.clearLayoutState();
break;
case 'layout-slim':
wrapper.addClass('layout-slim').removeClass('layout-static layout-overlay layout-horizontal layout-slim-plus layout-static-active');
this.clearLayoutState();
break;
case 'layout-slim-plus':
wrapper.addClass('layout-slim-plus').removeClass('layout-static layout-overlay layout-horizontal layout-slim layout-static-active');
this.clearLayoutState();
break;
default:
wrapper.addClass('layout-static').removeClass('layout-overlay layout-slim layout-horizontal layout-slim-plus ');
this.clearLayoutState();
break;
}
},
beforeResourceChange: function() {
PrimeFaces.ajax.RESOURCE = null; //prevent resource append
},
replaceLink: function(linkElement, href) {
PrimeFaces.ajax.RESOURCE = 'javax.faces.Resource';
var isIE = this.isIE();
if (isIE) {
linkElement.attr('href', href);
}
else {
var cloneLinkElement = linkElement.clone(false);
cloneLinkElement.attr('href', href);
linkElement.after(cloneLinkElement);
cloneLinkElement.off('load').on('load', function() {
linkElement.remove();
});
}
},
getColor: function(name, darkMode) {
return name + '-' + darkMode;
},
isIE: function() {
return /(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);
},
clearLayoutState: function() {
var menu = PF('RainMenuWidget');
if (menu) {
menu.clearLayoutState();
}
},
updateInputStyle: function(value) {
if (value === 'filled')
$(document.body).addClass('ui-input-filled');
else
$(document.body).removeClass('ui-input-filled');
}
};
/*!
* 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);
};
}));
if (PrimeFaces.widget.InputSwitch) {
PrimeFaces.widget.InputSwitch = PrimeFaces.widget.InputSwitch.extend({
init: function (cfg) {
this._super(cfg);
if (this.input.prop('checked')) {
this.jq.addClass('ui-inputswitch-checked');
}
},
check: function () {
var $this = this;
this.input.prop('checked', true).trigger('change');
setTimeout(function () {
$this.jq.addClass('ui-inputswitch-checked');
}, 100);
},
uncheck: function () {
var $this = this;
this.input.prop('checked', false).trigger('change');
setTimeout(function () {
$this.jq.removeClass('ui-inputswitch-checked');
}, 100);
}
});
}
if (PrimeFaces.widget.AccordionPanel) {
PrimeFaces.widget.AccordionPanel = PrimeFaces.widget.AccordionPanel.extend({
init: function (cfg) {
this._super(cfg);
this.headers.last().addClass('ui-accordion-header-last');
}
});
}
/* 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() {}
});
}
if (PrimeFaces.widget.SelectOneMenu) {
PrimeFaces.widget.SelectOneMenu = PrimeFaces.widget.SelectOneMenu.extend({
init: function (cfg) {
this._super(cfg);
var $this = this;
if (this.jq.parent().hasClass('ui-float-label')) {
this.m_panel = $(this.jqId + '_panel');
this.m_focusInput = $(this.jqId + '_focus');
this.m_panel.addClass('ui-input-overlay-panel');
this.jq.addClass('ui-inputwrapper');
if (this.input.val() != '') {
this.jq.addClass('ui-inputwrapper-filled');
}
this.input.off('change').on('change', function () {
$this.inputValueControl($(this));
});
this.m_focusInput.on('focus.ui-selectonemenu', function () {
$this.jq.addClass('ui-inputwrapper-focus');
})
.on('blur.ui-selectonemenu', function () {
$this.jq.removeClass('ui-inputwrapper-focus');
});
if (this.cfg.editable) {
this.label.on('input', function (e) {
$this.inputValueControl($(this));
}).on('focus', function () {
$this.jq.addClass('ui-inputwrapper-focus');
}).on('blur', function () {
$this.jq.removeClass('ui-inputwrapper-focus');
$this.inputValueControl($(this));
});
}
}
},
inputValueControl: function (input) {
if (input.val() != '')
this.jq.addClass('ui-inputwrapper-filled');
else
this.jq.removeClass('ui-inputwrapper-filled');
}
});
}
if (PrimeFaces.widget.Chips) {
PrimeFaces.widget.Chips = PrimeFaces.widget.Chips.extend({
init: function (cfg) {
this._super(cfg);
var $this = this;
if (this.jq.parent().hasClass('ui-float-label')) {
this.jq.addClass('ui-inputwrapper');
if ($this.jq.find('.ui-chips-token').length !== 0) {
this.jq.addClass('ui-inputwrapper-filled');
}
this.input.on('focus.ui-chips', function () {
$this.jq.addClass('ui-inputwrapper-focus');
}).on('input.ui-chips', function () {
$this.inputValueControl();
}).on('blur.ui-chips', function () {
$this.jq.removeClass('ui-inputwrapper-focus');
$this.inputValueControl();
});
}
},
inputValueControl: function () {
if (this.jq.find('.ui-chips-token').length !== 0 || this.input.val() != '')
this.jq.addClass('ui-inputwrapper-filled');
else
this.jq.removeClass('ui-inputwrapper-filled');
}
});
}
if (PrimeFaces.widget.DatePicker) {
PrimeFaces.widget.DatePicker = PrimeFaces.widget.DatePicker.extend({
init: function (cfg) {
this._super(cfg);
var $this = this;
if (this.jq.parent().hasClass('ui-float-label') && !this.cfg.inline) {
if (this.input.val() != '') {
this.jq.addClass('ui-inputwrapper-filled');
}
this.jqEl.off('focus.ui-datepicker blur.ui-datepicker change.ui-datepicker')
.on('focus.ui-datepicker', function () {
$this.jq.addClass('ui-inputwrapper-focus');
})
.on('blur.ui-datepicker', function () {
$this.jq.removeClass('ui-inputwrapper-focus');
})
.on('change.ui-datepicker', function () {
$this.inputValueControl($(this));
});
}
},
inputValueControl: function (input) {
if (input.val() != '')
this.jq.addClass('ui-inputwrapper-filled');
else
this.jq.removeClass('ui-inputwrapper-filled');
}
});
}
Github Profile: https://github.com/mertsincan
@mert.sincan
Awesome! This works perfectly for my first tests. Thank you so much.
1) Will this be fixed for future releases for this template?
2) Can we do this fix also for the first menu?
Please see below: If I have more items than the screen, I would expect also a scrollbar:
Awesome! This works perfectly for my first tests. Thank you so much.
1) Will this be fixed for future releases for this template?
2) Can we do this fix also for the first menu?
Please see below: If I have more items than the screen, I would expect also a scrollbar:
Primefaces 12.0, WildFly 21
-
mert.sincan
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Thanks a lot for the uıpdate! Yes, I'll add these fixes to the next release. Could you please try the following CSS and layout.js files to test all your cases?
Note: Please ignore the tooltip issue in the slim menu for now. I need to make some changes in RainMenuRenderer.java. I'll fix this before release.
Note: Please ignore the tooltip issue in the slim menu for now. I need to make some changes in RainMenuRenderer.java. I'll fix this before release.
Code: Select all
<style>
@media screen and (min-width: 992px) {
body .layout-wrapper.layout-slim .menu-wrapper .layout-menu-container .layout-menu > li,
body .layout-wrapper.layout-slim-plus .menu-wrapper .layout-menu-container .layout-menu > li,
body .layout-wrapper.layout-horizontal .menu-wrapper .layout-menu-container .layout-menu > li {
position: static;
}
body .layout-wrapper.layout-slim .menu-wrapper .layout-menu-container,
body .layout-wrapper.layout-slim-plus .menu-wrapper .layout-menu-container,
body .layout-wrapper.layout-horizontal .menu-wrapper .layout-menu-container {
overflow: auto;
}
body .layout-wrapper.layout-slim .menu-wrapper .layout-menu-container::-webkit-scrollbar,
body .layout-wrapper.layout-slim-plus .menu-wrapper .layout-menu-container::-webkit-scrollbar,
body .layout-wrapper.layout-horizontal .menu-wrapper .layout-menu-container::-webkit-scrollbar {
display: none;
}
body .layout-wrapper.layout-horizontal .menu-wrapper .layout-menu-container .layout-menu > li > ul {
top: 43px;
}
}
</style>
Code: Select all
/**
* PrimeFaces Rain Layout
*/
PrimeFaces.widget.Rain = PrimeFaces.widget.BaseWidget.extend({
init: function(cfg) {
this._super(cfg);
this.wrapper = $(document.body).children('.layout-wrapper');
var $this = this;
$(function() {
$this._init();
});
if(!this.wrapper.hasClass('layout-horizontal')) {
this.restoreMenuState();
}
this.expandedMenuitems = this.expandedMenuitems||[];
},
_init: function() {
this.contentWrapper = this.wrapper.children('.layout-main');
this.topbar = this.wrapper.find('.layout-topbar');
this.topbarItems = this.topbar.find('.layout-topbar-actions > li.topbar-item');
this.topbarLinks = this.topbarItems.children('a');
this.topbarSearchItemMenu = this.topbar.find('.search-item');
this.menuWrapper = this.wrapper.find('.menu-wrapper');
this.menu = this.menuWrapper.find('.layout-menu');
this.menuButton = this.topbar.find('.menu-button');
this.menulinks = this.menu.find('a');
this.profileContainer = $('.layout-profile');
this.profileButton = this.profileContainer.children('.layout-profile-button');
this.profileMenu = this.profileContainer.children('.layout-profile-menu');
this.rightpanel = this.wrapper.find('.layout-rightpanel');
this.rightpanelButton = this.topbar.find('.layout-rightpanel-button');
this.rightpanelExitButton = this.rightpanel.find('.rightpanel-exit-button');
this.configButton = $('#layout-config-button');
this.configMenu = $('#layout-config');
this.configMenuClose = this.configMenu.find('> .layout-config-content > .layout-config-close');
this.bindEvents();
},
toggleClass: function(el, className) {
if (el.hasClass(className)) {
el.removeClass(className);
}
else {
el.addClass(className);
}
},
bindEvents: function() {
var $this = this;
this.bindTopbarEvents();
this.bindMenuEvents();
this.bindRightPanelEvents();
this.bindConfigEvents();
$(document.body).off('click.layoutBody').on('click.layoutBody', function() {
if (!$this.menuClick) {
$this.wrapper.removeClass('layout-overlay-active layout-mobile-active');
$(document.body).removeClass('blocked-scroll');
if ($this.isHorizontal() || $this.isSlim() || $this.isSlimPlus() ) {
$this.menu.find('.active-menuitem').removeClass('active-menuitem');
$this.menuActive = false;
}
}
if (!$this.profileMenuClick && ($this.isHorizontal() || $this.isSlim() || $this.isSlimPlus())) {
$this.profileContainer.removeClass('layout-profile-active');
$this.profileMenu.addClass('fadeInDown').css('display', '');
}
if (!$this.topbarItemClicked) {
$this.removeTopbarClassFromAllItems(null, 'active-topmenuitem', $this.topbarItems.filter('.active-topmenuitem'));
}
if (!$this.rightpanelClicked) {
$this.wrapper.removeClass('layout-rightpanel-active');
}
if (!$this.configMenuClicked && $this.configMenu.hasClass('layout-config-active')) {
if (!$this.wrapper.hasClass('layout-mobile-active') && !$this.wrapper.hasClass('layout-overlay-active')) {
$(document.body).removeClass('blocked-scroll');
}
$this.configMenu.removeClass('layout-config-active');
}
$this.topbarItemClicked = false;
$this.rightpanelClicked = false;
$this.menuClick = false;
$this.profileMenuClick = false;
$this.configMenuClicked = false;
});
},
bindConfigEvents: function() {
var $this = this;
this.configButton.off('click.config').on('click.config', function(e) {
$this.configMenuClicked = true;
if ($this.configMenu.hasClass('layout-config-active')) {
$this.configMenu.removeClass('layout-config-active');
$(document.body).removeClass('blocked-scroll');
}
else {
$this.configMenu.addClass('layout-config-active');
$(document.body).addClass('blocked-scroll');
}
e.preventDefault();
});
this.configMenuClose.off('click.config').on('click.config', function(e) {
$this.configMenu.removeClass('layout-config-active');
$this.configMenuClicked = true;
$(document.body).removeClass('blocked-scroll');
e.preventDefault();
});
this.configMenu.off('click.configMenu').on('click.configMenu', function() {
$this.configMenuClicked = true;
});
},
bindMenuEvents: function() {
var $this = this;
this.menuWrapper.off('click.menu').on('click.menu', function() {
if (!$this.profileMenuClick) {
$this.menuClick = true;
}
});
this.menuButton.off('click.menu').on('click.menu', function(e) {
$this.menuClick = true;
if ($this.isMobile()) {
if ($this.wrapper.hasClass('layout-mobile-active')) {
$this.wrapper.removeClass('layout-mobile-active');
$(document.body).removeClass('blocked-scroll');
}
else {
$this.wrapper.addClass('layout-mobile-active');
$(document.body).addClass('blocked-scroll');
}
}
else {
if ($this.isStatic()) {
$this.wrapper.toggleClass('layout-static-active');
}
else {
$this.wrapper.toggleClass('layout-overlay-active');
}
}
e.preventDefault();
});
this.menulinks.off('click.menu').on('click.menu', function(e) {
var link = $(this),
item = link.parent(),
submenu = item.children('ul');
horizontal = $this.isHorizontal();
$this.menuClick = true;
if ($this.isHorizontal() || $this.isSlim() || $this.isSlimPlus()) {
submenu.css('display','');
if (item.hasClass('active-menuitem')) {
if (submenu.length) {
item.removeClass('active-menuitem');
e.preventDefault();
}
if (item.parent().is($this.jq)) {
$this.menuActive = false;
}
}
else {
if (submenu.length > 0) {
e.preventDefault();
}
item.siblings('.active-menuitem').removeClass('active-menuitem');
item.addClass('active-menuitem');
if (item.parent().is($this.jq)) {
$this.menuActive = true;
}
}
}
else {
if(item.hasClass('active-menuitem')) {
if(submenu.length) {
$this.removeMenuitem(item.attr('id'));
item.removeClass('active-menuitem');
if(horizontal) {
if(item.parent().is($this.jq)) {
$this.menuActive = false;
}
$this.removeMenuitem(item.attr('id'));
item.removeClass('active-menuitem');
}
else {
submenu.slideUp(function() {
$this.removeMenuitem(item.attr('id'));
item.removeClass('active-menuitem');
});
}
}
}
else {
$this.addMenuitem(item.attr('id'));
if(horizontal) {
$this.deactivateItems(item.siblings());
item.addClass('active-menuitem');
$this.menuActive = true;
}
else {
$this.deactivateItems(item.siblings(), true);
var groupedItems = item.parent().closest('li');
if (groupedItems && groupedItems.length > 0) {
$this.deactivateItems(groupedItems.siblings(), true);
}
$this.activate(item);
}
}
}
$this.calculatePosition(submenu.get(0), item.get(0));
if(submenu.length) {
e.preventDefault();
}
});
this.menu.find('ul').off('click.menu').on('click.menu', function() {
if ($this.isHorizontal()) {
$this.horizontalMenuClick = true;
}
});
this.profileButton.off('click.profile').on('click.profile', function (e) {
if (!$this.isHorizontal() && !$this.isSlim() && !$this.isSlimPlus()) {
$this.profileContainer.toggleClass('layout-profile-active');
$this.profileMenu.slideToggle();
}
else {
$this.profileMenuClick = true;
if ($this.profileContainer.hasClass('layout-profile-active')) {
$this.profileMenu.addClass('fadeOutUp');
setTimeout(function () {
$this.profileContainer.removeClass('layout-profile-active');
$this.profileMenu.removeClass('fadeOutUp');
}, 150);
}
else {
$this.profileContainer.addClass('layout-profile-active');
$this.profileMenu.addClass('fadeInDown');
}
}
e.preventDefault();
});
this.menu.find('> li').on('mouseenter', function(e) {
if(($this.isHorizontal()|| $this.isSlim() || $this.isSlimPlus()) && $this.menuActive) {
var item = $(this),
submenu = item.children('ul');
if(!item.hasClass('active-menuitem')) {
$this.menu.find('.active-menuitem').removeClass('active-menuitem');
if($this.menuActive) {
item.addClass('active-menuitem');
}
}
$this.calculatePosition(submenu.get(0), item.get(0));
}
});
},
calculatePosition: function(overlay, target) {
if (overlay) {
// reset
overlay.style.top = overlay.style.left = '';
var rect = target.getBoundingClientRect();
var left = rect.left, top = rect.top;
var vWidth = window.innerWidth, vHeight = window.innerHeight;
var oWidth = overlay.offsetWidth, oHeight = overlay.offsetHeight;
var topbarHeight = this.topbar.get(0).offsetHeight || 0;
var scrollbarWidth = this.calculateScrollbarWidth();
if (this.isHorizontal()) {
var width = left + oWidth + scrollbarWidth;
overlay.style.left = (vWidth < width ? (left - (width - vWidth)) : left) + 'px';
} else if (this.isSlim() || this.isSlimPlus()) {
var height = top + oHeight;
overlay.style.top = ((vHeight < height ? (top - (height - vHeight)) : top) - topbarHeight) + 'px';
}
}
},
calculateScrollbarWidth: function() {
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild(outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild(outer);
return (w1 - w2);
},
bindTopbarEvents: function() {
var $this = this;
this.topbarLinks.off('click.topbar').on('click.topbar', function(e) {
var link = $(this),
item = link.parent(),
submenu = item.children('ul');
if ($this.isMobile()) {
$this.removeTopbarClassFromAllItems(null, 'active-topmenuitem', $this.topbarItems.filter('.active-topmenuitem').not(item));
}
else {
$this.removeTopbarClassFromAllItems(item, 'active-topmenuitem');
}
$this.addTopbarClass(item, 'active-topmenuitem');
$this.topbarItemClicked = true;
if (submenu.length) {
e.preventDefault();
}
});
this.topbarSearchItemMenu.off('click.topbar').on('click.topbar', function(e) {
$this.topbarItemClicked = true;
});
},
bindRightPanelEvents: function() {
var $this = this;
var changeRightpanelState = function(e) {
this.toggleClass(this.wrapper, 'layout-rightpanel-active');
this.rightpanelClicked = true;
e.preventDefault();
};
this.rightpanelButton.off('click.rightpanel').on('click.rightpanel', changeRightpanelState.bind(this));
this.rightpanelExitButton.off('click.rightpanel').on('click.rightpanel', changeRightpanelState.bind(this));
this.rightpanel.off('click.rightpanel').on('click.rightpanel', function() {
$this.rightpanelClicked = true;
});
},
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 {
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() {
if(this.isHorizontal()) {
return;
}
if(this.wrapper.hasClass('layout-wrapper-static'))
$.cookie('rain_menu_static', 'rain_menu_static', {path: '/'});
else
$.removeCookie('rain_menu_static', {path: '/'});
$.cookie('rain_expandeditems', this.expandedMenuitems.join(','), {path: '/'});
},
clearMenuState: function() {
this.expandedMenuitems = [];
$.removeCookie('rain_expandeditems', {path: '/'});
$.removeCookie('rain_menu_static', {path: '/'});
},
clearActiveItems: function() {
var activeItems = this.jq.find('li.active-menuitem'),
subContainers = activeItems.children('ul');
activeItems.removeClass('active-menuitem');
if(subContainers && subContainers.length) {
subContainers.hide();
}
},
clearLayoutState: function() {
this.clearMenuState();
this.clearActiveItems();
},
restoreMenuState: function() {
var menuCookie = $.cookie('rain_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();
}
}
}
}
var sidebarCookie = $.cookie('rain_menu_static');
if(sidebarCookie) {
this.wrapper.addClass('layout-wrapper-static layout-wrapper-static-restore');
}
},
removeTopbarClassFromAllItems: function(item, className, items) {
var activeItems = item != null ? item.siblings('.' + className) : items;
activeItems.removeClass(className);
activeItems.children('ul').removeClass('fadeInDown');
},
addTopbarClass: function(item, className) {
var submenu = item.children('ul');
if (submenu.length) {
if (item.hasClass(className)) {
submenu.removeClass('fadeInDown').addClass('fadeOutUp');
setTimeout(function() {
item.removeClass(className);
submenu.removeClass('fadeOutUp');
}, 100);
}
else {
item.addClass(className);
submenu.addClass('fadeInDown');
}
}
},
hideTopBar: function() {
var $this = this;
this.topbarMenu.addClass('fadeOutUp');
setTimeout(function() {
$this.topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
},500);
},
isMobile: function() {
return window.innerWidth <= 992;
},
isHorizontal: function() {
return this.wrapper.hasClass('layout-horizontal') && !this.isMobile();
},
isSlim: function() {
return this.wrapper.hasClass('layout-slim') && !this.isMobile();
},
isSlimPlus: function() {
return this.wrapper.hasClass('layout-slim-plus') && !this.isMobile();
},
isStatic: function() {
return this.wrapper.hasClass('layout-static') && !this.isMobile();
}
});
PrimeFaces.RainConfigurator = {
changeLayout: function(primaryColor, componentTheme, darkMode ) {
this.changePrimaryColor(primaryColor, darkMode);
this.changeDemo(darkMode);
this.changeComponentsTheme(componentTheme, darkMode);
this.changeSectionTheme( darkMode, 'layout-menu');
this.changeSectionTheme( darkMode , 'layout-topbar');
},
changePrimaryColor: function(newColor, darkMode) {
newLayout = this.getColor(newColor, darkMode);
var linkElement = $('link[href*="layout-"]');
var href = linkElement.attr('href');
var startIndexOf = href.indexOf('layout-') + 7;
var endIndexOf = href.indexOf('.css');
var currentColor = href.substring(startIndexOf, endIndexOf);
this.replaceLink(linkElement, href.replace(currentColor, newLayout));
},
changeDemo: function(darkMode) {
newLayout = '-' + darkMode;
var linkElement = $('link[href*="demo-"]');
var href = linkElement.attr('href');
var startIndexOf = href.indexOf('demo-') + 4;
var endIndexOf = href.indexOf('.css');
var currentColor = href.substring(startIndexOf, endIndexOf);
this.replaceLink(linkElement, href.replace(currentColor, newLayout));
},
changeComponentsTheme: function(themeColor, darkMode) {
theme = this.getColor(themeColor, darkMode);
var library = 'primefaces-rain';
var linkElement = $('link[href*="theme.css"]');
var href = linkElement.attr('href');
var index = href.indexOf(library) + 1;
var currentTheme = href.substring(index + library.length);
this.replaceLink(linkElement, href.replace(currentTheme, theme));
},
changeSectionTheme: function(theme, section) {
var wrapperElement = $('.layout-wrapper');
var styleClass = wrapperElement.attr('class');
var tokens = styleClass.split(' ');
var sectionClass;
for (var i = 0; i < tokens.length; i++) {
if (tokens[i].indexOf(section + '-') > -1) {
sectionClass = tokens[i];
break;
}
}
wrapperElement.attr('class', styleClass.replace(sectionClass, section + '-' + theme));
},
changeMenuMode: function(menuMode) {
var wrapper = $(document.body).children('.layout-wrapper');
switch (menuMode) {
case 'layout-static layout-static-active':
wrapper.addClass('layout-static layout-static-active').removeClass('layout-overlay layout-slim layout-horizontal layout-slim-plus');
this.clearLayoutState();
break;
case 'layout-overlay':
wrapper.addClass('layout-overlay').removeClass('layout-static layout-slim layout-horizontal layout-slim-plus layout-static-active');
this.clearLayoutState();
break;
case 'layout-horizontal':
wrapper.addClass('layout-horizontal').removeClass('layout-static layout-overlay layout-slim layout-slim-plus layout-static-active');
this.clearLayoutState();
break;
case 'layout-slim':
wrapper.addClass('layout-slim').removeClass('layout-static layout-overlay layout-horizontal layout-slim-plus layout-static-active');
this.clearLayoutState();
break;
case 'layout-slim-plus':
wrapper.addClass('layout-slim-plus').removeClass('layout-static layout-overlay layout-horizontal layout-slim layout-static-active');
this.clearLayoutState();
break;
default:
wrapper.addClass('layout-static').removeClass('layout-overlay layout-slim layout-horizontal layout-slim-plus ');
this.clearLayoutState();
break;
}
},
beforeResourceChange: function() {
PrimeFaces.ajax.RESOURCE = null; //prevent resource append
},
replaceLink: function(linkElement, href) {
PrimeFaces.ajax.RESOURCE = 'javax.faces.Resource';
var isIE = this.isIE();
if (isIE) {
linkElement.attr('href', href);
}
else {
var cloneLinkElement = linkElement.clone(false);
cloneLinkElement.attr('href', href);
linkElement.after(cloneLinkElement);
cloneLinkElement.off('load').on('load', function() {
linkElement.remove();
});
}
},
getColor: function(name, darkMode) {
return name + '-' + darkMode;
},
isIE: function() {
return /(MSIE|Trident\/|Edge\/)/i.test(navigator.userAgent);
},
clearLayoutState: function() {
var menu = PF('RainMenuWidget');
if (menu) {
menu.clearLayoutState();
}
},
updateInputStyle: function(value) {
if (value === 'filled')
$(document.body).addClass('ui-input-filled');
else
$(document.body).removeClass('ui-input-filled');
}
};
/*!
* 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);
};
}));
if (PrimeFaces.widget.InputSwitch) {
PrimeFaces.widget.InputSwitch = PrimeFaces.widget.InputSwitch.extend({
init: function (cfg) {
this._super(cfg);
if (this.input.prop('checked')) {
this.jq.addClass('ui-inputswitch-checked');
}
},
check: function () {
var $this = this;
this.input.prop('checked', true).trigger('change');
setTimeout(function () {
$this.jq.addClass('ui-inputswitch-checked');
}, 100);
},
uncheck: function () {
var $this = this;
this.input.prop('checked', false).trigger('change');
setTimeout(function () {
$this.jq.removeClass('ui-inputswitch-checked');
}, 100);
}
});
}
if (PrimeFaces.widget.AccordionPanel) {
PrimeFaces.widget.AccordionPanel = PrimeFaces.widget.AccordionPanel.extend({
init: function (cfg) {
this._super(cfg);
this.headers.last().addClass('ui-accordion-header-last');
}
});
}
/* 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() {}
});
}
if (PrimeFaces.widget.SelectOneMenu) {
PrimeFaces.widget.SelectOneMenu = PrimeFaces.widget.SelectOneMenu.extend({
init: function (cfg) {
this._super(cfg);
var $this = this;
if (this.jq.parent().hasClass('ui-float-label')) {
this.m_panel = $(this.jqId + '_panel');
this.m_focusInput = $(this.jqId + '_focus');
this.m_panel.addClass('ui-input-overlay-panel');
this.jq.addClass('ui-inputwrapper');
if (this.input.val() != '') {
this.jq.addClass('ui-inputwrapper-filled');
}
this.input.off('change').on('change', function () {
$this.inputValueControl($(this));
});
this.m_focusInput.on('focus.ui-selectonemenu', function () {
$this.jq.addClass('ui-inputwrapper-focus');
})
.on('blur.ui-selectonemenu', function () {
$this.jq.removeClass('ui-inputwrapper-focus');
});
if (this.cfg.editable) {
this.label.on('input', function (e) {
$this.inputValueControl($(this));
}).on('focus', function () {
$this.jq.addClass('ui-inputwrapper-focus');
}).on('blur', function () {
$this.jq.removeClass('ui-inputwrapper-focus');
$this.inputValueControl($(this));
});
}
}
},
inputValueControl: function (input) {
if (input.val() != '')
this.jq.addClass('ui-inputwrapper-filled');
else
this.jq.removeClass('ui-inputwrapper-filled');
}
});
}
if (PrimeFaces.widget.Chips) {
PrimeFaces.widget.Chips = PrimeFaces.widget.Chips.extend({
init: function (cfg) {
this._super(cfg);
var $this = this;
if (this.jq.parent().hasClass('ui-float-label')) {
this.jq.addClass('ui-inputwrapper');
if ($this.jq.find('.ui-chips-token').length !== 0) {
this.jq.addClass('ui-inputwrapper-filled');
}
this.input.on('focus.ui-chips', function () {
$this.jq.addClass('ui-inputwrapper-focus');
}).on('input.ui-chips', function () {
$this.inputValueControl();
}).on('blur.ui-chips', function () {
$this.jq.removeClass('ui-inputwrapper-focus');
$this.inputValueControl();
});
}
},
inputValueControl: function () {
if (this.jq.find('.ui-chips-token').length !== 0 || this.input.val() != '')
this.jq.addClass('ui-inputwrapper-filled');
else
this.jq.removeClass('ui-inputwrapper-filled');
}
});
}
if (PrimeFaces.widget.DatePicker) {
PrimeFaces.widget.DatePicker = PrimeFaces.widget.DatePicker.extend({
init: function (cfg) {
this._super(cfg);
var $this = this;
if (this.jq.parent().hasClass('ui-float-label') && !this.cfg.inline) {
if (this.input.val() != '') {
this.jq.addClass('ui-inputwrapper-filled');
}
this.jqEl.off('focus.ui-datepicker blur.ui-datepicker change.ui-datepicker')
.on('focus.ui-datepicker', function () {
$this.jq.addClass('ui-inputwrapper-focus');
})
.on('blur.ui-datepicker', function () {
$this.jq.removeClass('ui-inputwrapper-focus');
})
.on('change.ui-datepicker', function () {
$this.inputValueControl($(this));
});
}
},
inputValueControl: function (input) {
if (input.val() != '')
this.jq.addClass('ui-inputwrapper-filled');
else
this.jq.removeClass('ui-inputwrapper-filled');
}
});
}
Github Profile: https://github.com/mertsincan
Thank you very much for the update.
Scrolling the items for the first menu is now working - maybe it make sense to show here also than the scrollbar.
But for the second menu there is a bug:
a) Before the submenu was always at the same height from the first menu, but now it´s always starting from the top?
b) for the menus which are more at the end. It´s in the background from the topbar.
Please see the following image:
For menus which are more on the beginning it´s working:
Scrolling the items for the first menu is now working - maybe it make sense to show here also than the scrollbar.
But for the second menu there is a bug:
a) Before the submenu was always at the same height from the first menu, but now it´s always starting from the top?
b) for the menus which are more at the end. It´s in the background from the topbar.
Please see the following image:
For menus which are more on the beginning it´s working:
Primefaces 12.0, WildFly 21
-
mert.sincan
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Interesting! Do you have any custom CSS?a) Before the submenu was always at the same height from the first menu, but now it´s always starting from the top?
Github Profile: https://github.com/mertsincan
Hm no..
This is the only code which I added in my custom.css
Also I can see this in the css, but I don´t know where this is coming from.
This is the only code which I added in my custom.css
Code: Select all
/* Template CUSTOM
=================================================================== */
@media ( max-width : 991px) {
.layout-content {
padding: 5px 13px;
}
}
.layout-content {
padding: 10px 23px;
flex: 1 1 auto;
}
/* Remove after fix directly in template
=================================================================== */
@media screen and (min-width: 992px) {
body .layout-wrapper.layout-slim .menu-wrapper .layout-menu-container .layout-menu>li,
body .layout-wrapper.layout-slim-plus .menu-wrapper .layout-menu-container .layout-menu>li,
body .layout-wrapper.layout-horizontal .menu-wrapper .layout-menu-container .layout-menu>li
{
position: static;
}
body .layout-wrapper.layout-slim .menu-wrapper .layout-menu-container,
body .layout-wrapper.layout-slim-plus .menu-wrapper .layout-menu-container,
body .layout-wrapper.layout-horizontal .menu-wrapper .layout-menu-container
{
overflow: auto;
}
body .layout-wrapper.layout-slim .menu-wrapper .layout-menu-container::-webkit-scrollbar,
body .layout-wrapper.layout-slim-plus .menu-wrapper .layout-menu-container::-webkit-scrollbar,
body .layout-wrapper.layout-horizontal .menu-wrapper .layout-menu-container::-webkit-scrollbar
{
display: none;
}
body .layout-wrapper.layout-horizontal .menu-wrapper .layout-menu-container .layout-menu>li>ul
{
top: 43px;
}
}Primefaces 12.0, WildFly 21
-
- Information
-
Who is online
Users browsing this forum: No registered users and 15 guests