-
Notifications
You must be signed in to change notification settings - Fork 2
/
gloss-witness.html
271 lines (264 loc) · 13.1 KB
/
gloss-witness.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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gallery of Glosses</title>
<link rel="stylesheet" href="css/gloss.css">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<script src="js/auth.js" type="module"></script>
<script src="js/deer.js" type="module"></script>
<script src="js/layout.js" type="module"></script>
<script src="js/text-witness-line-selector.js" type="module"></script>
<script src="js/glossModal.js" type="module"></script>
<script src="js/shared.js"></script>
<script src="js/mark.min.js"></script>
<style>
input.required, textarea.required{
border: 1px solid black;
}
.pageContainer.is-toggled{
visibility: hidden;
height: 0px;
}
line:nth-child(2n) {
background-color: unset;
}
nav[user-input]{
margin-bottom: 1em;
}
nav[user-input] a{
cursor: pointer;
}
#reset{
cursor: pointer;
}
#manuscriptsResult .tag{
cursor: pointer;
text-transform: none;
}
#manuscriptsResult .tag:hover{
color: var(--color-success);
border-color: var(--color-success);
}
</style>
</head>
<body class="container">
<gog-header></gog-header>
<h2 class="bg-basic"> Gloss Textual Witness </h2>
<p id="reset" class="bg-basic is-hidden">
This page automatically applied a text resource. If this isn't the text you want to use then <a onclick="startOver()">click here to start over</a>.
</p>
<p id="look" class="bg-light">
Connect Virtual Glosses With Real World Text. Please load in a Manuscript. The text from that resource will load and can be selected. Selected text can then be attached to a new or existing Gloss. Note that a text selection and shelfmark are required.
</p>
<div id="needs" class="row bg-basic is-hidden">
<div class="col">
<p class="howTo">
It looks like you haven't provided a Manuscript Witness or text content yet. Please choose a way to provide the text content which contains the Glosses you would like to identify. We will check for existing Manuscript Witnesses with that content.
</p>
<nav user-input class="tabs is-full">
<a name="uri" onclick="changeUserInput(event, 'uri')" class="ui-tab active">I want to provide a URI</a>
<a name="file" onclick="changeUserInput(event, 'file')" class="ui-tab">I want to upload a file</a>
<a name="cp" onclick="changeUserInput(event, 'cp')" class="ui-tab">I want to copy and paste</a>
</nav>
<div user-input="uri" class="userInput">
<input id="resourceURI" type="text" placeholder="Provide URI of Web Resource"/>
<input id="loadURI" type="button" onclick="loadUserInput(event, 'uri')" value="Load URI" />
</div>
<div user-input="file" class="userInput is-hidden">
<p class="howTo">
The only supported file type is ".txt" at this time.
</p>
<input id="resourceFile" type="file" placeholder="Select a File"/>
<textarea disabled id="fileText"> No Typing or Pasting Text Here. Awaiting file contents...</textarea>
<input id="loadFile" type="button" class="is-hidden" onclick="loadUserInput(event, 'file')" value="Use File Content" />
</div>
<div user-input="cp" class="userInput is-hidden">
<p class="howTo">Copy text from your source and paste it into this textarea. You can also type out the text.</p>
<textarea placeholder=" Begin Typing or Paste the Text Here..." id="resourceText" class="taller"></textarea>
<input id="loadText" type="button" onclick="loadUserInput(event, 'cp')" value="Use Text" />
</div>
</div>
</div>
<div id="loading">
<p class="loadingMsg">
Please be patient while we get things together...
</p>
</div>
<!-- Once a mansucript witness is known the shelfmark should become populated and disabled -->
<form id="manuscriptWitnessForm" class="is-hidden" deer-type="ManuscriptWitness" deer-context="http://purl.org/dc/terms">
<input is="auth-creator" type="hidden" deer-key="creator" />
<input type="hidden" deer-key="targetCollection" value="GoG-Manuscripts">
<div id="manuscriptWitnessCheck" class="row">
<div class="col">
<div>
<p class="detect-witness">
You must load in a Manuscript Witness. Enter a shelfmark below to get started. When finished, click the button to check for existing Manuscripts. If none exist, you will see the option to create one and continue.
</p>
</div>
<div id="manuscriptsFound" class="is-hidden">
<h4> Manuscripts Found. Confirm Manuscript from below or provide a new shelfmark and check again. </h4>
<div id="manuscriptsResult"></div>
</div>
</div>
</div>
<div class="row">
<label class="col-3 col-2-md text-right">Shelfmark ❢</label>
<input type="text" deer-key="identifier" placeholder="A Shelfmark is required" class="col-9 col-10-md required" required>
</div>
<div class="row">
<div class="col">
<input id="checkForManuscriptsBtn" type="button" class="button secondary" value="Check for Existing Manuscript Witnesses"/>
</div>
</div>
<div class="row">
<div class="col">
<input id="submitManuscriptsBtn" class="is-hidden button primary" type="submit" value="Create Manuscript Witness and Continue"/>
</div>
</div>
</form>
<!-- Once a mansucript witness is known the URI should be placed into the hidden "partOf" field -->
<form id="witnessFragmentForm" class="is-hidden" deer-type="WitnessFragment" deer-context="http://purl.org/dc/terms" hash-id>
<h4> Provide Witness Fragment Information </h4>
<p>
Fill out the form below to create a Witness Fragment for the Manuscript loaded in. Submit the Fragment by identifying a Gloss and clicking '➥ attach'. Note the Manuscript remains the same for each Fragment you submit.
</p>
<input is="auth-creator" type="hidden" deer-key="creator" />
<input type="hidden" deer-key="partOf" >
<input type="hidden" deer-key="source" witness-source>
<div class="row">
<div class="col">
<label class="is-hidden">Label:</label>
<input type="text" deer-key="title" placeholder="Label" class="is-hidden">
<details>
<summary>
<label>Shelfmark or Short Citation:</label>
</summary>
<small>Enter manuscript shelfmark or short bibliographic citation of author and title for the
witness,
e.g. ‘St. Gall, Stiftsbibliothek 132’ or ‘Kuttner, Repertorium’.</small>
</details>
<input type="text" deer-key="identifier" required
placeholder="e.g. ‘St. Gall, Stiftsbibliothek 132’ or ‘Kuttner, Repertorium’" class="required" disabled>
</div>
<div class="col">
<details>
<summary>
<label>Folio or Page:</label>
</summary>
<small>Folio or page number from this Witness where the gloss is found.</small>
</details>
<input type="text" deer-key="_folio" placeholder="e.g, 132r">
</div>
</div>
<div class="row">
<div class="col">
<label>Text:</label>
<textarea custom-text-key="text" required rows="2" class="required"
placeholder="Text is required. Highlight transcription text below..."></textarea>
</div>
</div>
<div class="row">
<div class="col">
<label>Language:</label>
<select custom-text-key="language" title="select language">
<option value="la" selected>Latin</option>
<option value="de">German</option>
<option value="fr">French</option>
<option value="en">English</option>
</select>
</div>
<div class="col">
<label>Gloss Format:</label>
<select deer-key="_glossFormat" title="select gloss format">
<option value="none" selected>None</option>
<option value="marginal">Marginal</option>
<option value="interlinear">Interlinear</option>
<option value="appendix">Appendix</option>
<option value="other">Other</option>
</select>
</div>
<div class="col">
<label>Gloss Location:</label>
<select deer-key="_glossLocation" title="select gloss location relative to the main text">
<option value="none" selected>None</option>
<option value="top">Top</option>
<option value="bottom">Bottom</option>
<option value="center">Center</option>
<option value="left">Left</option>
<option value="right">Right</option>
<option value="top left">Top Left</option>
<option value="top center">Top Center</option>
<option value="top right">Top Right</option>
<option value="bottom left">Bottom Left</option>
<option value="bottom center">Bottom Center</option>
<option value="bottom right">Bottom Right</option>
<option value="other">Other</option>
</select>
</div>
<div class="col">
<label>Glossator Hand:</label>
<select deer-key="_glossatorHand" title="glossator">
<option value="none" selected>None</option>
<option value="original">Original</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="row">
<div class="col">
<details>
<summary>
<label>Depiction:</label>
</summary>
<small>Optional image URL or IIIF selector link for a depiction of the gloss in the manuscript. This "<a href="https://ncsu-libraries.github.io/iiif-crop-tool/" target="_blank" rel="noopener">crop
tool</a>" link will open in a new tab.</small>
</details>
<input type="url" deer-key="depiction" placeholder="Paste an image URL or IIIF selector link">
</div>
</div>
<div class="row">
<div class="col">
<label>Notes:</label>
<textarea deer-key="_notes" rows="2"
placeholder="Optional notes about this gloss instance"></textarea>
</div>
</div>
<div class="row">
<label class="col-3 col-2-md text-right is-hidden" placeholder="Chosen Gloss Incipit">Chosen Gloss</label>
<textarea disabled title="Choose a Gloss to see the incipit here" placeholder="Choose a Gloss below..." class="chosenGloss col-9 col-10-md is-hidden"></textarea>
</div>
<div class="row">
<gog-tag-widget class="col"></gog-tag-widget>
</div>
<div class="row">
<input class="is-hidden button primary" type="submit" value="Create Selection Fragment"/>
<input class="is-hidden button error deleteWitness" type="button" value="Delete Witness Fragment"/>
</div>
<div class="row">
<source-text-selector class="lineSelector col"> </source-text-selector>
<deer-view class="col" id="ngCollectionList" deer-collection="GoG-Named-Glosses" deer-link="gloss-metadata.html#" deer-template="glossesSelectorForTextualWitness">
Loading Gloss Picker…
</deer-view>
</div>
</form>
<gog-footer class="row"></gog-footer>
<div id="globalFeedback" class="card is-center"></div>
<gloss-modal class="is-hidden"></gloss-modal>
<script src="js/gloss-witness.js"></script>
</body>
<script>
/**
* Make sure DEER forms do not submit when a user hits "Enter".
*/
document.querySelectorAll("form[deer-type]").forEach(form => {
form.addEventListener("keydown", (e)=> {
if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
e.preventDefault()
}
}
}, true)
})
</script>
</html>