Localize Web Document Viewer

In This Topic

To localize the interface of web document viewer is necessary to:

Define the list of languages for localization
Create dictionaries for localization
Add JavaScript code for UI localization

1. Define the list of languages for localization

First, it is necessary to define the list of languages for localization and create a file of localization settings, for example "settings.json". Here is the content of file "settings.json", which defines that the interface can be localized to English and Russian languages:

JSON

{
  "locales": [ "en", "ru" ]
}

Next, the "settings.json" file must be added to the content of web application, for example placed in folder "locales".

Finally, it is necessary to add element "link" with information about localization settings onto a web page:

HTML

<link rel="localization" href="/locales/settings.json">

2. Create dictionaries for localization

The dictionary file should have a name, which equals to the browser locale name, and ".txt" extension. For example, the file of English language dictionary must have the name "en.txt", the file of German language dictionary must have the name "de.txt", the file of French language dictionary must have the name "fr.txt", the file of Spanish language dictionary must have the name "es.txt", the file of Italian language dictionary must have the name "it.txt", the file of Portuguese language dictionary must have the name "pt.txt", the file of Russian language dictionary must have the name "ru.txt".

The dictionary file should be located in the same folder with the file "settings.json", in our case this folder is "locales".

For creating English dictionary it is necessary to do the following steps:

Get English localization dictionary from web document viewer, i.e. launch ready web application with web document viewer and call WebDocumentViewerJS.getLocalizationDictionary function for getting localization dictionary as JSON object.
Serialize JSON object using "JSON.stringify" function, for example, using the following code "var dictString = JSON.stringify(dictObj, null, '\t');".
Save serialized JSON object to a file with name "en.txt".

For creating German (or other non English) dictionary it is necessary to do the following steps:

Use English localization dictionary as a template for German localization dictionary, i.e. copy "en.txt" file into "de.txt" file
Translate text values from English to German in "de.txt" file.

Here is an example of simple dictionary file:

JSON

{
    "fileLabel": { "text": "File" },
    "viewLabel": { "text": "View" },
    "toolsLabel": { "text": "Tools" },
    "annotationsLabel": { "text": "Annotations" },

    "gotoPageInput": { "title": "Page" },
    "rotateAngleInput": { "title": "Angle" },
    "zoomValueInput": { "title": "Zoom" },

    "printImagesButton": { "title": "Print images" },
    "thumbnailViewerSettingsButton": { "title": "Thumbnail viewer settings" },
    "uploadFileButton": {
      "title": "Upload and open file",
      "value": "Upload and open file"
    },
    "enableAnnotationHistoryButton": {
      "states": {
        "disabled": { "title": "Enable undo-redo" },
        "enabled": { "title": "Disable undo-redo" }
      }
    },
    "sidePanelCloseButton": { 
      "states":{
        "closed":{"title": "Show Side Panel"},
        "opened":{"title": "Hide Side Panel" }
      }
    },

    "annotationsPanel": {
      "items": {
        "showPanelButton": { "title": "Annotations" }
      }
    },
    "textSelectionPanel": {
      "items": {
        "showPanelButton": { "title": "Select text" },

        "selectionModeLabel": { "text": "Selection mode:" },
        "selectionColorLabel": { "text": "Selection color:" },
        "selectedTextLabel": { "text": "Selected text:" },
        "selectionModeSelect": {
          "items": {
            "rectangleOption": { "text": "Rectangle" },
            "fullLinesOption": { "text": "Full lines" }
          }
        }
      }
    },

    "documentPasswordDialog": {
      "dialogTitle": "Password required",
      "buttons": {
        "OkButton": "OK",
        "CancelButton": "Cancel"
      },
      "items": {
        "pleaseEnterPasswordLabel": { "text": "This document is password protected. Please enter a password." },
        "passwordLabel": { "text": "Password:" },
        "showPasswordLabel": { "text": "Show password" },
        "incorrectPasswordLabel": { "text": "Incorrect password" }
      }
    },
    "printImagesDialog": {
      "dialogTitle": "Print images",
      "buttons": {
        "OkButton": "Print",
        "CancelButton": "Cancel"
      },
      "items": {
        "allImagesLabel": { "text": "All images" },
        "currentImageLabel": { "text": "Current image" },
        "selectedImagesLabel": { "text": "Images" },
        "withAnnotationsLabel": { "text": "With annotations" }
      }
    },

    "annotationContextMenu": {
      "items": {
        "copyAnnotationLabel": { "text": "Copy annotation" },
        "pasteAnnotationLabel": { "text": "Paste annotation" },
        "removeAnnotationLabel": { "text": "Remove annotation" },
        "bringAnnotationToBackLabel": { "text": "Bring to back" },
        "bringAnnotationToFrontLabel": { "text": "Bring to front" },
        "groupAllAnnotationsLabel": { "text": "Group all annotations" },
        "ungroupAnnotationLabel": { "text": "Ungroup annotation" },
        "annotationPropertiesLabel": { "text": "Annotation properties..." }
      }
    },

    "authenticateFileMessage": "File is authenticating...",
    "uploadFileMessage": "File is uploading...",
    "openFileMessage": "File is opening...",
    "imageUploadingMessage": "Image is uploading...",
    "downloadFileMessage": "File is downloading..."
}

3. Add JavaScript code for UI localization

The VintasoftLocalizationJS class provides functionality for localization of UI elements, DOM elements and strings.

To localize the UI is necessary to perform the following JavaScript code:

JavaScript

// create the localizator
var localizator = new Vintasoft.Shared.VintasoftLocalizationJS();

// if localizator is ready (localizator loaded localization dictionary)
if (localizator.get_IsReady()) {
    // localize the web document viewer UI
    docViewer.localize();
    // localize DOM-elements of web page
    localizator.localizeDocument();
}
// if localizator is NOT ready
else
    // wait when localizator will be ready
    Vintasoft.Shared.subscribeToEvent(localizator, "ready", function () {
        // localize the web document viewer UI
        docViewer.localize();
        // localize DOM-elements of web page
        localizator.localizeDocument();
    });

// subscribe to the "localizationRequest" event of document viewer
Vintasoft.Shared.subscribeToEvent(docViewer, "localizationRequest", function (event, data) {
    // get identifier of element, which must be localized
    var id = data.id;
    // get localization information for element
    var res = localizator.getLocalizationInfo(id);
    // if localizator has localization information for element
    if (res != undefined)
        // save localization information for later localization
        data.val = res;
});

Send Feedback