WOVN.io Javascript

WOVN.io JavaScript

In order to provide translations and validate languages via JavaScript, WOVN.io uses a number of functions and event handlers.

Functions

WOVN.io.getCurrentLang()

This method retrieves the current language of the page.

  • It is defined as a class method.
  • This method has no arguments.
  • The method returns an object. (Refer to the following example)

Example:

 > WOVN.io.getCurrentLang()
< Object {name: "English", code: "en", en: "English"}

WOVN.io.changeLang(langCode)

This method changes the page’s current language.

  • It is defined as a class method.
  • You must set the language code argument (‘en’, ‘ja’, etc.).
  • If a valid language code argument has been passed, true will be returned. In any other case, a false is returned.

Example:

 > WOVN.io.changeLang('en')
< true

WOVN.io.isApiReady()

This method retrieves whether the WOVN API has been loaded.

  • It is defined as a class method.
  • This method has no arguments.
  • The method returns a boolean. If the API has been loaded, true will be returned.

Example:

 > WOVN.io.isApiReady()
< true

WOVN.io.getWovnUrl(url)

This method transforms a URL into the language URL for WOVN given the currently selected language and project settings.

  • It is defined as a class method.
  • You must set the url argument (‘https://wovn.io’, ‘/top’, etc.).
  • This method accepts fully qualified URLs and aboslute paths. When possible, it will return with a transformed URL in kind. (‘https://wovn.io’ -> ‘https://wovn.io/ja’, ‘/top’ -> ‘/ja/top’, etc)

Example:

 > WOVN.io.getWovnUrl('/shop')
< '/ja/shop'

WOVN.io.swap(element)

This method swaps an HTML fragment to the current language.

  • It is defined as a class method.
  • You must set the element argument.
  • If a valid element has been passed, the element and all child elements will be swapped to the currently selected language.
  • This is useful for when javascript inserts new content into the page and you want to force WOVN to swap the new content immediately.
  • This method uses translations saved on the current page, if the texts in the element have not been translated it will not swap them.

Example:

 > var newEle = document.querySelector('#new-content')
 > WOVN.io.swap(newEle)

WOVN.io.translateTexts(fromLang, toLang, texts)

This method, given an array of texts, will return translated texts.

  • It is defined as a class method.
  • You must set the fromLang and toLang language codes as well as the texts array.
  • If a the parameters are valid, it will return an object containing the sent texts as keys and the translated texts as values.
  • This method uses translations saved on the current page, if the given values have not been translated the corresponding key’s value will be equal to the given value.

Example:

 > WOVN.io.translateTexts('en', 'ja', ['good afternoon', 'good night'])
 > {'good afternoon': 'こんにちは', 'good night': 'おやすみ'}
Event Handlers

wovnApiReady

This event handler is called when the WOVN.io script has completed loading. It you would like to change the page’s langauge via JavaScript, you can use the event handler as follows.
Example:

window.addEventListener('wovnApiReady', function(evt) {
    WOVN.io.changeLang('en');
});

wovnLangChanged

This event handler is called every time the widget changes the language on the page.

This event will also be called if the language is automatically changed based on the user’s settings or browser language.

You can use this event handler with the getCurrentLang function to run code based on the new language.

Example:

window.addEventListener('wovnLangChanged', function (evt) {
    var newLang = WOVN.io.getCurrentLang().code;
    document.getElementById('support-content').setAttribute('href', 'http://cdn.com/' + newLang + '/info.pdf')
});