From 9d32b629a922bede7da5effbf494c1e5a952df7e Mon Sep 17 00:00:00 2001 From: hallgren Date: Thu, 21 Jun 2012 14:14:36 +0000 Subject: [PATCH] translator: insert and delete segments You can now insert new segments anywhere, now just at the end. You can now delete any segment, not just the last one. --- src/www/translator/translator.css | 19 +++-- src/www/translator/translator.js | 119 ++++++++++++++++++++---------- 2 files changed, 91 insertions(+), 47 deletions(-) diff --git a/src/www/translator/translator.css b/src/www/translator/translator.css index d2cdaab35..de23ab47f 100644 --- a/src/www/translator/translator.css +++ b/src/www/translator/translator.css @@ -42,15 +42,16 @@ div.document h2, div.document h3 { color: #009; } table.segments { margin-left: auto; margin-right: auto; } .current_segment, .segment:hover { background: #ff9; } -td.source, td.options, td.target { - padding: 1ex; -} +td.actions { padding: 1ex 1em 1ex 0.5em; } +td.options { padding: 1ex 1em; } td.source, td.target { + padding: 1ex; border-bottom: 2px solid #ccc; + vertical-align: baseline; } -td.options > div { position: relative; margin: 0; } -td.options:hover > div > dl { display: block; } -td.options > div > dl { +td.options > div, td.actions > div { position: relative; margin: 0; } +td.options:hover > div > dl,td.actions:hover > div > dl { display: block; } +td.options > div > dl, td.actions > div > dl { left: 0.8em; padding: 0.6ex; font-family: sans-serif; @@ -70,7 +71,7 @@ table.paralleltexts td { label { font-family: sans-serif; } -div.document form { +form.import { min-width: 90%; /* extend to availiable width for Safari */ /*background: #eee;*/ margin: 10px; /* extend to available width for other browsers */ @@ -78,6 +79,8 @@ div.document form { box-shadow: 4px 4px 12px rgba(0,0,0,0.33); } -span.arrow { color: blue; } +span.actions { visibility: hidden; } +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; } \ No newline at end of file diff --git a/src/www/translator/translator.js b/src/www/translator/translator.js index a11700f07..5ce78a0b0 100644 --- a/src/www/translator/translator.js +++ b/src/www/translator/translator.js @@ -296,6 +296,7 @@ Translator.prototype.open=function(name) { else alert("No such document: "+name) } } + Translator.prototype.load=function(name,document) { var t=this t.current=name; @@ -319,10 +320,13 @@ Translator.prototype.save=function(el) { hide_menu(el); if(t.current!="/") { if(t.current) { - if(t.document.options.cloud) - save_in_cloud(t.current+cloudext,t.document) + var path="/"+t.current + if(t.document.options.cloud) { + function done() { /*t.local.remove(path)*/ } + save_in_cloud(t.current+cloudext,t.document,done) + } else - t.local.put("/"+t.current,t.document) + t.local.put(path,t.document) } else t.saveAs() } @@ -364,31 +368,43 @@ Translator.prototype.add_segment=function(el) { hide_menu(el); var t=this function imp() { - function restore() { - t.redraw() - } - function done() { - var text=inp.value - if(text) t.document.segments.push(new_segment(text)) - restore() - return false - } - var inp=node("input",{name:"it",value:""}) - var e=wrap("form",[inp, submit(), button("Cancel",restore)]) - var source=wrap_class("td","source",e) - var edit=wrap_class("tr","segment",source) - - var ss=t.drawing.segments - var n=ss ? ss.length : 0 - if(n>0) insertAfter(edit,ss[n-1]) - else t.view.appendChild(wrap_class("table","segments",edit)) - - e.onsubmit=done - inp.focus(); + var n=t.document.segments.length + t.insert_segment(n) } if(t.current!="/") setTimeout(imp,100) } +Translator.prototype.insert_segment=function(i) { + var t=this + function restore() { + t.redraw() + } + function done() { + var text=inp.value + if(text) { + var newseg=new_segment(text) + t.document.segments=insert_ix(t.document.segments,i,newseg) + } + restore() + return false + } + var inp=node("input",{name:"it",value:""}) + var e=wrap("form",[inp, submit(), button("Cancel",restore)]) + var source=wrap_class("td","source",e) + var edit=wrap_class("tr","segment",[td([]),source]) + + var ss=t.drawing.segments + var n=ss ? ss.length : 0 + if(n>0) { + if(i==0) insertBefore(edit,ss[0]) + else insertAfter(edit,ss[i-1]) + } + else t.view.appendChild(wrap_class("table","segments",edit)) + + e.onsubmit=done + inp.focus(); +} + Translator.prototype.import=function(el) { hide_menu(el); var t=this @@ -463,7 +479,15 @@ Translator.prototype.remove=function(el) { t.redraw(); } } - setTimeout(rm,100) + if(t.current!="/") setTimeout(rm,100) +} + +Translator.prototype.remove_segment=function(i) { + var t=this + if(t.document && t.document.segments.length>i) { + t.document.segments=delete_ix(t.document.segments,i) + t.redraw(); + } } Translator.prototype.replace_segment=function(i,sd) { @@ -629,16 +653,24 @@ Translator.prototype.draw_segment_given_target=function(s,target,i) { dt(manualB), dt(draw_translation(o))]) } - function draw_options(o) { return wrap("div",[span_class("arrow",text(" ⇒ ")), wrap("dl",draw_options2(o))]) } + + var insertB=dt(text("Insert a new segment")) + insertB.onclick=function() { t.insert_segment(i) } + var removeB=dt(text("Remove this segment")) + removeB.onclick=function() { t.remove_segment(i) } + var actions=wrap_class("td","actions", + wrap("div",[span_class("actions",text("◊")), + wrap_class("dl","popupmenu", + [insertB,removeB])])) var source=wrap_class("td","source",text(s.source)) source.onclick=function() { t.edit_source(source,i); } var options=wrap_class("td","options",draw_options(s.options)) - return wrap_class("tr","segment",[source,options,target]) + return wrap_class("tr","segment",[actions,source,options,target]) } function empty_document() { @@ -682,15 +714,6 @@ function concname(code) { return langname[code] || code; } function alangcode(code) { return langcode2[code] || code; } function tr_local() { - /* - function dummy() { - return { - get: function(name,def) { return def }, - put: function(name,value) { } - ls: function() { return [] } - } - } - */ function real(storage) { var appPrefix="gf.translator." return { @@ -702,6 +725,10 @@ function tr_local() { var id=appPrefix+name; storage[id]=JSON.stringify(value); }, + remove: function(name) { + var id=appPrefix+name; + delete storage[id] + }, ls: function(prefix) { var pre=appPrefix+prefix var files=[] @@ -732,6 +759,21 @@ function mapix(f,xs) { return ys; } +function delete_ix(old,ix) { + var a=[]; + for(var i in old) if(i!=ix) a.push(old[i]); + return a; +} + +function insert_ix(old,ix,x) { + var a=[]; + for(var i in old) { + if(i==ix) a.push(x); + a.push(old[i]) + } + return a; +} + // Convert array of lines to array of paragraphs function join_paragraphs(lines) { var paras=[] @@ -757,12 +799,11 @@ function split_punct(text,punct) { var cloudext=".gfstdoc" function strip_cloudext(s) { return s.substr(0,s.length-cloudext.length) } -function save_in_cloud(filename,document) { - function done() { } +function save_in_cloud(filename,document,cont) { function save(dir) { var form={dir:dir} form[filename]=JSON.stringify(document); - ajax_http_post("/cloud","command=upload"+encodeArgs(form),done) + ajax_http_post("/cloud","command=upload"+encodeArgs(form),cont) } with_dir(save) }