forked from bbloomf/jgabc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
transcriber.html
186 lines (183 loc) · 8.36 KB
/
transcriber.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
<!DOCTYPE html>
<!--<html manifest="cache.manifest">-->
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-24502736-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-24502736-2');
</script>
<title>GABC Transcription Tool</title>
<link rel="icon" href="icon/clear-main.png" type="image/png" />
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/mkhgaijffgijgkolifpoaijimncdakkd" />
<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.10.3.custom.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="js/Tone.min.js"></script>
<script src="js/tones.js"></script>
<script src="util.js" type="text/javascript"></script>
<script src="psalmtone.js"></script>
<script src="jquery.hypher.js"></script>
<script src="patterns/pl.js"></script>
<script src="patterns/en-us.js"></script>
<script src="patterns/la-hypher.js"></script>
<script src="transcriber.html.js"></script>
<!-- <script src="../exsurge/dist/exsurge.js"></script> -->
<script src="exsurge.min.js"></script>
<script src="saveSvgAsPng.js"></script>
<script>
Hypher.languages.en.leftMin = 1;
Hypher.languages.en.rightMin = 1;
Hypher.languages.pl.leftMin = 1;
Hypher.languages.pl.rightMin = 1;
</script>
</head>
<body class='sans' style='overflow:hidden;padding: 8px'>
<style>
textarea{
padding:0px;
}
.dp{
padding-right:16px;
}
.tap{
padding-right:2px;
}
td{
padding:0px;
}
#chant-parent2{
width:10.3in;
max-width:100%;
margin:auto;
height:100%;
}
#chant-parent{
border:1px solid #aaa;
overflow-y:auto;
height:100%;
}
#chant-pad{
padding:0 0.1in;
}
#chant-preview{
margin:0.1in auto auto;
}
input[type=checkbox]{
margin-top:2px;
margin-bottom:2px;
}
textarea{
resize:none;
}
@media print {
#chant-parent2,
#chant-parent {
border: 0;
overflow-y: visible;
}
}
</style>
<form id="pdfForm" target="_blank" method="get" action="https://www.sourceandsummit.com/editor/legacy/">
<!--<input type='hidden' name='pdf' value='1'/>-->
<input type='hidden' name='crop' value='0'/>
</form>
<form id="pdfFormDirect" target="_blank" method="post" action="https://www.sourceandsummit.com/editor/legacy/process.php">
<input type="hidden" id="pdff_gabc" name="gabc[]"/>
<input type="hidden" id="pdff_width" name="width" value="7.5"/>
<input type="hidden" id="pdff_height" name="height" value="11"/>
<input type="hidden" id="pdff_croppdf" name="croppdf" value="false"/>
<input type="hidden" id="pdff_spacing" value="vichi" name="spacing"/>
<input type="hidden" id="pdff_font" value="GaramondPremierPro" name="font"/>
<input type="hidden" id="pdff_fontsize" value="20" name="fontsize"/>
<input type="hidden" id="pdff_fmt" name="fmt" value="pdf"/>
</form>
<div class="hide-print">
<div style="width:100%;margin-bottom:5px">
<ul class="nav nav-pills" style="display: inline-block;">
<li role="presentation" class="active"><a href="transcriber.html">GABC Transcription Tool</a></li>
<li role="presentation"><a href="psalmtone.html">Psalm Tone Tool</a></li>
<li role="presentation"><a href="readings.html">Readings Tool</a></li>
<li role="presentation"><a href="propers.html">Propers Tool</a></li>
<li role="presentation"><a href="faq.html">(About)</a></li>
</ul>
<div style="float:right;margin-left:8px" class="btn-group hide-ss" role="group">
<a class='btn btn-xs btn-primary' href='#' id='lnkPdfDirect'>PDF</a>
<a class='btn btn-xs btn-default' href='#' id='lnkPdf'>Further PDF options</a>
</div>
</div>
<div style="width:100%;text-align:center;padding-bottom:4pt"><a href="#" id="lnkToggleMode">Show integrated GABC</a></div>
<div id="blankSpace" style="height:193px;">
<div id="twoBoxes" style="position:absolute;width:100%;overflow:hidden">
<div class="dp">
<div style="margin:auto;width:10.3in;max-width:100%"><div style="margin-right:-4px">
<table width="100%" style="margin-left:-2px;margin-top:-2px">
<tr><td width="50%">
<label for="hymntext" title="This text box is for the text of the chant. Select a different language from the dropdown to the right to change the syllabification behavior.">Text</label> <input type="checkbox" id="cbElisionHasNote"/><label for="cbElisionHasNote" title="You can signify an elision in the text by putting a vowel in parentheses. If this box is checked, the elision will still have a punctum associated with it; if this is unchecked, that syllable will have no punctum.">Use puncta for elisions</label>
<select style="float:right;margin:2px;height:18px;font-size:11px" id="selLanguage" title="If you select English, the text will be run through the lyric hyphenator at juiciobrennan.com; it will only contact this site at most once every 5 seconds so you may have to wait a bit at times for the word syllabification to correct itself. Custom syllable breaks may be entered using = as in 'syl=la=ble'">
<option value="la">Latin</option>
<option value="la-liturgical">Liturgical Latin</option>
<option value="en">English</option>
<option value="pl">Polish</option>
<option value="vi">Vietnamese</option>
<option value="zh">Chinese</option>
</select>
<br><div class="tap"><textarea id="hymntext" lang="la" style="height: 130pt; width: 100%;">Adoro t(e) devote, latens Deitas, Quæ sub his figuris vere latitas; Tibi se cor meum totum subjicit, Quia te contemplans totum deficit. 2. Visus, tactus, gustus in te fallitur, Sed auditu solo tuto creditur. Credo quidquid dixit Dei Filius; Nil hoc verbo veritátis verius. -- Amen.</textarea></div>
</td><td width="50%">
<label for="hymngabc" title="This text box is for the GABC notation that would normally be in parentheses, as well as the GABC header.">GABC</label><span style="float: right;"><label><input type='checkbox' id='cbMultipleVerses'> All verses to one line of chant</label></span><br><div class="tap"><textarea id="hymngabc" spellcheck="false" style="height: 130pt; width: 100%;">c4 c e g g gh g. , f e d c c. ; c e g g gh g. , f e d c c. : g g hi j ji g. , h g f e d. ; e g f e dc d. , e c d c c. :: -- cdc bc.. ::</textarea></div>
</td>
</tr>
</table>
</div>
</div></div></div>
<div id="oneBox" style="display:none;position:absolute;width:100%">
<div class="dp">
<div style="width:10.3in;max-width:100%;margin:auto">
<label for="editor" title="You can put GABC headers in this text box if you want them included in the GABC file download link below. Any headers you type in will persist in local storage between sessions.">Integrated GABC</label>
<br><div class="tap"><textarea id="editor" spellcheck="false" style="height: 130pt; width: 100%;"></textarea></div>
</div>
</div></div>
</div>
<div style="display:block;margin-top:0.5em;margin-bottom:0.5em">
<a href="#" id="lnkDownloadGabc" draggable target="_blank">Download Integrated GABC</a>
<a href="#" id="lnkDownloadPng">Download PNG</a>
<a href="#" id="lnkDownloadSvg">Download SVG</a>
</div>
</div>
<div id="chant-parent2">
<div id="chant-parent">
<div id="chant-pad">
<div id="chant-preview" class="clickable"></div>
</div>
</div>
</div>
<svg class="bg-blur">
<defs>
<filter id="text-glow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5 5" result="glow"/>
<feFlood flood-color="#337ab7" result="COLOR" />
<feComposite in="COLOR" in2="glow" operator="in" result="glow-color" />
<feMerge>
<feMergeNode in="glow-color"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="note-glow" x="-150%" y="-150%" width="400%" height="400%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5 5" result="glow"/>
<feFlood flood-color="#337ab7" result="COLOR" />
<feComposite in="COLOR" in2="glow" operator="in" result="glow-color" />
<feMerge>
<feMergeNode in="glow-color"/>
<feMergeNode in="glow-color"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
</svg>
</body>
</html>