Some work on minibar:

1. Menu for choosing target language.
2. Pass options when calling start_minibar.
See about.html for more details.
This commit is contained in:
hallgren
2010-04-19 16:48:26 +00:00
parent bc504835d2
commit d1088d12bc
4 changed files with 81 additions and 35 deletions

View File

@@ -26,10 +26,10 @@ Some implementation details:
and Android Opera Mini 4.2.
</ul>
It does not seem work in Internet Explorer 7
(there are both styling and scripting issues).
(there are both styling and scripting issues). There seems to be some rendering bugs
in Chrome 5.0.342.9 β.
<li>The implementation consist of two JavaScript files:
<a href="minibar.js">minibar.js</a> (186 lines)
and <a href="support.js">support.js</a> (147 lines).
<a href="minibar.js">minibar.js</a> and <a href="support.js">support.js</a>
The latter is also used in a small web app based on the
<a href="http://spraakbanken.gu.se/sal/ws/">SALDO web services</a>.
<li>To access the GF web service, it uses the
@@ -60,11 +60,29 @@ Some implementation details:
you can click on to see a drawing of an abstract syntax tree or a parse tree. If you click
on a drawing it collapses back into a tree icon.
</ul>
Work in progress:
<ul>
<li>[Added 2010-04-09] Preparations to support different ways to access the grammar:
currently we access a PGF server via JSONP, but I would also like to support AJAX,
and local/downloaded JavaScript grammars.
<li>[Added 2010-04-19] A text entry field appears when you click in
the sentence area (with a dashed border). This allows you to enter words by typing on
the keyboard. As you start typing word magnets that don't match what you are typing
are removed. When only one magnet remains, you can press enter to complete the word.
<li>[Added 2010-04-19] There is a menu for choosing the output language:
you can pick "All" to translate to all available languages, or pick one particular
language.
<li>[Added 2010-04-19] You can pass options to the function <code>start_minibar</code>
to customize the user interface. The default is
<code>{show_abstract:true,show_trees:true}</code> to show the abstract syntax of parsed
sentences, and to show icons that expand to syntax/parse trees next each translation.
These features can be turned off by setting the fields to <code>false</code>.
</ul>
<hr>
<address>
<a href="http://www.cs.chalmers.se/~hallgren/">TH</a>
<img src="http://www.altocumulus.org/~hallgren/online.cgi?icon" alt=""></address>
</address>
<!-- hhmts start --> Last modified: Thu Mar 25 15:06:22 CET 2010 <!-- hhmts end -->
<!-- hhmts start --> Last modified: Mon Apr 19 18:43:48 CEST 2010 <!-- hhmts end -->
</body> </html>

View File

@@ -6,7 +6,7 @@
<script type="text/JavaScript" src="minibar.js"></script>
</head>
<body onload="start_minibar()">
<body onload="start_minibar({show_abstract:false, show_trees: false})">
<h1>Minibar</h1>
<div id=minibar>
</div>
@@ -18,7 +18,7 @@
&amp; <a href="http://www.grammaticalframework.org:41296/translate/">Translator</a>]
</small>
<small class=modtime>
HTML <!-- hhmts start --> Last modified: Tue Feb 23 20:25:50 CET 2010 <!-- hhmts end -->
HTML <!-- hhmts start --> Last modified: Mon Apr 19 18:16:40 CEST 2010 <!-- hhmts end -->
</small>
<address>
<a href="http://www.cs.chalmers.se/~hallgren/">TH</a>

View File

