Skip to content

Added cross-browser fullscreen behaviour #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dkamburov merged 1 commit into from
Dec 5, 2025
Merged

Added cross-browser fullscreen behaviour #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 27 additions & 2 deletions src/views/home/home-view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -37,6 +38,7 @@
justify-content: space-between;
background-color: var(--ig-surface-500);
box-sizing: border-box;

& a {
text-decoration: none;
display: block;
Expand Down Expand Up @@ -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;
}
150 changes: 62 additions & 88 deletions src/views/home/home-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,27 +32,25 @@ 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' },
{ key: 'pie-chart' },
{ key: 'step-chart' },
{ key: 'polar-chart' }
];
@state()
private routeName: string = "inventory";
@state() private routeName: string = "inventory";

public tabInfoGrids = new Map<string, TabInfo>([
[
Expand Down Expand Up @@ -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");
Expand All @@ -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;
Expand All @@ -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`
<div class="tab-item ${classMap({ "tab-item--selected": isSelected })}">
<div class="tab-header ${classMap({ "tab-header--disabled": !isSelected })}">
<div class="tab-header">
${info?.title?.toUpperCase() ?? tabName}
</div>
</div>
`;
};

private tabInfoTemplate = (tabName: string, info: TabInfo | undefined) => {
}

private tabInfoTemplate(tabName: string, info: TabInfo | undefined) {
return html`
<div class="current-tab-info">
<div class="sample-info">
<div class="tab-header">${info?.title}</div>
<div class="tab-description">${info?.content}</div>
</div>

<div class="sample-actions">
<div class="theme-info">Theme: ${info?.theme}</div>
<div class="theme-info">Mode: ${info?.themeMode}</div>

<div class="action-buttons">
<igc-button
variant="outlined"
class="custom-button"
@click="${(e: MouseEvent) => this.onDownloadClick(e, tabName)}"
>
<igc-icon name="file_download" collection="indigo_internal"></igc-icon>
<igc-button
variant="outlined"
class="custom-button"
@click="${(e: MouseEvent) => this.onDownloadClick(e, tabName)}"
>
<igc-icon name="file_download" collection="indigo_internal"></igc-icon>
Download
</igc-button>

<igc-button
variant="outlined"
class="custom-button"
@click="${(e: MouseEvent) => this.onViewMoreClick(e, tabName)}"
>
variant="outlined"
class="custom-button"
@click="${(e: MouseEvent) => this.onViewMoreClick(e, tabName)}"
>
<igc-icon name="view_more" collection="indigo_internal"></igc-icon>
View More
</igc-button>

<igc-button
variant="outlined"
class="custom-button"
Expand All @@ -356,20 +332,17 @@ export default class HomeView extends LitElement {
return html`
<div class="demo-container" id="fullscreenElement">
<div class="tabs-info-wrapper-element">
${!this.isFullscreen ? html`
<div class="tab-container">
${this.activeTabs.map(
(tab) => html`
${!this.isFullscreen ? html`
<div class="tab-container">
${this.activeTabs.map(tab => html`
<div class="tab-item-container">
<a href="${import.meta.env.BASE_URL}home/${this.isChartsSection ? 'charts/' : ''}${tab.key}">
${this.tabItemTemplate(tab.key)}
</a>
</div>
`
)}
</div>
` : ''}

`)}
</div>
` : ''}
<div>
${this.tabInfoTemplate(this.routeName, this.tabInfo?.get(this.routeName))}
</div>
Expand All @@ -380,5 +353,6 @@ export default class HomeView extends LitElement {
</div>
`;
}

static styles = unsafeCSS(styles);
}