graphdb-workbench
Version:
The web application for GraphDB APIs
1 lines • 5.22 kB
JavaScript
import{r as registerInstance,h,a as Host,g as getElement}from"./index-I_gcXFWK.js";import{ServiceProvider,AuthenticationService,NavigationContextService,SubscriptionList,WindowService,LocalStorageSubscriptionHandlerService,SecurityContextService,EventService,EventName}from"@ontotext/workbench-api";function debounce(e,i=300){let t;return(...a)=>{clearTimeout(t),t=setTimeout(()=>e.apply(this,a),i)}}const RESPONSIVE_BREAKPOINTS={MD:768},WINDOW_WIDTH_FOR_COLLAPSED_NAVBAR=RESPONSIVE_BREAKPOINTS.MD,ontoLayoutCss=':host{display:block;height:100%}.wb-layout{display:grid;grid-template-columns:15rem minmax(200px, 1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"nav header" "nav main" "nav footer";min-height:100vh;margin:0}.wb-layout.expanded{grid-template-columns:4.375rem 1fr}.wb-layout nav{grid-area:nav}.wb-layout header{grid-area:header}.wb-layout main{grid-area:main}.wb-layout main .main-container{margin-left:0}.wb-layout .default-slot-wrapper{display:none}.wb-layout footer{grid-area:footer}.wb-header{position:sticky;top:0;z-index:999}',OntoLayout=class{constructor(e){registerInstance(this,e),this.authenticationService=ServiceProvider.get(AuthenticationService),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:"55c8601b5968b9856decc6ad750d8fd6c9da41e1",class:"wb-layout"},h("div",{key:"6aff422df9f57c8ac6d6b9e9cf9def15c8e20268",class:"default-slot-wrapper"},h("slot",{key:"4ef3359fde156594c154ae2641abbf882f697704",name:"default"})),h("header",{key:"98d4f66bd1258a7f3f962c01ef1b008dd4a7bc1c",class:"wb-header"},this.showHeader&&h("onto-header",{key:"28b32c21b44b5ef8d793b0542f05da031f962f0c"})),h("nav",{key:"ae4aac8240647424c5c19c22c8952ee289501a84",class:"wb-navbar"},h("onto-navbar",{key:"9ff506d825dada8f49097a39fd92def126c34619",ref:this.assignNavbarRef(),"navbar-collapsed":this.isLowResolution})),h("div",{key:"a645218c32737bbf083d956b2139765b16e8f8fa",class:"main-slot-wrapper"},h("slot",{key:"1af9902336893aaebf8368c5efaff6f149191f0c",name:"main"})),h("footer",{key:"5228fdefcdb93a569506be7c90cbbff3bd1abd79",class:"wb-footer"},h("onto-footer",{key:"a10c59d4ebb202a0663948b2634cc1b2ac17df88"})),h("onto-tooltip",{key:"cedc920510dc71cc81175de84dfe34e30b7aa6aa"}),h("onto-toastr",{key:"38bab8101b777fb81e4b0965c801592a92d6583b"}))}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.LOGOUT,()=>{this.setNavbarItemVisibility(),this.updateVisibility()})),this.subscriptions.add(e.onAuthTokenChanged(()=>{this.setNavbarItemVisibility(),this.updateVisibility()}))}updateVisibility(){this.authenticationService.isSecurityEnabled()?this.showHeader=this.authenticationService.isLoggedIn()||this.authenticationService.hasFreeAccess():this.showHeader=!0}isAuthenticatedFully(){const e=ServiceProvider.get(AuthenticationService);return!e.isSecurityEnabled()||e.isLoggedIn()||e.hasFreeAccess()}shouldShowMenu(e){return this.isAuthenticatedFully()&&ServiceProvider.get(AuthenticationService).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 a=e=>{var i;e.shouldShow=this.shouldShowMenu(e.role),(null===(i=e.children)||void 0===i?void 0:i.length)&&e.children.forEach(a)};null===(t=null===(i=this.navbarRef)||void 0===i?void 0:i.menuItems)||void 0===t||t.forEach(e=>{e.items.forEach(a)}),this.navbarRef.menuItems=[...this.navbarRef.menuItems]}subscribeToNavigationEnd(){this.subscriptions.add(ServiceProvider.get(EventService).subscribe(EventName.NAVIGATION_END,e=>{this.navigationContextService.updatePreviousRoute(e.oldUrl)}))}get hostElement(){return getElement(this)}};OntoLayout.style=ontoLayoutCss;export{OntoLayout as onto_layout};