web-mojo/dist/chunks/TopNav-DlHcfQbu.js

WEB-MOJO - A lightweight JavaScript framework for building data-driven web applications

"use strict";const t=require("./WebApp-sKJf8j1s.js");class TopNav extends t.View{constructor(t={}){const n={light:"navbar navbar-expand-lg navbar-light topnav-light",dark:"navbar navbar-expand-lg navbar-dark topnav-dark",clean:"navbar navbar-expand-lg navbar-light topnav-clean",gradient:"navbar navbar-expand-lg navbar-dark topnav-gradient"};let e=n[t.theme||"light"]||n.light;t.shadow&&(e+=` topnav-shadow-${t.shadow}`),super({tagName:"nav",className:e,style:"position: relative; z-index: 1030;",...t}),this.displayMode=t.displayMode||"both",this.showPageIcon=!1!==t.showPageIcon,this.showPageDescription=t.showPageDescription||!1,this.showBreadcrumbs=t.showBreadcrumbs||!1,this.currentPage=null,this.previousPage=null,this.config={brand:t.brand||"MOJO App",brandIcon:t.brandIcon||"bi bi-play-circle",brandRoute:t.brandRoute||"/",navItems:t.navItems||[],rightItems:t.rightItems||[],showSidebarToggle:t.showSidebarToggle||!1,sidebarToggleAction:t.sidebarToggleAction||"toggle-sidebar",...t},this.userMenu=t.userMenu||this.findMenuItem("user"),this.userMenu&&(this.userMenu.id="user"),this.loginMenu=t.loginMenu||this.findMenuItem("login"),this.setupPageListeners()}findMenuItem(t){let n=this.config.navItems.find(n=>n.id===t);return n||(n=this.config.rightItems.find(n=>n.id===t)),n||null}replaceMenuItem(t,n){const e=this.config.navItems.findIndex(n=>n.id===t);if(-1!==e)return this.config.navItems[e]=n,!0;const a=this.config.rightItems.findIndex(n=>n.id===t);return-1!==a&&(this.config.rightItems[a]=n,!0)}setBrand(t,n=null){this.config.brand=t,this.config.brandIcon=n||this.config.brandIcon,this.render()}setUser(t){t?(this.userMenu.label=t.get("display_name"),this.replaceMenuItem("login",this.userMenu)):this.replaceMenuItem("user",this.loginMenu),this.setModel(t)}_onModelChange(){this.model&&(this.userMenu.label=this.model.get("display_name")),this.isMounted()&&this.render()}async getTemplate(){return'\n            <div class="container-fluid">\n                {{#data.showSidebarToggle}}\n                <button class="topnav-sidebar-toggle me-2" data-action="{{data.sidebarToggleAction}}" aria-label="Toggle Sidebar">\n                    <i class="bi bi-chevron-right toggle-chevron"></i>\n                </button>\n                {{/data.showSidebarToggle}}\n\n                {{#data.showPageInfo}}\n                <div class="navbar-brand d-flex align-items-center">\n                    {{#data.currentPageIcon}}<i class="{{data.currentPageIcon}} me-2"></i>{{/data.currentPageIcon}}\n                    <div>\n                        <span>{{data.currentPageName}}</span>\n                        {{#data.currentPageDescription}}\n                        <small class="d-block" style="font-size: 0.75rem; line-height: 1;">{{data.currentPageDescription}}</small>\n                        {{/data.currentPageDescription}}\n                    </div>\n                </div>\n                {{/data.showPageInfo}}\n\n                {{^data.showPageInfo}}\n                <a class="navbar-brand" href="{{data.brandRoute}}">\n                    {{#data.brandIcon}}<i class="{{data.brandIcon}} me-2"></i>{{/data.brandIcon}}\n                    {{data.brand}}\n                </a>\n                {{/data.showPageInfo}}\n\n                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#{{data.navbarId}}">\n                    <span class="navbar-toggler-icon"></span>\n                </button>\n\n                <div class="collapse navbar-collapse" id="{{data.navbarId}}">\n                    {{#data.showNavItems}}\n                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">\n                        {{#data.navItems}}\n                        <li class="nav-item">\n                            <a class="nav-link {{#active}}active{{/active}}" href="{{route}}">\n                                {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}\n                                {{text}}\n                            </a>\n                        </li>\n                        {{/data.navItems}}\n                    </ul>\n                    {{/data.showNavItems}}\n\n                    {{#data.hasRightItems}}\n                    <div class="navbar-nav ms-auto">\n                        {{#data.rightItems}}\n                        {{#isDropdown}}\n                        <div class="nav-item dropdown">\n                            <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">\n                                {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}\n                                {{label}}\n                            </a>\n                            <ul class="dropdown-menu dropdown-menu-end">\n                                {{#items}}\n                                {{#divider}}\n                                <li><hr class="dropdown-divider"></li>\n                                {{/divider}}\n                                {{^divider}}\n                                <li>\n                                    <a class="dropdown-item" role="button" {{#action}}data-action="{{action}}"{{/action}}>\n                                        {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}\n                                        {{label}}\n                                    </a>\n                                </li>\n                                {{/divider}}\n                                {{/items}}\n                            </ul>\n                        </div>\n                        {{/isDropdown}}\n                        {{^isDropdown}}\n                        {{#isButton}}\n                        <button class="{{buttonClass}}" data-action="{{action}}" data-id="{{id}}">\n                            {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}\n                            {{label}}\n                        </button>\n                        {{/isButton}}\n                        {{^isButton}}\n                        <a class="nav-link" href="{{href}}" {{#action}}data-action="{{action}}"{{/action}}>\n                            {{#icon}}<i class="{{icon}} me-1"></i>{{/icon}}\n                            {{label}}\n                        </a>\n                        {{/isButton}}\n                        {{/isDropdown}}\n                        {{/data.rightItems}}\n                    </div>\n                    {{/data.hasRightItems}}\n                </div>\n            </div>\n        '}async onBeforeRender(){await super.onBeforeRender();const t="page"===this.displayMode||"both"===this.displayMode,n="menu"===this.displayMode||"both"===this.displayMode,e=this.filterItemsByPermissions(this.config.navItems||[]),a=this.processRightItems(this.config.rightItems||[]);this.data={brand:this.config.brand,brandIcon:this.config.brandIcon,brandRoute:this.config.brandRoute,navbarId:`navbar-${this.id}`,navItems:e,showNavItems:n,rightItems:a,hasRightItems:a.length>0,showPageInfo:t,currentPageName:this.currentPage?.title||this.currentPage?.name||"",currentPageIcon:this.currentPage?.icon||this.currentPage?.pageIcon||"",currentPageDescription:this.showPageDescription?this.currentPage?.description:"",showSidebarToggle:this.config.showSidebarToggle,sidebarToggleAction:this.config.sidebarToggleAction,displayMode:this.displayMode}}processRightItems(t){return this.filterItemsByPermissions(t).map(t=>{const n={...t};return t.items&&(n.items=this.filterItemsByPermissions(t.items)),n.items&&n.items.length>0?(n.isDropdown=!0,n.isButton=!1):t.buttonClass?(n.isButton=!0,n.isDropdown=!1):(n.isButton=!1,n.isDropdown=!1),t.handler&&(this.rightItemHandlers=this.rightItemHandlers||/* @__PURE__ */new Map,this.rightItemHandlers.set(t.id,t.handler)),n})}setupPageListeners(){this.getApp().events.on(["page:show","page:hide","page:denied"],t=>{this.onPageChanged(t)})}onPageBeforeChange(t){"page"===this.displayMode||this.displayMode}onPageChanged(t){this.previousPage=this.currentPage,this.currentPage=t.page,"page"!==this.displayMode&&"both"!==this.displayMode||this.updatePageDisplay(),"menu"!==this.displayMode&&"both"!==this.displayMode||this.currentPage&&this.currentPage.route&&this.updateActiveItem(this.currentPage.route)}updatePageDisplay(){this.currentPage&&this.mounted&&this.render()}updateActiveItem(t){const n=t=>t?t.startsWith("/")?t:`/${t}`:"/",e=n(t),a=this.data.navItems.map(t=>{const a=n(t.route);let i=!1;return"/"===a&&"/"===e?i=!0:"/"!==a&&"/"!==e&&(i=e.startsWith(a)||e===a),{...t,active:i}});this.updateData({navItems:a},!0)}onPassThruActionProfile(){this.getApp().events.emit("portal:action",{action:"profile"})}onActionSettings(){this.getApp().events.emit("portal:action",{action:"settings"})}onActionLogout(){this.getApp().events.emit("auth:logout",{action:"logout"})}async handleAction(t,n,e){const a=e.getAttribute("data-id");if(a&&this.rightItemHandlers&&this.rightItemHandlers.has(a)){const i=this.rightItemHandlers.get(a);if("function"==typeof i)return await i.call(this,t,n,e)}const i=`onAction${t.charAt(0).toUpperCase()+t.slice(1).replace(/-([a-z])/g,t=>t[1].toUpperCase())}`;if("function"==typeof this[i])return await this[i](n,e);this.emit("action",{action:t,event:n,element:e,topnav:this})}async onActionDefault(t,n,e){if(this.config.navItems)for(const a of this.config.navItems)if(a.action===t&&a.handler)return await a.handler.call(this,t,n,e),!0;if(this.config.rightItems)for(const a of this.config.rightItems){if(a.action===t&&a.handler)return await a.handler.call(this,t,n,e),!0;if(a.items)for(const i of a.items)if(i.action===t&&i.handler)return await i.handler.call(this,t,n,e),!0}return this.getApp().events.emit("portal:action",{action:t,event:n,el:e}),!1}filterItemsByPermissions(t){if(!t)return[];const n=this.getApp(),e=n?.activeUser;return t.filter(t=>!t.permissions||!e||e.hasPermission(t.permissions))}}exports.TopNav=TopNav;
//# sourceMappingURL=TopNav-DlHcfQbu.js.map