translator: adding "Parallel texts" view

This is in addition to the existing "Segment by Segment" view.
Also some minor documentation updates.

src/www/gfse/TODO

@@ -41,3 +41,6 @@
 + Bug! The startcat menu shows the first category by default, but the startcat
   flag is actually not set until a selection is made from the menu.
 
+- Bug! In Opera it seems that grammars are sent with the wrong character	
+  encoding to the server, preventing grammars containing ÅÄÖ or other non-ASCII
+  characters from working.

src/www/index.html

@@ -24,6 +24,7 @@
   <li><a href="minibar/about.html">About Minibar</a>
   <li><a href="minibar/minibar-api.html">Minibar API documentation</a>
   <li><a href="gfse/about.html">About the online grammar editor</a>
+  <li><a href="translator/about.html">About the simple translation tool</a>
   <li><a href="minibar/gf-web-api-examples.html">PGF web service API examples</a>
 </ul>
 

src/www/translator/about.html

@@ -32,14 +32,18 @@ closed and reopened later.
 
 <h2>TODO</h2>
 <ul>
-  <li>Test for browser compatibility (Safari &amp; Firefox tested so far).
+  <li>Text can be imported/exported by copying and pasting, but other ways
+  could be added.
+  <li>Segmentation of imported text based on punctuation. (Currently, segments
+  must be separated by line breaks or blank lines.)
   <li>GF's lexer/unlexer is used to allow for more natural looking text, but
   the unlexer does the wrong thing if the first word of a sentence is supposed
   to be capitalized, e.g. "I am ready." and "Spanish wine is good."
-  <li>Import/export text.
   <li>Cloud service.
   <li>Interface to other translation services.
   <li>Interface to grammar editor for grammar extension.
+  <li>More browser compatibility testing (Chrome,  Firefox &amp; Safari tested
+  so far).
   <li>...
   <li>...
 </ul>
@@ -47,7 +51,7 @@ closed and reopened later.
 
 <hr>
 <div class=modtime><small>
-<!-- hhmts start --> Last modified: Wed May 16 16:56:22 CEST 2012 <!-- hhmts end -->
+<!-- hhmts start --> Last modified: Sun May 27 17:56:48 CEST 2012 <!-- hhmts end -->
   </small></div>
 <address>
 <a href="http://www.cse.chalmers.se/~hallgren/">TH</a>

src/www/translator/index.html

@@ -28,7 +28,8 @@
       </dl>
     <td>View
       <dl>
-	<dt><label><input type=radio checked>Segment by segment</label>
+	<dt><label><input name=view value=segmentbysegment type=radio checked onchange="translator.change(this)">Segment by segment</label>
+	<dt><label><input name=view value=paralleltexts type=radio onchange="translator.change(this)">Parallel texts</label>
       </dl>
     <td>Options
       <dl>
@@ -69,7 +70,7 @@
 </div>
 <hr>
 <div class=modtime><small>HMTL
-<!-- hhmts start --> Last modified: Fri May 25 16:08:41 CEST 2012 <!-- hhmts end -->
+<!-- hhmts start --> Last modified: Sat May 26 13:23:57 CEST 2012 <!-- hhmts end -->
 </small></div>
 <a href="about.html">About</a>
 

src/www/translator/translator.css

