Dropbox Paper

Translation in Gramex

DOM manipulation

<body lang="en">

<h1 lang="en" data-lang="jp">Gender dashboard</h1>

<p data-lang="hi">This dashboard shows the performance of ...</p>

<p>This will also be translated</p>

<script>

$(selector).translate('/any-translation-endpoint-url', {

source: 'en', // If lang="" is not specified, use this lang as source

target: 'hi', // If data-lang="" is not specified, use this lang as target

})

</script>

</body>

$(…).translate(url, options) should translate the contents of the nodes using the endpoint. This should:

Extract all text inside these nodes at one shot with a single HTTP request

The POST request should be like this:

POST /endpoint

?q=phase+1&q=phrase+2&...&any-options-to-be-passed

The response must be a JSON dictionary that has the key and the value. For example:

{

"Gender dashboard": "लिंग डैशबोर्ड",

"Explore": "अन्वेषण"

}

Sample code may look like this:

var cache = {}

$.fn.translate = function(url, options) {

// Use the options to identify source language, target language, etc

var texts = ... // Get all the texts at one shot

var available = ... // Get list of texts already in cache

// Replace all DOM elements based on available text

var unavailable = ... // Get list of texts NOT in cache

$.post(url, data=...) // Send AJAX request for translations

.done(function() {

// add the response to the cache