Changeset 158

Timestamp:

04/19/2009 10:49:55 PM (3 years ago)

Author:

ofer

Message:

Many cleanups at the translation dialog, fixes for IE6 and change notification

File:

• trunk/WordPress/plugin/transposh/js/transposh.js (modified) (4 diffs)

trunk/WordPress/plugin/transposh/js/transposh.js

@@ -51 +51 @@
 function getgt()
 {
+        jQuery(":button:contains('Suggest - Google')").attr("disabled","disabled").addClass("ui-state-disabled");
         google.language.translate(jQuery("#tr_original").val(), "", transposh_params['lang'], function(result) {
-                  if (!result.error) {
-                    jQuery("#tr_translation").val(jQuery("<div>"+result.translation+"</div>").text());
-                  } 
-                });
+                if (!result.error) {
+                        jQuery("#tr_translation").val(jQuery("<div>"+result.translation+"</div>").text())
+                        .keyup();
+                } 
+        });
 }
 
@@ -181 +183 @@
 }*/
 
+function confirm_close() {
+        jQuery('<div id="dial" title="Close without saving?"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>You have made a change to the translation. Are you sure you want to discard it?</p></div>').appendTo("body").dialog({
+                        bgiframe: true,
+                        resizable: false,
+                        height:140,
+                        modal: true,
+                        overlay: {
+                                backgroundColor: '#000',
+                                opacity: 0.5
+                        },
+                        buttons: {
+                                'Discard': function() {
+                                        jQuery("#tr_translation").data("edit", { changed: false});
+                                        jQuery(this).dialog('close');
+                                        jQuery("#tabs").dialog('close');
+                                },
+                                Cancel: function() {
+                                        jQuery(this).dialog('close');
+                                }
+                        }
+                });
+}
+
 function translate_dialog(segment_id) {
         jQuery("#tabs").remove();
@@ -188 +213 @@
         jQuery("#tabs").tabs('add',transposh_params['post_url']+'?tr_token_hist='+jQuery("#tr_" + segment_id).attr('token')+'&lang='+transposh_params['lang'],'History');
         jQuery("#tabs-1").append(
-                        '<form>' +      
+                        '<form id="tr_form">' + 
                         '<fieldset>' +
                         '<label for="original">Original Text</label>' +
-                        '<input type="text" name="original" id="tr_original" class="text ui-widget-content ui-corner-all" readonly="y"/>' +
+                        '<textarea cols="80" row="3" name="original" id="tr_original" class="text ui-widget-content ui-corner-all" readonly="y"/>' +
                         '<label for="translation">Translate To</label>' +
-                        '<input type="text" name="translation" id="tr_translation" value="" class="text ui-widget-content ui-corner-all"/>' +
+                        '<textarea cols="80" row="3" name="translation" id="tr_translation" value="" class="text ui-widget-content ui-corner-all"/>' +
                         '</fieldset>' +
                         '</form>');
         jQuery("#tr_original").val(jQuery("#tr_img_" + segment_id).attr('title'));
         jQuery("#tr_translation").val(jQuery("#tr_" + segment_id).html());
+        jQuery("#tr_translation").data("edit", { changed: false});
+        jQuery("#tr_translation").keyup(function(e){
+                //alert(jQuery(this).val());
+                //alert(jQuery("#tr_" + segment_id).text());
+                if (jQuery("#tr_" + segment_id).text() != jQuery(this).val()) {
+                //if (e.which != 0) {
+                        jQuery(this).css("background","yellow");
+                        jQuery(this).data("edit", { changed: true});
+                } else {
+                        jQuery(this).css("background","");
+                        jQuery(this).data("edit", { changed: false});                   
+                }
+    });
+        /*jQuery("#tr_translation").change(function(e){
+                //alert(jQuery(this).val());
+                //alert(jQuery("#tr_" + segment_id).text());
+                //if (jQuery("#tr_" + segment_id).text() != jQuery(this).val()) {
+                        jQuery(this).css("background","yellow");
+                        jQuery(this).data("edit", { changed: true});
+    });*/
         jQuery("#tabs").css("text-align","left");
         jQuery("#tabs-1 label").css("display","block");
-        jQuery("#tabs-1 input.text").css({'margin-bottom':'12px', 'width' : '95%', 'padding' : '.4em'});
+        jQuery("#tabs-1 textarea.text").css({'margin-bottom':'12px', 'width' : '95%', 'padding' : '.4em'});
         jQuery("#tabs").bind('tabsload', function(event, ui) {
                 //TODO, formatting here, not server side
@@ -206 +251 @@
                 jQuery("table thead tr",ui.panel).addClass("ui-widget-header");
         });
-        jQuery("#tabs").tabs().dialog({
-                bgiframe: true,
-                modal: true,
-                width: 460,
-                buttons: {
-                        Suggest: function() {
+        jQuery("#tabs").bind('tabsselect', function(event, ui) {
+                // Change buttons
+                if (jQuery(ui.tab).text() == 'Translate') {
+                        jQuery("#tabs").dialog('option', 'buttons', tButtons);
+                } else {
+                        jQuery("#tabs").dialog('option', 'buttons', hButtons);
+                }
+        });
+        jQuery("#tabs").bind('dialogbeforeclose', function(event, ui) {
+                //alert(jQuery('#tr_translation').data("edit").changed);
+                if(jQuery('#tr_translation').data("edit").changed) {
+                        confirm_close();
+                        return false;
+                }
+        });
+        var tButtons =  {
+                        'Suggest - Google': function() {
                                 getgt();
                         },
                         Ok: function() {
                                 var translation = jQuery('#tr_translation').val();
-                                ajax_translate(original,translation,0,segment_id);
+                                if(jQuery('#tr_translation').data("edit").changed) {
+                                        ajax_translate(jQuery("#tr_img_" + segment_id).attr('title'),translation,0,segment_id);
+                                        jQuery("#tr_translation").data("edit", { changed: false});
+                                }
                                 jQuery(this).dialog('close');
                         }
-                }
-        }).css("padding",0).dialog('open');
+                }; 
+        var hButtons =  {
+                        Close: function() {
+                                jQuery(this).dialog('close');
+                        }
+                }; 
+        jQuery("#tabs").tabs().dialog({
+                bgiframe: true,
+                modal: true,
+                //width: 'auto',
+                width: 500,
+                buttons: tButtons               
+        }).css("padding",0);
+        //if (!jQuery.support.boxModel)
+//              jQuery("#tabs").dialog('option', 'width', jQuery("#tabs fieldset").width()+50);
+        //alert(jQuery("#tabs fieldset").width()+50);
+        //alert(jQuery("#tabs").dialog('option', 'width'));
 }