Merge pull request #4 from dhlab-basel/wip/integrate-ui-2

Wip/integrate UI 2

src/app/app.module.ts

@@ -64,7 +64,10 @@ import { CommentComponent } from './resource/comment/comment.component';
 import { HttpClientModule } from '@angular/common/http';
 import { BiographyComponent } from './biography/biography.component';
 import { LeceLeooComponent } from './lece-leoo/lece-leoo.component';
+import { PageTranscriptionComponent } from './resource/page-transcription/page-transcription.component';
 import { ArkUrlDialogComponent } from './dialog/ark-url-dialog.component';
+import { ReisbuechleinUriPipe } from './pipes/reisbuechlein-uri.pipe';
+import { OnlyTranscriptionComponent } from './resource/page-transcription/only-transcription/only-transcription.component';
 
 @NgModule({
     declarations: [
@@ -103,7 +106,10 @@ import { ArkUrlDialogComponent } from './dialog/ark-url-dialog.component';
         PublishedLetterComponent,
         BiographyComponent,
         LeceLeooComponent,
-        ArkUrlDialogComponent
+        PageTranscriptionComponent,
+        ArkUrlDialogComponent,
+        ReisbuechleinUriPipe,
+        OnlyTranscriptionComponent
     ],
     imports: [
         AppRouting,

src/app/app.routing.ts

@@ -24,6 +24,7 @@ import { ManuscriptEntryComponent } from './resource/manuscript-entry/manuscript
 import { CommentComponent } from './resource/comment/comment.component';
 import { BiographyComponent } from './biography/biography.component';
 import { LeceLeooComponent } from './lece-leoo/lece-leoo.component';
+import { PageTranscriptionComponent } from './resource/page-transcription/page-transcription.component';
 
 
 const appRoutes: Routes = [
@@ -83,6 +84,10 @@ const appRoutes: Routes = [
         path: 'page/:id/:region',
         component: PageComponent
     },
+    {
+        path: 'pageTranscription/:id',
+        component: PageTranscriptionComponent
+    },
     {
         path: 'newtonLetter/:id',
         component: NewtonLetterComponent

src/app/biography/biography.component.scss

@@ -5,6 +5,7 @@
     float: right;
     height: 320px;
     width: auto;
+    padding-left: 1rem;
   }
 
   .further-links {

src/app/dsp-ui-lib/viewer/representation/still-image/still-image.component.scss

@@ -5,7 +5,7 @@ $nav-width: 36px;
 $osd-width: calc(100% - (2 * #{$nav-width}));
 $osd-max-width: calc(#{$max-width} - (2 * #{$nav-width}));
 
-$osd-height: 400px;
+$osd-height: 500px;
 $full-height: calc(#{$osd-height} + 64px + 24px);
 
 // colors

src/app/introduction/introduction.component.html

@@ -87,32 +87,16 @@
         <!-- Main content of the page -->
         <div class="main-content" *ngIf="!isLoading && props">
             <section class="cite-link">
-                <button mat-button class="share-res" matTooltip="Share resource by copying ARK url" matTooltipPosition="above"
-                        [matMenuTriggerFor]="share">
-                    <mat-icon>share</mat-icon>
-                    <span class="desktop-only">Citation Link</span>
+                <button mat-stroked-button class="share-res" (click)="openDialog(resource.versionArkUrl)">
+                    <mat-icon>share</mat-icon>Citation Link
                 </button>
-                <mat-menu #share="matMenu" class="res-share-menu">
-                    <!-- citation link - ARK URL -->
-                    <div class="ark-url-label mat-body">
-                        <label for="clipboard-arkurl">Citation Link (ARK URL)</label>
-                    </div>
-                    <div class="ark-url-input">
-                        <input id="clipboard-arkurl" class="clipboard-arkurl" cols="30" rows="10" readonly
-                               [(ngModel)]="resource.versionArkUrl" />
-                        <button mat-button class="btn-copy-arkurl" [cdkCopyToClipboard]="resource.versionArkUrl"
-                                matTooltip="Copy ARK url" matTooltipPosition="below" (click)="openARKURLSnackBar()">
-                            <mat-icon class="icon-arkurl">copy</mat-icon>
-                        </button>
-                    </div>
-                </mat-menu>
             </section>
+
             <section class="title center">
                 <h3 mat-card-subtitle>{{resource?.label}}</h3>
                 <h1 mat-card-title *ngFor="let title of props.title">{{title.strval}}</h1>
             </section>
 
-
             <section class="text introduction">
                 <read-text-value-as-html [valueObject]="$any(props.text[0])" [resource]="resource"
                     [bindEvents]="true"></read-text-value-as-html>

src/app/introduction/introduction.component.ts

@@ -11,7 +11,8 @@ import {
 import { AppInitService, DspApiConnectionToken } from '../dsp-ui-lib/core';
 import { Subscription } from 'rxjs';
 import { BeolService } from '../services/beol.service';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import { ArkUrlDialogComponent } from '../dialog/ark-url-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
 
 declare let require: any;
 
@@ -70,7 +71,7 @@ export class IntroductionComponent implements OnInit, OnDestroy {
         private _beol: BeolService,
         private _appInitService: AppInitService,
         public location: Location,
-        protected _snackBar: MatSnackBar
+        public dialog: MatDialog
     ) {
     }
 
@@ -166,18 +167,14 @@ export class IntroductionComponent implements OnInit, OnDestroy {
     toggleGrandChildren(index: number) {
         this.curChildIndex = (index === this.curChildIndex ? undefined : index);
     }
-    /**
-     * Display message to confirm the copy of the citation link (ARK URL)
-     * @param message
-     * @param action
-     */
-    openARKURLSnackBar() {
-        this.message = 'Copied to clipboard!';
-        this.action = 'Citation Link';
-        this._snackBar.open(this.message, this.action, {
-            duration: 3000,
-            horizontalPosition: 'center',
-            verticalPosition: 'top'
+
+    openDialog(arkURL: string) {
+        this.dialog.open(ArkUrlDialogComponent, {
+            hasBackdrop: true,
+            width: '600px',
+            data: {
+                arkURL: arkURL
+            }
         });
     }
 }

src/app/landing-page/landing-page.component.html

@@ -30,51 +30,51 @@ <h2>Bernoulli Euler Online</h2>
             <h3>Mathematicians from Basel</h3>
             <ul>
                 <li (click)="openBiography('Jacob I Bernoulli')">
-                    <h4>Jacob I Bernoulli</h4>
+                    <h4>Jacob I <br>Bernoulli</h4>
                     <img src="assets/images/jacob-I-bernoulli.jpg" alt="portrait of Jacob I Bernoulli">
                 </li>
                 <li (click)="openBiography('Johann I Bernoulli')">
-                    <h4>Johann I Bernoulli</h4>
+                    <h4>Johann I <br>Bernoulli</h4>
                     <img src="assets/images/johann-I-bernoulli.jpg" alt="portrait of Johann I Bernoulli">
                 </li>
                 <li (click)="openBiography('Nicolaus I Bernoulli')">
-                    <h4>Nicolaus I Bernoulli</h4>
+                    <h4>Nicolaus I <br>Bernoulli</h4>
                     <img src="assets/images/placeholder.jpg" alt="placeholder portrait for Nicolaus I Bernoulli">
                 </li>
                 <li (click)="openBiography('Nicolaus II Bernoulli')">
-                    <h4>Nicolaus II Bernoulli</h4>
+                    <h4>Nicolaus II <br>Bernoulli</h4>
                     <img src="assets/images/nicolaus-II-bernoulli.jpg" alt="portrait of Nicolaus II Bernoulli">
                 </li>
                 <li (click)="openBiography('Daniel I Bernoulli')">
-                    <h4>Daniel I Bernoulli</h4>
+                    <h4>Daniel I <br>Bernoulli</h4>
                     <img src="assets/images/daniel-bernoulli.jpg" alt="portrait of Daniel Bernoulli">
                 </li>
                 <li (click)="openBiography('Johann II Bernoulli')">
-                    <h4>Johann II Bernoulli</h4>
+                    <h4>Johann II <br>Bernoulli</h4>
                     <img src="assets/images/johann-II-bernoulli.jpg" alt="portrait of Johann II Bernoulli">
                 </li>
                 <li (click)="openBiography('Johann III Bernoulli')">
-                    <h4>Johann III Bernoulli</h4>
+                    <h4>Johann III <br>Bernoulli</h4>
                     <img src="assets/images/johann-III-bernoulli.jpg" alt="portrait of Johann III Bernoulli">
                 </li>
                 <li (click)="openBiography('Jacob II Bernoulli')">
-                    <h4>Jacob II Bernoulli</h4>
+                    <h4>Jacob II <br>Bernoulli</h4>
                     <img src="assets/images/jacob-II-bernoulli.jpg" alt="portrait of Jacob II Bernoulli">
                 </li>
                 <li (click)="openBiography('Jacob Hermann')">
-                    <h4>Jacob Hermann</h4>
+                    <h4>Jacob <br>Hermann</h4>
                     <img src="assets/images/jacob-hermann.jpg" alt="portrait of Jacob Hermann">
                 </li>
                 <li (click)="openBiography('Leonhard Euler')">
-                    <h4>Leonhard Euler</h4>
+                    <h4>Leonhard <br>Euler</h4>
                     <img src="assets/images/leonhard-euler.jpg" alt="portrait of Leonhard Euler">
                 </li>
                 <li (click)="openBiography('Johann Albrecht Euler')">
-                    <h4>Johann Albrecht Euler</h4>
+                    <h4>Johann Albrecht <br>Euler</h4>
                     <img src="assets/images/johann-albrecht-euler.jpg" alt="portrait of Johann Albrecht Euler">
                 </li>
                 <li (click)="openBiography('Nicolaus Fuss')">
-                    <h4>Nicolaus Fuss</h4>
+                    <h4>Nicolaus <br>Fuss</h4>
                     <img src="assets/images/nicolaus-fuss.jpg" alt="portrait of Nicolaus Fuss">
                 </li>
             </ul>

src/app/pipes/reisbuechlein-uri.pipe.ts

@@ -0,0 +1,22 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+type BindingGraphDB = {
+    datatype?: string,
+    type: string,
+    value: string
+}
+
+@Pipe({
+  name: 'reisbuechleinURI'
+})
+export class ReisbuechleinUriPipe implements PipeTransform {
+
+  transform(value: BindingGraphDB): string {
+      if (value === undefined) {
+          return "";
+      }
+
+      return (value.type === "uri") ? value.value.split("#")[1] : value.value;
+  }
+
+}

src/app/resource/beol-resource.ts

@@ -209,7 +209,7 @@ export abstract class BeolResource implements OnInit, OnDestroy {
 
     /**
      * Get StillImageRepresentations pointing to [[this.resource]].
-     * This method may have to called several times with an increasing offsetChange in order to get all available StillImageRepresentations.
+     * This method may have to be called several times with an increasing offsetChange in order to get all available StillImageRepresentations.
      *
      * @param offset the offset to be used (needed for paging). First request uses an offset of 0.
      * It takes the number of images returned as an argument.
@@ -341,8 +341,6 @@ export abstract class BeolResource implements OnInit, OnDestroy {
             .subscribe(
                 (result: ReadResource) => {
 
-                    // console.log(result)
-
                     const res = new BeolCompoundResource(result);
 
                     // prepare a possibly attached image file to be displayed