-
Notifications
You must be signed in to change notification settings - Fork 1
/
toaq_tooltip.html
100 lines (89 loc) · 3.7 KB
/
toaq_tooltip.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
<!doctype html>
<html>
<meta charset='utf-8' />
<body>
<link rel="stylesheet" type="text/css" href="toaq.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
var dict = [];
function normalized(toa) {
return toa.normalize('NFD')
.toLowerCase()
.replace(/i/g, 'ı')
.replace(/[\u0300-\u030f]/g, '')
.replace(/[^0-9A-ZꝠa-zıꝡ'\u0323_\-]+/g, ' ')
.replace(/ +/g, ' ')
.trim();
}
function output_tooltip_text(text) {
/*** AUTOMATIC WORD DEFINITION TOOLTIPS FOR TOAQ TEXTS ***/
// `dict` is the content of the loaded dictionary JSON.
var hoetoalai = "'’a-zA-Zıāēīōūȳáéíóúýäëïöüÿǎěǐǒǔảẻỉỏủỷâêîôûŷàèìòùỳãẽĩõũỹꝡ"
+ "ĀĒĪŌŪȲÁÉÍÓÚÝÄËÏÖÜŸǍĚǏǑǓẢẺỈỎỦỶÂÊÎÔÛŶÀÈÌÒÙỲÃẼĨÕŨỸꝠ"
+ "ạẹịọụẠẸỊỌỤ" + "\u0300-\u030f\u0323";
var re = new RegExp(
"<[^>]*>|[" + hoetoalai + "]+|[^<" + hoetoalai + "]", "g");
// Loading the Toaq text from the elements of class `with_tooltip_definitions`:
/* Splitting the content into an array of things that are either
Toaq words or are other stuff (blanks, HTML tags…): */
var content = text.match(re);
content.forEach(function (item, index, array) {
// For each item in `content`, we check whether it's a Toaq word:
if ((new RegExp("["+hoetoalai+"]")).test(item[0])) {
/* It is a Toaq word, so we get a normalized form of it
(removing diacritics and having dotless i's: */
var normalized_word = normalized(item);
// Now we look up the dictionary for the word:
dict.forEach(function (entry, i, arr) {
if (normalized(entry.toaq) == normalized_word) {
// We have found the word in the dictionary.
// Now we create a tooltip containing its definition:
def = entry.english.replace(/▯/g, "___");
array[index] = '<div class="tip">' + item
+ '<span class="tiptext">' + toaq
+ ' : ' + def + '</span></div>';
}
/* If we don't find the word in the dictionary, no tooltip
is created. Nothing will happen when hovering the word
with the mouse pointer. */
});
}
});
return content.join("");
}
$.getJSON(
"https://toaq.github.io/dictionary/dictionary.json",
function (json) {
dict = JSON.parse(JSON.stringify(json));
// Checking for errors on JSON dictionary loading:
}).error(function(jqXHR, textStatus, errorThrown) {
console.log("getJSON error: " + textStatus);
console.log("Incoming Text: " + jqXHR.responseText);
});
</script>
<span style="font: 15px arial, sans-serif;">Type any Toaq text in the following textarea.</span>
<br /><br />
<form id="form1" name="form1" method="post" action="" style="width:100%">
<textarea id="input_textarea" style="width:100%" rows="8" autofocus></textarea>
</form>
<br />
<div style="border: solid 1px; padding: 10px; background-color: #DDDDFF;"
height="24em">
<div id="output" width="100%" height="100%"> </div>
</div>
<script>
/*
* Binding the function run() to keyup event on input_textarea by using jQuery
*/
$('#input_textarea').on("keyup paste",
function(e) {
var input = $('#input_textarea').val();
input = input.replace(/\n/g, "<br />");
/* Retrieve the result */
var out = output_tooltip_text(input);
$('#output').html(out);
});
</script>
</body>
</html>