Skip to content

Commit bca8e88

Browse files
jweismanjweisman
committed
Add popup example to external API tutorial
1 parent 37b5968 commit bca8e88

File tree

4 files changed

+93
-69
lines changed

4 files changed

+93
-69
lines changed

‎cloudapp/src/app/external/external.component.html‎

Lines changed: 73 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,75 +2,82 @@
22
<div class="loading-shade" *ngIf="running">
33
<mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
44
</div>
5-
<div class="section">
6-
<form>
7-
<h2>HathiTrust Bibliographic API</h2>
8-
<p>This API is open and does not require authentication. Enter an identifier and select an identifier type to search the API.</p>
9-
<section class="settings-section">
10-
<mat-form-field>
11-
<mat-label>Identifier Type</mat-label>
12-
<mat-select value="isbn" #identifierType>
13-
<mat-option value="oclc">OCLC Number</mat-option>
14-
<mat-option value="lccn">LCCN</mat-option>
15-
<mat-option value="issn">ISSN</mat-option>
16-
<mat-option value="isbn">ISBN</mat-option>
17-
<mat-option value="htid">HathiTrust Volume ID</mat-option>
18-
<mat-option value="recordnumber">HathiTrust record number</mat-option>
19-
</mat-select>
20-
</mat-form-field>
21-
</section>
5+
<mat-tab-group color="primary" backgroundColor="accent">
6+
<mat-tab label="Open">
7+
<form>
8+
<h2>HathiTrust Bibliographic API</h2>
9+
<p>This API is open and does not require authentication. Enter an identifier and select an identifier type to search the API.</p>
10+
<section class="settings-section">
11+
<mat-form-field>
12+
<mat-label>Identifier Type</mat-label>
13+
<mat-select value="isbn" #identifierType>
14+
<mat-option value="oclc">OCLC Number</mat-option>
15+
<mat-option value="lccn">LCCN</mat-option>
16+
<mat-option value="issn">ISSN</mat-option>
17+
<mat-option value="isbn">ISBN</mat-option>
18+
<mat-option value="htid">HathiTrust Volume ID</mat-option>
19+
<mat-option value="recordnumber">HathiTrust record number</mat-option>
20+
</mat-select>
21+
</mat-form-field>
22+
</section>
23+
<section class="settings-section">
24+
<mat-form-field>
25+
<mat-label>Identifier</mat-label>
26+
<input matInput #identifier value="0394530934">
27+
</mat-form-field>
28+
</section>
29+
</form>
30+
<div class="cloudapp-actions">
31+
<button mat-flat-button type="button" color="primary" (click)="search(identifierType.value, identifier.value)">Search</button>
32+
</div>
33+
34+
<mat-card *ngIf="record">
35+
<mat-card-header>
36+
<mat-card-title>HathiTrust Record</mat-card-title>
37+
</mat-card-header>
38+
<mat-card-content>
39+
<img *ngIf="record.items.length>0" src="https://babel.hathitrust.org/cgi/imgsrv/cover?id={{record.items[0].htid}}" class="pull-right">
40+
<ul>
41+
<li><strong>Record ID: </strong> <a href="{{record.recordURL}}" target="_blank">{{ record.id }}</a></li>
42+
<li><strong>Title: </strong>{{ record.titles[0] }}</li>
43+
<li><strong>Held By:</strong>
44+
<ul>
45+
<li *ngFor="let item of record.items"><a href="{{item.itemURL}}" target="_blank">{{item.orig}}</a></li>
46+
</ul>
47+
</li>
48+
</ul>
49+
</mat-card-content>
50+
</mat-card>
51+
</mat-tab>
52+
<mat-tab label="Authenticated" *ngIf="authToken">
53+
<h2>HathiTrust Data API</h2>
54+
<p>This API is restricted and requires authentication.</p>
2255
<section class="settings-section">
2356
<mat-form-field>
2457
<mat-label>Identifier</mat-label>
25-
<input matInput #identifier value="0394530934">
58+
<input matInput #data_api_identifier value="mdp.39015000000128">
2659
</mat-form-field>
2760
</section>
28-
</form>
29-
<div class="cloudapp-actions">
30-
<button mat-flat-button type="button" color="primary" (click)="search(identifierType.value, identifier.value)">Search</button>
31-
</div>
32-
33-
<mat-card *ngIf="record">
34-
<mat-card-header>
35-
<mat-card-title>HathiTrust Record</mat-card-title>
36-
</mat-card-header>
37-
<mat-card-content>
38-
<img *ngIf="record.items.length>0" src="https://babel.hathitrust.org/cgi/imgsrv/cover?id={{record.items[0].htid}}" class="pull-right">
39-
<ul>
40-
<li><strong>Record ID: </strong> <a href="{{record.recordURL}}" target="_blank">{{ record.id }}</a></li>
41-
<li><strong>Title: </strong>{{ record.titles[0] }}</li>
42-
<li><strong>Held By:</strong>
43-
<ul>
44-
<li *ngFor="let item of record.items"><a href="{{item.itemURL}}" target="_blank">{{item.orig}}</a></li>
45-
</ul>
46-
</li>
47-
</ul>
48-
</mat-card-content>
49-
</mat-card>
50-
</div>
51-
52-
<hr>
53-
54-
<div class="section" *ngIf="authToken">
55-
<h2>HathiTrust Data API</h2>
56-
<p>This API is restricted and requires authentication.</p>
57-
<section class="settings-section">
58-
<mat-form-field>
59-
<mat-label>Identifier</mat-label>
60-
<input matInput #data_api_identifier value="mdp.39015000000128">
61-
</mat-form-field>
62-
</section>
63-
<div class="cloudapp-actions">
64-
<button mat-flat-button type="button" color="primary" (click)="dataApi(data_api_identifier.value)">Retrieve Metadata</button>
65-
</div>
66-
<mat-card *ngIf="images.length>0">
67-
<mat-card-header>
68-
<mat-card-title>HathiTrust Page Scans</mat-card-title>
69-
</mat-card-header>
70-
<mat-card-content>
71-
<p>Retrieved <strong>{{images.length}}</strong> pages from the API for this title.</p>
72-
<button mat-flat-button type="button" color="primary" (click)="openModal()">View images</button>
73-
</mat-card-content>
74-
</mat-card>
75-
</div>
61+
<div class="cloudapp-actions">
62+
<button mat-flat-button type="button" color="primary" (click)="dataApi(data_api_identifier.value)">Retrieve Metadata</button>
63+
</div>
64+
<mat-card *ngIf="images.length>0">
65+
<mat-card-header>
66+
<mat-card-title>HathiTrust Page Scans</mat-card-title>
67+
</mat-card-header>
68+
<mat-card-content>
69+
<p>Retrieved <strong>{{images.length}}</strong> pages from the API for this title.</p>
70+
<button mat-flat-button type="button" color="primary" (click)="openModal()">View images</button>
71+
</mat-card-content>
72+
</mat-card>
73+
</mat-tab>
74+
<mat-tab label="PostMessage">
75+
<div class="cloudapp-actions">
76+
<button mat-flat-button type="button" color="primary" (click)="openPopup()">Open Pop-up</button>
77+
</div>
78+
<p *ngIf="popupResponse">
79+
Thanks for responding! You have <span *ngIf="!popupResponse.val">NOT </span> agreed.
80+
</p>
81+
</mat-tab>
82+
</mat-tab-group>
7683
<app-lightbox></app-lightbox>

