view scan

frontend/src/app/document-view/document-view.component.html

@@ -25,7 +25,7 @@
 
     <div class="column is-7">
         <div class="box">
-            <ia-tabs>
+            <ia-tabs [activeTab]="activeTab">
                 <ng-template iaTabPanel *ngFor="let field of contentFields" [id]="field.name" [title]="field.displayName" [icon]="tabIcons.text">
                     <div class="content" [innerHtml]="highlightedInnerHtml(field)"></div>
                 </ng-template>

frontend/src/app/document-view/document-view.component.ts

@@ -1,14 +1,15 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 
 import { CorpusField, FoundDocument, Corpus, QueryModel } from '../models/index';
 import { faBook, faImage } from '@fortawesome/free-solid-svg-icons';
+import { DocumentView } from '../models/document-page';
 
 @Component({
     selector: 'ia-document-view',
     templateUrl: './document-view.component.html',
     styleUrls: ['./document-view.component.scss']
 })
-export class DocumentViewComponent {
+export class DocumentViewComponent implements OnChanges {
 
     @Input()
     public document: FoundDocument;
@@ -20,14 +21,16 @@ export class DocumentViewComponent {
     public corpus: Corpus;
 
     @Input()
-    public documentTabIndex: number;
+    public view: DocumentView;
 
 
     tabIcons = {
         text: faBook,
         scan: faImage,
     };
 
+    activeTab: 'scan' | undefined;
+
     public imgNotFound: boolean;
     public imgPath: string;
     public media: string[];
@@ -48,6 +51,14 @@ export class DocumentViewComponent {
         return !!this.corpus.scan_image_type;
     }
 
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes.view) {
+            if (this.view === 'scan' && this.showScanTab) {
+                this.activeTab = 'scan';
+            }
+        }
+    }
+
     isUrlField(field: CorpusField) {
         return field.name === 'url' || field.name.startsWith('url_');
     }

frontend/src/app/document/document-popup/document-popup.component.html

@@ -1,16 +1,16 @@
-<ng-container *ngIf="page?.focus$ | async as document">
+<ng-container *ngIf="document">
     <p-dialog [(visible)]="visible" width="100%"
         [responsive]="true" [maximizable]="true" [dismissableMask]="true" [draggable]="true" [resizable]="false" [blockScroll]="true"
         header="Document {{document.position}} of {{page.total}}">
 
-        <ia-document-view [document]="document" [queryModel]="queryModel" [corpus]="document.corpus" [documentTabIndex]="0"></ia-document-view>
+        <ia-document-view [document]="document" [queryModel]="queryModel" [corpus]="document.corpus" [view]="view"></ia-document-view>
 
         <ng-template pTemplate="footer">
             <div class="columns" style="text-align:left">
                 <div class="column">
                     <a *ngIf="document.position > 1"
                         iaBalloon="view previous document" iaBalloonPosition="right"
-                        (click)="page.focusPrevious()" (keydown.enter)="page.focusPrevious()"
+                        (click)="page.focusPrevious(document)" (keydown.enter)="page.focusPrevious(document)"
                         role="button" tabindex="0">
                         <span class="icon"><fa-icon [icon]="faArrowLeft">previous</fa-icon></span>
                     </a>
@@ -38,7 +38,7 @@
                 <div class="column" style="text-align:right">
                     <a *ngIf="document.position < page.documents.length - 1"
                         iaBalloon="view next document" iaBalloonPosition="left"
-                        (click)="page.focusNext()" (keydown.enter)="page.focusNext()"
+                        (click)="page.focusNext(document)" (keydown.enter)="page.focusNext(document)"
                         role="button" tabindex="0">
                         <span class="icon"><fa-icon [icon]="faArrowRight">next</fa-icon></span>
                     </a>

frontend/src/app/document/document-popup/document-popup.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { DocumentPage } from '../../models/document-page';
+import { DocumentPage, DocumentView } from '../../models/document-page';
 import { filter } from 'rxjs/operators';
 import * as _ from 'lodash';
 import { faArrowLeft, faArrowRight, faBookOpen, faLink } from '@fortawesome/free-solid-svg-icons';
@@ -14,6 +14,9 @@ export class DocumentPopupComponent implements OnChanges {
     @Input() page: DocumentPage;
     @Input() queryModel: QueryModel;
 
+    document: FoundDocument;
+    view: DocumentView;
+
     visible = true;
 
     faArrowLeft = faArrowLeft;
@@ -22,28 +25,26 @@ export class DocumentPopupComponent implements OnChanges {
     contextIcon = faBookOpen;
 
     get documentPageLink(): string[] {
-        if (this.focusedDocument) {
-            return ['/document', this.focusedDocument.corpus.name, this.focusedDocument.id];
+        if (this.document) {
+            return ['/document', this.document.corpus.name, this.document.id];
         }
     }
 
     get contextDisplayName(): string {
-        if (this.focusedDocument.corpus.documentContext) {
-            return this.focusedDocument.corpus.documentContext.displayName;
+        if (this.document.corpus.documentContext) {
+            return this.document.corpus.documentContext.displayName;
         }
     }
 
-    private get focusedDocument(): FoundDocument {
-        return this.page?.focus$.value;
-    }
-
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.page) {
             this.page.focus$.pipe(
                 filter(focus => !!focus),
-            ).subscribe(() =>
-                this.visible = true
-            );
+            ).subscribe(focus => {
+                this.document = focus.document;
+                this.view = focus.view;
+                this.visible = true;
+            });
         }
     }
 }

frontend/src/app/models/document-page.ts

@@ -1,11 +1,17 @@
-import { BehaviorSubject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { FoundDocument } from './found-document';
 import { CorpusField } from './corpus';
 import * as _ from 'lodash';
 
+export type DocumentView = 'content' | 'scan';
+
+export interface DocumentFocus {
+    document: FoundDocument;
+    view: DocumentView;
+}
 
 export class DocumentPage {
-    focus$ = new BehaviorSubject<FoundDocument>(undefined);
+    focus$ = new Subject<DocumentFocus>();
 
     constructor(
         public documents: FoundDocument[],
@@ -15,27 +21,24 @@ export class DocumentPage {
         this.documents.forEach((d, i) => d.position = i + 1);
     }
 
-    focus(document: FoundDocument) {
-        this.focus$.next(document);
+    focus(document: FoundDocument, view: DocumentView = 'content') {
+        this.focus$.next({ document, view });
     }
 
-    focusNext() {
-        this.focusShift(1);
+    focusNext(document: FoundDocument) {
+        this.focusShift(document, 1);
     }
 
-    focusPrevious() {
-        this.focusShift(-1);
+    focusPrevious(document: FoundDocument) {
+        this.focusShift(document, -1);
     }
 
     blur() {
         this.focus$.next(undefined);
     }
 
-    private focusShift(shift: number) {
-        const document = this.focus$.value;
-        if (document) {
-            this.focusPosition(document.position + shift);
-        }
+    private focusShift(document: FoundDocument, shift: number) {
+        this.focusPosition(document.position + shift);
     }
 
     private focusPosition(position: number) {

frontend/src/app/search/search-results.component.html

@@ -76,7 +76,9 @@ <h2 class="subtitle" *ngIf="page.total > 5">
                             </div>
                             <search-relevance [value]="document.relevance"></search-relevance>
                         </ng-container>
-                        <button *ngIf="document.fieldValues.image_path" class="button scan-button is-primary is-inverted" iaBalloon="View Scan" (click)="goToScan(document, $event)">
+                        <button *ngIf="document.fieldValues.image_path" class="button scan-button is-primary is-inverted"
+                            iaBalloon="View Scan" aria-label="view scan"
+                            (click)="goToScan(page, document, $event)">
                             <span class="icon">
                                 <i class="fa fa-newspaper-o fa-3x" aria-hidden="true"></i>
                             </span>

frontend/src/app/search/search-results.component.ts

@@ -7,6 +7,7 @@ import { ShowError } from '../error/error.component';
 import { PageResultsParameters, PageResults } from '../models/page-results';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { DocumentPage } from '../models/document-page';
 
 const MAXIMUM_DISPLAYED = 10000;
 
@@ -69,6 +70,11 @@ export class SearchResultsComponent implements OnChanges {
         return Math.min(totalResults, MAXIMUM_DISPLAYED);
     }
 
+    goToScan(page: DocumentPage, document: FoundDocument, event: Event) {
+        page.focus(document, 'scan');
+        event.stopPropagation();
+    };
+
     @HostListener('window:scroll', [])
     onWindowScroll() {
         // mark that the search results were scrolled down beyond 68 pixels from top (position underneath sticky search bar)