Notification Bar - not close if a p:command / p:commandLink is clicked?

[rider]

Hi,

I´ve implemented in the notification bar a p:datatable with some actions (read, unread) button...
Currently the button is working and the function is called, but the notification panel is closed as soon I will click the mouse...

Here a screeshot:
- The red and green (in the option columns) are my action buttons
- As soon I will click on of the them, the whole notification panel will be closed...


The panel will be closed also when I try to sort the datatable...
How can this be fixed? I guess something in the layout.js file?

[mert.sincan]

Hi,

Please update your layout.js like;

Code: Select all

// line 293
     bindTopbarEvents: function() {
        var $this = this;

        ...

        this.topbarItems.children('ul').off('click.topbar').on('click.topbar', function(e) { /* Please add this code block */
            $this.topbarItemClicked = true;
        });
    },
    ...

[rider]

Edit:
Awesome - it´s working great.
Thank you very much.

Will you add this for future releases also into it?

[mert.sincan]

Thanks a lot for the update! We'll discuss this and get back to you.

[rider]

Ok, I have one additional request for p:menu / p:menuitem.... For those items it´s not working and the notification bar will be closed again...

Here is the full code:

Code: Select all

</a>
						<ul style="width: 400px;">
							<li class="layout-submenu-header">
								<h6 class="header-text w-full">

									<div class="flex justify-content-between">
										<div>
											<h:outputText value="Benachrichtigungen" />
										</div>
										<div>
											<p:commandLink id="dynaButtonNotificationGeneral">
												<h:outputText styleClass="fa fa-ellipsis-h White" />
											</p:commandLink>

											<p:menu overlay="true"
												trigger="dynaButtonNotificationGeneral" my="left top"
												at="left bottom" style="width: 250px !important;">

												<p:menuitem value="Alle als gelesen markieren"
													update=":growl" ajax="false" icon="fa fa-check" />
												<p:menuitem value="Benachrichtungseinstellungen"
													update=":growl" ajax="false" icon="fa fa-cog" />
												<p:menuitem value="Benachrichtungen öffnen" update=":growl"
													ajax="false" icon="fa fa-bell-o" />

											</p:menu>

										</div>
									</div>

								</h6>
							</li>

							<h:form>

								<p:outputPanel deferred="true"
									loaded="#{not empty notificationRequestDataScrollerByEmployeeController.lazyModel}">

									<p:ajax event="load" global="false"
										listener="#{notificationRequestDataScrollerByEmployeeController.init()}" />

									<h:panelGroup layout="block"
										rendered="#{notificationRequestDataScrollerByEmployeeController.numberTotal == 0}">

										<div class="notification-item">

											<div class="notification-summary">
												<h:outputText value="Keine Benachrichtigung" />
											</div>

										</div>

									</h:panelGroup>



									<p:dataScroller id="notificationDataScroller"
										styleClass="borderlessDatascroller"
										rendered="#{notificationRequestDataScrollerByEmployeeController.numberTotal != 0}"
										value="#{notificationRequestDataScrollerByEmployeeController.lazyModel}"
										var="notification" chunkSize="10" mode="inline" lazy="true"
										scrollHeight="300">

										<div
											class="grid grid-nogutter #{notification.readStatus == 'UNREAD' ? 'WhiteBlueBack' : ''}"
											style="padding-top: 5px; padding-bottom: 5px;">

											<div class="col-fixed" style="width: 30px">
												<i class="pi pi-shopping-cart Fs20"></i>
											</div>

											<div class="col">
												<h:outputText value="Test Test" />

												<div class="EmptyBox5"></div>

												<h:outputText value="Vor 10 Minuten" styleClass="Blue Fs11" />
											</div>
											
											<div class="col-fixed" style="width: 30px">
												<p:commandLink id="dynaButtonNotificationSingle">
													<h:outputText styleClass="fa fa-dot-circle-o" />
												</p:commandLink>

												<p:menu overlay="true"
													trigger="dynaButtonNotificationSingle" my="left top"
													at="left bottom" style="width: 250px !important;">

													<p:menuitem value="Alle als gelesen markieren"
														process="@this"
														actionListener="#{actionNotificationController.changeStatusToRead(notification)}"
														update=":growl, @form:notificationDataScroller"
														icon="fa fa-check" />

													<p:menuitem value="Alle als ungelesen markieren"
														process="@this"
														actionListener="#{actionNotificationController.changeStatusToUnread(notification)}"
														update=":growl, @form:notificationDataScroller"
														icon="fa fa-window-close-o" />

												</p:menu>
											</div>


										</div>

									</p:dataScroller>

								</p:outputPanel>


							</h:form>

						</ul></li>

Looking like this...


If I press <p:menuitem value="Alle als gelesen markieren" then the menu notification overlay will be close..
Can you fix this also, please?

[mert.sincan]

Could you please try <p:menu appendTo="@this" ... > ?

[rider]

no, that´s not working...
Does the p:menu has the appendTo property?
I don´t think so: https://primefaces.github.io/primefaces ... nents/menu

[mert.sincan]

Hi @rider,

I noticed it. Could you please create a Github core issue about appendTo usage with menu? For now, you can use the following bindEvents method;

Code: Select all

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

Best Regards,

[rider]

Hi @rider,

I noticed it. Could you please create a Github core issue about appendTo usage with menu? For now, you can use the following bindEvents method;

Code: Select all

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

Best Regards,

Thanks, I´ve opened this: https://github.com/primefaces/primefaces/issues/9489

[mert.sincan]

Thanks a lot! For now, you can use the above js code.

Best Regards,