graphdb-workbench
Version:
The web application for GraphDB APIs
1 lines • 7.17 kB
JavaScript
import{h,Host}from"@stencil/core";import{debounce}from"../../utils/function-utils";import{WINDOW_WIDTH_FOR_COLLAPSED_NAVBAR}from"../../models/constants";import{ApplicationLifecycleContextService,AuthenticationService,AuthenticationStorageService,AuthorizationService,EventName,EventService,LocalStorageSubscriptionHandlerService,navigate,NavigationContextService,RuntimeConfigurationContextService,SecurityContextService,service,StorageKey,SubscriptionList,WindowService}from"../../../../../api/dist/ontotext-workbench-api";import{TranslationService}from"../../services/translation.service";export class OntoLayout{constructor(){this.authenticationService=service(AuthenticationService),this.authorizationService=service(AuthorizationService),this.navigationContextService=service(NavigationContextService),this.authStorageService=service(AuthenticationStorageService),this.runtimeConfigurationContextService=service(RuntimeConfigurationContextService),this.eventService=service(EventService),this.applicationLifecycleContextService=service(ApplicationLifecycleContextService),this.fullJwtKey=`${StorageKey.GLOBAL_NAMESPACE}.${this.authStorageService.NAMESPACE}.${this.authStorageService.jwtKey}`,this.fullAuthenticatedKey=`${StorageKey.GLOBAL_NAMESPACE}.${this.authStorageService.NAMESPACE}.${this.authStorageService.authenticatedKey}`,this.authEvents=[this.fullJwtKey,this.fullAuthenticatedKey],this.isLowResolution=!1,this.showHeader=this.isAuthenticatedFully(),this.showNavbar=!1,this.isEmbedded=!1,this.loading=!0,this.subscriptions=new SubscriptionList,this.isNavbarCollapsed=!1,this.handleStorageChange=e=>{service(LocalStorageSubscriptionHandlerService).handleStorageChange(e),this.handleAuthChange(e.key)},this.windowResizeObserver=debounce(()=>this.windowResizeHandler(),50),WindowService.getWindow().addEventListener("storage",this.handleStorageChange)}componentDidLoad(){this.windowResizeHandler()}connectedCallback(){this.subscribeToSecurityChanges(),this.updateVisibility(),this.subscribeToNavigationEnd(),this.subscribeToRuntimeConfigurationChanges(),this.subscribeToApplicationChange()}disconnectedCallback(){this.subscriptions.unsubscribeAll()}render(){return h(Host,{key:"b8cbbca1f12bf6af844e18397d2a725d6ab4e1fc",class:{"wb-layout":!0,"is-embedded":this.isEmbedded,"hide-navbar":!this.showNavbar}},h("div",{key:"f2e3b7a238b82536bd7605196966bd758330c521",class:"default-slot-wrapper"},h("slot",{key:"5d391e2f612d9aead6c07b2ef3641b961eddc504",name:"default"})),!this.isEmbedded&&h("header",{key:"e43c5b68d590e12b2b3e95d4c414505f1fc82abb",class:"wb-header"},this.showHeader&&h("onto-header",{key:"21102b279bed2dd3ee857b399683d14c5f3eaf57"})),!this.isEmbedded&&this.showNavbar&&h("nav",{key:"67dcbf444a30ac933ba83f86ae9f8d08fe5f995f",class:"wb-navbar"},h("onto-navbar",{key:"a9816369cbbac4d5b58f607be61277d6074556bd",ref:this.assignNavbarRef(),"navbar-collapsed":this.isLowResolution})),h("div",{key:"f3ff0e1734eecc433dc20717e0b9f2871ea40dae",class:{"main-slot-wrapper":!0,loading:this.loading}},this.loading&&h("div",{key:"17d9a8024d280f70ad8684e5d114c38b184b529d",class:"loader-wrapper"},h("onto-loader",{key:"534a5d8f89b92051822d1d7750ca56894013c142",size:96,messageText:TranslationService.translate("common.loading")})),h("slot",{key:"bcd21d932551dc6f9b9365ccbbafae690f8b7245",name:"main"})),!this.isEmbedded&&h("footer",{key:"9fcd224439dbb7fd35bb4c277dc343eccab40087",class:"wb-footer"},h("onto-footer",{key:"39d5d1c8275c527ca16aa74f6f15dc3f0cc3686c"})),h("onto-tooltip",{key:"6a70e6d2d67e8a9aa6b8eda66b6768735c0f6dcd"}))}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")}handleAuthChange(e){var i;if(e&&this.authEvents.includes(e)){const e=this.authStorageService.isAuthenticated();navigate(e?null!==(i=this.navigationContextService.getPreviousRoute())&&void 0!==i?i:"./":"login"),WindowService.getWindow().location.reload()}}subscribeToSecurityChanges(){const e=service(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(this.eventService.subscribe(EventName.LOGIN,()=>{this.setNavbarItemVisibility(),this.updateVisibility()})),this.subscriptions.add(this.eventService.subscribe(EventName.LOGOUT,()=>{this.setNavbarItemVisibility(),this.updateVisibility(),navigate("login")}))}subscribeToRuntimeConfigurationChanges(){this.subscriptions.add(this.runtimeConfigurationContextService.onRuntimeConfigurationChanged(e=>{var i;this.isEmbedded=null!==(i=null==e?void 0:e.isEmbedded)&&void 0!==i&&i}))}updateVisibility(){this.authenticationService.isSecurityEnabled()?(this.showHeader=this.authenticationService.isAuthenticated()||this.authorizationService.hasFreeAccess(),this.showNavbar=this.authenticationService.isAuthenticated()||this.authorizationService.hasFreeAccess()):(this.showNavbar=!0,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&&(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(this.eventService.subscribe(EventName.NAVIGATION_END,e=>{this.navigationContextService.updatePreviousRoute(e.oldUrl)}))}subscribeToApplicationChange(){this.subscriptions.add(this.applicationLifecycleContextService.onApplicationStateBeforeChange(e=>{e&&(this.loading=!0)})),this.subscriptions.add(this.applicationLifecycleContextService.onApplicationStateChange(e=>{e&&(this.loading=!1)}))}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:{},showNavbar:{},isEmbedded:{},loading:{}}}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}]}}