Translation in Gramex
  • Storage compatible with FormHandler
  • Multiple languages
  • Cached translation
  • Bulk translation
  • DOM updates

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>
    $(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

$(…).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
  • Replace all text with the translations (where already available)
  • Send a POST request to the end point to retrieve the unavailable translations
  • Once the results are fetched, replace all text with the translations

The POST request should be like this:
POST /endpoint

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