@@ -9,6 +9,11 @@ var grammars_url=server+"/grammars/";
var tree_icon=server+"/translate/se.chalmers.cs.gf.gwt.TranslateApp/tree-btn.png";
var options={
show_abstract: true,
show_trees: true
}
/* --- Grammar access object ------------------------------------------------ */
var server = {
@@ -52,7 +57,9 @@ var server = {
/* --- Initialisation ------------------------------------------------------- */
function start_minibar() { // typically called when the HTML document is loaded
function start_minibar(opts) { // typically called when the HTML document is loaded
if(opts) for(var o in opts) options[o]=opts[o];
var surface=div_id("surface");
surface.setAttribute("onclick","surface_click(this)");
appendChildren(element("minibar"),
@@ -79,8 +86,8 @@ function show_grammarlist(grammars) {
menubar.innerHTML="Grammar: ";
appendChildren(menubar,
[menu,
text(" Input language: "),
empty_id("select","language_menu"),
text(" From: "), empty_id("select","language_menu"),
text(" To: "), empty_id("select","to_menu"),
button("Clear","clear_all()"),
button("⌫","delete_last()"),
button("Random","generate_random()")]);
@@ -96,22 +103,30 @@ function select_grammar(grammar_name) {
server.get_languages("show_languages");
}
function langpart(conc,abs) { // langpart("FoodsEng","Food") == "Eng"
return conc.indexOf(abs)==0 ? conc.substring(abs.length) : conc;
}
function show_languages(grammar) {
var r="";
var lang=grammar.languages;
var menu=element("language_menu");
menu.setAttribute("onchange","new_language(this)");
menu.grammar=grammar;
menu.innerHTML="";
for(var i=0; i<lang.length; i++) {
if(lang[i].canParse) {
var opt=empty("option");
opt.setAttribute("value",""+i);
opt.innerHTML=lang[i].name;
menu.appendChild(opt);
}
}
new_language(menu);
var r="";
var lang=grammar.languages;
var menu=element("language_menu");
menu.setAttribute("onchange","new_language(this)");
menu.grammar=grammar;
menu.innerHTML="";
for(var i=0; i<lang.length; i++)
if(lang[i].canParse)
menu.appendChild(option(langpart(lang[i].name,grammar.name),""+i));
var to=element("to_menu");
to.langmenu=menu;
to.setAttribute("onchange","change_tolang(this)");
to.innerHMTL="";
to.appendChild(option("All","-1"));
for(var i=0; i<lang.length; i++)
to.appendChild(option(langpart(lang[i].name,grammar.name),lang[i].name));
new_language(menu);
}
function new_language(menu) {
@@ -121,6 +136,10 @@ function new_language(menu) {
clear_all();
}
function change_tolang(to_menu) {
get_translations(to_menu.langmenu)
}
function clear_all1() {
var menu=element("language_menu");
menu.current.input="";
@@ -252,17 +271,18 @@ function show_completions(completions) {
function get_translations(menu) {
server.translate(menu.current.from,menu.current.input,"show_translations");
/*
jsonp(server.current_grammar_url
+"?command=translate"
+"&from="+encodeURIComponent(menu.current.from)
+"&input="+encodeURIComponent(menu.current.input),
"show_translations")
*/
}
function tdt(tree_btn,txt) {
return options.show_trees ? tda([tree_btn,txt]) : td(txt);
}
function show_translations(translations) {
var trans=element("translations");
var menu=element("language_menu");
var grammar=menu.grammar;
var to_menu=element("to_menu");
var to=to_menu.options[to_menu.selectedIndex].value
var cnt=translations.length;
trans.innerHTML="";
trans.appendChild(wrap("h3",text(cnt<1 ? "No translations?" :
@@ -272,12 +292,14 @@ function show_translations(translations) {
var t=translations[p];
var lin=t.linearizations;
var tbody=empty("tbody");
if(t.tree)
if(options.show_abstract && t.tree)
tbody.appendChild(tr([th(text("Abstract: ")),
tda([abstree_button(t.tree),text(" "+t.tree)])]));
tdt(abstree_button(t.tree),text(" "+t.tree))]));
for(var i=0;i<lin.length;i++)
tbody.appendChild(tr([th(text(lin[i].to+": ")),
tda([parsetree_button(t.tree,lin[i].to),text(lin[i].text)])]));
if(to=="-1" || 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));
}
}

View File

@@ -74,6 +74,12 @@ function button(label,action) {
return el;
}
function option(label,value) {
var el=empty("option","value",value);
el.innerHTML=label;
return el;
}
function appendChildren(el,cs) {
for(var i=0;i<cs.length;i++)
el.appendChild(cs[i]);