-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
508 lines (473 loc) · 22.5 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
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="A jQuery plugin to build a TEI editor with Codemirror">
<meta name="author" content="Alfredo Cosco">
<title>CodeMirror XML4TEI</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style>
html,body{
height: auto;
min-height: 100%;
}
/*This page style*/
.pretty-pre {
background: #E5E5E5;
font-family: verdana;
padding-top:20px;
overflow: hidden;
width: 70%;
transition: width 0.9s;
}
.pretty-pre.expand:hover {
position: relative;
width: 100%;
z-index: 99;
transition: width 0.9s;
}
.CodeMirror { border: 1px solid silver; }
.CodeMirror-empty { outline: 1px solid #c22; }
.CodeMirror-empty.CodeMirror-focused { outline: none; }
.CodeMirror pre.CodeMirror-placeholder { color: #999; }
.toc {
background-color:#fff;
}
</style>
<link rel="icon" href="images/tei.png">
</head>
<body data-spy="scroll" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">CodeMirror XML4TEI</a>
</div>
<!--div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div--><!--/.navbar-collapse -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
<h1>CodeMirror XML4TEI</h1>
<p>A jQuery plugin to build a TEI editor with Codemirror</p>
<p><a href="https://github.com/orazionelson/CodeMirrorXML4TEI">https://github.com/orazionelson/CodeMirrorXML4TEI</a></p>
<p class="lead"><a href="editor.html" target="_new">Try the editor with the interfaces for teiHeader and text</a></p>
</div>
</div>
<div class="container" id="main">
<div id="xml4tei" class="tocfy">
<!-- data-toc-side="right" data-toc-position="fixed" -->
<div class="col-md">
<h2>1) Intro</h2>
<p><a href="https://codemirror.net">Codemirror</a> is a text editor that can be integrated into a web application, the project is open source and provides for plugins to extend the basic editor and tools to write code in different programming languages.</p>
<p>One of the most interesting plugin integration demos is on this page: <a href="https://codemirror.net/demo/xmlcomplete.html">https://codemirror.net/demo/xmlcomplete.html</a>, it shows how to integrate an autocompletion tool with the plug-in to write XML.</p>
<p>Other CodeMirror extensions useful for building an XML editor are</p>
<ul>
<li>Folding: <a href="https://codemirror.net/demo/folding.html">https://codemirror.net/demo/folding.html</a></li>
<li>Tag Matcher: <a href="https://codemirror.net/demo/matchtags.html">https://codemirror.net/demo/matchtags.html</a></li>
<li>Active line: <a href="https://codemirror.net/demo/activeline.html">https://codemirror.net/demo/activeline.html</a></li>
</ul>
<p>By implementing these extensions, the Codemirror trigger for an XML editor will look like this:</p>
<pre class="pretty-pre">
CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "xml",
styleActiveLine: true,
lineNumbers: true,
foldGutter: true,
matchTags: {bothTags: true},
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
extraKeys: {
"'>'": completeAfter,
"'/'": completeIfAfterLt,
"' '": completeIfInTag,
"'='": completeIfInTag,
"Ctrl-Space": "autocomplete",
"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); },
"Ctrl-M": "toMatchingTag"
},
hintOptions: {schemaInfo: tags}
});
</pre>
<div>
<p>The last trigger option (<i> hintOptions </i>) will call a variable written in json (which in our case is called <i> tags </i>) which will be used to define the XML structure that the Auto-completion of Codemirror will suggest during file editing.</p>
<p>Let's imagine we want to set an editor to mark the element in TEI <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-body.html">body</a></i> which contains prose paragraphs <i> <a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-p.html">p</a ></i>; within which we want to highlight personal names: <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-persName.html">persName</a></i> and place names: <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-placeName.html">placeName</a></i>.</p>
<p>Each person (<i>persName</i>) is identified by two attributes: a <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-att.naming.html">role</a></i> that is set through a predefined list (<i>controlled vocabulary</i>) and a free text <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-att.canonical.html">key</a></i>, moreover it can contain a <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-forename.html">forename</a></i>, a <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-surname.html">surname</a></i> and a <i>placeName</i>.</p>
<p>Each place (<i>placeName</i>) can contain a <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-settlement.html">settlement</a></i>, a <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-region.html">region</a></i> or a <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-country.html">country</a></i>.</p>
<p>This scheme can be written in json in this way:</p>
</div>
<pre class="pretty-pre">
var tags = {
"!top": ["p"],
p: {
children: ["persName", "placeName"]
},
persName: {
attrs: {
key: null,
role: ["re","barone","conte"]
},
children: ["forename", "surname", "placeName"]
},
placeName: {
children: ["settlement", "region", "country"]
}
};
</pre>
<p>Here is an example of how the editor will guide you in writing XML.</p>
<img src="images/preview.gif" style="border:1px solid black" alt="Preview" />
</div>
<div class="col-md">
<hr>
<p>This is a good starting point to develop a slightly more complex editor that:</p>
<ul>
<li>don't define the scheme in JSON but in XML (that's easier to manage),</li>
<li>separate the <b>teiHeader</b> area from the <b>text</b> area,</li>
<li>validate the document,</li>
<li>have a pretty code to work on,</li>
<li>introduce a notes management system, which in TEI are not particularly user friendly,</li>
<li>Bonus: bundle an help that calls TEI guidelines</li>
</ul>
<hr>
<p>The editor is designed as a jQuery plugin in four files:</p>
<ul>
<li><a href="js/xml4tei.js">xml4tei.js</a></li>
<li><a href="js/xml4teiSchema2json.js">xml4teiSchema2json.js</a></li>
<li><a href="js/xml4teiHelp.js">xml4teiNte.js</a></li>
<li><a href="js/xml4teiHelp.js">xml4teiHelp.js</a></li>
</ul>
</div>
<div class="col-md">
<h2>2) XML to write XML</h2>
<p><b>See: <a href="js/xml4tei.js">xml4tei.js</a> and <a href="js/xml4teiSchema2json.js">xml4teiSchema2json.js</a>.</b></p>
<p>JSON was not developed to be human writable or readable, XML also but it is easier to manage, so we will define our schema in XML and then translate it into JSON according to the Codemirror specifications.</p>
<p>On GitHub there is a script that, with few changes, will be useful to our editor:</p>
<p><a href="https://github.com/sergeyt/jQuery-xml2json/blob/master/src/xml2json.js">https://github.com/sergeyt/jQuery-xml2json/blob/master/src/xml2json.js</a></p>
<p>This script has been adapted to fit Codemirror specs (which, for example, requires that the root tag is preceded by an exclamation point, which cannot be done in XML).</p>
<p>Without having to fight against quotes, double quotes and parentheses, the XML scheme for writing XML-TEI will just follow a few simple rules:</p>
<ul>
<li>the tag is defined by its name;</li>
<li>within the tag you define in the attributes, the content will be the list of possible values, an empty attribute allows you to insert a free text</li>
<li>nested in the tags the <b><children></b> element defines the allowed children, if the tag does not allow children you will have to insert an empty <b><children/></b>.</li>
</ul>
<p>So a structure similar to the one in JSON shown above will look like this</p>
<p><b>file: <a href="teischemas/cm-tei-schema-sample.xml">cm-tei-schema-sample.xml</a></b></p>
<pre class="pretty-pre">
<cm_tei_schema>
<top>text</top>
<text>
<children>body</children>
</text>
<body>
<children>docDate</children>
<children>div</children>
</body>
<docDate>
<children>date</children>
</docDate>
<date when="YYYYMMDD">
<children/>
</date>
<div type="">
<children>p</children>
</div>
<p>
<children>persName</children>
<children>placeName</children>
</p>
<persName key="" role="king,duke,settler">
<children>forename</children>
<children>surname</children>
</persName>
<placeName key="">
<children>settlement</children>
<children>region</children>
<children>country</children>
</placeName>
</cm_tei_schema>
</pre>
</div>
<div class="col-md">
<h2>3) Separate the <b>teiHeader</b> part from the <b>text</b>, which means a different <i>schema</i> for each textarea</h2>
<p><b>See: <a href="js/xml4tei.js">xml4tei.js</a>.</b></p>
<p>To have a <strong>textarea</strong> with a scheme for the <i><a href="https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-teiHeader.html">teiHeader</a></i> and another for the <i>text</i> we can use the magic attribute <strong>data-*</strong> of HTML5 to provide the trigger with the schema to be imported.</p>
<pre class="pretty-pre expand">
<textarea data-xmlschema="PATH/SCHEME_FILE_NAME.xml" rows="8" name="teiHeader" id="teiHeader" class="tei-editor">
</pre>
<p>We use jQuery to instantiate the editor through a class (<b>.tei-editor</b>) and make the trigger work for every textarea identified by that class.</p>
<pre class="pretty-pre">
$('.tei-editor').each(function(index, myeditor) {
var xmlschema=$(this).data('xmlschema');
var editor = CodeMirror.fromTextArea(myeditor, {
.
.
.
.
hintOptions: {schemaInfo: schemaInfo : $.fn.getCmJson(xmlschema)}
});
});
</pre>
</div>
<div class="col-md">
<h2>4) Validate the document</h2>
<p><b>See: <a href="js/xml4tei.js">xml4tei.js</a>.</b></p>
<p>Then we need a function to validate our TEI document. The function called "validate" is in the main plugin (xml4tei.js) and wokrs in this way:</p>
<ul>
<li>a button with class <b>.validate</b> triggers the function</li>
<li>the funnction joins the tow pieces of XML in one TEI document</li>
<li>an ajax call points to a PHP script (<b>validator.php</b>) that validates the XML against the TEI RelaxNG Schema</li>
</ul>
<pre class="pretty-pre">
/*Validator*/
var validator=function(){
$(".validate").on('click', function(e){
e.preventDefault();
//Build the document
var doc=[];
$(".tei-editor").each(function(index, myeditor){
var val=getCodeMirrorNative(this).getValue();
doc.push(val)
});
var txtdoc=doc.join("");
var tei='<TEI xmlns="http://www.tei-c.org/ns/1.0">\n'+txtdoc+'\n</TEI>';
//console.log(tei);
//Load validator.php with ajax
$.ajax({
type: "GET",
async: true,
cache: false,
//data: {xml: tei},
url: 'validator.php?xml='+encodeURIComponent(tei),
processData : false,
contentType : 'text/xml',
beforeSend: function() {
$(".loader").show();
$("#validation_response").empty();
},
success: function(response) {
$(".loader").hide();
$("#validation_response").append(response);
},
error : function(msg) { console.log(msg); }
});
});
}
</pre>
<hr>
<p>There is one more problem to complete the validator: the two panels are independent but the line numbers must be unitary.</p>
<p>To do this we need to export the two CodeMirror instances into an array, then apply to the latter a mechanism that makes the numbering of its rows depend on the first panel, both at startup and during typing.</p>
<p>So the trigger now looks like this:</p>
<pre class="pretty-pre">
var editors=[];
$('.tei-editor').each(function(index, myeditor) {
var xmlschema=$(this).data('xmlschema');
var editor = CodeMirror.fromTextArea(myeditor, {
mode: "xml",
...
...
...
hintOptions: {schemaInfo : $.fn.getCmJson(xmlschema)}
});
editors.push(editor);
});
</pre>
<p>At the beginning you can see the creation of the array and at the end its export with the two instances.</p>
<p>While the function to make the line numbers dynamic looks like this:</p>
<pre class="pretty-pre">
function manageLines(editors){
var hlines=editors[0].lineCount();
var hhlines=hlines+1;
editors[1].setOption('firstLineNumber', hhlines);
editors[0].on('change', function(){
var lc=editors[0].lineCount();
var llc=lc+1;
editors[1].setOption('firstLineNumber', llc);
});
}
</pre>
<p>Just call the function after the trigger.</p>
<pre class="pretty-pre">
var editors=[];
$('.tei-editor').each(function(index, myeditor) {
var xmlschema=$(this).data('xmlschema');
....
editors.push(editor);
});
manageLines(editors);
</pre>
</div>
<div class="col-md">
<h2>5) Prettify the code</h2>
<p><b>See: <a href="js/xml4tei.js">xml4tei.js</a>.</b></p>
<p>It is useful to to prettify the code before loading it, Codemirror has some built in method but I think that is better to do with XSLT trought Javascript.</p>
<p>Another function, found on Stackoverflow,will be useful for our script:</p>
<pre class="pretty-pre expand">
//Found on
//https://stackoverflow.com/questions/376373/pretty-printing-xml-with-javascript
var prettifyXml = function(sourceXml)
{
var xmlDoc = new DOMParser().parseFromString(sourceXml, 'application/xml');
var xsltDoc = new DOMParser().parseFromString([
// describes how we want to modify the XML - indent everything
'<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
' <xsl:strip-space elements="*"/>',
' <xsl:template match="para[content-style][not(text())]">', // change to just text() to strip space in text nodes
' <xsl:value-of select="normalize-space(.)"/>',
' </xsl:template>',
' <xsl:template match="node()|@*">',
' <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
' </xsl:template>',
' <xsl:output indent="yes"/>',
'</xsl:stylesheet>',
].join('\n'), 'application/xml');
var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsltDoc);
var resultDoc = xsltProcessor.transformToDocument(xmlDoc);
var resultXml = new XMLSerializer().serializeToString(resultDoc);
return resultXml;
};
</pre>
</div>
<div class="col-md">
<h2>6) The NTE, a notetaking environment</h2>
<p><b>See: <a href="js/xml4teiNte.js">xml4teiNte.js</a></b>.</p>
<p>The NTE is one of the hardest part to design. Text notes, according to TEI specs, can be in-line with the document or detached form it (like classical end notes). I don't like in-line notes because I believe that, despite everything, the document must maintain a minimum human readability, and the in-line notes have a strong impact on this factor.</p>
<p>The the prototype of our document with notes will be like this:</p>
<pre class="pretty-pre expand">
<text>
...
<body>
<div type="myDivType">
<p>Lorem ipsum dolor<ref target="#yuiwjjui6" type="integer"/> sit amet, consectetur adipiscing elit. Maecenas
commodo vel velit a porttitor. Quisque cursus tellus felis, sit amet tempor justo commodo eget. Nulla facilisi. Sed
felis turpis, vestibulum nec elit feugiat,
pellentesque tempor arcu. </p>
</div>
...
<div type="notes">
<note xml:id="yuiwjjui6" type="integer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo vel velit a porttitor.
Quisque cursus tellus felis, sit amet tempor justo commodo eget.</p>
</note>
...
</div>
</body>
</text>
</pre>
<p>On the other side putting the notes are at the bottom of the <b>text</b> element of the TEI document impacts with the editing process, the author would find himself constantly scrolling the document to add or delete a note.</p>
<p>Therefore, we will have to foresee the possibility to make the note appear in a modal window while positioning it at the end of the text, linking the <i>reference</i> and the <i>note</i> by the attribute <b>target</b> that acts as a unique ID. This attribute is randomly generated by the javascript.</p>
<p>Moreover, the design must also include a mechanism that does not allow duplicating the reference to a note and moving it to another part of the text while maintaining the internal connection.</p>
<p>The script must, of course, provide also a way to delete a note and its reference.</p>
<p>While we are using the editor, notes don't need to have seriality, we can create it by transforming the document (with XSLT, Javascript or any parsing library) in the end view once outside the editor, moreover, you can use the <b>type</b> attribute to have different serialities.</p>
<p>For example:</p>
<pre class="pretty-pre">
<note xml:id="yuiwjjui6" type="integer"> //Seriality: 1,2,3...
or
<note xml:id="yuiwjjui6" type="alpha"> //Seriality: a,b,c...
</pre>
</div>
<div class="col-md">
<h2>7) A fancy interactive help</h2>
<p>See <a href="js/xml4teiHelp.js">xml4teiHelp.js</a></p>
<p>This plugin opens a bootstrap modal window with a list of the tags choosen in schemes. It shows also allowed children and attributes. Moreover: it can retrieve the tags description from the json version of TEI Guidelines (both if local and remote), and generates links to html guidelines version.</p>
<ul>
<li>json Guidelines: https://www.tei-c.org/release/xml/tei/odd/p5subset.json</li>
<li>html Guidelines: http://www.tei-c.org/release/doc/tei-p5-doc/";</li>
</ul>
<p>The plugin has 3 options:</p>
<pre class="pretty-pre">
langs: array,
jsondriver : string,
proxy : string,
</pre>
<p><b>langs</b>: is and array of language codes for the links to html documentation.</p>
<pre class="pretty-pre">langs : ['it','en','de','fr']</pre>
<p><b>jsondriver</b>: choose <i>local</i> if you want to get tag descriptions by the json file <b>teiresources/p5subset.json</b>, it is faster but you have to update the file by hand.<br/>
Choose <i>proxy</i> if you want to query the online Guidelines in json. The TEI server doesn't allow CORS, so you have to use a proxy.</p>
<pre class="pretty-pre">jsondriver : "local|proxy"</pre>
<p><b>proxy</b>: the path to the CORS proxy server, the default is: https://cors-anywhere.herokuapp.com/</p>
<pre class="pretty-pre">proxy : "https://cors-anywhere.herokuapp.com/"</pre>
</div>
<div class="col-md">
<h2>8) Call the script: options</h2>
<p>The call is simply:</p>
<blockquote>
$.fn.xml4tei();
</blockquote>
<p>There are few options:</p>
<pre class="pretty-pre">
//shows/hide the buttons panel (default: <i>true</i>)
buttonsPanel : true|false
//shows/hide the Examples button (default: <i>true</i>)
examplesBtn : true|false
//shows/hide the Validator button (default: <i>true</i>)
validatorBtn : true|false
//shows/hide the Help button (default: <i>true</i>)
helpBtn : true|false
//Values passed to the help plug-in
//Languages for guidelines url (default: <b>['it','en']</b>)
helpLangs: array es. ['it','en'],
//The source for elements definition in the help,
//(file: p5subset.json)
//if set to local the script search for it in teiresources directory
//else if it is set to proxy the script will parse the online file:
// http://www.tei-c.org/release/xml/tei/odd/p5subset.json
//keeping it by a proxy to skip cross origins limits
helpJsondriver : "local|proxy",
helpProxy : "https://cors-anywhere.herokuapp.com/"
//True if you want to load examples
//when the script loads. (default: <i>false</i>)
loadExamples: false|true
</pre>
</div>
</div><!-- /tocfy -->
</div> <!-- /container -->
<div class="container">
<p class="lead"><a href="editor.html">Try the editor with the interfaces for teiHeader and text</a></p>
<hr>
<footer>
<p>©LEFT 2019 <a href="https://github.com/orazionelson">https://github.com/orazionelson</a> alfredo.cosco[AT]gmail.com</p>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-2.2.4.min.js"></script>
<!--script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script-->
<script src="js/bootstrap.min.js"></script>
<script src="js/prettypre.jquery.js"></script>
<script src="js/plugins.js"></script>
<script>$(document).ready(function(){
$('.pretty-pre').prettyPre();
$('.tocfy').tocfy(
{
tocbehavior:"scrollFixed"
}
);
var delta = $('.navbar:first').height();
$().scroller({
delta: delta
});
});
</script>
</body>
</html>