diff --git a/src/views/home/home-view.scss b/src/views/home/home-view.scss index 542e8dc..e0764de 100644 --- a/src/views/home/home-view.scss +++ b/src/views/home/home-view.scss @@ -14,6 +14,7 @@ flex-direction: column; align-items: center; box-sizing: border-box; + igc-chip { --ig-chip-hover-background: var(--ig-gray-300); --ig-chip-focus-background: var(--ig-gray-300); @@ -37,6 +38,7 @@ justify-content: space-between; background-color: var(--ig-surface-500); box-sizing: border-box; + & a { text-decoration: none; display: block; @@ -149,9 +151,32 @@ } } -:-webkit-full-screen { +:fullscreen, +:-webkit-full-screen, +:host(:fullscreen), +:host(:-webkit-full-screen), +:host([data-browser-fullscreen]) { width: 100vw; height: 100vh; - overflow: auto; + display: flex; + flex-direction: column; background: white; } + +:host(:fullscreen) .demo-container, +:host(:-webkit-full-screen) .demo-container, +:host([data-browser-fullscreen]) .demo-container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: stretch; +} + +:host(:fullscreen) .router-container, +:host(:-webkit-full-screen) .router-container, +:host([data-browser-fullscreen]) .router-container { + flex: 1; + display: flex; + overflow: auto; +} diff --git a/src/views/home/home-view.ts b/src/views/home/home-view.ts index cc14a36..850c801 100644 --- a/src/views/home/home-view.ts +++ b/src/views/home/home-view.ts @@ -32,18 +32,17 @@ interface TabInfo { @customElement("home-view") export default class HomeView extends LitElement { - @query('#fullscreenElement') fullscreenElement!: HTMLElement; @property({ type: Boolean }) isFullscreen = false; @property({ type: Boolean }) isChartsSection = false; - @property({type: Array}) tabsGrids = [ + @property({ type: Array }) tabsGrids = [ { key: 'inventory' }, { key: 'hr-portal' }, { key: 'finance' }, { key: 'sales' }, { key: 'fleet' }, ]; - @property({type: Array}) tabsCharts = [ + @property({ type: Array }) tabsCharts = [ { key: 'column-chart' }, { key: 'bar-chart' }, { key: 'line-chart' }, @@ -51,8 +50,7 @@ export default class HomeView extends LitElement { { key: 'step-chart' }, { key: 'polar-chart' } ]; - @state() - private routeName: string = "inventory"; + @state() private routeName: string = "inventory"; public tabInfoGrids = new Map([ [ @@ -165,7 +163,7 @@ export default class HomeView extends LitElement { public tabInfo = this.tabInfoGrids; public activeTabs = this.tabsGrids; - + constructor() { super(); registerIconFromText("file_download", FILE_DOWNLOAD, "indigo_internal"); @@ -176,104 +174,86 @@ export default class HomeView extends LitElement { connectedCallback(): void { super.connectedCallback(); - + if (typeof window !== 'undefined') { window.addEventListener('vaadin-router-location-changed', this.updateCurrentPath); window.addEventListener('resize', this.onResize); // Initial setting of the correct route - const path = window.location.pathname; - this.routeName = this.extractRouteKey(path); - this.updateTabsBasedOnRoute(path); + this.updateTabsBasedOnRoute(window.location.pathname); } - + if (typeof document !== 'undefined') { document.addEventListener('fullscreenchange', this.onFullscreenChange); + document.addEventListener('webkitfullscreenchange', this.onFullscreenChange); } } - + disconnectedCallback(): void { super.disconnectedCallback(); - + if (typeof window !== 'undefined') { window.removeEventListener('vaadin-router-location-changed', this.updateCurrentPath); window.removeEventListener('resize', this.onResize); - this.updateTabsBasedOnRoute(window.location.pathname); } - if (typeof document !== 'undefined') { document.removeEventListener('fullscreenchange', this.onFullscreenChange); + document.removeEventListener('webkitfullscreenchange', this.onFullscreenChange); } } - private extractRouteKey(path: string): string { + private extractRouteKey(path: string) { // Get the part after '/home/', (for example 'charts/column-chart') - const base = path.split('/home/')[1] || ''; - return base; + return path.split('/home/')[1] || ''; } - + private updateCurrentPath = (_event: any) => { - // The full pathname -> like '/webcomponents-grid-examples/home/charts/line-chart' - const fullPath = window.location.pathname; - - // Extract the last segment as routeName for tab selection -> like 'line-chart' - const segments = fullPath.split('/').filter(Boolean); - const lastSegment = segments[segments.length - 1] || ''; - this.routeName = lastSegment; - - this.updateTabsBasedOnRoute(fullPath); + this.updateTabsBasedOnRoute(window.location.pathname); }; - + private onDownloadClick = (event: MouseEvent, tabName: string) => { event.preventDefault(); event.stopPropagation(); - const downloadLink = this.tabInfo.get(tabName)?.downloadLink; - if (typeof window !== 'undefined' && downloadLink) { - window.open(downloadLink, "_blank")?.focus(); - } + if (downloadLink) window.open(downloadLink, "_blank")?.focus(); }; - + private onViewMoreClick = (event: MouseEvent, tabName: string) => { event.preventDefault(); event.stopPropagation(); - const viewMoreLink = this.tabInfo.get(tabName)?.moreLink; - if (typeof window !== 'undefined' && viewMoreLink) { - window.open(viewMoreLink, '_blank')?.focus(); - } + if (viewMoreLink) window.open(viewMoreLink, "_blank")?.focus(); }; - + private async onToggleFullscreen() { - if (typeof document === 'undefined') return; + const el = this.fullscreenElement || this.shadowRoot?.host; if (!document.fullscreenElement) { - await this.fullscreenElement?.requestFullscreen?.(); + await el?.requestFullscreen?.(); } else { await document.exitFullscreen?.(); } } - - private onResize = () => { - if (typeof window === 'undefined' || typeof screen === 'undefined') return; - const isF11 = - window.innerWidth === screen.width && - window.innerHeight === screen.height; - - if (this.isFullscreen !== isF11) { - this.isFullscreen = isF11; + private onResize = () => { + const isFs = !!document.fullscreenElement || + (window.innerHeight === screen.height && window.innerWidth === screen.width); + if (this.isFullscreen !== isFs) { + this.isFullscreen = isFs; + this.requestUpdate(); } }; private onFullscreenChange = () => { - if (typeof document === 'undefined') return; - this.isFullscreen = !!document.fullscreenElement; + this.isFullscreen = !!document.fullscreenElement || + (window.innerHeight === screen.height && window.innerWidth === screen.width); + this.requestUpdate(); }; private updateTabsBasedOnRoute(url: string) { - this.routeName = url.replace(/^.*home\//, ''); - + const routeKey = this.extractRouteKey(url); + this.routeName = routeKey; + if (url.includes('charts')) { this.tabInfo = this.tabInfoCharts; this.activeTabs = this.tabsCharts; @@ -285,56 +265,52 @@ export default class HomeView extends LitElement { } } - private tabItemTemplate = (tabName: string) => { - const currentTabName = this.routeName.startsWith('charts/') - ? this.routeName.substring('charts/'.length) - : this.routeName; - - const isSelected = currentTabName === tabName; + private tabItemTemplate(tabName: string) { + const currentTabName = this.isChartsSection ? this.routeName.replace(/^charts\//, '') : this.routeName; + const isSelected = currentTabName === tabName; const fullTabKey = this.isChartsSection ? `charts/${tabName}` : tabName; const info = this.tabInfo.get(fullTabKey); - + return html`
-
+
${info?.title?.toUpperCase() ?? tabName}
`; - }; - - private tabInfoTemplate = (tabName: string, info: TabInfo | undefined) => { + } + private tabInfoTemplate(tabName: string, info: TabInfo | undefined) { return html`
${info?.title}
${info?.content}
- +
Theme: ${info?.theme}
Mode: ${info?.themeMode}
- +
- - + + Download - + + variant="outlined" + class="custom-button" + @click="${(e: MouseEvent) => this.onViewMoreClick(e, tabName)}" + > View More - +
- ${!this.isFullscreen ? html` -
- ${this.activeTabs.map( - (tab) => html` + ${!this.isFullscreen ? html` +
+ ${this.activeTabs.map(tab => html`
${this.tabItemTemplate(tab.key)}
- ` - )} -
- ` : ''} - + `)} +
+ ` : ''}
${this.tabInfoTemplate(this.routeName, this.tabInfo?.get(this.routeName))}
@@ -380,5 +353,6 @@ export default class HomeView extends LitElement {
`; } + static styles = unsafeCSS(styles); }