Add fullscreen-trigger-for directive

libs/ngx-nuts-and-bolts/src/lib/directives/fullscreen-trigger-for/fullscreen-trigger-for.directive.spec.ts

@@ -0,0 +1,39 @@
+import { FullscreenTriggerForDirective } from "./fullscreen-trigger-for.directive";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { DOCUMENT } from "@angular/common";
+import { Component } from "@angular/core";
+
+@Component({
+  selector: 'inf-component-with-fullscreen-button',
+  template: `
+		<button [infFullscreenTriggerFor]="fullscreenElement">Fullscreen</button>
+		<div #fullscreenElement>This elemennt to put to fullscreen</div>
+	`,
+})
+class FullscreenTriggerForHostComponent {}
+
+describe('FullscreenTriggerForDirective', () => {
+  let directive: FullscreenTriggerForDirective;
+  let document: Document;
+  let fixture: ComponentFixture<FullscreenTriggerForHostComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        FullscreenTriggerForHostComponent,
+        FullscreenTriggerForDirective
+      ]
+    }).compileComponents();
+    document = TestBed.inject(DOCUMENT);
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FullscreenTriggerForHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should create an instance', () => {
+    directive = new FullscreenTriggerForDirective(document);
+    expect(directive).toBeTruthy();
+  });
+});

libs/ngx-nuts-and-bolts/src/lib/directives/fullscreen-trigger-for/fullscreen-trigger-for.directive.ts

@@ -0,0 +1,46 @@
+import {
+  Directive,
+  HostListener,
+  Inject,
+  Input,
+  OnDestroy,
+} from "@angular/core";
+import { DOCUMENT } from "@angular/common";
+
+@Directive({
+  selector: '[infFullscreenTriggerFor]',
+  exportAs: 'infFullscreen'
+})
+export class FullscreenTriggerForDirective implements OnDestroy {
+
+  @Input() public infFullscreenTriggerFor!: HTMLElement;
+
+  public isFullscreen = false;
+
+  @HostListener('click', ['$event'])
+  public onClick(): void {
+    if (this.document.fullscreenElement && this.document.exitFullscreen) {
+      this.document.exitFullscreen();
+      return;
+    }
+
+    this.infFullscreenTriggerFor.requestFullscreen();
+  }
+
+  constructor(@Inject(DOCUMENT) private readonly document: Document) {}
+
+  @HostListener('document:fullscreenchange', ['$event'])
+  @HostListener('document:webkitfullscreenchange', ['$event'])
+  @HostListener('document:mozfullscreenchange', ['$event'])
+  @HostListener('document:MSFullscreenChange', ['$event'])
+  public onFullscreenChange(): void {
+    this.isFullscreen = Boolean(this.document.fullscreenElement);
+  }
+
+  public ngOnDestroy() {
+    if (this.document.fullscreenElement) {
+      this.document.exitFullscreen();
+    }
+  }
+
+}

libs/ngx-nuts-and-bolts/src/lib/directives/fullscreen-trigger-for/fullscreen-trigger-for.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FullscreenTriggerForDirective } from './fullscreen-trigger-for.directive';
+
+
+
+@NgModule({
+  declarations: [
+    FullscreenTriggerForDirective
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    FullscreenTriggerForDirective
+  ],
+})
+export class FullscreenTriggerForModule { }

libs/ngx-nuts-and-bolts/src/lib/directives/fullscreen-trigger-for/fullscreen-trigger-for.stories.ts

@@ -0,0 +1,129 @@
+import { Component } from '@angular/core';
+import { moduleMetadata, Story } from '@storybook/angular';
+import { FullscreenTriggerForModule } from './fullscreen-trigger-for.module';
+
+@Component({
+	template: `
+		<div class="container">
+			<div
+				#fullscreenElement
+        id="fullscreenElement"
+				class="fullscreen-element"
+			>
+        <button [infFullscreenTriggerFor]="fullscreenElement" #fullscreenState="infFullscreen" id="fsbtn">View in fullscreen</button>
+				<h2 *ngIf="!fullscreenState.isFullscreen">Element to show in fullscreen</h2>
+        <form>
+          <div>
+            <label for="firstName">First name</label>
+            <input id="firstName" type="text">
+          </div>
+
+          <div>
+            <label for="lastName">Last name</label>
+            <input id="lastName" type="text">
+          </div>
+
+          <div>
+            <label for="email">email</label>
+            <input id="email" type="email">
+          </div>
+
+          <div>
+            <label for="password">Password</label>
+            <input id="password" type="password">
+          </div>
+        </form>
+			</div>
+			<div
+				class="fullscreen-element"
+			>
+				<h2>Another element</h2>
+        <form>
+          <div>
+            <label for="firstName">First name</label>
+            <input id="firstName" type="text">
+          </div>
+
+          <div>
+            <label for="lastName">Last name</label>
+            <input id="lastName" type="text">
+          </div>
+
+          <div>
+            <label for="email">email</label>
+            <input id="email" type="email">
+          </div>
+
+          <div>
+            <label for="password">Password</label>
+            <input id="password" type="password">
+          </div>
+        </form>
+			</div>
+		</div>
+	`,
+	styles: [
+		`
+			:host {
+				width: 100%;
+				display: flex;
+				gap: 10px;
+				height: 100%;
+				overflow: auto;
+			}
+			.container {
+				display: flex;
+				flex-direction: column;
+				gap: 10px;
+				height: 100%;
+				width: 100%;
+			}
+			.fullscreen-element {
+				display: grid;
+				place-items: center;
+				color: #fff;
+				width: 100%;
+				height: clamp(200px, 25vh, 400px);
+				background: teal;
+			}
+
+      .fullscreen-element:-webkit-full-screen {
+        background: #25c2a0;
+        color: #000066;
+      }
+
+      .fullscreen-element:-webkit-full-screen #fsbtn {
+        display: none;
+      }
+
+      .fullscreen-element:-moz-full-screen {
+        background: #25c2a0;
+        color: #000066;
+      }
+		`,
+	],
+})
+class FullscreenTriggerForStoryComponent {
+  constructor() {
+    console.log('test');
+  }
+}
+
+export default {
+	title: 'FullscreenTriggerFor',
+	component: FullscreenTriggerForStoryComponent,
+	decorators: [
+		moduleMetadata({
+			declarations: [FullscreenTriggerForStoryComponent],
+			imports: [FullscreenTriggerForModule],
+		}),
+	],
+};
+
+const Template: Story<FullscreenTriggerForStoryComponent> = (args: FullscreenTriggerForStoryComponent) => ({
+	component: FullscreenTriggerForStoryComponent,
+	props: args,
+});
+
+export const Default = Template.bind({});
+Default.args = {};