Some work on minibar:

1. Menu for choosing target language. 2. Pass options when calling start_minibar. See about.html for more details.
author: hallgren <hallgren@chalmers.se> 2010-04-19 16:48:26 +0000
committer: hallgren <hallgren@chalmers.se> 2010-04-19 16:48:26 +0000
commit: d1088d12bc6649522f01eca741146a4ab99f5db2 (patch)
tree: d44b244befc2fc8b2107b65599f86e41362ce1e3
parent: bc504835d2a960268560302014d3acf8b0bac631 (diff)
4 files changed, 81 insertions, 35 deletions
diff --git a/src/runtime/javascript/minibar/about.html b/src/runtime/javascript/minibar/about.html
index ceb18daf1..a7f275869 100644
--- a/src/runtime/javascript/minibar/about.html
+++ b/src/runtime/javascript/minibar/about.html
@@ -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>
diff --git a/src/runtime/javascript/minibar/minibar.html b/src/runtime/javascript/minibar/minibar.html
index 246a68214..345c91e0a 100644
--- a/src/runtime/javascript/minibar/minibar.html
+++ b/src/runtime/javascript/minibar/minibar.html
@@ -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>
diff --git a/src/runtime/javascript/minibar/minibar.js b/src/runtime/javascript/minibar/minibar.js
index e2747960c..124a7e1b9 100644
--- a/src/runtime/javascript/minibar/minibar.js
+++ b/src/runtime/javascript/minibar/minibar.js
@@ -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));
   }
 }
diff --git a/src/runtime/javascript/minibar/support.js b/src/runtime/javascript/minibar/support.js
index cd1618a63..f124d5194 100644
--- a/src/runtime/javascript/minibar/support.js
+++ b/src/runtime/javascript/minibar/support.js
@@ -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]);
author	hallgren <hallgren@chalmers.se>	2010-04-19 16:48:26 +0000
committer	hallgren <hallgren@chalmers.se>	2010-04-19 16:48:26 +0000
commit	d1088d12bc6649522f01eca741146a4ab99f5db2 (patch)
tree	d44b244befc2fc8b2107b65599f86e41362ce1e3
parent	bc504835d2a960268560302014d3acf8b0bac631 (diff)