-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
235 lines (225 loc) · 10.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Wordist Example</title>
<style>
body {color: #333; background: #FCFCFC; font-size: 16px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; margin: 0; padding: 20px; border: 0; overflow-y: scroll;}
.clickword, .fieldtag {cursor: pointer;}
.clickword:hover, .fieldtag:hover {text-decoration: underline;}
.fieldtag {color: #38F; font-style: italic;}
.rhyme {color: #b4b; font-style: italic;}
#exampleDef b {font-size: 1.4em;}
</style>
</head>
<body>
<div id='exampleWelcome' style='font-size: 2em; max-width: 640px; margin-left: auto; margin-right: auto; padding: 20px 0;'>
Wordist makes words <span class='clickword' style='font-weight: 600;'>radiant</span>.
</div>
<div id='exampleSearch' style='margin-top: 20px; max-width: 640px; margin-left: auto; margin-right: auto; padding-bottom: 20px;'>
<input id='exampleInput' type='text' style='width: 90%; line-height: 30px; font-size: 20px; padding: 0 10px;' placeholder='type something...'/><br/>
<span style='font-size: 12px; line-height: 40px; padding-left: 12px;'>Or select any word in the definition to keep searching!</span>
</div>
<div id='exampleDef' style='max-width: 640px; margin-left: auto; margin-right: auto; min-height: 320px;'>
...
</div>
<br/>
<center><div style='display: inline-block; font-size: 15px; line-height: 20px; text-align: left; font-weight: 400; color: #555; margin-top: 40px; border-top: 1px solid #999; padding: 40px; max-width: 640px; padding-top: 20px;'>
<h2>What is Wordist?</h2>
<p>Wordist is an open source dictionary with incremental search <b>hosted entirely on a static web server</b>.</p>
<p>There's no backend logic doing anything fancy; it's just a big folder full of little javascipt snippets with corresponding definitions, parts of speech, etc. so you can experiment with language without 3rd-party APIs.</p>
<p>The entire dataset is a bit hefty to access directly (> 20MB), but breaking it up into little pages of words and definitions keeps it light-weight and speedy for the web. Big thanks to the GNU Collaborative International Dictionary of English for the data that makes Wordist possible.</p>
<h2>Play Around</h2>
<p>See the source code on this page for examples on how to use <b>Wordist</b> in your own projects.</p>
<p>There's also a wordist searching game called <a href='./game'>circular dictionary</a> — try to find words and get points by how often they occur in the dictionary!</p>
<h2>Open Source</h2>
<p>Wordist is fully open source. You can read more, download, and fork this project on <a href='https://github.com/akumpf/wordist'>GitHub</a>.</p>
</div></center>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="./dist/wordist.js"></script>
<script>
// Example usage:
// Initialize the path to the dictionary files.
wordist.init({path: "./dist"});
// Get a definition for a word.
// wordist.getDef("apple", function exampleDefHandler(err, root, data){
// if(err) return console.warn(err);
// if(!root) return console.warn("Unexpected result?", root, data);
// if(!data) return console.log("No def for: "+root);
// // --
// var entries = data.e||[];
// var alts = data.a||[];
// console.log(root, alts, entries);
// });
// Or if you want to try harder (in case the word is not a direct hit)...
// This will fallback to the definition for "apple".
// wordist.getDefClosest("applely", function exampleDefHandler(err, root, data){
// if(err) return console.warn(err);
// if(!root) return console.warn("Unexpected result?", root, data);
// if(!data) return console.log("No def for: "+root);
// // --
// var entries = data.e||[];
// var alts = data.a||[];
// console.log(root, alts, entries);
// })
// Get the full list of english words for a part of speech,
// using first 4 letters. Note: this may be big!
// wordist.getPoSAll("adje", function examplePoSHandler(err, pos, words){
// if(err) return console.warn(err);
// if(!pos || !words) return console.warn("Unexpected result?", pos, words);
// // --
// console.log(words.length+" words for Parts of Speech ["+pos+"]: ", words);
// });
// And here's a simple app that gets a definition when a user types.
$(document).ready(function(){
var prevWord = null;
function showWordDef(word){
wordist.getDefClosest(word, function(err, root, data){
if(err) return console.log(err);
if(!data && prevWord) return showWordDef(prevWord);
if(!data) return;
if(data) prevWord = word;
// --
var entries = data.e||[];
// --
var html = "<b>"+root+":</b><br/>";
for(var i=0; i<entries.length; i++){
var partOfSpeech = entries[i][0];
html += "<div style='margin-left: 10px; margin-top: 10px; line-height: 2em; border-bottom: 1px solid #EEE; margin-bottom: 7px;'>"+wordist.prettyPoS(partOfSpeech)+"</div><ol style='margin: 5px 0;'>";
var defs = entries[i][1]||[];
for(var j=0; j<defs.length; j++){
var def = defs[j];
var dws = def.split(" ");
html += "<li>";
for(var d=0; d<dws.length; d++) html += "<span class='clickword'>"+dws[d]+"</span> ";
html += "</li>";
}
html += "</ol>";
}
// --
let seeAlso = data.seeAlso;
// --
if(data.c && data.c.length > 0){
html += "<div style='margin-left: 10px; margin-top: 10px; line-height: 2em; border-bottom: 1px solid #EEE; margin-bottom: 7px;'>commonly used in fields:</div><div style='margin-left: 40px;'>";
let fields = data.c||[];
for(let i=0; i<fields.length; i++){
html += (i>0?", ":"")+ "<span class='fieldtag'>"+fields[i]+"</span>";
}
html += "</div>";
}
// --
if(seeAlso.words.length > 0){
html += "<div style='margin-left: 10px; margin-top: 10px; line-height: 2em; border-bottom: 1px solid #EEE; margin-bottom: 7px;'>related words (<i>autogenerated from definition</i>):</div><div style='margin-left: 40px;'>";
for(let i=0; i<seeAlso.words.length; i++){
html += (i>0?", ":" ")+"<span class='clickword'>"+seeAlso.words[i]+"</span>";
}
html += "</div>";
}
if(seeAlso.phrases.length > 0){
html += "<div style='margin-left: 10px; margin-top: 10px; line-height: 2em; border-bottom: 1px solid #EEE; margin-bottom: 7px;'>related phrases (<i>autogenerated from definition</i>):</div><div style='margin-left: 40px;'>";
for(let i=0; i<seeAlso.phrases.length; i++){
html += (i>0?", ":"")+"\"";
let wds = seeAlso.phrases[i].split(" ");
for(let j=0; j<wds.length; j++) html += (j>0?" ":"")+"<span class='clickword'>"+wds[j]+"</span>";
html += "\"";
}
html += "</div>";
}
if(seeAlso.usedBy.length > 0){
html += "<div style='margin-left: 10px; margin-top: 10px; line-height: 2em; border-bottom: 1px solid #EEE; margin-bottom: 7px;'>in context (<i>autogenerated from definition</i>):</div><div style='margin-left: 40px;'>";
for(let i=0; i<seeAlso.usedBy.length; i++){
html += (i>0?", ":"")+"\"";
let wds = seeAlso.usedBy[i].split(" ");
for(let j=0; j<wds.length; j++) html += (j>0?" ":"")+"<span class='clickword'>"+wds[j]+"</span>";
html += "\"";
}
html += "</div>";
}
// --
$("#exampleDef").html(html);
// --
let activeword = prevWord;
if(data.r && data.r.length>0 && data.r[0].length>0){
wordist.getRhymes(data.r[0][0],(err,rhymeKey,rhymes)=>{
if(err) return console.log("no rhymes for key:",rhymeKey);
if(activeword != prevWord) return console.log("word changed while looking up rhymes.");
// --
rhymes = rhymes||[];
let html2 = "";
html2 += "<div style='margin-left: 10px; margin-top: 10px; line-height: 2em; border-bottom: 1px solid #EEE; margin-bottom: 7px;'>rhymes (<i>in order of findability</i>):</div><div style='margin-left: 40px;'>";
let rhymesAdded = 0;
for(let i=0; i<rhymes.length; i++){
let rWord = (rhymes[i]||{}).w||"";
if(rWord == activeword) continue;
let opacity = Math.min(1.0,Math.max(0,(((rhymes[i]||{}).f||0)+10)/30.0));
html2 += (rhymesAdded++>0?", ":"")+"<span class='clickword rhyme' style='opacity: "+opacity+";'>"+rWord+"</span>";
}
html2 += "</div>";
$("#exampleDef").append(html2);
//console.log("Rhymes:",rhymeKey,rhymes);
// --
$("#exampleDef .clickword.rhyme").click(function(){
var newWord = $(this).text();
newWord = newWord.toLowerCase().replace(/[^a-z0-9\'\ \-]/g, "");
$("#exampleInput").val(newWord);
showWordDef(newWord);
});
});
}
// --
$("#exampleDef .clickword").click(function(){
var newWord = $(this).text();
newWord = newWord.toLowerCase().replace(/[^a-z0-9\'\ \-]/g, "");
$("#exampleInput").val(newWord);
showWordDef(newWord);
});
$("#exampleDef .fieldtag").click(function(){
var fieldtag = $(this).text();
fieldtag = fieldtag.toLowerCase();
wordist.getFieldAll(fieldtag,function(err,field,words){
if(err) return console.warn(err);
words = words||[];
$("#exampleInput").val("");
var html = "";
html += "<div style='margin-left: 10px; margin-top: 10px; line-height: 2em; border-bottom: 1px solid #EEE; margin-bottom: 7px;'>Commonly used words in the field of <span class='fieldtag'>"+field+"</span></div><div style='margin-left: 10px;'>";
for(let i=0; i<words.length; i++){
html += (i==0?"":", ")+"<span class='clickword'>"+words[i]+"</span>";
}
html += "</div>";
$("#exampleDef").html(html);
$("#exampleDef .clickword").click(function(){
var newWord = $(this).text();
newWord = newWord.toLowerCase().replace(/[^a-z0-9\'\ \-]/g, "");
$("#exampleInput").val(newWord);
showWordDef(newWord);
});
})
});
});
}
// --
var prevTxt = "";
function onSearchInputChanged(){
var text = $(this).val()||"";
text = text.toLowerCase().replace(/[^a-z0-9\'\ \-]/g, "");
if(text == prevTxt) return;
prevTxt = text;
// --
showWordDef(text);
}
$("#exampleInput").keyup(onSearchInputChanged);
$("#exampleInput").change(onSearchInputChanged);
// --
// Here's an example of getting a random adjective to update something on the page.
// wordist.getPoSRandom("adje", function(err, randAdj){
// $("#exampleWelcome").html("Wordist is made for <span class='clickword' style='font-weight: 600;'>"+randAdj+"</span> users.");
$("#exampleWelcome .clickword").click(function(){
var newWord = $(this).text();
showWordDef(newWord);
});
showWordDef($("#exampleWelcome .clickword").text());
// });
});
</script>
</body>
</html>