translator: "Open..." doesn't discard the current document anymore

It shows available documents and a Cancel button on top of the current
document.

src/www/translator/index.html

@@ -19,7 +19,9 @@
       <dt id="import_globalsight" onclick="translator.import_globalsight(this)">Import from GlobalSight...
       <dt onclick="translator.save(this)">Save
       <dt onclick="translator.saveAs(this)">Save As...
+	<!--
       <dt onclick="translator.close(this)">Close
+	-->
     </dl>
     <td><span onclick="">Edit</span>
       <dl>
@@ -64,6 +66,7 @@
 </table>
 </form>
 </div>
+<div class=overlay><div id=filebox class=filebox></div></div>
 
 <div id=document class=document>
 ...
@@ -72,7 +75,7 @@
 </div>
 <hr>
 <div class=modtime><small>HMTL
-<!-- hhmts start -->Last modified: Tue Nov 20 13:47:37 CET 2012 <!-- hhmts end -->
+<!-- hhmts start -->Last modified: Mon Feb 11 16:09:58 CET 2013 <!-- hhmts end -->
 </small></div>
 <a href="about.html">About</a>
 

src/www/translator/translator.css

@@ -1,4 +1,4 @@
-body { margin: 5px; }
+body { margin:0; padding: 5px; position: relative; }
 h1 { float: right; margin: 0; font-size: 150%; }
 h2 { font-size: 120%; }
 h3 { font-size: 100%; }
@@ -95,3 +95,24 @@ tr:hover div > span.actions { visibility: visible; }
 span.arrow, span.actions { color: blue; }
 span.error { color: red; }
 span.choices { color: blue; font-weight: bold; font-family: sans-serif; }
+
+
+div.overlay {
+    display: none;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%; height: 100%;
+    background: white; /* fallback */
+    background: rgba(0,0,0,0.3);
+}
+
+div.overlay > div {
+    margin: 5em 3em;
+    background: white; /* fallback */
+    background: rgba(255,255,255,0.95);
+    padding: 1em;
+    box-shadow: 4px 4px 12px rgba(0,0,0,0.33);
+    /*border-radius: 5px;*/
+}

src/www/translator/translator.js

@@ -6,6 +6,7 @@ function Translator() {
     var t=this
     t.local=tr_local();
     t.view=element("document")
+    t.filebox=element("filebox")
     if(!supports_html5_storage()) {
 	var warning=span_class("error",text("It appears that localStorage is unsupported or disabled in this browser. Documents will not be preserved after you leave or reload this page!"))
 	insertAfter(warning,t.view)
@@ -338,25 +339,32 @@ Translator.prototype.browse=function(el) {
 	}
     }
     function browse() {
-	clear(t.view)
+	var list=empty("div")
-	t.view.appendChild(wrap("h2",text("Your translator documents")))
+	clear(t.filebox)
+	t.filebox.appendChild(list)
+	list.appendChild(wrap("h2",text("Open...")))
 	var files=t.local.ls("/")
 	if(files.length>0) {
-	    t.view.appendChild(wrap("h3",text("Local documents")))
+	    list.appendChild(wrap("h3",text("Local documents")))
-	    t.view.appendChild(ls(files,"translator.open",delete_local))
+	    list.appendChild(ls(files,"translator.open",delete_local))
 	}
 	function lscloud(result) {
 	    var filenames=JSON.parse(result)
 	    var files=map(strip_cloudext,filenames)
 	    if(files.length>0) {
-		t.view.appendChild(wrap("h3",[text("Documents in the cloud "),
+		list.appendChild(wrap("h3",[text("Documents in the cloud "),
 					      img("../P/cloud.png")]))
-		t.view.appendChild(ls(files,"translator.open_from_cloud",delete_from_cloud))
+		list.appendChild(ls(files,"translator.open_from_cloud",delete_from_cloud))
 	    }
 	}
 	if(navigator.onLine) gfcloud("ls",{ext:cloudext},lscloud)
+	/*
 	t.current="/"
 	t.local.put("current","/")
+	*/
+	
+	t.filebox.appendChild(button("Cancel",function () { t.hide_filebox() }))
+	t.show_filebox()
     }
     setTimeout(browse,100) // leave time to hide the menu first
 }
@@ -371,6 +379,16 @@ Translator.prototype.open=function(name) {
     }
 }
 
+Translator.prototype.show_filebox=function() {
+    this.filebox.parentNode.style.display="block";
+}
+
+Translator.prototype.hide_filebox=function() {
+    var t=this
+    t.filebox.parentNode.style.display="";
+    clear(t.filebox)
+}
+
 Translator.prototype.load=function(name,document,in_cloud) {
     var t=this
     t.current=name;
@@ -378,6 +396,7 @@ Translator.prototype.load=function(name,document,in_cloud) {
     t.local.put("current",name)
     t.local.put("current_in_cloud",in_cloud)
     t.document=document;
+    t.hide_filebox();
     t.redraw();
 }
 
@@ -581,9 +600,6 @@ Translator.prototype.import_globalsight=function(el) {
     hide_menu(el);
     var t=this
     function imp() {
-	function restore() {
-	    t.redraw()
-	}
 	function done() {
 	    function import_text(name,text) {
 		var ls=lines(text)
@@ -592,7 +608,8 @@ Translator.prototype.import_globalsight=function(el) {
 		    t.local.put("current",null)
 		    t.document=import_globalsight_download_file(ls)
 		    t.current=t.document.name=name
-		    restore();
+		    t.hide_filebox();
+		    t.redraw();
 		}
 		else alert("Not a GlobalSight Download File") // !! improve
 	    }
@@ -606,20 +623,25 @@ Translator.prototype.import_globalsight=function(el) {
 	    return false
 	}
 
-	clear(t.view)
+	clear(t.filebox)
-	t.view.appendChild(wrap("h2",text("Import")))
+	t.filebox.appendChild(wrap("h2",text("Import")))
-	if(supports_local_files()) {
+	function restore() { t.hide_filebox() }
+	var cancel_button=button("Cancel",restore)
+	if(false && supports_local_files()) {
 	    // Allow import from local files, if the browers supports it.
 	    var files=node("input",{name:"files","type":"file"})
 	    var inp=wrap("p",wrap("label",[text("Choose a file: "),files]))
 	    var e=node("form",{class:"import"},
 		       [wrap("h3",text("Import a GlobalSight Download File")),
-			inp, submit(), button("Cancel",restore)])
+			inp, submit(), cancel_button])
-	    t.view.appendChild(e)
+	    t.filebox.appendChild(e)
 	    e.onsubmit=done
 	}
-	else
+	else {
-	    t.view.appendChild(text("Support for readling local files is missing in this browser."))
+	    t.filebox.appendChild(wrap("p",[text("Support for readling local files is missing in this browser.")]))
+	    t.filebox.appendChild(cancel_button)
+	}
+	t.show_filebox();
     }
     setTimeout(imp,100) // leave time to hide the menu first
 }