refactor: Fullscreen logic into a controller

Removed global fullscreen controller for tile manager.
Tiles now have their own controller to handle fullscreen logic.
Tile headers invoke the fullscreen logic through the
context object.
Removed double click trigger for fullscreen and
adjusted tests where applicable.

Author: rkaraivanov

src/components/common/context.ts

@@ -1,16 +1,29 @@
 import { createContext } from '@lit/context';
 import type IgcCarouselComponent from '../carousel/carousel.js';
-import type { TileManagerContext } from '../tile-manager/tile-manager.js';
+import type IgcTileManagerComponent from '../tile-manager/tile-manager.js';
 import type IgcTileComponent from '../tile-manager/tile.js';
 
-export const carouselContext = createContext<IgcCarouselComponent>(
+export type TileManagerContext = {
+  instance: IgcTileManagerComponent;
+  draggedItem: IgcTileComponent | null;
+};
+
+export type TileContext = {
+  instance: IgcTileComponent;
+  setFullscreenState: (
+    fullscreen: boolean,
+    isUserTriggered?: boolean
+  ) => unknown;
+};
+
+const carouselContext = createContext<IgcCarouselComponent>(
   Symbol('carousel-context')
 );
 
-export const tileContext = createContext<IgcTileComponent>(
-  Symbol('tile-context')
-);
+const tileContext = createContext<TileContext>(Symbol('tile-context'));
 
-export const tileManagerContext = createContext<TileManagerContext>(
+const tileManagerContext = createContext<TileManagerContext>(
   Symbol('tile-manager-context')
 );
+
+export { carouselContext, tileContext, tileManagerContext };

src/components/tile-manager/controllers/fullscreen.ts

@@ -1,39 +1,61 @@
-import type { ReactiveController } from 'lit';
-import { isElement } from '../../common/util.js';
-import type IgcTileManagerComponent from '../tile-manager.js';
-import IgcTileComponent from '../tile.js';
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
-class TileManagerFullscreenController implements ReactiveController {
-  private _host: IgcTileManagerComponent;
+type FullscreenControllerCallback = (state: boolean) => boolean;
 
-  constructor(host: IgcTileManagerComponent) {
+class FullscreenController implements ReactiveController {
+  private _host: ReactiveControllerHost & HTMLElement;
+  private _callback?: FullscreenControllerCallback;
+
+  private _fullscreen = false;
+
+  public get fullscreen(): boolean {
+    return this._fullscreen;
+  }
+
+  constructor(
+    host: ReactiveControllerHost & HTMLElement,
+    callback?: FullscreenControllerCallback
+  ) {
     this._host = host;
-    this._host.addController(this);
+    this._callback = callback;
+    host.addController(this);
   }
 
-  private _isOwnTile(node: unknown): node is IgcTileComponent {
-    return (
-      isElement(node) &&
-      node.matches(IgcTileComponent.tagName) &&
-      this._host.contains(node)
-    );
+  public setState(fullscreen: boolean, isUserTriggered = false): void {
+    if (isUserTriggered && this._callback) {
+      if (!this._callback.call(this._host, fullscreen)) {
+        return;
+      }
+    }
+
+    this._fullscreen = fullscreen;
+
+    if (this._fullscreen) {
+      this._host.requestFullscreen();
+    } else if (document.fullscreenElement) {
+      document.exitFullscreen();
+    }
   }
 
-  public handleEvent({ target }: Event): void {
-    if (this._isOwnTile(target)) {
-      target.draggable = !target.draggable;
+  public handleEvent() {
+    const isFullscreen = document.fullscreenElement === this._host;
+    if (!isFullscreen && this._fullscreen) {
+      this.setState(false, true);
     }
   }
 
   public hostConnected(): void {
-    document.addEventListener('fullscreenchange', this);
+    this._host.addEventListener('fullscreenchange', this);
   }
 
   public hostDisconnected(): void {
-    document.addEventListener('fullscreenchange', this);
+    this._host.removeEventListener('fullscreenchange', this);
   }
 }
 
-export function addFullscreenController(host: IgcTileManagerComponent) {
-  return new TileManagerFullscreenController(host);
+export function addFullscreenController(
+  host: ReactiveControllerHost & HTMLElement,
+  callback?: FullscreenControllerCallback
+) {
+  return new FullscreenController(host, callback);
 }

src/components/tile-manager/tile-header.ts

@@ -2,13 +2,12 @@ import { consume } from '@lit/context';
 import { LitElement, html } from 'lit';
 import { themes } from '../../theming/theming-decorator.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
-import { tileContext } from '../common/context.js';
+import { type TileContext, tileContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcDividerComponent from '../divider/divider.js';
 import { all } from './themes/header.js';
 import { styles as shared } from './themes/shared/header/tile-header.common.css.js';
 import { styles } from './themes/tile-header.base.css.js';
-import type IgcTileComponent from './tile.js';
 
 /** A container for tile's header
  * @element igc-tile-header
@@ -35,7 +34,11 @@ export default class IgcTileHeaderComponent extends LitElement {
   }
 
   @consume({ context: tileContext, subscribe: true })
-  private _tile?: IgcTileComponent;
+  private _tileContext?: TileContext;
+
+  private get _tile() {
+    return this._tileContext?.instance;
+  }
 
   private get _isMaximized() {
     return this._tile ? this._tile.maximized : false;
@@ -52,8 +55,10 @@ export default class IgcTileHeaderComponent extends LitElement {
   }
 
   private handleFullscreen() {
-    if (this._tile) {
-      this._tile.toggleFullscreen();
+    if (this._tileContext) {
+      this._tileContext.setFullscreenState(!this._isFullscreen, true);
+      // REVIEW: Leave the `requestUpdate` call or trigger through `setValue` from the tile context?
+      this.requestUpdate();
     }
   }
 
@@ -64,6 +69,8 @@ export default class IgcTileHeaderComponent extends LitElement {
 
     if (this._tile) {
       this._tile.maximized = !this._tile.maximized;
+      // REVIEW: Leave the `requestUpdate` call or trigger through `setValue` from the tile context?
+      this.requestUpdate();
     }
   }
 

src/components/tile-manager/tile-manager.spec.ts

@@ -338,7 +338,7 @@ describe('Tile Manager component', () => {
       restore();
     });
 
-    it('should correctly change fullscreen state on double click', async () => {
+    it.skip('should correctly change fullscreen state on double click', async () => {
       simulateDoubleClick(tile);
       await elementUpdated(tileManager);
 
@@ -378,13 +378,15 @@ describe('Tile Manager component', () => {
     });
 
     it('can cancel `igcTileFullscreen` event', async () => {
+      const tile = first(tileManager.tiles);
       const eventSpy = spy(tile, 'emitEvent');
+      const fullscreenButton = getActionButtons(tile)[1];
 
       tile.addEventListener('igcTileFullscreen', (ev: CustomEvent) => {
         ev.preventDefault();
       });
 
-      simulateDoubleClick(tile);
+      simulateClick(fullscreenButton!);
       await elementUpdated(tileManager);
 
       expect(eventSpy).to.have.been.calledWith(
@@ -422,14 +424,6 @@ describe('Tile Manager component', () => {
       await elementUpdated(tileManager);
       expect(btnFullscreen.name).equals('fullscreen_exit');
 
-      simulateDoubleClick(tile);
-      await elementUpdated(tileManager);
-      expect(btnFullscreen.name).equals('fullscreen');
-
-      simulateDoubleClick(tile);
-      await elementUpdated(tileManager);
-      expect(btnFullscreen.name).equals('fullscreen_exit');
-
       simulateClick(btnFullscreen);
       await elementUpdated(tileManager);
       expect(btnFullscreen.name).equals('fullscreen');

src/components/tile-manager/tile-manager.ts

@@ -12,7 +12,6 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { asNumber, findElementFromEventPath } from '../common/util.js';
-import { addFullscreenController } from './controllers/fullscreen.js';
 import { createTilesState, isSameTile, swapTiles } from './position.js';
 import { createSerializer } from './serializer.js';
 import { all } from './themes/container.js';
@@ -25,11 +24,6 @@ export interface IgcTileManagerComponentEventMap {
   igcTileDragStarted: CustomEvent<IgcTileComponent>;
 }
 
-export type TileManagerContext = {
-  instance: IgcTileManagerComponent;
-  draggedItem: IgcTileComponent | null;
-};
-
 /**
  * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.
  *
@@ -169,7 +163,6 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
 
   constructor() {
     super();
-    addFullscreenController(this);
 
     createMutationController(this, {
       callback: this._observerCallback,