Javascript Events

Bablic triggers various events on the localized web page. You can receive those events using Javascript on real-time.

Register to event using JS API

Use the bablic.on function to register to any event.

bablic.on('locale',function() { console.log(bablic.getLocale()); });

Register to document events

Bablic events are also fired on the document object with the prefix "bablic".
This is very useful if you're not sure whether Bablic library code was loaded yet in the document, in case you have a code that runs before Bablic Snippet or you are using async version of snippet.
Any data that was sent with the event is available on the event object, on the "detail" property (If the browser supports custom events). It's is not possible to return any value when using this method.

document.addEventListener('bablicload',function() { bablic.languages.hide('it'); });

Bablic Events

load, done, translated, error, locale, beforeLocaleChange, afterWidgetRender, beforeChange

load

Bablic Library code is loaded to window

document.addEventListener('bablicload',function() { bablic.languages.hide('it'); });

done

Web page was successfully localized on initial page load

bablic.on("done",function(){ console.log('done'); });

translated

Web page was successfully localized, on page load or after language is switched

bablic.on("translated",function(){ console.log('page translated'); });

error

Error in web page localization

bablic.on("error",function(err){ console.error(err); });

locale

Language was determined (or after changed by user)

bablic.on("locale",function(){ console.log(bablic.getLocale()); });

beforeLocaleChange

Before language is changed. Return false to prevent the language change

bablic.on("beforeLocaleChange",function(){ if(DontAllowChange) return false; });

afterWidgetRender

Widget was rendered.

bablic.on("afterWidgetRender",function(element){ element.style.opacity=0.4; });

beforeProcess

Bablic is about to process a root element. Return false to prevent the processing.

bablic.on("beforeProcess",function(rootElement){
// do something with element
});