-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
81 lines (72 loc) · 2.56 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
<!doctype html>
<html>
<head>
<title>Simple Volpiano Editor</title>
<meta charset="utf-8">
<style>
body, textarea { font-size: 12pt; }
textarea { width: 100%; min-height: 60px; }
#preview { font-family: Volpiano; font-size: 32pt; min-height: 32pt; background-color: #ccf; margin: 20px 0; }
.wordspace { background-color: #f99; }
.sylspace { background-color: #99f; }
.nonstandard { background-color: magenta; }
#legend { margin-top: 80px; text-align: center; font-size: small; }
</style>
</head>
<body>
<div id="preview"></div>
<textarea id="editor" placeholder="enter your transcription here, see Volpiano preview above">1---</textarea>
<div id="legend">
<p>
This is a simple editor with preview for music transcriptions with the <a href="http://www.fawe.de/volpiano/">Volpiano</a> font.
Please make sure to have the font installed on your PC before using this.
</p>
<p>
Legend to the highlighting:
<span class="sylspace">syllable space</span>
<span class="wordspace">word space</span>
<span class="nonstandard">space of non-standard length</span>
</p>
</div>
<script type="text/javascript">
const editor = document.getElementById('editor');
const preview = document.getElementById('preview');
const highlightChunk = function (text) {
if (text.endsWith('7')) text += '<br>';
if (text[0] != '-') return text;
if (text.length == 2) return '<span class="sylspace">'+text+'</span>';
if (text.length == 3) return '<span class="wordspace">'+text+'</span>';
if (text.length > 3) return '<span class="nonstandard">'+text+'</span>';
return text;
};
const highlight = function (text) {
var result = '';
var position = 0;
var stateContent = 0;
var stateSpace = 1;
var state = stateContent;
for (i = 0; i < text.length; ++i) {
var char = text[i];
var newState = (char == '-') ? stateSpace : stateContent;
if (newState != state) {
result += highlightChunk(text.substr(position, i-position));
state = newState;
position = i;
}
}
result += highlightChunk(text.substr(position, text.length-position));
return result;
};
const update = function (event) {
preview.innerHTML = highlight(editor.value);
window.location.hash = '#!' + editor.value;
};
// initial content provided in URL, load it
if (window.location.hash.substr(0,2) == '#!') {
editor.value = window.location.hash.substr(2);
}
editor.addEventListener('keyup', update);
update();
</script>
</body>
</html>