diff --git a/l10n_client.css b/l10n_client.css index ed7b2e7..8449b65 100644 --- a/l10n_client.css +++ b/l10n_client.css @@ -10,7 +10,7 @@ how it wants to round. */ line-height:1em; color:#000; background:#fff; position:fixed; - width:100%; height: 2em; + width:100%; bottom:0px; left:0px; overflow:hidden;} @@ -195,3 +195,10 @@ how it wants to round. */ background-color: #F00; color: #fff; } +#l10n-client .collapsed { + height: 2em; + overflow: hidden; +} +#l10n-client .expanded { + height: 22em; +} diff --git a/l10n_client.js b/l10n_client.js index def53e7..176222d 100644 --- a/l10n_client.js +++ b/l10n_client.js @@ -2,98 +2,100 @@ (function ($) { // Store all l10n_client related data + methods in its own object -$.extend(Drupal, { - l10nClient: new (function() { - // Set "selected" string to unselected, i.e. -1 - this.selected = -1; - // Keybindings - this.keys = {'toggle':'ctrl+shift+s', 'clear': 'esc'}; // Keybindings - // Keybinding functions - this.key = function(pressed) { - switch(pressed) { - case 'toggle': - // Grab user-hilighted text & send it into the search filter - userSelection = window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text; - userSelection = String(userSelection); - if(userSelection.length > 0) { - Drupal.l10nClient.filter(userSelection); - Drupal.l10nClient.toggle(1); - $('#l10n-client .string-search').focus(); - } else { - if($('#l10n-client').is('.hidden')) { - Drupal.l10nClient.toggle(1); - if(!$.browser.safari) { - $('#l10n-client .string-search').focus(); - } - } else { - Drupal.l10nClient.toggle(0); - } - } - break; - case 'clear': - this.filter(false); - break; - } +Drupal.l10nClient = { + // Cache client object + clientObj: function(){ + if (!this.CachedclientObj) { + this.CachedclientObj = $('#l10n-client'); } - // Toggle the l10nclient - this.toggle = function(state) { - switch(state) { - case 1: - $('#l10n-client-string-select, #l10n-client-string-editor, #l10n-client .labels .label').show(); - $('#l10n-client').height('22em').removeClass('hidden'); - $('#l10n-client .labels .toggle').text('X'); - if(!$.browser.msie) { - $('body').css('border-bottom', '22em solid #fff'); - } - $.cookie('Drupal_l10n_client', '1', {expires: 7, path: '/'}); - break; - case 0: - $('#l10n-client-string-select, #l10n-client-string-editor, #l10n-client .labels .label').hide(); - $('#l10n-client').height('2em').addClass('hidden'); - $('#l10n-client .labels .toggle').text(Drupal.t('Translate Text')); - if(!$.browser.msie) { - $('body').css('border-bottom', '0px'); + return this.CachedclientObj; + }, + // Set "selected" string to unselected, i.e. -1 + selected: -1, + // Keybindings + keys: {'toggle':'ctrl+shift+s', 'clear': 'esc'}, // Keybindings + // Keybinding functions + key: function(pressed) { + switch(pressed) { + case 'toggle': + // Grab user-hilighted text & send it into the search filter + var userSelection = window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text; + userSelection = String(userSelection); + if(userSelection.length > 0) { + this.filter(userSelection); + this.toggle(1); + this.clientObj().find('.string-search').focus(); + } else { + if(this.clientObj().is('.collapsed')) { + this.toggle(1); + if(!$.browser.safari) { + this.clientObj().find('.string-search').focus(); + } + } else { + this.toggle(0); } - $.cookie('Drupal_l10n_client', '0', {expires: 7, path: '/'}); - break; - } - } - // Get a string from the DOM tree - this.getString = function(index, type) { - return $('#l10n-client-data div:eq('+index+') .'+type).text(); - } - // Set a string in the DOM tree - this.setString = function(index, data) { - $('#l10n-client-data div:eq('+index+') .target').text(data); + } + break; + case 'clear': + this.filter(false); + break; } - // Filter the the string list by a search string - this.filter = function(search) { - if(search == false || search == '') { - $('#l10n-client #l10n-client-search-filter-clear').focus(); - $('#l10n-client-string-select li').show(); - $('#l10n-client .string-search').val(''); - $('#l10n-client .string-search').focus(); - } else { - if(search.length > 0) { - $('#l10n-client-string-select li').hide(); - $('#l10n-client-string-select li:contains('+search+')').show(); - $('#l10n-client .string-search').val(search); + }, + // Toggle the l10nclient + toggle: function(state) { + switch(state) { + case 1: + $('#l10n-client-string-select, #l10n-client-string-editor, #l10n-client .labels .label').show(); + this.clientObj().removeClass('collapsed').addClass('expanded').find('.labels .toggle').text('X'); + if(!$.browser.msie) { + $('body').css('border-bottom', '22em solid #fff'); + } + $.cookie('Drupal_l10n_client', '1', {expires: 7, path: '/'}); + break; + case 0: + $('#l10n-client-string-select, #l10n-client-string-editor, #l10n-client .labels .label').hide(); + this.clientObj().removeClass('expanded').addClass('collapsed').find('.labels .toggle').text(Drupal.t('Translate Text')); + if(!$.browser.msie) { + $('body').css('border-bottom', '0px'); } + $.cookie('Drupal_l10n_client', '0', {expires: 7, path: '/'}); + break; + } + }, + // Get a string from the DOM tree + getString: function(index, type) { + return $('#l10n-client-data div:eq('+index+') .'+type).text(); + }, + // Set a string in the DOM tree + setString: function(index, data) { + $('#l10n-client-data div:eq('+index+') .target').text(data); + }, + // Filter the the string list by a search string + filter: function(search) { + if(search == false || search == '') { + $('#l10n-client-search-filter-clear').focus(); + $('#l10n-client-string-select li').show(); + this.clientObj().find('.string-search').val('').focus(); + } else { + if(search.length > 0) { + $('#l10n-client-string-select li').not(':contains('+search+')').hide(); + this.clientObj().find('.string-search').val(search); } } - }) -}); + } +} // Attaches the localization editor behavior to all required fields. Drupal.behaviors.l10nClient = {} Drupal.behaviors.l10nClient.attach = function (context) { + // Killswitch - attach only once. - if ($('#l10n-client').is('.l10n-client-processed')) { + if (Drupal.l10nClient.clientObj().is('.l10n-client-processed')) { return; } // First time - init & attach all handlers. - $('#l10n-client').addClass('l10n-client-processed'); + Drupal.l10nClient.clientObj().addClass('l10n-client-processed'); switch($.cookie('Drupal_l10n_client')) { case '1': @@ -104,6 +106,8 @@ Drupal.behaviors.l10nClient.attach = function (context) { break; } + var $l10nClientForm = $('#l10n-client-form'); + // If the selection changes, copy string values to the source and target fields. // Add class to indicate selected string in list widget. $('#l10n-client-string-select li').click(function() { @@ -112,18 +116,18 @@ Drupal.behaviors.l10nClient.attach = function (context) { var index = $('#l10n-client-string-select li').index(this); $('#l10n-client-string-editor .source-text').text(Drupal.l10nClient.getString(index, 'source')); - $('#l10n-client-form .translation-target').val(Drupal.l10nClient.getString(index, 'target')); - $('#l10n-client-form .source-textgroup').val(Drupal.l10nClient.getString(index, 'textgroup')); - $('#l10n-client-form .source-context').val(Drupal.l10nClient.getString(index, 'context')); + $l10nClientForm.find('.translation-target').val(Drupal.l10nClient.getString(index, 'target')); + $l10nClientForm.find('.source-textgroup').val(Drupal.l10nClient.getString(index, 'textgroup')); + $l10nClientForm.find('.source-context').val(Drupal.l10nClient.getString(index, 'context')); $('#l10n-client-string-editor .context').text(Drupal.l10nClient.getString(index, 'context')); Drupal.l10nClient.selected = index; - $('#l10n-client-form .form-submit').removeAttr("disabled"); + $l10nClientForm.find('.form-submit').removeAttr("disabled"); }); // When l10n_client window is clicked, toggle based on current state. - $('#l10n-client .labels .toggle').click(function() { - if($('#l10n-client').is('.hidden')) { + Drupal.l10nClient.clientObj().find('.labels .toggle').click(function() { + if(Drupal.l10nClient.clientObj().is('.collapsed')) { Drupal.l10nClient.toggle(1); } else { Drupal.l10nClient.toggle(0); @@ -131,14 +135,14 @@ Drupal.behaviors.l10nClient.attach = function (context) { }); // Copy source text to translation field on button click. - $('#l10n-client-form .edit-copy').click(function() { - $('#l10n-client-form .translation-target').val($('#l10n-client-string-editor .source-text').text()); + $l10nClientForm.find('.edit-copy').click(function() { + $l10nClientForm.find('.translation-target').val($('#l10n-client-string-editor .source-text').text()); return false; }); // Clear translation field on button click. - $('#l10n-client-form .edit-clear').click(function() { - $('#l10n-client-form .translation-target').val(''); + $l10nClientForm.find('.edit-clear').click(function() { + $l10nClientForm.find('.translation-target').val(''); return false; }); @@ -149,36 +153,39 @@ Drupal.behaviors.l10nClient.attach = function (context) { } // Custom listener for l10n_client livesearch - $('#l10n-client .string-search').keyup(function(key) { - Drupal.l10nClient.filter($('#l10n-client .string-search').val()); + Drupal.l10nClient.clientObj().find('.string-search').keyup(function(key) { + Drupal.l10nClient.filter(Drupal.l10nClient.clientObj().find('.string-search').val()); }); // Clear search - $('#l10n-client #l10n-client-search-filter-clear').click(function() { + Drupal.l10nClient.clientObj().find('#l10n-client-search-filter-clear').click(function() { Drupal.l10nClient.filter(false); return false; }); // Send AJAX POST data on form submit. - $('#l10n-client-form').submit(function() { - $('#l10n-client-form .form-submit').attr("disabled", "true"); + $l10nClientForm.submit(function() { + var $this = $(this); + + $this.find('.form-submit').attr("disabled", "true"); + $.ajax({ type: "POST", - url: $('#l10n-client-form').attr('action'), + url: $this.attr('action'), // Send source and target strings. data: { source: $('#l10n-client-string-editor .source-text').text(), - target: $('#l10n-client-form .translation-target').val(), - textgroup: $('#l10n-client-form .source-textgroup').val(), + target: $this.find('.translation-target').val(), + textgroup: $this.find('.source-textgroup').val(), context: $('#l10n-client-string-editor .context').text(), - 'form_token': $('#l10n-client-form input[name=form_token]').val() + 'form_token': $this.find('input[name=form_token]').val() }, success: function (data) { // Store string in local js - Drupal.l10nClient.setString(Drupal.l10nClient.selected, $('#l10n-client-form .translation-target').val()); + Drupal.l10nClient.setString(Drupal.l10nClient.selected, $l10nClientForm.find('.translation-target').val()); // Figure out the display of the new translation in the selection list. - var newTranslation = $('#l10n-client-form .translation-target').val(); + var newTranslation = $l10nClientForm.find('.translation-target').val(); var newTranslationDisplay = newTranslation; var newTranslationStripped = newTranslation.replace(/<\/?[^<>]+>/gi, '') .replace(/"/g, '"') @@ -198,11 +205,11 @@ Drupal.behaviors.l10nClient.attach = function (context) { } // Mark string as translated. - $('#l10n-client-string-select li').eq(Drupal.l10nClient.selected).removeClass('untranslated').removeClass('active').addClass('translated').text(newTranslationDisplay); + $('#l10n-client-string-select li').eq(Drupal.l10nClient.selected).removeClass('untranslated active').addClass('translated').text(newTranslationDisplay); // Empty input fields. $('#l10n-client-string-editor .source-text').html(data); - $('#l10n-client-form .translation-target').val(''); + $l10nClientForm.find('.translation-target').val(''); }, error: function (xmlhttp) {