Servicios de traducción
Navigate CMS tiene un tipo especial de extensión para permitir la traducción de contenidos. En particular, este tipo de extensiones se ofrecen mediante el botón Traducir que se encuentra debajo de los editores tinyMCE durante la edición de elementos.
Para ilustrar cómo escribir un servicio de traducción vamos a explicar el plugin de Google Translate.
Fichero de definición:
{
"title": "Google Translate",
"version": "1.0",
"author": "Naviwebs",
"website": "http://www.naviwebs.com",
"description": "Translate texts using the paid Google Translate service",
"type": "translate",
"options": [
{
"id": "google_translate_api_key",
"name": "Google Translate API Key",
"type": "value"
}
],
"bindings": [
{
"module": "elements",
"event": "edit",
"function": "nvweb_google_translate_initialize_javascript"
},
{
"module": "webdictionary",
"event": "edit",
"function": "nvweb_google_translate_initialize_javascript"
}
]
}
Como probablemente sabrás, Google Translate es un servicio de pago. Cuando te das de alta, Google te proporciona una clave de API. En cada solicitud de traducción se debe enviar la clave de API. Por esta razón, la extensión necesita saber dicho valor y es por ello que hay una opción de configuración de extensión.
La segunda cosa que deberemos percibir es "type": "translate". Navigate CMS reconoce las extensiones de traducción al buscar dicha cadena. Tu nuevo servicio no será incluido en el botón desplegable a menos que establezcas el valor "translate" para la propiedad "type".
Por último, todas las extensiones de servicios de traducción deben implementar algunas funciones javascript especiales y se deben cargar antes de cualquier petición. En este momento (Navigate CMS 1.7) sólo dos funciones están habilitadas para enviar solicitudes de traducción: Diccionario (webdictionary) y Elementos (elements). La sección de bindings de la definición fuerza la inicialización de las funciones de traducción requeridas cuando un elemento de webdictionary o elements se encuentra en el modo de edición.
En otras palabras, cuando el usuario desea editar un contenido de texto o una palabra del diccionario web, la función PHP "nvweb_google_translate_initialize_javascript" es llamada. Esta función se encuentra en el archivo ejecutable PHP principal de la extensión: google_translate.php. Echemos un vistazo:
function nvweb_google_translate_initialize_javascript()
{
global $layout;
$extension = new Extension();
$extension->load('google_translate');
$layout->add_script("
$.getScript('plugins/google_translate/js/jquery.translate.min.js', function()
{
$.translate.load('".$extension->settings['google_translate_api_key']."');
});
function navigate_tinymce_translate_google_translate(element, to, from)
{
//...
}
function navigate_textarea_translate_google_translate(element, to, from)
{
//...
}
function navigate_translate_google_translate(element, to, from)
{
//...
}
");
}
Nuestra extensión Google translate utiliza el famoso plugin jQuery translate para enviar las solicitudes de traducción. Este plugin jQuery necesita ser cargado antes de hacer peticiones, por lo que la función de inicialización es el lugar perfecto para hacerlo. También pasamos la clave de API del servicio que habremos conseguido tras haber cargado la extensión como un objeto.
Lo siguiente es escribir las tres funciones especiales requeridas:
- navigate_tinymce_translate
- navigate_textarea_translate
- navigate_translate
Estas funciones deben tener el nombre de la extensión al final; en nuestro ejemplo, la extensión se llama "google_translate":
- navigate_tinymce_translate_google_translate
- navigate_textarea_translate_google_translate
- navigate_translate_google_translate
Todas las funciones reciben los mismos tres parámetros:
- elemento - objeto del DOM que quiere su contenido traducido
- idioma original - lengua de origen, puede dejarse vacía si no se puede determinar
- idioma de destino
Salvo en algunos casos, la lengua original no puede detectarse en Navigate CMS por lo que es necesario usar un servicio externo para obtener dicha información. Afortunadamente, Google Translate no necesita la lengua original dado que él mismo tiene un algoritmo de detección muy bueno.
Vamos a ver la más simple de las tres funciones:
function navigate_translate_google_translate(element, language_to, language_from)
{
$.translate(
$(element).val(),
language_to,
{
data: false,
toggle: false,
async: false,
complete: function(translation)
{
$(element).val(translation);
}
}
);
}
Esta primera función es sólo un envoltorio para la llamada a jQuery translate. Acabamos de leer el valor del elemento de origen y solicitar la traducción. Una vez recibido se reemplaza el valor del elemento de origen.
function navigate_textarea_translate_google_translate(element, to, from)
{
var bdfrom = $(element).val();
var tmp_translate = $('<div id="navigate_jquery_translation">'+bdfrom+'</div>');
$("body").append(tmp_translate);
$("#navigate_jquery_translation").translate(
{
from: "",
to: translate_to,
replace: true,
async: false,
complete: function()
{
bdfrom = $("#navigate_jquery_translation").html();
$(element).val(bdfrom);
$("#navigate_jquery_translation").remove();
}
});
}
Esta función se utiliza para recuperar y traducir el texto de los elementos textarea. Es un poco más complicado, pero tiene el mismo principio que la primera función: una envoltura para traducir el plugin jQuery.
Por último tenemos la función de traducir el código HTML de un control TinyMCE:
function navigate_tinymce_translate_google_translate(element, to, from)
{
var bdfrom = tinyMCE.get(element).getContent({ format: 'raw' });
var tmp_translate = $('<div id="navigate_jquery_translation">'+bdfrom+'</div>');
$("body").append(tmp_translate);
$("#navigate_jquery_translation").translate(
{
from: "",
to: translate_to,
replace: true,
async: false,
complete: function()
{
bdfrom = $("#navigate_jquery_translation").html();
tinyMCE.get(element).setContent(bdfrom, { format: 'raw' });
$("#navigate_jquery_translation").remove();
}
});
}
Como vemos, la diferencia principal entre las tres funciones es la manera de obtener y establecer el texto original / texto traducido.
Con todas estas instrucciones deberías ser capaz de crear una extensión para traducir Navigate CMS. La forma más rápida es tomar la extensión de Google Translate y modificar el código para adaptarlo a tu servicio de traducción.
0 Comentarios