@@ -31,7 +31,7 @@ div.document {
 div.document h2, div.document h3 { color: #009; }
 
 table.segments { margin-left: auto; margin-right: auto; }
-tr.segment:hover { background: #ffc; }
+.current_segment, .segment:hover { background: #ff9; }
 
 td.source, td.options, td.target {
     padding: 1ex;
@@ -52,6 +52,11 @@ td.source input[name=it], td.target input[name=it], textarea {
     width: 100%; font-family: inherit; font-size: inherit;
 }
 
+table.paralleltexts td {
+    vertical-align: baseline;
+    line-height: 130%;
+}
+
 div.document form { width: 100%; }
 
 span.arrow { color: blue; }

src/www/translator/translator.js

@@ -38,6 +38,7 @@ Translator.prototype.redraw=function() {
 	update_radiobutton("method",o.method)
 	update_radiobutton("source",o.from)
 	update_radiobutton("target",o.to)
+	update_radiobutton("view",o.view || "segmentbysegment")
 	if(o.method!="Manual") {
 	    function cont2(gr_info) {
 		t.grammar_info=gr_info
@@ -57,6 +58,7 @@ Translator.prototype.update_translations=function() {
     var o=doc.options
     var ss=doc.segments
     var ds=t.drawing.segments
+    var ts=t.drawing.targets
 
     function supported(concname) {
 	var l=t.grammar_info.languages
@@ -66,15 +68,22 @@ Translator.prototype.update_translations=function() {
 
     function update_translation(i) {
 	var segment=ss[i]
-	function replace(sd) {
+	function replace() {
+	    if(ds) {
+		var sd=t.draw_segment(segment,i)
 		var old=ds[i]
 		ds[i]=sd
 		replaceNode(sd,old)
 	    }
+	    else if(ts) {
+		clear(ts[i])
+		ts[i].appendChild(text(segment.target+" "))
+	    }
+	}
 	function upd3(txt) {
 	    segment.target=txt;
-	    segment.options=JSON.parse(JSON.stringify(o)) // no sharing!
+	    segment.options={method:o.method,from:o.from,to:o.to} // no sharing!
-	    replace(t.draw_segment(segment,i))
+	    replace()
 	}
 	function upd2(ts) {
 	    switch(ts.length) {
@@ -90,11 +99,11 @@ Translator.prototype.update_translations=function() {
 	function upd0(source) {
 	    t.server.translate({from:gfrom,to:gto,input:source},upd1)
 	}
-	var fs=supported(gfrom)
+	var fls=supported(gfrom)
-	var ts=supported(gto)
+	var tls=supported(gto)
-	if(fs && ts) {
+	if(fls && tls) {
 	    if(segment.options.method!="Manual" 
-	       && JSON.stringify(segment.options)!=JSON.stringify(o))
+	       && !eq_options(segment.options,o))
 		gfshell('ps -lextext "'+segment.source+'"',upd0)
 	}
 	else {
@@ -102,7 +111,7 @@ Translator.prototype.update_translations=function() {
 	    var tn=concname(o.to)
 	    var unsup=" is not supported by the grammar"
 	    var sup=" is supported by the grammar"
-	    var msg= fs ? tn+unsup : ts ? fn+unsup :
+	    var msg= fls ? tn+unsup : tls ? fn+unsup :
 		           "Neither "+fn+" nor "+tn+sup
 	    upd3("["+msg+"]")
 	}
@@ -140,6 +149,7 @@ Translator.prototype.change=function(el) {
     case "method": update("method"); break;
     case "source": update("from"); break;
     case "target": update("to"); break;
+    case "view": update("view"); break;
     }
 }
 
@@ -244,7 +254,7 @@ Translator.prototype.add_segment=function(el) {
 	var edit=wrap_class("tr","segment",source)
 
 	var ss=t.drawing.segments
-	var n=ss.length
+	var n=ss ? ss.length : 0
 	if(n>0) insertAfter(edit,ss[n-1])
 	else t.view.appendChild(wrap_class("table","segments",edit))
 
@@ -274,7 +284,7 @@ Translator.prototype.import=function(el) {
 	var lines=radiobutton("separator","lines",
 			      "Segments are separated by line breaks",null,true)
 	var paras=radiobutton("separator","paras",
-			      "Segments are separate by blank lines",null,false)
+			      "Segments are separated by blank lines",null,false)
 	var e=node("form",{onsubmit:done2},
 		   [wrap("h3",text("Import text")),
 		    inp,
@@ -350,16 +360,42 @@ type Method = "Manual" | GrammarName
 type GrammarName = String // e.g. "Foods.pgf"
 */
 
+function eq_options(o1,o2) {
+    return o1.method==o2.method && o1.from==o2.from && o1.to==o2.to
+}
+
 Translator.prototype.draw_document=function() {
     var t=this
     var doc=t.document
     var o=doc.options;
+    var hdr=wrap("h2",[text(doc.name),text(" "),
+		       wrap("small",draw_translation(o))])
+    switch(o.view || "segmentbysegment") {
+    case "paralleltexts":
+	function src(seg) { return seg.source }
+	function trg(seg) { return seg.target }
+	function fmt(txt,i) {
+	    var sd=span_class("segment",text(txt+" "))
+	    function setclass(cls) {
+		return function() {
+		    targets[i].className=sources[i].className=cls
+		}
+	    }
+	    sd.onmouseover=setclass("current_segment")
+	    sd.onmouseout=setclass("segment")
+	    return sd
+	}
+	var sources=mapix(fmt,map(src,doc.segments))
+	var targets=mapix(fmt,map(trg,doc.segments))
+	var drawing=[hdr,wrap_class("table","paralleltexts",
+				    tr([td(sources),td(targets)]))]
+	return {doc:drawing,sources:sources,targets:targets}
+    default:
 	var segments=mapix(bind(t.draw_segment,t),doc.segments)
-    var drawing=[node("h2",{},[text(doc.name),text(" "),
+	var drawing=[hdr,wrap_class("table","segments",segments)]
-			       wrap("small",draw_translation(o))]),
-		 wrap_class("table","segments",segments)]
 	return {doc:drawing,segments:segments}
     }
+}
 
 Translator.prototype.draw_segment=function(s,i) {
     var t=this