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.

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]
+	return elem && elem.tagName!="INPUT" && elem.tagName!="BUTTON"
-			  ? sortable_class[elem.className]
+	    && (sortable_tag[elem.tagName]
-			    ? elem
+		? sortable_class[elem.className]
-			    : null
+		? elem
-			  : sortable(elem.parentNode))
+		: null
+		: sortable(elem.parentNode))
     }
 
     function move_element(elem,x,y) {

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.checked=checked
-	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)
-		}
-	    }
-	}
 	return vb
     }
-    function grammar_pick(grammar) {
+    function grammar_pick(grammar,checked) {
-	return [checkbox(grammar),text(" "+grammar.split(".pgf")[0])]
+	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()
 }

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>
@@ -122,6 +123,7 @@ span.inflect { color: blue; }
 <script src="js/langcode.js"></script>
 <script src="js/pgf_online.js"></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()