-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy patheditor.html
More file actions
291 lines (255 loc) · 17.9 KB
/
editor.html
File metadata and controls
291 lines (255 loc) · 17.9 KB
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
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" translate="no" class="notranslate" lang="en">
<head>
<title>MANO – Metadata Editor | Create TEI-XML Manuscript Descriptions</title>
<meta name="keywords" content="metadata editor, TEI-XML, manuscript metadata, digital humanities tool, open data">
<meta name="description" content="Use the MANO Metadata Editor to create, validate, and export manuscript descriptions in TEI-XML and JSON formats according to TEI P5 standards.">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no"/>
<meta name="google" content="notranslate"/>
<link rel="canonical" href="https://mano-project.github.io/editor.html"/>
<link rel="icon" type="image/png" href="images/mano-logo_nuovoFont.png">
<link rel="alternate" hreflang="en" href="URL">
<meta property="og:type" content="website">
<meta property="og:title" content="MANO – Metadata Editor">
<meta property="og:description" content="Create, validate and export manuscript descriptions in TEI-XML format with MANO’s Metadata Editor.">
<meta property="og:image" content="https://mano-project.github.io/images/mano-logo_nuovoFont.png">
<meta property="og:url" content="https://mano-project.github.io/editor.html">
<!-- CodeMirror CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/eclipse.min.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "MANO – Metadata Editor",
"url": "https://mano-project.github.io/editor.html",
"applicationCategory": "Digital Humanities Tool",
"description": "An online metadata editor for creating and exporting manuscript descriptions in TEI-XML and JSON format according to TEI P5 guidelines.",
"creator": {
"@type": "Person",
"name": "Michela Parma",
"affiliation": "University of Mainz"
}
"inLanguage": "en"
}
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<nav class="navbar bg-body-tertiary ">
<div class="container-fluid d-flex justify-content-between align-items-center position-relative py-2">
<!-- Invisible spacer to balance layout -->
<div style="width: 80px;"></div>
<!-- Centered logo -->
<div class="position-absolute start-50 translate-middle-x text-center">
<a class="navbar-brand" href="index.html">
<img src="images/mano-logo_nuovoFont.png" alt="MANO project logo" width="65" class="d-inline-block align-text-top">
</a>
</div>
<!-- Offcanvas toggle aligned right -->
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel"><MANO></h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="resources.html">Resources</a></li>
<li class="nav-item"><a class="nav-link active" href="editor.html">Metadata Editor</a></li>
<li class="nav-item"><a class="nav-link" href="collection.html">Metadata Collection</a></li>
<li class="nav-item"><a class="nav-link" href="viewer.html">Transcription Viewer</a></li>
<li class="nav-item"><a class="nav-link" href="documentation.html">Documentation</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<hr class="my-3">
<div class="text-center">
<h6 class="mb-3">Participate in shaping the future of <MANO></h6>
<a href="https://survey.zdv.uni-mainz.de/index.php/822542?newtest=Y&lang=en" class="btn btn-sm btn-outline-primary" target="_blank" rel="noopener">Take the user survey</a>
</div>
</ul>
</div>
</div>
</div>
</nav>
<div class="container container-page mt-4 mb-5">
<button onclick="history.back()" class="btn back-btn btn-sm btn-outline-secondary" aria-label="Go back">Back</button>
<h1 class="page-title">Metadata Editor</h1>
<div class="container data-enter">
<div class="row mt-4 align-items-end">
<!-- Left column -->
<div class="col-12 col-md-4 d-flex justify-content-start mb-2 mb-md-0">
<button type="button" class="btn btn-primary responsive-btn" data-bs-toggle="modal" data-bs-target="#infoMetadataEditor" aria-label="Open About Metadata Editor">
<i class="bi bi-info-circle"></i> About
</button>
</div>
<!-- Middle column -->
<div class="col-12 col-md-4 text-start text-md-center mb-2 mb-md-0">
<label for="fileUpload" class="form-label">Upload XML or JSON</label>
<input type="file" id="fileUpload" class="form-control" accept=".xml,.json">
</div>
<!-- Right column -->
<div class="col-12 col-md-4 d-flex justify-content-start justify-content-md-end">
<button id="addManuscriptBtn" class="btn btn-primary responsive-btn" aria-label="Add manuscript description"><i class="bi bi-plus-circle"></i> New description</button>
</div>
</div>
<div class="mt-3 mb-5 d-flex justify-content-center gap-2">
<button id="loadSampleBtn" class="btn btn-secondary btn-sm" type="button">
<i class="bi bi-file-earmark-text"></i> Load sample
</button>
<button id="clearAllBtn" class="btn btn-danger btn-sm" type="button">
<i class="bi bi-x-circle"></i> Clear all
</button>
</div>
<div id="manuscriptFormsContainer"></div>
<div class="text-center mt-5">
<button type="button" class="btn btn-success responsive-btn" id="downloadAllJSON" aria-label="Download JSON"><i class="bi bi-file-earmark-arrow-down"></i> Download JSON</button>
</div>
</div>
</div>
<!-- About Metadata Editor Modal -->
<div class="modal fade" id="infoMetadataEditor" tabindex="-1" aria-labelledby="infoMetadataEditorLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="infoMetadataEditorLabel">About Metadata Editor</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>The Metadata Editor enables the structured creation and management of manuscript metadata in full compliance with the <a href="https://tei-c.org/release/doc/tei-p5-doc/en/html/MS.html" target="_blank">TEI P5 Manuscript Description guidelines</a>. A single session may include the description of one or multiple manuscripts. Each manuscript can be exported in <strong>TEI-XML or JSON</strong> formats, while all manuscripts described during the session may also be downloaded collectively in JSON.
</p>
<p>
You may also <strong>upload existing metadata</strong> in JSON or TEI-XML. When the file follows the structure implemented in MANO, all information is automatically restored into the form, allowing you to continue working without re-entering data manually.
</p>
<p>Fields marked with the <strong>icon</strong> <a href="#"><i class="bi bi-box-arrow-up-right"></i></a> connect directly to the corresponding documentation for quick reference.</p>
<p>The editor includes several helper functions:
<ul>
<li><strong>Preview</strong> generates a live TEI-XML representation of the description in a modal window, allowing you to review the XML structure without downloading it.</li>
<li><strong>Validate</strong> performs consistency and completeness checks based on required fields and data-type constraints.</li>
<li><strong>Load sample</strong> imports a complete, real manuscript description to help users explore how TEI elements map to the form.</li>
<li><strong>Clear all</strong> removes all manuscript descriptions from the session.</li>
</ul>
</p>
<p>
Completed JSON files may be contributed to the
<a href="https://github.com/mano-project/mano-metadata/tree/main/data" target="_blank">MANO GitHub repository</a>. The
records will be publicly accessible in the
<a href="collection.html">MANO Metadata Collection</a>, enriching the shared digital resource for manuscript research.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
</div>
</div>
</div>
</div>
<!-- XML Download Success Modal -->
<div class="modal fade" id="xmlDownloadSuccessModal" tabindex="-1" aria-labelledby="xmlDownloadSuccessLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="xmlDownloadSuccessLabel"><img src="images/mano-logo_nuovoFont.png" alt="MANO project logo" width="35" height="40" class="me-2">Well done!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>You have downloaded your manuscript description in <strong>XML</strong>.</p>
<p>If you would like to contribute to the <strong>Metadata Collection</strong> of this platform, please also download it in JSON and then go to the <a href="https://github.com/mano-project/mano-metadata" target="_blank">GitHub Repository</a> of the project. There you will find instructions to upload your file. Once done, your data will be visible in the Collection to other users.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="downloadJSONfromModal" aria-label="Dowload JSON">
<i class="bi bi-file-earmark-arrow-down"></i> Download JSON
</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Cancel">Cancel</button>
</div>
</div>
</div>
</div>
<!-- JSON Download Success Modal -->
<div class="modal fade" id="jsonDownloadSuccessModal" tabindex="-1" aria-labelledby="jsonDownloadSuccessLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="jsonDownloadSuccessLabel"><img src="images/mano-logo_nuovoFont.png" alt="MANO project logo" width="35" height="40" class="me-2">Well done!</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>You have downloaded your manuscript description(s) in <strong>JSON</strong>.</p>
<p>Now you can contribute to the <strong>Metadata Collection</strong> of this platform. Go to the <a href="https://github.com/mano-project/mano-metadata" target="_blank">GitHub Repository</a> and follow the instructions there to upload your file. Once done, your data will be visible in the Collection to other users.</p>
</div>
<div class="modal-footer">
<a href="https://github.com/mano-project/mano-metadata" target="_blank" class="btn btn-primary" aria-label="Contribute to the Collection">
Contribute to the Collection <i class="fab fa-github fa-xl ms-2"></i>
</a>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Cancel">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Modal for XML display -->
<div class="modal fade" id="xmlModal" tabindex="-1" aria-labelledby="xmlModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="xmlModalLabel">Preview</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!--<pre id="modalXmlContent" class="bg-light p-3 border"></pre>-->
<textarea id="xmlPreviewEditor" class="bg-light p-3 border"></textarea>
</div>
</div>
</div>
</div>
<footer class="footer bg-body-tertiary text-center py-4">
<div class="container">
<!-- Logo centered -->
<div class="mb-3">
<a class="navbar-brand" href="index.html">
<img src="images/mano-logo_nuovoFont.png" alt="MANO project logo" width="50">
</a>
</div>
<!-- Links centered in one line -->
<div class="mb-3">
<a class="footer-link mx-2" href="index.html">Home</a>
<a class="footer-link mx-2" href="resources.html">Resources</a>
<a class="footer-link mx-2" href="editor.html">Metadata Editor</a>
<a class="footer-link mx-2" href="collection.html">Metadata Collection</a>
<a class="footer-link mx-2" href="viewer.html">Transcription Viewer</a>
<a class="footer-link mx-2" href="documentation.html">Documentation</a>
<a class="footer-link mx-2" href="about.html">About</a>
</div>
<!-- Copyright centered -->
<div class="text-center mt-2">
<span>© 2025 <span class="mano"><MANO></span></span>
</div>
</div>
</footer>
<div class="py-1 text-center">
<small>
<span class="m-1">
<a href="imprint.html" style="color: black!important">Imprint & Privacy</a>
</span> |
<span class="m-1">
<a href="https://github.com/orgs/mano-project/repositories" target="_blank" style="color: black!important"><i class="fa-brands fa-github"></i> GitHub Repositories</a>
</span> |
<span class="m-1">
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" style="color: black!important">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="Creative Commons" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="Attribution" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="Non Commercial" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="Share Alike" style="max-width: 1em;max-height:1em;margin-left: .2em;">
</span>
</small>
</div>
<script src="JS/metadata-new.js"></script>
<script src="JS/validation.js"></script>
<script src="JS/adjustButtonSize.js"></script>
<!-- CodeMirror core + XML mode -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/xml/xml.min.js"></script>
</body>
</html>