Localization of jQuery.undoable plugin

Before to talk about exact subject of this post I would like to say some words about modality in web applications. As you probably know Phil Haack introduced undoable plugin for jQuery which allows to improve user experience for web apps by getting rid of modal confirm dialogs. You can find demo of this plugin here. I really like that because I think that using of modal dialogs in web applications should be minimized. For me as end user (not as developer) site which implemented with minimum modality looks much more friendly and fun rather then web app with huge amount of modal dialogs. I’m not saying that we should get rid of modal dialog entirely – but we should consider using of more user friendly solutions in those places where modal dialogs aren’t really needed.

Phil’s plugin helps in one of these places: it allows to avoid confirmation dialogs in scenarios where you need to implement a list of deletable items. And it is even more suitable if you need to make deleting cancelable. This is the end of a little preface and now I will describe process of localization of undoable plugin.

Suppose that we have localized web application and we have list of images (table’s header and links texts are on Russian):

We want to make it deletable. The process of creating it via jQuery.undoable plugin is quite straightforward and it is explained in Phil’s post and his demos. I will not repeat it. Just will show the end result:

All is fine except status message which is shown on English and undo link text near it. Localization of status message (The item has been removed) is quite simple: we need to override OTB formatStatus function of undoable plugin:

   1:  

   2: <script type="text/javascript">
   1:  
   2:     $(function() {
   3:  
   4:         $('a.delete').undoable({
   5:  
   6:             formatStatus: function(data) {
   7:                 data.subject = '<%= Resources.ImageDeleted %>';
   8:                 data.predicate = '';
   9:                 return this.formatStatus.call(this, data);
  10:             }
  11:  
  12:         });
  13:  
  14:     });
</script>

Here Resources.ImageDeleted is the property from strongly typed Resources.resx file. Now result looks better:

Localization of undo link text is more tricky. Since it is hardcoded in OTB showUndo function without modification of plugin code I didn’t find a better way to fix it rather than overriding the whole showUndo function by copy-paste it from jquery.undoable.js and replace hardcoded “undo” text with resource string (Phil’s plugin is flexible enough and we can override OTB functions by custom ones). The resulting script is the following:

   1: <script type="text/javascript">
   1:  
   2:     $(function() {
   3:         $('a.delete').undoable({
   4:  
   5:             formatStatus: function(data) {
   6:                 data.subject = '<%= Resources.ImageDeleted %>';
   7:                 data.predicate = '';
   8:                 return this.formatStatus.call(this, data);
   9:             },
  10:  
  11:             // copy paste from original plugin but with localized undo text
  12:             showUndo: function(target, data, options) {
  13:                 var message =
  14:                     (options.formatStatus || this.formatStatus).call(this, data);
  15:  
  16:                 if (target[0].tagName === 'TR') {
  17:                     var colSpan = target.children('td').length;
  18:                     target.after('<tr class="undoable"><td class="status" colspan="' +
  19: (colSpan - 1) + '">' + message + '</td><td class="undo"><a href="#' + data.id +
  20: '"><%= Resources.Undo %></a></td></tr>');
  21:                 }
  22:                 else {
  23:                     var tagName = target[0].tagName;
  24:                     var classes = target.attr('class');
  25:                     target.after('<' + tagName + ' class="undoable ' + classes +
  26: '"><p class="status">' + message + '</p><p class="undo"><a href="#' + data.id +
  27: '"><%= Resources.Undo %></a></p></' + tagName + '>');
  28:                 }
  29:  
  30:                 var undoable = target.next();
  31:  
  32:                 if (options.showingStatus) {
  33:                     options.showingStatus(undoable);
  34:                 }
  35:  
  36:                 undoable.hide().fadeIn('slow').show();
  37:                 if (target.inlineStyling) {
  38:                     (options.applyUndoableStyle ||
  39: $.fn.undoable.applyUndoableStyle).call($.fn.undoable, undoable);
  40:                 }
  41:                 return undoable;
  42:             }
  43:  
  44:         });
  45:  
  46:     });
  47:  
</script>

And the final result is what I wanted:

Now we have both status message and undo link text localized. But my opinion is that localization of undo link text is the point of further improvements. Nevertheless thanks to Phil for this plugin.