VintaSoft Imaging .NET SDK 10.0 for Web
In This Topic
    Localize Web Document Viewer
    In This Topic

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

    1. Define the list of languages for localization
    2. Create dictionaries for localization
    3. 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:
    {
      "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:
    <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".

    The dictionary file stores string representation of JSON object, which describes the localization of web document viewer's UI elements. Here is an example of simple dictionary file:
    {
        "fileLabel": { "text": "File" },
        "viewLabel": { "text": "View" },
        "toolsLabel": { "text": "Tools" },
        "annotationsLabel": { "text": "Annotations" },
        "printImagesButton": {
            "title": "Print images",
            "items": {
                "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" }
                    }
                }
            }
        },
        "enableAnnotationHistoryButton": {
            "states": {
                "disabled": { "title": "Enable undo-redo" },
                "enabled": { "title": "Disable undo-redo" }
            }
        }
    }
                                
    


    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:
    // 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
        $(localizator).on("ready", function () {
            // localize the web document viewer UI
            docViewer.localize();
            // localize DOM-elements of web page
            localizator.localizeDocument();
        });
    
    // subscribe to the "localize" event of document viewer
    $(docViewer).on("localize", 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;
    });