From 5fc0e059c5b35ad426f361f37f28036d01f5b412 Mon Sep 17 00:00:00 2001 From: hallgren Date: Tue, 26 Oct 2010 12:42:33 +0000 Subject: minibar: restructured code and improved user interface * Keyboard input and completion should now work much more smoothly: + When you press space, the current word will be completed (if incomplete) and a new magnet will be created. If there is more than one possible completion, no magnet is created, but the common prefix of the possible completions is added to the text box. + Instead of asking the server for possible completions every time a new letter is added to the curent word, minibar only ask for completions for whole words and then filters the list locally when more letters are entered, speeding things up when server responses are slow. * Code restructuring: + The PGF server API has been moved to its own file: pgf_online.js. This allows it to be reused in other applicaitons without importing the entire minibar. It also allows minibar to be used with different server interfaces. + The minibar code has been rewritten to avoid storing state information in the document tree and accessing it by referring to named document elements. The code now also avoids using string literals contaning the names of top-level functions to specify event handlers for buttons and menus. (The code is no longer introspective, so alpha conversion will not change its meaning.) --- src/runtime/javascript/minibar/minibar.js | 760 +++++++++++++++--------------- 1 file changed, 378 insertions(+), 382 deletions(-) (limited to 'src/runtime/javascript/minibar/minibar.js') diff --git a/src/runtime/javascript/minibar/minibar.js b/src/runtime/javascript/minibar/minibar.js index 8febfb6a8..b96d7c56b 100644 --- a/src/runtime/javascript/minibar/minibar.js +++ b/src/runtime/javascript/minibar/minibar.js @@ -1,414 +1,435 @@ // minibar.js, assumes that support.js has also been loaded -/* --- Configuration -------------------------------------------------------- */ - - var default_server="http://www.grammaticalframework.org:41296" var tree_icon=default_server+"/translate/se.chalmers.cs.gf.gwt.TranslateApp/tree-btn.png"; -// default values for options: -var options={ - server: default_server, - grammars_url: null, // if left null, start_minibar() fills in server+"/grammars/" - grammar_list: null, // if left null, start_minibar() will fetch a list from the server - show_abstract: false, - show_trees: false, - show_grouped_translations: true, - delete_button_text: "⌫", - default_source_language: null, - try_google: true, - feedback_url: null, - random_button: true, - help_url: null -} - -/* --- Grammar access object ------------------------------------------------ */ - -var server = { - // State variables (private): - current_grammar_url: options.grammars_url+"Foods.pgf", - // Methods: - switch_grammar: function(grammar_name) { - this.current_grammar_url=options.grammars_url+grammar_name; - }, - get_grammarlist: function(cont) { - http_get_json(options.grammars_url+"grammars.cgi",cont); - }, - pgf_call: function(cmd,args,cont) { - var url=this.current_grammar_url+"?command="+cmd; - for(var arg in args) url+="&"+arg+"="+encodeURIComponent(args[arg]); - http_get_json(url,cont); - }, - - get_languages: function(cont) { - this.pgf_call("grammar",{},cont); - }, - - get_random: function(cont) { - this.pgf_call("random",{random:Math.random()},cont); - }, - linearize: function(tree,to,cont) { - this.pgf_call("linearize",{tree:tree,to:to},cont); - }, - complete: function(from,input,cont) { - this.pgf_call("complete",{from:from,input:input},cont); - }, - parse: function(from,input,cont) { - this.pgf_call("parse",{from:from,input:input},cont); - }, - translate: function(from,input,cont) { - this.pgf_call("translate",{from:from,input:input},cont); - }, - translategroup: function(from,input,cont) { - this.pgf_call("translategroup",{from:from,input:input},cont); +function start_minibar(server,opts,target) { + // Typically called when the HTML document is loaded + + /* --- Configuration ---------------------------------------------------- */ + + // default values for options: + var options={ + show_abstract: false, + show_trees: false, + show_grouped_translations: true, + delete_button_text: "⌫", + default_source_language: null, + try_google: true, + feedback_url: null, + random_button: true, + help_url: null } -}; + /* --- Creating user interface elements --------------------------------- */ -/* --- Initialisation ------------------------------------------------------- */ - -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"); var extra=div_id("extra"); - //surface.setAttribute("onclick","add_typed_input(this)"); - var minibar=element("minibar"); - minibar.innerHTML=""; - appendChildren(minibar, - [div_id("menubar"), - surface, - div_id("words"), - div_id("translations"), - extra]); - append_extra_buttons(extra); - if(!options.grammars_url) options.grammars_url=options.server+"/grammars/"; - if(options.grammar_list) show_grammarlist(options.grammar_list); - else server.get_grammarlist(show_grammarlist); -} + var menubar=div_id("menubar"); + var words=div_id("words"); + var translations=div_id("translations"); + var minibar=element(target || "minibar"); + minibar.innerHTML=""; + appendChildren(minibar,[menubar,surface,words,translations,extra]); + + // Added later: + var language_menu=empty_id("select","language_menu"); + var to_menu=empty_id("select","to_menu"); + + /* --- Minibar client state initialisation ------------------------------ */ + var current={from: null, input: ""}; + var previous=null; + + /* --- Auxiliary functions ---------------------------------------------- */ + + function show_grammarlist(grammars) { + //debug("show_grammarlist ") + menubar.innerHTML=""; + if(grammars.length>1) { + var menu=empty("select"); + for(var i=0;i1) { - var menu=empty("select"); - for(var i=0;i0*/) get_translations(); + else translations.innerHTML=""; + if(surface.typed && emptycnt==completions.length) { + if(surface.typed.value=="") remove_typed_input(); } + else add_typed_input(); } - else if(options.default_source_language) { - for(var i=0;i0) { + var w=word(s); + words.appendChild(w); + words.word[i]=w; + } + else emptycnt++; } + filter_completions(t,true); + return emptycnt; } - 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; i0) + words.timeout=setTimeout(function(){ filter_completions(t,false)},1000); + } + + function get_translations() { + var c=current; + if(options.show_grouped_translations) + server.translategroup(c.from,c.input,show_groupedtranslations); + else + server.translate(c.from,c.input,show_translations); + } -function delete_last() { - var menu=element("language_menu"); - if(menu.previous) { - menu.current.input=menu.previous.input; - menu.previous=menu.previous.previous; - var s=element("surface"); - if(s.typed) { - s.removeChild(s.typed.previousSibling); - s.typed.focus(); + function target_lang() { + return langpart(to_menu.options[to_menu.selectedIndex].value, + language_menu.grammar.name); } - else - s.removeChild(s.lastChild); - element("translations").innerHTML=""; - get_completions(menu); - } -} -function add_typed_input(surface) { - if(surface.typed) - inp=surface.typed; - else { - var inp=empty("input","type","text"); - inp.setAttribute("accesskey","t"); - inp.setAttribute("onkeyup","complete_typed(this)"); - inp.setAttribute("onchange","finish_typed(this)"); - surface.appendChild(inp); - surface.typed=inp; + function add_typed_input() { + var inp; + if(surface.typed) inp=surface.typed; + else { + inp=empty("input","type","text"); + inp.value=""; + inp.setAttribute("accesskey","t"); + inp.style.width="10em"; + inp.onkeyup=complete_typed; + surface.appendChild(inp); + surface.typed=inp; + } + inp.focus(); } - inp.focus(); -} -function remove_typed_input(surface) { - if(surface.typed) { - surface.typed.parentNode.removeChild(surface.typed); - surface.typed=null; + function remove_typed_input() { + if(surface.typed) { + surface.typed.parentNode.removeChild(surface.typed); + surface.typed=null; + } } -} -function complete_typed(inp) { - var menu=element("language_menu"); - var c=menu.current; - if(!inp.completing || inp.completing!=inp.value) { - inp.completing=inp.value; - server.complete(c.from,c.input+inp.value,show_completions); + function complete_typed(event) { + //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) } -} -function finish_typed(inp) { - //alert("finish_typed "+inp.value); - var box=element("words"); - var w=inp.value; - var keep=w.substr(0,w.length-box.completed_text.length); - if(box.completions.length==1) - add_words(keep+box.completions[0]); - else if(elem(w,box.completions)) - add_words(w); -} + function generate_random() { -function generate_random() { - server.get_random(lin_random); -} + function show_random(random) { + clear_all1(); + var menu=language_menu; + add_words(random[0].text); + } -function lin_random(abs) { - var menu=element("language_menu"); - var lang=menu.current.from; - server.linearize(abs[0].tree,lang,show_random); -} + function lin_random(abs) { + server.linearize(abs[0].tree,current.from,show_random); + } + server.get_random(lin_random); + } -function show_random(random) { - var menu=clear_all1(); - var words=random[0].text.split(" "); - for(var i=0;i0 && s2[0]==" ") s2=s2.substr(1); + surface.typed.value=s2; + } + else surface.typed.value=""; + } + get_completions(); + } + + function add_word1(s) { + 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); + } -function add_word1(menu,s) { - menu.previous={ input: menu.current.input, previous: menu.previous }; - menu.current.input+=s; - var w=span_class("word",text(s)); - var surface=element("surface"); - if(surface.typed) { - surface.typed.value=""; - surface.insertBefore(w,surface.typed); + function delete_last() { + 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(); + } } - else - surface.appendChild(w); -} -function add_word(s) { - var menu=element("language_menu"); - add_word1(menu,s+" "); - element("words").innerHTML="..."; - get_completions(menu); -} + function tdt(tree_btn,txt) { + return options.show_trees ? tda([tree_btn,txt]) : td(txt); + } -function add_words(s) { - var menu=element("language_menu"); - var words=s.split(" "); - for(var i=0;i1 ? ""+cnt+" translations:": + "One translation:"))); + */ + for(p=0;p 1) tbody.appendChild(tr([td(text(lin[i].tree))])); + } + trans.appendChild(wrap("table",tbody)); + } + } + } -function show_completions(complete_output) { - var box=element("words"); - var menu=element("language_menu"); - var prefixlen=menu.current.input.length; - var emptycnt=0; - var completions=complete_output[0].completions; - box.innerHTML=""; - box.completions=completions; - box.completed_text=complete_output[0].text; - for(var i=0;i0) box.appendChild(word(s)); - else emptycnt++; - } - if(true/*emptycnt>0*/) get_translations(menu); - else element("translations").innerHTML=""; - var surface=element("surface"); - if(surface.typed && emptycnt==completions.length) { - if(surface.typed.value=="") remove_typed_input(surface); - } - else add_typed_input(surface); -} + function append_extra_buttons(extra,options) { + if(options.try_google) + extra.appendChild(button("Try Google Translate",try_google)); + if(options.feedback_url) + appendChildren(extra,[text(" "),button("Feedback",open_feedback)]); + } -function get_translations(menu) { - var c=menu.current; - if(options.show_grouped_translations) - server.translategroup(c.from,c.input,show_groupedtranslations); - else - server.translate(c.from,c.input,show_translations); -} + function try_google() { + var to=target_lang(); + var grammar=language_menu.grammar; + var s=current.input; + if(surface.typed) s+=surface.typed.value; + var url="http://translate.google.com/?sl=" + +langpart(current.from,grammar.name); + if(to!="-1") url+="&tl="+to; + url+="&q="+encodeURIComponent(s); + window.open(url); + } + + function open_help() { open_popup(options.help_url,"help"); } + function open_feedback() { + language_menu.current=current; + open_popup(options.feedback_url,'feedback'); + } + + /* --- Main program, this gets things going ----------------------------- */ + append_extra_buttons(extra,options); -function tdt(tree_btn,txt) { - return options.show_trees ? tda([tree_btn,txt]) : td(txt); + if(server.grammar_list) show_grammarlist(server.grammar_list); + else server.get_grammarlist(show_grammarlist); } -function target_lang() { - var to_menu=element("to_menu"); - var grammar=element("language_menu").grammar; - return langpart(to_menu.options[to_menu.selectedIndex].value,grammar.name); +function commonPrefix(s1,s2) { + for(var i=0;i1 ? ""+cnt+" translations:": - "One translation:"))); - */ - for(p=0;p 1) tbody.appendChild(tr([td(text(lin[i].tree))])); - } - trans.appendChild(wrap("table",tbody)); - } - } +function langpart(conc,abs) { // langpart("FoodsEng","Food") == "Eng" + return hasPrefix(conc,abs) ? conc.substr(abs.length) : conc; } function abstree_button(abs) { @@ -432,36 +453,11 @@ function toggle_img(i) { i.other=tmp; } -function append_extra_buttons(extra) { - if(options.try_google) - extra.appendChild(button("Try Google Translate","try_google()")); - if(options.feedback_url) - appendChildren(extra,[text(" "),button("Feedback","open_feedback()")]); -} - -function try_google() { - var menu=element("language_menu"); - var trans=element("translations"); - var surface=element("surface"); - var to=target_lang(); - var grammar=menu.grammar; - var c=menu.current; - var s=c.input; - if(surface.typed) s+=surface.typed.value; - var url="http://translate.google.com/?sl="+langpart(c.from,grammar.name); - if(to!="-1") url+="&tl="+to; - url+="&q="+encodeURIComponent(s); - window.open(url); -} - function open_popup(url,target) { var w=window.open(url,target,'toolbar=no,location=no,status=no,menubar=no'); w.focus(); } -function open_help() { open_popup(options.help_url,"help"); } -function open_feedback() { open_popup(options.feedback_url,'feedback'); } - function setField(form,name,value) { form[name].value=value; var el=element(name); @@ -473,7 +469,7 @@ function opener_element(id) { with(window.opener) return element(id); } function prefill_feedback_form() { var to_menu=opener_element("to_menu"); var trans=opener_element("translations"); - var menu=to_menu.langmenu; + var menu=opener_element("language_menu") var grammar=menu.grammar; var gn=grammar.name; var form=document.forms.namedItem("feedback"); -- cgit v1.2.3