feat(tile-manager): add fullscreen prop

IgniteUI · Nov 20, 2024 · fda7628 · fda7628
1 parent 5f3ce02
commit fda7628
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 17 deletions.
diff --git a/src/components/tile-manager/tile-header.ts b/src/components/tile-manager/tile-header.ts
@@ -29,6 +29,12 @@ export default class IgcTileHeaderComponent extends LitElement {
   @consume({ context: tileContext, subscribe: true })
   private _tile?: IgcTileComponent;
 
+  private handleFullscreen() {
+    if (this._tile) {
+      this._tile.toggleFullscreen();
+    }
+  }
+
   private handleMaximize() {
     if (this._tile) {
       this._tile.toggleMaximize();
@@ -53,7 +59,8 @@ export default class IgcTileHeaderComponent extends LitElement {
             variant="flat"
             collection="default"
             exportparts="icon"
-            name="fullscreen"
+            name=${this._tile?.fullscreen ? 'fullscreen_exit' : 'fullscreen'}
+            @click=${this.handleFullscreen}
           ></igc-icon-button>
           <slot name="actions"></slot>
         </section>

diff --git a/src/components/tile-manager/tile.ts b/src/components/tile-manager/tile.ts
@@ -63,7 +63,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
   private _dragController: TileDragAndDropController;
   private _position = -1;
   private _disableDrag = false;
-
+  private _fullscreen = false;
   private _context = new ContextProvider(this, {
     context: tileContext,
     initialValue: this,
@@ -75,9 +75,6 @@ export default class IgcTileComponent extends EventEmitterMixin<
   @state()
   private _hasDragOver = false;
 
-  @state()
-  private _isFullscreen = false;
-
   /**
    * The unique identifier of the tile.
    * @attr
@@ -97,6 +94,19 @@ export default class IgcTileComponent extends EventEmitterMixin<
   @property({ type: Number })
   public rowStart: number | null = null;
 
+  @property({ type: Boolean, reflect: true })
+  public set fullscreen(value: boolean) {
+    if (this._fullscreen === value) return;
+
+    this._fullscreen = value;
+    this._context.setValue(this, true);
+    this.handleFullscreenRequest();
+  }
+
+  public get fullscreen() {
+    return this._fullscreen;
+  }
+
   /**
    * Indicates whether the tile occupies all available space within the layout.
    * @attr
@@ -143,7 +153,6 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
   @watch('maximized')
   protected maximizedChanged() {
-    //TODO: When the header UI is implemented, emit the event on header button/icon click.
     if (this._emitMaximizedEvent && !this.emitMaximizedEvent()) {
       this.maximized = !this.maximized;
       return;
@@ -194,14 +203,20 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
     // Will probably expose that as a dynamic binding based on a property
     // and as a response to some UI element interaction
-    this.addEventListener('dblclick', this.handleFullscreenRequest);
+    // REVIEW: fullscreen property and a tile header action button added
+    this.addEventListener('dblclick', this.handleDoubleClick);
   }
 
   public override connectedCallback() {
     super.connectedCallback();
     this.tileId = this.tileId || `tile-${IgcTileComponent.increment()}`;
   }
 
+  public toggleFullscreen() {
+    this.fullscreen = !this.fullscreen;
+    this.emitFullScreenEvent();
+  }
+
   public toggleMaximize() {
     this._emitMaximizedEvent = true;
     this.maximized = !this.maximized;
@@ -214,7 +229,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
   private emitFullScreenEvent() {
     return this.emitEvent('igcTileFullscreen', {
-      detail: { tile: this, state: this._isFullscreen },
+      detail: { tile: this, state: this.fullscreen },
       cancelable: true,
     });
   }
@@ -226,19 +241,21 @@ export default class IgcTileComponent extends EventEmitterMixin<
     });
   }
 
+  private handleDoubleClick() {
+    if (!this.emitFullScreenEvent()) {
+      return;
+    }
+
+    this.fullscreen = !this.fullscreen;
+  }
+
   private async handleFullscreenRequest() {
     try {
-      if (!this.emitFullScreenEvent()) {
-        return;
-      }
-
-      if (!this._isFullscreen) {
+      if (this.fullscreen) {
         await this.requestFullscreen();
       } else {
         await document.exitFullscreen();
       }
-
-      this._isFullscreen = !this._isFullscreen;
     } catch {
       document.exitFullscreen();
     }
@@ -331,7 +348,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
     const parts = partNameMap({
       base: true,
       'drag-over': this._hasDragOver,
-      fullscreen: this._isFullscreen,
+      fullscreen: this.fullscreen,
       draggable: !this.disableDrag,
       dragging: this._isDragging,
     });
@@ -348,7 +365,7 @@ export default class IgcTileComponent extends EventEmitterMixin<
 
   protected override render() {
     const renderResize =
-      this.disableResize || this.maximized || this._isFullscreen;
+      this.disableResize || this.maximized || this.fullscreen;
 
     return renderResize
       ? this.renderContent()