‎cloudapp/src/app/external/external.component.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { Component, OnInit, ViewChild } from '@angular/core';
1+
import { Component, HostListener, OnInit, ViewChild } from '@angular/core';
22
import { AppService } from '../app.service';
33
import { HttpClient } from '@angular/common/http';
44
import { map, finalize } from 'rxjs/operators';
55
import { environment } from '../../environments/environment';
66
import { LightboxComponent } from './lightbox/lightbox.component';
77
import { CloudAppEventsService, AlertService } from '@exlibris/exl-cloudapp-angular-lib';
88

9+
const WINDOW_PROPS = "width=750,height=500,resizable,";
10+
911
@Component({
1012
selector: 'app-external',
1113
templateUrl: './external.component.html',
@@ -17,6 +19,7 @@ export class ExternalComponent implements OnInit {
1719
record: any;
1820
images: Array<string> = [];
1921
authToken: string;
22+
popupResponse: any;
2023

2124
constructor(
2225
private appService: AppService,
@@ -75,6 +78,18 @@ export class ExternalComponent implements OnInit {
7578
this.lightbox.images = this.images;
7679
this.lightbox.currentSlide(1);
7780
}
81+
82+
openPopup() {
83+
this.popupResponse = null;
84+
window.open(environment.popupUrl, "_blank", WINDOW_PROPS);
85+
}
86+
87+
@HostListener('window:message', ['$event'])
88+
onMessage(event: MessageEvent) {
89+
if (event.data && event.data.tutorialReponse) {
90+
this.popupResponse = event.data.tutorialReponse;
91+
}
92+
}
7893
}
7994

8095
const hathitrustMetaUrl = (id: string) => `${environment.hathitrustProxy}/volume/meta/${id}?v=2&format=json`;

‎cloudapp/src/environments/environment.prod.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export const environment = {
22
production: true,
33
hathitrustProxy: "https://api.exldevnetwork.net/hathitrust-proxy",
4-
hathitrustUrl: "https://catalog.hathitrust.org"
4+
hathitrustUrl: "https://catalog.hathitrust.org",
5+
popupUrl: "https://eu-st01.ext.exlibrisgroup.com/delivery/cloudapp-tutorials/popup.html",
56
}

‎cloudapp/src/environments/environment.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export const environment = {
22
production: false,
33
hathitrustProxy: "https://api.exldevnetwork.net/hathitrust-proxy",
4-
hathitrustUrl: "https://catalog.hathitrust.org"
4+
hathitrustUrl: "https://catalog.hathitrust.org",
5+
popupUrl: "https://eu-st01.ext.exlibrisgroup.com/delivery/cloudapp-tutorials/popup.html",
56
}

0 commit comments

Comments
 (0)