-
Notifications
You must be signed in to change notification settings - Fork 0
/
js-libvoikko-demo.html
140 lines (130 loc) · 7.08 KB
/
js-libvoikko-demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS-libvoikko interactive demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<style type="text/css">
.voikkoCommand {
color: red;
}
.voikkoResult {
color: blue;
padding-left: 2em;
}
</style>
</head>
<body class="container-fluid">
<div class="jumbotron p-4 mt-3">
<h1>JS-libvoikko interactive demo</h1>
<p>JS-libvoikko is a pure JavaScript port of libvoikko. It runs in latest versions of all major web browsers without plugins or server
side scripting. You can try the code samples below and edit them to see some of the possibilities.</p>
<p>See the <a href="https://www.puimula.org/htp/testing/voikko-sdk/java/javadoc/org/puimula/libvoikko/Voikko.html">API documentation</a> for more info.
Our JavaScript API follows the Java API as closely as reasonably possible but some differences remain. <a href="#" onclick="showHelp()">Need help on using this demo?</a></p>
</div>
<div id="placeholder" class="alert alert-info" role="alert">
Loading the Finnish dictionary...
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
</div>
</div>
<div id="theForm" class="container-fluid hidden">
<div class="row">
<div class="col-lg-4">
<h2>Script to run</h2>
<span class="dropdown">
<div class="d-inline-block" title="1: Select the functionality you want to test." data-placement="auto">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select sample code
<span class="caret"></span>
</button>
<div class="dropdown-menu" id="sampleMenu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#" data-code='v.spell("kissa");|v.spell("hevvonen");'>Spell checking - spell()</a>
<a class="dropdown-item" href="#" data-code='v.suggest("hevvonen");'>Spelling correction - suggest()</a>
<a class="dropdown-item" href="#" data-code='v.grammarErrors("Ullakolla on hiiri joka juoksee karkuun.", "fi");'>Grammar checking - grammarErrors()</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-code='v.analyze("tulen");'>Morphological anlysis - analyze()</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-code='v.hyphenate("yhteisomistus", "-");'>Hyphenation - hyphenate()</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-code='v.tokens("Kissa vai hevonen?");'>String tokenization - tokens()</a>
<a class="dropdown-item" href="#" data-code='v.sentences("Kissa vai ei? Vaikea sanoa.");'>Sentence splitting - sentences()</a>
</div>
</div>
</span> (you can edit it afterwards)
<pre class="p-2 mt-3">var v = libvoikko.init("fi");</pre>
<pre class="border rounded bg-light p-2" id="theScript" title="2: Edit the sample code. For example, you can try your own input words." data-placement="auto"></pre>
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-primary btn-lg mb-2" onclick="runScript()" title="3: Click this button to run your modified code." data-placement="auto">
<span class="fa fa-play" aria-hidden="true"></span> Run the script
</button>
</div>
<div class="col-lg-6">
<h2>Output from the script</h2>
<pre class="border rounded bg-light p-2" id="outputArea"></pre>
</div>
</div>
</div>
<div class="container-fluid">
<h2>Legal notices</h2>
<p>This demonstration page is written by Harri Pitkänen (hatapitk@iki.fi). It is made available under the terms of GNU General Public License, version 3 or later.</p>
<p>When JS-libvoikko is used in a web browser it is necessary to load compiled version of libvoikko, possible dependent libraries and required dictionaries
to the browser. Since these files are really transferred to the browser (not just run on the server as it has often been the case when libvoikko has been
used in the web context) the distribution terms of the relevant software licenses need to be followed. This demonstration uses libvoikko and voikko-fi
from <a href="https://github.com/voikko/corevoikko/tree/d54b82e150e1eb71574ab9f596b4c8605acc7251">corevoikko revision d54b82e150e1eb71574ab9f596b4c8605acc7251</a>. Additionally <a href="https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html">Emscripten 1.37.35</a>, <a href="https://code.jquery.com/jquery-3.3.1.slim.js">jQuery 3.3.1</a> and <a href="https://getbootstrap.com/docs/4.1/getting-started/introduction/">Bootstrap 4.1</a> are used. Source code to all of these
components is available at the linked web sites.</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script async type="text/javascript" src="libvoikko.js"></script>
<script>
function setScript(script) {
$("#theScript").text(script).focus();
}
function runScript() {
var script = $("#theScript").text();
var commands = script.split(";");
var output = $("#outputArea");
output.empty();
for (var i = 0; i < commands.length; i++) {
var command = commands[i];
var commandDiv = $("<div/>");
commandDiv.addClass("voikkoCommand");
commandDiv.text(command);
output.append(commandDiv);
var result = eval(command);
if (typeof(result) == "object") {
result = JSON.stringify(result, null, 2);
}
var resultDiv = $("<div/>");
resultDiv.addClass("voikkoResult");
resultDiv.text(result);
output.append(resultDiv);
}
}
function showHelp() {
var elementsWithTooltip = $("[title]");
elementsWithTooltip.tooltip("show").click(function(){elementsWithTooltip.tooltip("dispose");});
}
window.addEventListener('load', function() {
var libvoikko = Libvoikko({
onLoad : function() {
$("#sampleMenu a").click(function() {
var script = $(this).attr("data-code").replace("|", "\n");
setScript(script);
runScript();
});
$("#theScript").prop("contentEditable", true);
$("#placeholder").remove();
$("#theForm").removeClass("hidden");
v = libvoikko.init("fi");
$("#sampleMenu a").first().trigger("click");
}
});
});
</script>
</body>
</html>