-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
143 lines (139 loc) · 6.94 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<!--
@author Bryan Haberberger
https://github.com/thehabes
-->
<html>
<head>
<title>navPlace Viewer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<script src="./app.js" type="module"></script>
<link rel="stylesheet" href="./app.css" />
<link rel="icon" type="image/x-icon" href="./images/globeicon.png">
</head>
<body>
<header>
<div class="row">
<div class="two columns">
<!-- This could go off to iiif.io -->
<a href="https://iiif.io"><img src="./images/iiif-logo.jpg" alt="logo" class="u-full-width"></a>
</div>
<h1 class="ten columns">
<div class="regular-header-text">International Image Interoperability Framework</div>
<br class="savespace">
<div class="small-header-text">navPlace Viewer</div>
</h1>
</div>
</header>
<!-- <div class="container">
<p>
For more information see the <a class="text-bold" target="_blank" href="https://github.com/CenterForDigitalHumanities/navplace-viewer#readme">Viewer Readme</a>.
</p>
</div> -->
<div id="viewerBody" class="container is-hidden">
<p>
This viewer is for <a class="text-dots" target="_blank" href="https://iiif.io/api/presentation/3.0/#21-defined-types">IIIF Presentation API Defined Types</a>. There is also a viewer specifically for Web Annotation. <a class="text-dots" target="_blank" href="annotation-viewer.html">Click here to learn more</a>.
</p>
<p>
Check below the web map for more options around 'navPlace' property detection.
Clicking any shape on the map will show applicable information about the resource that shape represents.
</p>
<div id="leafletInstanceContainer">
<div id="loadingMessage" style="text-align: center;">Gathering Resource Data From Around The World...</div>
</div>
</div>
<div id="needs" class="container">
<p class="howTo">
It looks like you haven't provided a URI. If you are not using the IIIF Content State URL parameter, you can supply a URI here.
<input id="resourceURI" type="text"/>
</p>
</div>
<div class="container" style="margin-top: 1em;">
<div class="row">
<ul class="howTo col-2">
<h5>Color Legend</h5>
<li><span style="color:blue;">Collection</span>: Blue</li>
<li><span style="color:purple;">Manifest</span>: Purple</li>
<li><span style="color:yellow;">Range</span>: Yellow</li>
<li><span style="color:#008080;">Canvas</span>: Teal</li>
<li><span style="color:red;">Unknown</span>: Red</li>
</ul>
<div id="options" class="col-10">
<h6>You can control how the viewer looks for navPlace properties.</h6>
<p class="howTo">
Only resolve the navPlace properties on my top level object and its direct children.<br>
<b>Limit navPlace Detection</b>: <input id="digOption" type="checkbox"/>
</p>
<p class="howTo">
Don't resolve the referenced value string or object URIs. Only use the available embedded data.<br>
<b>Limit Resolved Resources</b>: <input id="resolveOption" type="checkbox"/>
</p>
<input id="loadInput" type="button" onclick="loadURI(event)" value="Load Resource" />
<input type="button" onclick="startOver(event)" value="Start Over" />
</div>
</div>
</div>
<footer class="nav nav-center text-primary is-fixed is-full-width, is-vertical-align">
<div>
<a target="_blank" href="https://www.slu.edu/research/faculty-resources/research-computing.php">
<img class="brand" src="./images/rcg-logo.jpg"/> <small>©2023 Research Computing Group </small>
</a>
</div>
<div>
<a target="_blank" href="https://rerum.io">
<img class="brand" src="./images/rerum-logo.png"/> <small>RERUM</small>
</a>
</div>
<div>
<a target="_blank" href="https://iiif.io">
<img class="brand" src="https://iiif.io/assets/images/logos/logo-sm.png"><small>International Image Interoperability Framework</small>
</a>
</div>
<div>
<a target="_blank" href="https://github.com/CenterForDigitalHumanities/navplace-viewer/blob/main/README.md">
<img width="30" height="30" alt="Git logo" src="./images/github.svg"><small> Support/Contribute to Navplace Viewer</small>
</a>
</div>
</footer>
</body>
<script>
function startOver(){
window.location = window.location.origin + window.location.pathname
}
function getURLParameter(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return (false);
}
function loadURI(){
let url = resourceURI.value ? resourceURI.value : getURLParameter("iiif-content")
if(url){
let contentState = "?iiif-content="+url
url = window.location.href.split('?')[0] + contentState
url += `&dig=${!digOption.checked}&resolve=${!resolveOption.checked}`
window.location = url
}
else{
alert("You must supply a URI via the IIIF Content State iiif-content parameter or supply a value in the text input.")
}
}
/**
* Helps with initial orientation on page loads
*/
window.onbeforeunload = function () {
window.scrollTo(0,0);
}
</script>
</html>