CDE
CDE
pvdz.ee
pvdz.ee
pvdz.ee
Note: Google broke this demo a long time ago. Sorry :)
var init,search,open,callback, // languages (as of 2009-11-09) l = "xx,en,af,sq,ar,be,bg,ca,cs,hr,da,nl,en,et,tl,fi,fr,gl,de,el,iw,hi,hu,is,id,ga,it,ja,ko,lv,lt,mk,ms,mt,no,fa,pl,pt,ro,ru,sr,sk,sl,es,sw,sv,th,tr,uk,vi,cy,yi,zh-CN", // source and target... sl = ","+l, // auto is source only tl = l+",zh-TW"; // taiwanese is target only open = function(){ // add a stylesheet that turns my text-color to black for all popup content... // removed when the popup is removed var s,t,i,o,defval = ' Enter text to translate here '; var doSearch = function(){ o.bgc('orange'); search(s.sel(), t.sel(), i.val()); }; CDE.popup( 'Google Translate Widget', CDE.div().css('transup').add( CDE.css('.transup * { color: #000; }'), // set text to black CDE.div().fl().h(40).w(80).add( CDE.txt('Source'), CDE.br(), s = CDE.select(sl.split(','), false, {intSelectedIndex:'auto', boolSelectByValue:true, boolUseDescAsValue:true}).on('change', doSearch) ), CDE.div().fl().h(40).w(80).add( CDE.txt('Target'), CDE.br(), t = CDE.select(tl.split(','), false, {intSelectedIndex:'nl', boolSelectByValue:true, boolUseDescAsValue:true}).on('change', doSearch) ), CDE.clearLeft(), i = CDE.textarea().sb('black').p(2).c('#888').wh(350,100).fl().val(defval).on('focus', function(){ if (this.value == defval) CDE.wrap(this).val('').c('black'); }).on('blur', function(){ if (this.value == '') CDE.wrap(this).val(defval).c('#888'); }), CDE.br(), o = CDE.dom('textarea').p(2).cl().id('txtTransTarget').sb('black').wh(350, 100).fl(), CDE.br(), CDE.div().cl().tac().add( CDE.lnk('translate', doSearch).mr(15), CDE.lnk('clear', function(){ i.val(defval).c('#ccc'); o.val(''); }) ), CDE.br() ), false, { boolNoCancel:true, strOk:'Close' } ); }; search = function(from, to, txt){ CDE.ljs(debug( 'https://ajax.googleapis.com/ajax/services/language/translate'+ '?v=1.0'+ '&q='+txt.replace(/%/g,'%25').replace(/&/g,'%26')+ // "url encoding" '&langpair='+from+'|'+to+ '&callback=window.callback'+ '&context' // with this, jsonp will actually call the callback with certain parameters rather than one objlit )); }; // global callback for jsonp callback = function(_, obj, status, details, code){ var cde = CDE.wrap('txtTransTarget').bgc('white'); if (status == 200) cde.c('black').val(obj&&obj.translatedText); else cde.c('red').val('Google Translation Error: '+details); };