graphdb-workbench
Version:
The web application for GraphDB APIs
1 lines • 5.1 kB
JavaScript
import{h,Host}from"@stencil/core";import{debounce}from"../../utils/function-utils";import{WINDOW_WIDTH_FOR_COLLAPSED_NAVBAR}from"../../models/constants";import{AuthenticationService,AuthorizationService,EventName,EventService,LocalStorageSubscriptionHandlerService,navigate,NavigationContextService,SecurityContextService,ServiceProvider,SubscriptionList,WindowService}from"../../../../../api/dist/ontotext-workbench-api";export class OntoLayout{constructor(){this.authenticationService=ServiceProvider.get(AuthenticationService),this.authorizationService=ServiceProvider.get(AuthorizationService),this.navigationContextService=ServiceProvider.get(NavigationContextService),this.isLowResolution=!1,this.showHeader=this.isAuthenticatedFully(),this.subscriptions=new SubscriptionList,this.isNavbarCollapsed=!1,this.windowResizeObserver=debounce(()=>this.windowResizeHandler(),50),WindowService.getWindow().addEventListener("storage",this.handleStorageChange)}componentDidLoad(){this.windowResizeHandler()}connectedCallback(){this.subscribeToSecurityChanges(),this.updateVisibility(),this.subscribeToNavigationEnd()}disconnectedCallback(){this.subscriptions.unsubscribeAll()}render(){return h(Host,{key:"43839b39292ee9e9cb0069d0fc7bf37d5349becc",class:"wb-layout"},h("div",{key:"81001d71c4d01825f83719cac61d34d1fc35b2b1",class:"default-slot-wrapper"},h("slot",{key:"5fe786622416da21561472f6da834c4c233d13fc",name:"default"})),h("header",{key:"b1b90981f77f98aad86b57be0d8dcb6abe541866",class:"wb-header"},this.showHeader&&h("onto-header",{key:"b1edea3608955812df1dd6de8e60df3e6138577a"})),h("nav",{key:"e633af3ed9c81dbb200ca6e212b5dba802a6db10",class:"wb-navbar"},h("onto-navbar",{key:"b5bf00eaed42a98be5b0e5e3becc20d0b30914b0",ref:this.assignNavbarRef(),"navbar-collapsed":this.isLowResolution})),h("div",{key:"bd8f85e4c5cdb36c7bd46855c1665d44bd73397e",class:"main-slot-wrapper"},h("slot",{key:"c2dbb842f63c92ea6f74a683860dcbfb49949be1",name:"main"})),h("footer",{key:"db49d5698c19ae3bfc3144e61226ff8e24830961",class:"wb-footer"},h("onto-footer",{key:"4b5c21c7ba8544c647d216f23aaef94fc8c47858"})),h("onto-tooltip",{key:"8af057e1dfe06c4268e2163f989730301aae443e"}),h("onto-toastr",{key:"037436b1c9bd88bc2fcae2fce8f0a99d943b0e43"}))}onNavbarToggled(e){this.isNavbarCollapsed=e.detail.payload,this.isNavbarCollapsed?this.hostElement.classList.add("expanded"):this.hostElement.classList.remove("expanded")}onResize(){this.windowResizeObserver()}windowResizeHandler(){this.isLowResolution=WindowService.getWindow().innerWidth<=WINDOW_WIDTH_FOR_COLLAPSED_NAVBAR,this.isLowResolution||this.isNavbarCollapsed?this.hostElement.classList.add("expanded"):this.hostElement.classList.remove("expanded")}handleStorageChange(e){ServiceProvider.get(LocalStorageSubscriptionHandlerService).handleStorageChange(e)}subscribeToSecurityChanges(){const e=ServiceProvider.get(SecurityContextService);this.subscriptions.add(e.onAuthenticatedUserChanged(e=>{this.authenticatedUser=e,this.updateVisibility()})),this.subscriptions.add(e.onSecurityConfigChanged(e=>{this.securityConfig=e,this.updateVisibility()})),this.subscriptions.add(ServiceProvider.get(EventService).subscribe(EventName.LOGIN,()=>{this.setNavbarItemVisibility(),this.updateVisibility()})),this.subscriptions.add(ServiceProvider.get(EventService).subscribe(EventName.LOGOUT,()=>{this.setNavbarItemVisibility(),this.updateVisibility(),navigate("login")}))}updateVisibility(){this.authenticationService.isSecurityEnabled()?this.showHeader=this.authenticationService.isAuthenticated()||this.authorizationService.hasFreeAccess():this.showHeader=!0}isAuthenticatedFully(){return!this.authenticationService.isSecurityEnabled()||this.authenticationService.isAuthenticated()||this.authorizationService.hasFreeAccess()}shouldShowMenu(e){return this.isAuthenticatedFully()&&this.authorizationService.hasRole(e)}assignNavbarRef(){return e=>{this.navbarRef=e,this.navbarRef.menuItems=WindowService.getWindow().PluginRegistry.get("main.menu"),this.setNavbarItemVisibility()}}setNavbarItemVisibility(){var e,i,t;if(!(null===(e=this.navbarRef)||void 0===e?void 0:e.menuItems))return;const s=e=>{var i;e.shouldShow=this.shouldShowMenu(e.role),(null===(i=e.children)||void 0===i?void 0:i.length)&&e.children.forEach(s)};null===(t=null===(i=this.navbarRef)||void 0===i?void 0:i.menuItems)||void 0===t||t.forEach(e=>{e.items.forEach(s)}),this.navbarRef.menuItems=[...this.navbarRef.menuItems]}subscribeToNavigationEnd(){this.subscriptions.add(ServiceProvider.get(EventService).subscribe(EventName.NAVIGATION_END,e=>{this.navigationContextService.updatePreviousRoute(e.oldUrl)}))}static get is(){return"onto-layout"}static get originalStyleUrls(){return{$:["onto-layout.scss"]}}static get styleUrls(){return{$:["onto-layout.css"]}}static get states(){return{authenticatedUser:{},authToken:{},securityConfig:{},isLowResolution:{},showHeader:{}}}static get elementRef(){return"hostElement"}static get listeners(){return[{name:"navbarToggled",method:"onNavbarToggled",target:void 0,capture:!1,passive:!1},{name:"resize",method:"onResize",target:"window",capture:!1,passive:!0}]}}