Wide Coverage Translation Demo: you can now reorder the application grammars

When selecting which application grammars to use for translation, after
pressing the "Grammars..." button, it is now possible to change the order
of the selected grammars by dragging them up and down in the list.

3 files changed, 43 insertions, 25 deletions

diff --git a/src/www/gfse/sort.js b/src/www/gfse/sort.js
index e2fc7ce90..4d8216c9c 100644
--- a/src/www/gfse/sort.js
+++ b/src/www/gfse/sort.js
@@ -17,11 +17,12 @@ function initialize_sorting(tagList,classList) {
     var sortable_class=listToSet(classList)
 
     function sortable(elem) {
-	return elem && (sortable_tag[elem.tagName]
-			  ? sortable_class[elem.className]
-			    ? elem
-			    : null
-			  : sortable(elem.parentNode))
+	return elem && elem.tagName!="INPUT" && elem.tagName!="BUTTON"
+	    && (sortable_tag[elem.tagName]
+		? sortable_class[elem.className]
+		? elem
+		: null
+		: sortable(elem.parentNode))
     }
 
     function move_element(elem,x,y) {
diff --git a/src/www/js/wc.js b/src/www/js/wc.js
index 99fcf2edb..2b7f6434d 100644
--- a/src/www/js/wc.js
+++ b/src/www/js/wc.js
@@ -456,31 +456,44 @@ wc.init_cnls=function() {
 wc.select_grammars=function() {
     function done() {
 	wc.hide_grammarbox()
+	var gs=[]
+	var glist=list.children
+	for(var i=0;i<glist.length;i++)
+	    if(glist[i].cb.checked) gs.push(glist[i].grammar)
+	wc.selected_cnls=gs
 	wc.local.put("cnls",wc.selected_cnls)
     }
-    function checkbox(grammar) {
+    function cancel() {
+	wc.hide_grammarbox()
+    }
+    function remove(x,xs) {
+	function other(y) { return y!=x; }
+	return filter(other,xs)
+    }
+    function checkbox(grammar,checked) {
 	var vb=node("input",{type:"checkbox"})
-	vb.checked=elem(grammar,wc.selected_cnls)
-	vb.onchange=function() {
-	    if(elem(grammar,wc.selected_cnls)) {
-		function other(g) { return g!=grammar }
-		if(!vb.checked) wc.selected_cnls=filter(other,wc.selected_cnls)
-	    }
-	    else {
-		if(vb.checked) {
-		    wc.selected_cnls.push(grammar)
-		    wc.init_cnl(grammar)
-		}
-	    }
-	}
+	vb.checked=checked
 	return vb
     }
-    function grammar_pick(grammar) {
-	return [checkbox(grammar),text(" "+grammar.split(".pgf")[0])]
+    function grammar_pick(grammar,checked) {
+	var cb=checkbox(grammar,checked)
+	var p=[cb,text(" "+grammar.split(".pgf")[0])]
+	var dt=node("dt",{class:"grammar_pick"},p)
+	dt.cb=cb
+	dt.grammar=grammar
+	return dt
     }
     function show_list(grammars) {
+	var sg=wc.selected_cnls
+	for(var i=0;i<sg.length;i++) {
+	    if(elem(sg[i],grammars))
+		list.appendChild(grammar_pick(sg[i],true))
+	    else
+		remove(sg[i],wc.selected_cnls)
+	}
 	for(var i=0;i<grammars.length;i++)
-	    list.appendChild(wrap("dt",grammar_pick(grammars[i])))
+	    if(!elem(grammars[i],wc.selected_cnls))
+		list.appendChild(grammar_pick(grammars[i],false))
     }
     
     clear(wc.grammarbox)
@@ -488,7 +501,8 @@ wc.select_grammars=function() {
     wc.grammarbox.appendChild(text("These grammars are tried before the wide-coverage grammar. They can give higher quality translations within their respective domains."))
     var list=empty("dl")
     wc.grammarbox.appendChild(list)
-    wc.grammarbox.appendChild(button("Done",done))
+    wc.grammarbox.appendChild(button("OK",done))
+    wc.grammarbox.appendChild(button("Cancel",cancel))
     wc.show_grammarbox()
     wc.pgf_online.get_grammarlist(show_list)
 }
@@ -505,5 +519,6 @@ wc.initialize=function(grammar_name,grammar_url) {
     wc.local=appLocalStorage("gf.wc."+gftranslate.grammar+".")
     wc.load()
     wc.init_cnls()
+    initialize_sorting(["DT"],["grammar_pick"])
     wc.f.input.focus()
 }
diff --git a/src/www/wc.html b/src/www/wc.html
index 54eecd1dc..6d9b32b92 100644
--- a/src/www/wc.html
+++ b/src/www/wc.html
@@ -27,6 +27,7 @@ small { color: #666; }
 .error { color: #c00; }
 div.e2 table { background: white; }
 span.inflect { color: blue; }
+.grammar_pick { margin: 5px; }
 
 .node {	cursor: pointer; }
 /*.overlay { background-color: #eed; }*/
@@ -113,7 +114,7 @@ span.inflect { color: blue; }
   </div>
 <hr>
 <div class=modtime><small>
-<!-- hhmts start -->Last modified: Thu May 12 15:32:41 CEST 2016 <!-- hhmts end -->
+<!-- hhmts start -->Last modified: Mon May 16 16:04:21 CEST 2016 <!-- hhmts end -->
 </small></div>
 <a href="http://www.grammaticalframework.org/demos/translation.html">About</a>
 <script src="js/support.js"></script>
@@ -121,7 +122,8 @@ span.inflect { color: blue; }
 <script src="js/localstorage.js"></script>
 <script src="js/langcode.js"></script>
 <script src="js/pgf_online.js"></script>
-<script src="minibar/minibar_support.js">/* speech functions */</script> 
+<script src="minibar/minibar_support.js">/* speech functions */</script>
+<script src="gfse/sort.js"></script>
 <script src="js/wc.js"></script>
 <script>
 wc.initialize()