forked from GitHub/gf-core
minibar: refactoring for improved modularity
Two smaller objects have been factored out from the Minibar object: Input and Translations. These have been placed in two separate files: minibar_input.js and minibar_translations.js. Some common auxiliary functions have also been moved to a separate file: minibar_support.js
This commit is contained in:
@@ -153,11 +153,18 @@ Some implementation details:
|
||||
entering a sentence by tapping on the magnets.
|
||||
<li>[Changed 2011-08-03] Moved the initialization code in minibar.html to
|
||||
<a href="minibar_online.js">minibar_online.js</a>.
|
||||
<li>[Changed 2011-08-08] For improved modularity and reusability,
|
||||
two smaller objects have been factored out from the Minibar object:
|
||||
Input and Translations. These have been placed in two separate files:
|
||||
<a href="minibar_input.js">minibar_input.js</a> and
|
||||
<a href="minibar_translations.js">minibar_translations.js</a>.
|
||||
Some common auxiliary functions have also been moved to a separate file:
|
||||
<a href="minibar_support.js">minibar_support.js</a>.
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<small class=modtime>
|
||||
<!-- hhmts start --> Last modified: Wed Aug 3 16:14:22 CEST 2011 <!-- hhmts end -->
|
||||
<!-- hhmts start --> Last modified: Mon Aug 8 19:27:14 CEST 2011 <!-- hhmts end -->
|
||||
</small>
|
||||
<address>
|
||||
<a href="http://www.cs.chalmers.se/~hallgren/">TH</a>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
& <a href="http://www.grammaticalframework.org:41296/translate/">Translator</a>]
|
||||
</small>
|
||||
<small class=modtime>
|
||||
HTML <!-- hhmts start --> Last modified: Wed Aug 3 15:09:58 CEST 2011 <!-- hhmts end -->
|
||||
HTML <!-- hhmts start --> Last modified: Mon Aug 8 18:04:22 CEST 2011 <!-- hhmts end -->
|
||||
</small>
|
||||
<address>
|
||||
<a href="http://www.cse.chalmers.se/~hallgren/">TH</a>
|
||||
@@ -31,6 +31,9 @@ HTML <!-- hhmts start --> Last modified: Wed Aug 3 15:09:58 CEST 2011 <!-- hhmt
|
||||
|
||||
<script type="text/JavaScript" src="support.js"></script>
|
||||
<script type="text/JavaScript" src="minibar.js"></script>
|
||||
<script type="text/JavaScript" src="minibar_input.js"></script>
|
||||
<script type="text/JavaScript" src="minibar_translations.js"></script>
|
||||
<script type="text/JavaScript" src="minibar_support.js"></script>
|
||||
<script type="text/JavaScript" src="pgf_online.js"></script>
|
||||
<script type="text/javascript" src="minibar_online.js"></script>
|
||||
|
||||
|
||||
@@ -21,8 +21,9 @@ function start_minibar(server,opts,target) {
|
||||
return new Minibar(server,opts,target);
|
||||
}
|
||||
|
||||
/* --- Main Minibar object -------------------------------------------------- */
|
||||
function Minibar(server,opts,target) {
|
||||
// Typically called when the HTML document is loaded
|
||||
// Contructor, typically called when the HTML document is loaded
|
||||
|
||||
/* --- Configuration ---------------------------------------------------- */
|
||||
|
||||
@@ -42,30 +43,25 @@ function Minibar(server,opts,target) {
|
||||
// Apply supplied options
|
||||
if(opts) for(var o in opts) this.options[o]=opts[o];
|
||||
|
||||
/* --- Creating the components of the minibar --------------------------- */
|
||||
this.translations=new Translations(server,this.options)
|
||||
this.input=new Input(server,this.options,this.translations)
|
||||
|
||||
/* --- Creating user interface elements --------------------------------- */
|
||||
|
||||
this.surface=div_id("surface");
|
||||
this.menubar=empty("div");
|
||||
this.extra=div_id("extra");
|
||||
this.menubar=div_id("menubar");
|
||||
this.words=div_id("words");
|
||||
this.translations=div_id("translations");
|
||||
|
||||
this.minibar=element(target || "minibar");
|
||||
this.minibar.innerHTML="";
|
||||
with(this) {
|
||||
appendChildren(minibar,[menubar,surface,words,translations,extra]);
|
||||
appendChildren(menubar,[input.menus,translations.menus,input.buttons])
|
||||
appendChildren(minibar,[menubar,input.main,translations.main,extra]);
|
||||
append_extra_buttons(extra,options);
|
||||
}
|
||||
|
||||
// Filled in and added to minibar later:
|
||||
this.grammar_menu=empty_id("select","grammar_menu");
|
||||
this.from_menu=empty_id("select","from_menu");
|
||||
this.to_menu=empty_id("select","to_menu");
|
||||
|
||||
/* --- Minibar client state initialisation ------------------------------ */
|
||||
this.grammar=null;
|
||||
this.current={from: null, input: ""};
|
||||
this.previous=null;
|
||||
|
||||
this.server=server;
|
||||
|
||||
@@ -76,27 +72,17 @@ function Minibar(server,opts,target) {
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Auxiliary functions ---------------------------------------------- */
|
||||
|
||||
Minibar.prototype.show_grammarlist=function(grammars) {
|
||||
debug(this)
|
||||
this.grammar_menu=empty_id("select","grammar_menu");
|
||||
with(this) {
|
||||
//debug("show_grammarlist ")
|
||||
menubar.innerHTML="";
|
||||
if(grammars.length>1) {
|
||||
function opt(g) { return option(g,g); }
|
||||
appendChildren(grammar_menu,map(opt,grammars));
|
||||
grammar_menu.onchange=
|
||||
bind(function() { select_grammar(grammar_menu.value); },this);
|
||||
appendChildren(menubar,[text("Grammar: "),grammar_menu]);
|
||||
insertFirst(menubar,grammar_menu);
|
||||
insertFirst(menubar,text("Grammar: "));
|
||||
}
|
||||
appendChildren(menubar,
|
||||
[text(" From: "), from_menu,
|
||||
text(" To: "), to_menu,
|
||||
button(options.delete_button_text,bind(delete_last,this),"H"),
|
||||
button("Clear",bind(clear_all,this),"L")]);
|
||||
if(options.random_button)
|
||||
menubar.appendChild(button("Random",bind(generate_random,this),"R"));
|
||||
if(options.help_url)
|
||||
menubar.appendChild(button("Help",bind(open_help,this)));
|
||||
select_grammar(grammars[0]);
|
||||
@@ -106,337 +92,20 @@ Minibar.prototype.show_grammarlist=function(grammars) {
|
||||
Minibar.prototype.select_grammar=function(grammar_name) {
|
||||
var t=this;
|
||||
//debug("select_grammar ");
|
||||
function get_languages() {
|
||||
t.server.get_languages(bind(t.show_languages,t));
|
||||
function change_grammar() {
|
||||
t.server.grammar_info(bind(t.change_grammar,t));
|
||||
}
|
||||
t.server.switch_grammar(grammar_name,get_languages);
|
||||
t.server.switch_grammar(grammar_name,change_grammar);
|
||||
}
|
||||
|
||||
Minibar.prototype.show_languages=function(grammar_info) {
|
||||
Minibar.prototype.change_grammar=function(grammar_info) {
|
||||
var t=this;
|
||||
with(t) {
|
||||
//debug("show_languages ");
|
||||
grammar=grammar_info;
|
||||
|
||||
var new_language=function () {
|
||||
current.from=from_menu.value;
|
||||
clear_all();
|
||||
}
|
||||
from_menu.onchange=bind(new_language,t);
|
||||
update_language_menu(from_menu,grammar);
|
||||
set_initial_language(options,from_menu,grammar);
|
||||
|
||||
to_menu.onchange=bind(get_translations,t);
|
||||
|
||||
update_language_menu(to_menu,grammar);
|
||||
insertFirst(to_menu,option("All","All"));
|
||||
to_menu.value="All";
|
||||
|
||||
new_language();
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.clear_all1=function() {
|
||||
with(this) {
|
||||
remove_typed_input();
|
||||
current.input="";
|
||||
previous=null;
|
||||
surface.innerHTML="";
|
||||
translations.innerHTML="";
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.clear_all=function() {
|
||||
with(this) {
|
||||
clear_all1();
|
||||
get_completions();
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.get_completions=function() {
|
||||
with(this) {
|
||||
//debug("get_completions ");
|
||||
words.innerHTML="...";
|
||||
server.complete({from:current.from,input:current.input},
|
||||
bind(show_completions,this));
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.show_completions=function(complete_output) {
|
||||
with(this) {
|
||||
//debug("show_completions ");
|
||||
var completions=complete_output[0].completions;
|
||||
var emptycnt=add_completions(completions)
|
||||
if(true/*emptycnt>0*/) get_translations();
|
||||
else translations.innerHTML="";
|
||||
if(surface.typed && emptycnt==completions.length) {
|
||||
if(surface.typed.value=="") remove_typed_input();
|
||||
}
|
||||
else add_typed_input();
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.add_completions=function(completions) {
|
||||
with(this) {
|
||||
if(words.timeout) clearTimeout(words.timeout),words.timeout=null;
|
||||
words.innerHTML="";
|
||||
words.completions=completions;
|
||||
words.word=[];
|
||||
var t=surface.typed ? surface.typed.value : "";
|
||||
var emptycnt=0;
|
||||
for(var i=0;i<completions.length;i++) {
|
||||
var s=completions[i];
|
||||
if(s.length>0) {
|
||||
var w=word(s);
|
||||
words.appendChild(w);
|
||||
words.word[i]=w;
|
||||
}
|
||||
else emptycnt++;
|
||||
}
|
||||
filter_completions(t,true);
|
||||
return emptycnt;
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.filter_completions=function(t,dim) {
|
||||
with(this) {
|
||||
if(words.timeout) clearTimeout(words.timeout),words.timeout=null;
|
||||
words.filtered=t;
|
||||
//if(dim) debug('filter "'+t+'"');
|
||||
var w=words.word;
|
||||
words.count=0;
|
||||
var dimmed=0;
|
||||
var prefix=""; // longest common prefix, for completion
|
||||
for(var i=0;i<w.length;i++) {
|
||||
var s=words.completions[i];
|
||||
var keep=hasPrefix(s,t);
|
||||
if(keep) {
|
||||
if(words.count==0) prefix=s;
|
||||
else prefix=(commonPrefix(prefix,s));
|
||||
words.count++;
|
||||
}
|
||||
if(dim) {
|
||||
w[i].style.opacity= keep ? "1" : "0.5";
|
||||
if(keep) w[i].style.display="inline";
|
||||
else dimmed++;
|
||||
}
|
||||
else
|
||||
w[i].style.display=keep ? "inline" : "none";
|
||||
}
|
||||
words.theword=prefix;
|
||||
if(dimmed>0)
|
||||
words.timeout=setTimeout(function(){ filter_completions(t,false)},1000);
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.get_translations=function() {
|
||||
with(this) {
|
||||
var c=current;
|
||||
if(options.show_grouped_translations)
|
||||
server.translategroup({from:c.from,input:c.input},
|
||||
bind(show_groupedtranslations,this));
|
||||
else
|
||||
server.translate({from:c.from,input:c.input},
|
||||
bind(show_translations,this));
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.target_lang=function() {
|
||||
with(this) return langpart(to_menu.value,grammar.name);
|
||||
}
|
||||
|
||||
Minibar.prototype.add_typed_input=function() {
|
||||
with(this) {
|
||||
if(!surface.typed) {
|
||||
var inp=empty("input","type","text");
|
||||
inp.value="";
|
||||
inp.setAttribute("accesskey","t");
|
||||
inp.style.width="10em";
|
||||
inp.onkeyup=bind(complete_typed,this);
|
||||
surface.appendChild(inp);
|
||||
surface.typed=inp;
|
||||
inp.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.remove_typed_input=function() {
|
||||
with(this) {
|
||||
if(surface.typed) {
|
||||
surface.typed.parentNode.removeChild(surface.typed);
|
||||
surface.typed=null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.complete_typed=function(event) {
|
||||
with(this) {
|
||||
//element("debug").innerHTML=show_props(event,"event");
|
||||
var inp=surface.typed;
|
||||
//debug('"'+inp.value+'"');
|
||||
var s=inp.value;
|
||||
var ws=s.split(" ");
|
||||
if(ws.length>1 || event.keyCode==13) {
|
||||
if(ws[0]!=words.filtered) filter_completions(ws[0],true);
|
||||
if(words.count==1) add_word(words.theword);
|
||||
else if(elem(ws[0],words.completions)) add_word(ws[0]);
|
||||
else if(words.theword.length>ws[0].length) inp.value=words.theword;
|
||||
}
|
||||
else if(s!=words.filtered) filter_completions(s,true)
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.generate_random=function() {
|
||||
var t=this;
|
||||
function show_random(random) {
|
||||
t.clear_all1();
|
||||
t.add_words(random[0].text);
|
||||
}
|
||||
|
||||
function lin_random(abs) {
|
||||
t.server.linearize({tree:abs[0].tree,to:t.current.from},show_random);
|
||||
}
|
||||
t.server.get_random({},lin_random);
|
||||
}
|
||||
|
||||
Minibar.prototype.add_words=function(s) {
|
||||
with(this) {
|
||||
var ws=s.split(" ");
|
||||
for(var i=0;i<ws.length;i++)
|
||||
add_word1(ws[i]+" ");
|
||||
get_completions();
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.word=function(s) {
|
||||
var t=this;
|
||||
function click_word() {
|
||||
if(t.surface.typed) t.surface.typed.value="";
|
||||
t.add_word(s);
|
||||
}
|
||||
return button(s,click_word);
|
||||
}
|
||||
|
||||
Minibar.prototype.add_word=function(s) {
|
||||
with(this) {
|
||||
add_word1(s+" ");
|
||||
if(surface.typed) {
|
||||
var s2;
|
||||
if(hasPrefix(s2=surface.typed.value,s)) {
|
||||
s2=s2.substr(s.length);
|
||||
while(s2.length>0 && s2[0]==" ") s2=s2.substr(1);
|
||||
surface.typed.value=s2;
|
||||
}
|
||||
else surface.typed.value="";
|
||||
}
|
||||
get_completions();
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.add_word1=function(s) {
|
||||
with(this) {
|
||||
previous={ input: current.input, previous: previous };
|
||||
current.input+=s;
|
||||
var w=span_class("word",text(s));
|
||||
if(surface.typed) surface.insertBefore(w,surface.typed);
|
||||
else surface.appendChild(w);
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.delete_last=function() {
|
||||
with(this) {
|
||||
if(surface.typed && surface.typed.value!="")
|
||||
surface.typed.value="";
|
||||
else if(previous) {
|
||||
current.input=previous.input;
|
||||
previous=previous.previous;
|
||||
if(surface.typed) {
|
||||
surface.removeChild(surface.typed.previousSibling);
|
||||
surface.typed.focus();
|
||||
}
|
||||
else surface.removeChild(surface.lastChild);
|
||||
translations.innerHTML="";
|
||||
get_completions();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.tdt=function(tree_btn,txt) {
|
||||
with(this) {
|
||||
return options.show_trees ? tda([tree_btn,txt]) : td(txt);
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.show_translations=function(translationResults) {
|
||||
with(this) {
|
||||
var trans=translations;
|
||||
//var to=target_lang(); // wrong
|
||||
var to=to_menu.value;
|
||||
var cnt=translationResults.length;
|
||||
//trans.translations=translations;
|
||||
trans.single_translation=[];
|
||||
trans.innerHTML="";
|
||||
/*
|
||||
trans.appendChild(wrap("h3",text(cnt<1 ? "No translations?" :
|
||||
cnt>1 ? ""+cnt+" translations:":
|
||||
"One translation:")));
|
||||
*/
|
||||
for(p=0;p<cnt;p++) {
|
||||
var tra=translationResults[p];
|
||||
if (tra.translations != null) {
|
||||
for (q = 0; q < tra.translations.length; q++) {
|
||||
var t = tra.translations[q];
|
||||
var lin=t.linearizations;
|
||||
var tbody=empty("tbody");
|
||||
if(options.show_abstract && t.tree)
|
||||
tbody.appendChild(
|
||||
tr([th(text("Abstract: ")),
|
||||
tdt(node("span",{},[abstree_button(t.tree),
|
||||
alignment_button(t.tree)]),
|
||||
text(" "+t.tree))]));
|
||||
for(var i=0;i<lin.length;i++) {
|
||||
if(lin[i].to==to)
|
||||
trans.single_translation.push(lin[i].text);
|
||||
if(to=="All" || lin[i].to==to)
|
||||
tbody.appendChild(tr([th(text(langpart(lin[i].to,grammar.name)+": ")),
|
||||
tdt(parsetree_button(t.tree,lin[i].to),
|
||||
text(lin[i].text))]));
|
||||
}
|
||||
trans.appendChild(wrap("table",tbody));
|
||||
}
|
||||
}
|
||||
else if(tra.typeErrors) {
|
||||
var errs=tra.typeErrors;
|
||||
for(var i=0;i<errs.length;i++)
|
||||
trans.appendChild(wrap("pre",text(errs[i].msg)))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Minibar.prototype.show_groupedtranslations=function(translationsResult) {
|
||||
with(this) {
|
||||
var trans=translations;
|
||||
var to=target_lang();
|
||||
//var to=to_menu.value // wrong
|
||||
var cnt=translationsResult.length;
|
||||
//trans.translations=translationsResult;
|
||||
trans.single_translation=[];
|
||||
trans.innerHTML="";
|
||||
for(p=0;p<cnt;p++) {
|
||||
var t=translationsResult[p];
|
||||
if(to=="All" || t.to==to) {
|
||||
var lin=t.linearizations;
|
||||
var tbody=empty("tbody");
|
||||
if(to=="All") tbody.appendChild(tr([th(text(t.to+":"))]));
|
||||
for(var i=0;i<lin.length;i++) {
|
||||
if(to!="All") trans.single_translation[i]=lin[i].text;
|
||||
tbody.appendChild(tr([td(text(lin[i].text))]));
|
||||
if (lin.length > 1) tbody.appendChild(tr([td(text(lin[i].tree))]));
|
||||
}
|
||||
trans.appendChild(wrap("table",tbody));
|
||||
}
|
||||
}
|
||||
input.change_grammar(grammar)
|
||||
translations.change_grammar(grammar)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -469,48 +138,13 @@ Minibar.prototype.open_help=function() {
|
||||
Minibar.prototype.open_feedback=function() {
|
||||
with(this) {
|
||||
// make the minibar state easily accessible from the feedback page:
|
||||
minibar.state={grammar:grammar,current:current,to:to_menu.value,
|
||||
translations:translations};
|
||||
minibar.state={grammar:grammar,current:input.current,
|
||||
to:translations.to_menu.value,
|
||||
translations:translations.translations};
|
||||
open_popup(options.feedback_url,'feedback');
|
||||
}
|
||||
}
|
||||
|
||||
function update_language_menu(menu,grammar) {
|
||||
// Replace the options in the menu with the languages in the grammar
|
||||
var lang=grammar.languages;
|
||||
menu.innerHTML="";
|
||||
|
||||
for(var i=0; i<lang.length; i++) {
|
||||
var ln=lang[i].name;
|
||||
if(!hasPrefix(ln,"Disamb")) {
|
||||
var lp=langpart(ln,grammar.name);
|
||||
menu.appendChild(option(lp,ln));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function set_initial_language(options,menu,grammar) {
|
||||
if(grammar.userLanguage) menu.value=grammar.userLanguage;
|
||||
else if(options.default_source_language) {
|
||||
for(var i=0;i<menu.options.length;i++) {
|
||||
var o=menu.options[i].value;
|
||||
var l=langpart(o,grammar.name);
|
||||
if(l==options.default_source_language) menu.value=o;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function langpart(conc,abs) { // langpart("FoodsEng","Foods") == "Eng"
|
||||
return hasPrefix(conc,abs) ? conc.substr(abs.length) : conc;
|
||||
}
|
||||
|
||||
function button_img(url,action) {
|
||||
var i=img(url);
|
||||
i.setAttribute("class","button");
|
||||
i.setAttribute("onclick",action);
|
||||
return i;
|
||||
}
|
||||
|
||||
function abstree_button(abs) {
|
||||
var i=button_img(tree_icon,"toggle_img(this)");
|
||||
i.title="Click to display abstract syntax tree"
|
||||
@@ -533,25 +167,6 @@ function parsetree_button(abs,lang) {
|
||||
return i;
|
||||
}
|
||||
|
||||
function toggle_img(i) {
|
||||
var tmp=i.src;
|
||||
i.src=i.other;
|
||||
i.other=tmp;
|
||||
}
|
||||
|
||||
function open_popup(url,target) {
|
||||
var w=window.open(url,target,'toolbar=no,location=no,status=no,menubar=no');
|
||||
w.focus();
|
||||
}
|
||||
|
||||
function setField(form,name,value) {
|
||||
form[name].value=value;
|
||||
var el=element(name);
|
||||
if(el) el.innerHTML=value;
|
||||
}
|
||||
|
||||
function opener_element(id) { with(window.opener) return element(id); }
|
||||
|
||||
// This function is called from feedback.html
|
||||
function prefill_feedback_form() {
|
||||
var state=opener_element("minibar").state;
|
||||
|
||||
266
src/runtime/javascript/minibar/minibar_input.js
Normal file
266
src/runtime/javascript/minibar/minibar_input.js
Normal file
@@ -0,0 +1,266 @@
|
||||
|
||||
/* --- Input object --------------------------------------------------------- */
|
||||
|
||||
function Input(server,options,translations) {
|
||||
// Input object constructor
|
||||
this.options=options;
|
||||
this.server=server;
|
||||
this.translations=translations;
|
||||
this.main=empty("div");
|
||||
this.menus=empty("span");
|
||||
this.buttons=empty("span");
|
||||
this.surface=div_id("surface");
|
||||
this.words=div_id("words");
|
||||
this.from_menu=empty("select");
|
||||
|
||||
with(this) {
|
||||
appendChildren(main,[surface,words]);
|
||||
appendChildren(menus,[text(" From: "),from_menu])
|
||||
appendChildren(buttons,
|
||||
[button(options.delete_button_text,bind(delete_last,this),"H"),
|
||||
button("Clear",bind(clear_all,this),"L")]);
|
||||
if(options.random_button)
|
||||
buttons.appendChild(button("Random",bind(generate_random,this),"R"));
|
||||
}
|
||||
|
||||
/* --- Input client state initialization --- */
|
||||
this.current={from: null, input: ""};
|
||||
this.previous=null;
|
||||
|
||||
this.from_menu.onchange=bind(this.change_language,this);
|
||||
}
|
||||
|
||||
Input.prototype.change_grammar=function (grammar) {
|
||||
update_language_menu(this.from_menu,grammar);
|
||||
set_initial_language(this.options,this.from_menu,grammar);
|
||||
this.change_language();
|
||||
}
|
||||
|
||||
Input.prototype.change_language=function () {
|
||||
this.current.from=this.from_menu.value;
|
||||
this.clear_all();
|
||||
}
|
||||
|
||||
|
||||
Input.prototype.clear_all1=function() {
|
||||
with(this) {
|
||||
remove_typed_input();
|
||||
current.input="";
|
||||
previous=null;
|
||||
surface.innerHTML="";
|
||||
translations.clear();
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.clear_all=function() {
|
||||
with(this) {
|
||||
clear_all1();
|
||||
get_completions();
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.get_completions=function() {
|
||||
with(this) {
|
||||
//debug("get_completions ");
|
||||
words.innerHTML="...";
|
||||
server.complete({from:current.from,input:current.input},
|
||||
bind(show_completions,this));
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.show_completions=function(complete_output) {
|
||||
with(this) {
|
||||
//debug("show_completions ");
|
||||
var completions=complete_output[0].completions;
|
||||
var emptycnt=add_completions(completions)
|
||||
if(true/*emptycnt>0*/) translations.translateFrom(current);
|
||||
else translations.clear();
|
||||
if(surface.typed && emptycnt==completions.length) {
|
||||
if(surface.typed.value=="") remove_typed_input();
|
||||
}
|
||||
else add_typed_input();
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.add_completions=function(completions) {
|
||||
with(this) {
|
||||
if(words.timeout) clearTimeout(words.timeout),words.timeout=null;
|
||||
words.innerHTML="";
|
||||
words.completions=completions;
|
||||
words.word=[];
|
||||
var t=surface.typed ? surface.typed.value : "";
|
||||
var emptycnt=0;
|
||||
for(var i=0;i<completions.length;i++) {
|
||||
var s=completions[i];
|
||||
if(s.length>0) {
|
||||
var w=word(s);
|
||||
words.appendChild(w);
|
||||
words.word[i]=w;
|
||||
}
|
||||
else emptycnt++;
|
||||
}
|
||||
filter_completions(t,true);
|
||||
return emptycnt;
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.filter_completions=function(t,dim) {
|
||||
with(this) {
|
||||
if(words.timeout) clearTimeout(words.timeout),words.timeout=null;
|
||||
words.filtered=t;
|
||||
//if(dim) debug('filter "'+t+'"');
|
||||
var w=words.word;
|
||||
words.count=0;
|
||||
var dimmed=0;
|
||||
var prefix=""; // longest common prefix, for completion
|
||||
for(var i=0;i<w.length;i++) {
|
||||
var s=words.completions[i];
|
||||
var keep=hasPrefix(s,t);
|
||||
if(keep) {
|
||||
if(words.count==0) prefix=s;
|
||||
else prefix=(commonPrefix(prefix,s));
|
||||
words.count++;
|
||||
}
|
||||
if(dim) {
|
||||
w[i].style.opacity= keep ? "1" : "0.5";
|
||||
if(keep) w[i].style.display="inline";
|
||||
else dimmed++;
|
||||
}
|
||||
else
|
||||
w[i].style.display=keep ? "inline" : "none";
|
||||
}
|
||||
words.theword=prefix;
|
||||
if(dimmed>0)
|
||||
words.timeout=setTimeout(function(){ filter_completions(t,false)},1000);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Input.prototype.add_typed_input=function() {
|
||||
with(this) {
|
||||
if(!surface.typed) {
|
||||
var inp=empty("input","type","text");
|
||||
inp.value="";
|
||||
inp.setAttribute("accesskey","t");
|
||||
inp.style.width="10em";
|
||||
inp.onkeyup=bind(complete_typed,this);
|
||||
surface.appendChild(inp);
|
||||
surface.typed=inp;
|
||||
inp.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.remove_typed_input=function() {
|
||||
with(this) {
|
||||
if(surface.typed) {
|
||||
surface.typed.parentNode.removeChild(surface.typed);
|
||||
surface.typed=null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.complete_typed=function(event) {
|
||||
with(this) {
|
||||
//element("debug").innerHTML=show_props(event,"event");
|
||||
var inp=surface.typed;
|
||||
//debug('"'+inp.value+'"');
|
||||
var s=inp.value;
|
||||
var ws=s.split(" ");
|
||||
if(ws.length>1 || event.keyCode==13) {
|
||||
if(ws[0]!=words.filtered) filter_completions(ws[0],true);
|
||||
if(words.count==1) add_word(words.theword);
|
||||
else if(elem(ws[0],words.completions)) add_word(ws[0]);
|
||||
else if(words.theword.length>ws[0].length) inp.value=words.theword;
|
||||
}
|
||||
else if(s!=words.filtered) filter_completions(s,true)
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.generate_random=function() {
|
||||
var t=this;
|
||||
function show_random(random) {
|
||||
t.clear_all1();
|
||||
t.add_words(random[0].text);
|
||||
}
|
||||
|
||||
function lin_random(abs) {
|
||||
t.server.linearize({tree:abs[0].tree,to:t.current.from},show_random);
|
||||
}
|
||||
t.server.get_random({},lin_random);
|
||||
}
|
||||
|
||||
Input.prototype.add_words=function(s) {
|
||||
with(this) {
|
||||
var ws=s.split(" ");
|
||||
for(var i=0;i<ws.length;i++)
|
||||
add_word1(ws[i]+" ");
|
||||
get_completions();
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.word=function(s) {
|
||||
var t=this;
|
||||
function click_word() {
|
||||
if(t.surface.typed) t.surface.typed.value="";
|
||||
t.add_word(s);
|
||||
}
|
||||
return button(s,click_word);
|
||||
}
|
||||
|
||||
Input.prototype.add_word=function(s) {
|
||||
with(this) {
|
||||
add_word1(s+" ");
|
||||
if(surface.typed) {
|
||||
var s2;
|
||||
if(hasPrefix(s2=surface.typed.value,s)) {
|
||||
s2=s2.substr(s.length);
|
||||
while(s2.length>0 && s2[0]==" ") s2=s2.substr(1);
|
||||
surface.typed.value=s2;
|
||||
}
|
||||
else surface.typed.value="";
|
||||
}
|
||||
get_completions();
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.add_word1=function(s) {
|
||||
with(this) {
|
||||
previous={ input: current.input, previous: previous };
|
||||
current.input+=s;
|
||||
var w=span_class("word",text(s));
|
||||
if(surface.typed) surface.insertBefore(w,surface.typed);
|
||||
else surface.appendChild(w);
|
||||
}
|
||||
}
|
||||
|
||||
Input.prototype.delete_last=function() {
|
||||
with(this) {
|
||||
if(surface.typed && surface.typed.value!="")
|
||||
surface.typed.value="";
|
||||
else if(previous) {
|
||||
current.input=previous.input;
|
||||
previous=previous.previous;
|
||||
if(surface.typed) {
|
||||
surface.removeChild(surface.typed.previousSibling);
|
||||
surface.typed.focus();
|
||||
}
|
||||
else surface.removeChild(surface.lastChild);
|
||||
translations.clear();
|
||||
get_completions();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Auxiliary functions -------------------------------------------------- */
|
||||
|
||||
function set_initial_language(options,menu,grammar) {
|
||||
if(grammar.userLanguage) menu.value=grammar.userLanguage;
|
||||
else if(options.default_source_language) {
|
||||
for(var i=0;i<menu.options.length;i++) {
|
||||
var o=menu.options[i].value;
|
||||
var l=langpart(o,grammar.name);
|
||||
if(l==options.default_source_language) menu.value=o;
|
||||
}
|
||||
}
|
||||
}
|
||||
46
src/runtime/javascript/minibar/minibar_support.js
Normal file
46
src/runtime/javascript/minibar/minibar_support.js
Normal file
@@ -0,0 +1,46 @@
|
||||
|
||||
/* --- Auxiliary functions -------------------------------------------------- */
|
||||
|
||||
function langpart(conc,abs) { // langpart("FoodsEng","Foods") == "Eng"
|
||||
return hasPrefix(conc,abs) ? conc.substr(abs.length) : conc;
|
||||
}
|
||||
|
||||
function update_language_menu(menu,grammar) {
|
||||
// Replace the options in the menu with the languages in the grammar
|
||||
var lang=grammar.languages;
|
||||
menu.innerHTML="";
|
||||
|
||||
for(var i=0; i<lang.length; i++) {
|
||||
var ln=lang[i].name;
|
||||
if(!hasPrefix(ln,"Disamb")) {
|
||||
var lp=langpart(ln,grammar.name);
|
||||
menu.appendChild(option(lp,ln));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function button_img(url,action) {
|
||||
var i=img(url);
|
||||
i.setAttribute("class","button");
|
||||
i.setAttribute("onclick",action);
|
||||
return i;
|
||||
}
|
||||
|
||||
function toggle_img(i) {
|
||||
var tmp=i.src;
|
||||
i.src=i.other;
|
||||
i.other=tmp;
|
||||
}
|
||||
|
||||
function setField(form,name,value) {
|
||||
form[name].value=value;
|
||||
var el=element(name);
|
||||
if(el) el.innerHTML=value;
|
||||
}
|
||||
|
||||
function open_popup(url,target) {
|
||||
var w=window.open(url,target,'toolbar=no,location=no,status=no,menubar=no');
|
||||
w.focus();
|
||||
}
|
||||
|
||||
function opener_element(id) { with(window.opener) return element(id); }
|
||||
127
src/runtime/javascript/minibar/minibar_translations.js
Normal file
127
src/runtime/javascript/minibar/minibar_translations.js
Normal file
@@ -0,0 +1,127 @@
|
||||
/* --- Translations object -------------------------------------------------- */
|
||||
|
||||
function Translations(server,options) {
|
||||
this.server=server;
|
||||
this.options=options;
|
||||
|
||||
this.main=empty("div");
|
||||
this.menus=empty("span");
|
||||
|
||||
this.to_menu=empty_id("select","to_menu");
|
||||
|
||||
appendChildren(this.menus,[text(" To: "), this.to_menu])
|
||||
this.to_menu.onchange=bind(this.get_translations,this);
|
||||
|
||||
}
|
||||
|
||||
Translations.prototype.change_grammar=function(grammar) {
|
||||
this.grammar=grammar;
|
||||
|
||||
update_language_menu(this.to_menu,grammar);
|
||||
insertFirst(this.to_menu,option("All","All"));
|
||||
this.to_menu.value="All";
|
||||
}
|
||||
|
||||
Translations.prototype.clear=function() {
|
||||
this.main.innerHTML="";
|
||||
}
|
||||
|
||||
Translations.prototype.translateFrom=function(current) {
|
||||
this.current=current;
|
||||
this.get_translations();
|
||||
}
|
||||
|
||||
Translations.prototype.get_translations=function() {
|
||||
with(this) {
|
||||
var c=current;
|
||||
if(options.show_grouped_translations)
|
||||
server.translategroup({from:c.from,input:c.input},
|
||||
bind(show_groupedtranslations,this));
|
||||
else
|
||||
server.translate({from:c.from,input:c.input},
|
||||
bind(show_translations,this));
|
||||
}
|
||||
}
|
||||
|
||||
Translations.prototype.tdt=function(tree_btn,txt) {
|
||||
with(this) {
|
||||
return options.show_trees ? tda([tree_btn,txt]) : td(txt);
|
||||
}
|
||||
}
|
||||
|
||||
Translations.prototype.target_lang=function() {
|
||||
with(this) return langpart(to_menu.value,grammar.name);
|
||||
}
|
||||
|
||||
Translations.prototype.show_translations=function(translationResults) {
|
||||
with(this) {
|
||||
var trans=main;
|
||||
//var to=target_lang(); // wrong
|
||||
var to=to_menu.value;
|
||||
var cnt=translationResults.length;
|
||||
//trans.translations=translations;
|
||||
trans.single_translation=[];
|
||||
trans.innerHTML="";
|
||||
/*
|
||||
trans.appendChild(wrap("h3",text(cnt<1 ? "No translations?" :
|
||||
cnt>1 ? ""+cnt+" translations:":
|
||||
"One translation:")));
|
||||
*/
|
||||
for(p=0;p<cnt;p++) {
|
||||
var tra=translationResults[p];
|
||||
if (tra.translations != null) {
|
||||
for (q = 0; q < tra.translations.length; q++) {
|
||||
var t = tra.translations[q];
|
||||
var lin=t.linearizations;
|
||||
var tbody=empty("tbody");
|
||||
if(options.show_abstract && t.tree)
|
||||
tbody.appendChild(
|
||||
tr([th(text("Abstract: ")),
|
||||
tdt(node("span",{},[abstree_button(t.tree),
|
||||
alignment_button(t.tree)]),
|
||||
text(" "+t.tree))]));
|
||||
for(var i=0;i<lin.length;i++) {
|
||||
if(lin[i].to==to)
|
||||
trans.single_translation.push(lin[i].text);
|
||||
if(to=="All" || lin[i].to==to)
|
||||
tbody.appendChild(tr([th(text(langpart(lin[i].to,grammar.name)+": ")),
|
||||
tdt(parsetree_button(t.tree,lin[i].to),
|
||||
text(lin[i].text))]));
|
||||
}
|
||||
trans.appendChild(wrap("table",tbody));
|
||||
}
|
||||
}
|
||||
else if(tra.typeErrors) {
|
||||
var errs=tra.typeErrors;
|
||||
for(var i=0;i<errs.length;i++)
|
||||
trans.appendChild(wrap("pre",text(errs[i].msg)))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Translations.prototype.show_groupedtranslations=function(translationsResult) {
|
||||
with(this) {
|
||||
var trans=main;
|
||||
var to=target_lang();
|
||||
//var to=to_menu.value // wrong
|
||||
var cnt=translationsResult.length;
|
||||
//trans.translations=translationsResult;
|
||||
trans.single_translation=[];
|
||||
trans.innerHTML="";
|
||||
for(p=0;p<cnt;p++) {
|
||||
var t=translationsResult[p];
|
||||
if(to=="All" || t.to==to) {
|
||||
var lin=t.linearizations;
|
||||
var tbody=empty("tbody");
|
||||
if(to=="All") tbody.appendChild(tr([th(text(t.to+":"))]));
|
||||
for(var i=0;i<lin.length;i++) {
|
||||
if(to!="All") trans.single_translation[i]=lin[i].text;
|
||||
tbody.appendChild(tr([td(text(lin[i].text))]));
|
||||
if (lin.length > 1) tbody.appendChild(tr([td(text(lin[i].tree))]));
|
||||
}
|
||||
trans.appendChild(wrap("table",tbody));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,9 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
|
||||
<meta charset="UTF-8">
|
||||
<title>Phrasebook</title>
|
||||
<link rel=stylesheet type="text/css" href="minibar.css">
|
||||
<script type="text/JavaScript" src="support.js"></script>
|
||||
<script type="text/JavaScript" src="pgf_online.js"></script>
|
||||
<script type="text/JavaScript" src="minibar.js"></script>
|
||||
<meta charset="UTF-8">
|
||||
<meta name = "viewport" content = "width = device-width">
|
||||
</head>
|
||||
|
||||
@@ -24,13 +20,20 @@ see <a href="http://www.grammaticalframework.org/examples/phrasebook/doc-phraseb
|
||||
|
||||
</small>
|
||||
|
||||
<script type="text/JavaScript" src="support.js"></script>
|
||||
<script type="text/JavaScript" src="minibar.js"></script>
|
||||
<script type="text/JavaScript" src="minibar_input.js"></script>
|
||||
<script type="text/JavaScript" src="minibar_translations.js"></script>
|
||||
<script type="text/JavaScript" src="minibar_support.js"></script>
|
||||
<script type="text/JavaScript" src="pgf_online.js"></script>
|
||||
|
||||
<script type="text/JavaScript">
|
||||
|
||||
var online_options={
|
||||
// grammars_url: "http://www.grammaticalframework.org/grammars/",
|
||||
//grammars_url: "http://tournesol.cs.chalmers.se:41296/grammars",
|
||||
grammars_url: "http://localhost:41296/grammars/",
|
||||
grammar_list: ["Phrasebook.pgf"], // leave undefined to get list from server
|
||||
//grammars_url: "http://localhost:41296/grammars/",
|
||||
grammar_list: ["Phrasebook.pgf"] // leave undefined to get list from server
|
||||
}
|
||||
|
||||
var server=pgf_online(online_options);
|
||||
|
||||
Reference in New Issue
Block a user