@hmcts/media-viewer 4.2.0 → 4.2.4-exui-3994-f

package/src/app/app.component.scss

@@ -0,0 +1,87 @@
+// global toolbar for <a> and <p> tags
+$govuk-global-styles: true;
+// Width of main container
+$hmcts-page-width: 1220px;
+
+// Consumer component will have to import following dependencies // START
+// Import GOV.UK Frontend
+@import "govuk-frontend/govuk/all";
+// Import Media Viewer Styles
+@import "../../projects/media-viewer/src/assets/all";
+// END
+
+html {
+  background-color: govuk-colour("light-grey");
+}
+
+body {
+  overflow: hidden;
+}
+
+.js-enabled .js-hidden {
+  display: none !important;
+}
+
+.aui-measure {
+  max-width: 833px;
+}
+
+.media-viewer-wrapper-container {
+  max-height: 100vh;
+}
+
+.aui-case-action-alert {
+  background-color: govuk-colour("blue");
+  color: govuk-colour("white");
+  margin-bottom: govuk-spacing(6);
+  padding: govuk-spacing(4);
+}
+
+.aui-case-action-alert__heading {
+  color: inherit;
+}
+
+.aui-case-action-alert__content {
+  color: inherit;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.aui-case-action-alert__link:link,
+.aui-case-action-alert__link:visited {
+  color: govuk-colour("white");
+}
+
+// Case action alert
+
+.aui-case-action-alert {
+  background-color: govuk-colour("blue");
+  color: govuk-colour("white");
+  margin-bottom: govuk-spacing(6);
+  padding: govuk-spacing(4);
+}
+
+.aui-case-action-alert__heading {
+  @include govuk-font($size: 24, $weight: bold);
+  color: inherit;
+  margin-bottom: govuk-spacing(2);
+  margin-top: 0;
+}
+
+.aui-case-action-alert__content {
+  color: inherit;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.aui-case-action-alert__link:link {
+  color: govuk-colour("white");
+}
+
+.aui-case-action-alert__link:focus {
+  color: govuk-colour("black");
+}

package/src/app/app.component.spec.ts

@@ -0,0 +1,31 @@
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { TransferState } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent,
+      ],
+      providers: [TransferState]
+    }).compileComponents();
+  }));
+
+  it('should create the app', waitForAsync(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'Media Viewer Demo App'`, waitForAsync(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('Media Viewer Demo App');
+  }));
+});

package/src/app/app.component.ts

@@ -0,0 +1,14 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+
+export class AppComponent {
+    title = 'Media Viewer Demo App';
+
+    constructor() {}
+}

package/src/app/app.module.ts

@@ -0,0 +1,46 @@
+import { RpxTranslationModule, RpxTranslationService, RpxTranslationConfig } from 'rpx-xui-translation';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent } from './app.component';
+import { RouterModule } from '@angular/router';
+import { RoutingModule } from './routing.module';
+import { MetaReducer, StoreModule } from '@ngrx/store';
+import { EffectsModule } from '@ngrx/effects';
+import { environment } from '../environments/environment';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { storeFreeze } from 'ngrx-store-freeze';
+// enforces immutability
+export const metaReducers: MetaReducer<any>[] = !environment.production
+  ? [storeFreeze]
+  : [];
+@NgModule({
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    RouterModule,
+    RoutingModule,
+    StoreModule.forRoot({}, { metaReducers }),
+    EffectsModule.forRoot([]),
+    !environment.production ?
+      StoreDevtoolsModule.instrument({})
+      : [],
+    RpxTranslationModule.forRoot({
+      baseUrl: '/api/translation',
+      debounceTimeMs: 300,
+      validity: {
+        days: 1
+      },
+      testMode: false
+    })
+  ],
+  providers: [
+
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

package/src/app/media-viewer-wrapper/custom-toolbar/custom-toolbar.component.html

@@ -0,0 +1,79 @@
+<div class="customToolbar">
+  <div class="toolbarContainer">
+    <div *ngIf="contentType === 'pdf'" class="column left-pane">
+      <button class="govuk-button" id="custom-toolbar-viewFind" data-module="govuk-button" (click)="search = !search">
+        search
+      </button>
+      <button class="govuk-button" id="custom-toolbar-toggleHighlightButton" data-module="govuk-button" (click)="highlight()">
+        Highlight
+      </button>
+      <button class="govuk-button" id="custom-toolbar-previous" data-module="govuk-button" (click)="prevPage()">
+        Prev Page
+      </button>
+      <button class="govuk-button" id="custom-toolbar-next" data-module="govuk-button" (click)="nextPage()">
+        Next Page
+      </button>
+      <div class="govuk-form-group page-input-form">
+        <input #pageInput
+               class="govuk-input page-input"
+               id="pageNumber"
+               name="event-name"
+               [value]="currentPageNumber"
+               type="number"
+               (change)="enterPage(+pageInput.value)">
+      </div>
+      <app-search-bar *ngIf="search"
+                      [toolbarEvents]="toolbarEvents"></app-search-bar>
+    </div>
+    <div *ngIf="contentType === 'pdf' || contentType === 'image'" class="left-pane">
+      <button class="govuk-button" id="custom-toolbar-toggleDrawButton" data-module="govuk-button" (click)="draw()">
+        Draw
+      </button>
+    </div>
+    <div *ngIf="contentType === 'pdf' || contentType === 'image'" class="column middle-pane">
+      <button class="govuk-button" id="custom-toolbar-pageRotateCcw" data-module="govuk-button" (click)="rotate(270)">
+        rot -90
+      </button>
+      <button class="govuk-button" id="custom-toolbar-pageRotateCw" data-module="govuk-button" (click)="rotate(90)">
+        rot 90
+      </button>
+      <button class="govuk-button" id="custom-toolbar-zoomOut" data-module="govuk-button" (click)="stepZoom(-0.1)">
+        -
+      </button>
+      <select class="govuk-select" id="custom-toolbar-scaleSelect" data-module="govuk-select" (change)="zoom($event.target.value)">
+        <option #zoomSelect id="customScaleOption" title="" [value]="zoomValue">{{(zoomValue) * 100 | number: '1.0-0'}}%</option>
+        <option title="" value="0.1" data-l10n-id="page_scale_percent"
+                data-l10n-args='{ "scale": 10 }'>10%</option>
+        <option title="" value="0.25" data-l10n-id="page_scale_percent"
+                data-l10n-args='{ "scale": 25 }'>25%</option>
+        <option title="" value="0.5" data-l10n-id="page_scale_percent"
+                data-l10n-args='{ "scale": 50 }'>50%</option>
+        <option title="" value="0.75" data-l10n-id="page_scale_percent"
+                data-l10n-args='{ "scale": 75 }'>75%</option>
+        <option title="" value="1" data-l10n-id="page_scale_percent"
+                data-l10n-args='{ "scale": 100 }'>100%</option>
+        <option title="" value="1.25" data-l10n-id="page_scale_percent"
+                data-l10n-args='{ "scale": 125 }'>125%</option>
+        <option title="" value="1.5" data-l10n-id="page_scale_percent"
+                data-l10n-args='{ "scale": 150 }'>150%</option>
+        <option title="" value="2.5" data-l10n-id="page_scale_percent"
+                data-l10n-args='{ "scale": 250 }'>250%</option>
+        <option title="" value="3" data-l10n-id="page_scale_percent"
+                data-l10n-args='{ "scale": 300 }'>300%</option>
+        <option title="" value="5" data-l10n-id="page_scale_percent"
+                data-l10n-args='{ "scale": 500 }'>500%</option>
+      </select>
+      <button class="govuk-button" id="zoomIn" data-module="govuk-button" (click)="stepZoom(0.1)">
+        +
+      </button>
+    </div>
+    <div class="column right-pane">
+      <button *ngIf="contentType === 'pdf' || contentType === 'image'" class="govuk-button" id="download" data-module="govuk-button" (click)="print()">
+        Print
+      </button>
+      <button class="govuk-button" id="print" data-module="govuk-button" (click)="download()">
+        Download
+      </button>
+    </div>
+  </div>
+</div>

package/src/app/media-viewer-wrapper/custom-toolbar/custom-toolbar.component.ts

@@ -0,0 +1,66 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+
+@Component({
+    selector: 'app-custom-toolbar',
+    templateUrl: './custom-toolbar.component.html',
+    standalone: false
+})
+export class CustomToolbarComponent implements OnInit {
+
+  @Input() toolbarEvents;
+  @Input() contentType;
+  zoomValue: number;
+  search: boolean;
+  currentPageNumber = 1;
+
+  @ViewChild('zoomSelect', {static: false}) zoomSelect: ElementRef;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.search = false;
+    this.toolbarEvents.getZoomValue().subscribe(zoom => this.zoomValue = zoom);
+    this.toolbarEvents.getCurrentPageNumber().subscribe(page => this.currentPageNumber = page);
+  }
+
+  nextPage(): void {
+    this.toolbarEvents.incrementPage(1);
+  }
+
+  prevPage(): void {
+    this.toolbarEvents.incrementPage(-1);
+  }
+
+  rotate(value: number) {
+    this.toolbarEvents.rotate(value);
+  }
+
+  stepZoom(value: number) {
+    this.toolbarEvents.stepZoom(value);
+    this.zoomSelect.nativeElement.selected = 'selected';
+  }
+
+  zoom(value: number) {
+    this.toolbarEvents.zoom(value);
+  }
+
+  print() {
+    this.toolbarEvents.print();
+  }
+
+  download() {
+    this.toolbarEvents.download();
+  }
+
+  enterPage(value: number) {
+    this.toolbarEvents.setPage(value);
+  }
+
+  highlight() {
+    this.toolbarEvents.toggleHighlightMode();
+  }
+
+  draw() {
+    this.toolbarEvents.toggleDrawMode();
+  }
+}

package/src/app/media-viewer-wrapper/custom-toolbar/custom-toolbar.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CustomToolbarComponent } from './custom-toolbar.component';
+import { SearchBarComponent } from './search-bar/search-bar.component';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [
+    CustomToolbarComponent,
+    SearchBarComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  exports: [
+    CustomToolbarComponent
+  ]
+})
+export class CustomToolbarModule { }

package/src/app/media-viewer-wrapper/custom-toolbar/search-bar/search-bar.component.css

@@ -0,0 +1,12 @@
+.container {
+  margin: 5px;
+  display: flex;
+}
+
+.govuk-checkboxes {
+  margin: 0;
+}
+
+.govuk-button, .govuk-form-group, .govuk-checkboxes__item {
+  margin: 0;
+}

package/src/app/media-viewer-wrapper/custom-toolbar/search-bar/search-bar.component.html

@@ -0,0 +1,50 @@
+<div class="container">
+  <div class="govuk-form-group" id="findbarInputContainer">
+    <input #searchInput
+           class="govuk-input page-input"
+           id="event-name"
+           name="event-name"
+           type="text"
+           [ngModel]="searchText"
+           (ngModelChange)="searchText = $event; search()">
+  </div>
+  <button class="govuk-button" id="findPrevious" (click)="searchPrev()"><-</button>
+  <button class="govuk-button" id="findNext" (click)="searchNext()">-></button>
+  <div class="container govuk-checkboxes">
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input"
+             id="findHighlightAll"
+             name="search"
+             type="checkbox"
+             (change)="highlightAll = !highlightAll; search()"
+             [checked]="highlightAll">
+      <label class="govuk-label govuk-checkboxes__label" for="findHighlightAll">
+        Hightlight All
+      </label>
+    </div>
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input"
+             id="findMatchCase"
+             name="search"
+             type="checkbox"
+             (change)="matchCase = !matchCase; search()"
+             [checked]="matchCase">
+      <label class="govuk-label govuk-checkboxes__label" for="findMatchCase">
+        Match Case
+      </label>
+    </div>
+    <div class="govuk-checkboxes__item">
+      <input class="govuk-checkboxes__input"
+             id="findEntireWord"
+             name="search"
+             type="checkbox"
+             (change)="wholeWord = !wholeWord; search()"
+             [checked]="wholeWord">
+      <label class="govuk-label govuk-checkboxes__label" for="findEntireWord">
+        Whole Words
+      </label>
+    </div>
+    <div>
+      <span *ngIf="resultsText" id="findResultsCount" class="toolbarLabel">{{resultsText}}</span>
+    </div>
+</div>

package/src/app/media-viewer-wrapper/custom-toolbar/search-bar/search-bar.component.ts

@@ -0,0 +1,84 @@
+import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { SearchResultsCount } from '../../../../../projects/media-viewer/src/lib/toolbar/toolbar-event.service';
+import { Subscription } from 'rxjs';
+
+@Component({
+    selector: 'app-search-bar',
+    templateUrl: './search-bar.component.html',
+    styleUrls: ['./search-bar.component.css'],
+    standalone: false
+})
+export class SearchBarComponent implements OnInit, OnDestroy {
+
+  @ViewChild('searchInput', {static: false}) searchElement: ElementRef;
+  @Input() toolbarEvents;
+
+  highlightAll = true;
+  matchCase = false;
+  wholeWord = false;
+  resultsText = '';
+  searchText = '';
+
+  private subscriptions: Subscription[] = [];
+
+  constructor() { }
+
+  public ngOnInit(): void {
+    this.subscriptions.push(
+      this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results))
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.toolbarEvents.search({
+      searchTerm: '',
+      highlightAll: this.highlightAll,
+      matchCase: this.matchCase,
+      wholeWord: this.wholeWord,
+      previous: false,
+      reset: true
+    });
+    for (const subscription of this.subscriptions) {
+      subscription.unsubscribe();
+    }
+  }
+
+  public searchNext(): void {
+    this.toolbarEvents.search({
+      searchTerm: this.searchText,
+      highlightAll: this.highlightAll,
+      matchCase: this.matchCase,
+      wholeWord: this.wholeWord,
+      previous: false,
+      reset: false
+    });
+  }
+
+  public searchPrev(): void {
+    this.toolbarEvents.search({
+      searchTerm: this.searchText,
+      highlightAll: this.highlightAll,
+      matchCase: this.matchCase,
+      wholeWord: this.wholeWord,
+      previous: true,
+      reset: false
+    });
+  }
+
+  public search(): void {
+    this.toolbarEvents.search({
+      searchTerm: this.searchText,
+      highlightAll: this.highlightAll,
+      matchCase: this.matchCase,
+      wholeWord: this.wholeWord,
+      previous: false,
+      reset: true
+    });
+  }
+
+  private setSearchResultsCount(results: SearchResultsCount): void {
+    this.resultsText = results.total > 0
+      ? `${results.current} of ${results.total} matches`
+      : 'Phrase not found';
+  }
+}