HOWTO: Translate the WebDocumentViewer

This article covers how to translate the WebDocumentViewer with a little javascript. We do allow you to choose to hide the text labels, by adding 'showbuttontext': false to your WebDocumentViewer initialization. However, this code will set both the button text and the tooltip/title text of the buttons.

You can either call this from your javascript onload event or wire it up to the interface to allow the end user to select what language to use on the fly.

function doLocalization() {
    var previousPage = "Previous Page";
    var nextPage = "Next Page";
    var zoomOut = "Zoom Out";
    var zoomIn = "Zoom In";
    var fullSize ="Full Size";
    var bestFit = "Best Fit";
    var fitToWidth = "Fit To Width";

    //This will only show is you have set a savepath for the WebDocumentViewer.
    var save = "Save Changes";

    //These will only show up if the WebDocumentViewer is set to show annotations.
    var drawEllipse = "Draw Ellipse";
    var drawHighlight = "Draw Highlight";
    var drawLine = "Draw Line";
    var drawPolyLines = "Draw Poly Lines";
    var drawFreehand = "Draw Freehand";
    var drawRectangle = "Draw Rectangle";
    var drawText = "Draw Text";
    var drawStamp = "Draw Stamp";
    var drawImage = "Draw Image";

    updateField($(".atala-ui-icon-page-prev").parent(), previousPage);
    updateField($(".atala-ui-icon-page-next").parent(), nextPage);
    updateField($(".atala-ui-icon-zoom-out").parent(), zoomOut);
    updateField($(".atala-ui-icon-zoom-in").parent(), zoomIn);
    updateField($(".atala-ui-icon-zoom-full").parent(), fullSize);
    updateField($(".atala-ui-icon-fit-best").parent(), bestFit);
    updateField($(".atala-ui-icon-fit-width").parent(), fitToWidth);

    updateField($(".atala-ui-icon-save").parent(), save);

    updateField($(".atala-ui-icon-ellipse").parent(), drawEllipse);
    updateField($(".atala-ui-icon-highlight").parent(), drawHighlight);
    updateField($(".atala-ui-icon-line").parent(), drawLine);
    updateField($(".atala-ui-icon-lines").parent(), drawPolyLines);
    updateField($(".atala-ui-icon-freehand").parent(), drawFreehand);
    updateField($(".atala-ui-icon-polygon").parent(), drawRectangle);
    updateField($(".atala-ui-icon-rectangle").parent(), drawRectangle);
    updateField($(".atala-ui-icon-fillrect").parent(), fitToWidth);
    updateField($(".atala-ui-icon-stamp").parent(), drawStamp);
    updateField($(".atala-ui-icon-image").parent(), drawImage);
    updateField($(".atala-ui-icon-text").parent(), drawText);
}

function updateField(field, newValue) {
    field.prop("title", newValue);

    // Checks to make sure jQuery found the displayed text and that it isn't blank.
    // If it's blank, leave it alone or it messes up the positioning.
    // The WebDocumentViewer has an initialization property "showbuttontext" that you 
    // can set to false to hide text on the button.. but we still need to update the title text.

    if (field.children(".ui-button-text").length > 0 && field.children(".ui-button-text").text() != "")
    { field.children(".ui-button-text").text(newValue); }
}

Original Article:
Q10351 - HOWTO: Translate the WebDocumentViewer