You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

182 lines
5.3 KiB
HTML

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<base href="https://fastly.jsdelivr.net/gh/fengdh/mdict-js/">
<title>mdict</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="selectize.default.css" media="screen">
<style>
#btnLookup {
border: none;
height: 36px;
font-size: 12pt;
font-weight: bold;
vertical-align: top;
border-radius: 3px;
}
#btnLookup:not([disabled]) {
background: #1A4FDD;
color: white;
}
#dict-title {
position: fixed;
bottom: 0;
right: 0;
max-width: 300px;
font-size: 10px;
opacity: 0.9;
background: #DDD;
box-shadow: -2px -2px 4px 4px rgba(0, 0, 0, 0.3);
}
#dict-title * {
font-size: 10px!important;
}
#mdict-online-viewer {
font-size: 14px;
font-family: "Georgia", "Times New Roman";
height: 600px;
width: 100%;
}
#mdict-online-viewer #definition {
font-size: 14px;
height: 500px;
overflow: auto;
}
#word + .selectize-control {
display: inline-block;
min-width: 18em;
}
</style>
<script type="text/javascript" src="conf.js"></script>
<script src="require.js" data-main="mdict"></script>
</head>
<body>
<section class="main-content">
<div id="mdict-online-viewer">
Choose a dictionary file (*.mdx + optional *.mdd): <input id="dictfile" type="file" multiple>
<p>
<input id="word" type="text" value="">
<input id="btnLookup" type="button" value="look up" disabled="false">
<div id="dict-title"></div>
<div id="definition">
</div>
</div>
</section>
<script>
function AbstractFile(url) {
this.name=url;
this.slice = async(offset, length) =>{
const headers = new Headers();
headers.append( 'Range', 'bytes=' + offset + '-' + ( offset + length ).toString() );
const opts = {
credentials: 'include',
headers : headers
};
const resp = await fetch( this.name, opts );
alert(resp.type);
return await resp.blob();
}
}
//?url=#word=
let url = location.search.substring(5);
let word = location.hash.substring(6);
var fileList = [new AbstractFile(url)];
var mdict;
define('mdict-parseXml', function() {
return function (str) {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
});
require(['jquery', 'mdict-common', 'mdict-parser', 'mdict-renderer', 'selectize'], function($, MCommon, MParser, MRenderer, Selectize) {
$('#btnLookup').addClass('stripes');
$('#word').on('keyup', function(e) { e.which === 13 && $('#btnLookup').click(); });
MParser(fileList).then(function(resources) {
mdict = MRenderer(resources);
function doSearch(phrase, offset) {
console.log(phrase + '');
mdict.lookup(phrase, offset).then(function($content) {
$('#definition').empty().append($content.contents());
console.log('--');
});
}
$('#dict-title').html((resources['mdx'] || resources['mdd']).value().description || '** no description **');
mdict.render($('#dict-title'));
$('#btnLookup')
.attr('disabled', false)
.off('.#mdict')
.on('click.#mdict', function() {
doSearch($('#word').val());
}).click();
$('#word')[0].selectize.destroy();
$('#word').selectize({
plugins: ['restore_on_backspace'],
maxItems: 1,
maxOptions: 1 << 20,
valueField: 'value',
labelField: 'word',
searchField: 'word',
delimiter: '~~',
loadThrottle: 10,
create: function(v, callback) {
return callback({word: v, value: v});
},
createOnBlur: true,
closeAfterSelect: true,
allowEmptyOption: true,
score: function(search) {
var score = this.getScoreFunction(search);
return function(item) {return 1;};
},
load: function(query, callback) {
var self = this;
if (!query.length) {
this.clearOptions();
this.refreshOptions();
return;
};
mdict.search({phrase: query, max: 5000}).then(function(list) {
// console.log(list.join(', '));
// TODO: filter candidate keyword starting with "_"
list = list.map(function(v) {
return {word: v, value: v.offset};
});
self.clearOptions();
callback(list);
});
},
onChange: function(value) {
var item = this.options[value];
if (item) {
var value = item.word;
doSearch(value, value.offset);
$('#word').val(value);
} else {
$('#definition').empty();
}
},
});
});
});
</script>
</body>
</html>