Javascript API

With Bablic Javascript API you can control your web page localization on run-time.

widget.get, widget.update, widget.hide, widget.show, widget.expand, widget.collapse, widget.element, widget.switch

languages.get, languages.update, languages.hide, languages.show, languages.flag

element, element.restore, element.translate, element.exclude, element.include, element.watch, element.pre, element.post

selector, selector.exclude, selector.include, selector.pre, selector.post

getLocale, getLink, redirectTo, __, __n, exclude, include, markup, processElement, on

widget.get()

Gets the widget configurations

bablic.widget.get(); {"show":true,"embedded":null,"logo":false,"size":3,"widgetType":"flags","expanded":false,"position":{"corner":5,"distance":150,"unit":"px"},"colors":["#000000","#00516E","#fff"],"hideCurrent":false}

widget.update(config)

Sets the widget configuration and renders the widget. Use this method to change widget position/color/type/size.

bablic.widget.update(config);

widget.hide()

Hides the widget

bablic.widget.hide();

widget.show()

Shows the widget

bablic.widget.show();

widget.expand()

Opens the widget to show all languages.

bablic.widget.expand();

widget.collapse()

Close the widget to show only single language.

bablic.widget.collapse();

widget.element()

Returns the DOM Element that contains the widget.

bablic.widget.element();

widget.switch()

Turns the given element into a language switch (for websites with only 1 language). The element will display the language of the language, and will switch to that language on click

bablic.widget.switch(document.querySelector('#bablic-widget'),{fullName:true});

languages.get(languageCode /*Optional*/)

Returns language configuration. If no languageCode is given, returns an array of all language configurations

bablic.languages.get('ru'); {key: "ru", name: "русский", flag: null, href: "http://mywebsite.com/?locale=ru", hidden: false} bablic.languages.get(); [{key: "en", name: "English", flag: null, href: "http://mywebsite.com/?locale=en", hidden: false}, {key: "ru", name: "русский", flag: null, href: "http://mywebsite.com/?locale=ru", hidden: false}, {key: "de", name: "Deutsch", flag: null, href: "http://mywebsite.com/?locale=de", hidden: false}]

languages.update(config)

Updates the language config. If needed, renders widget or switches page language.

bablic.languages.update(config);

languages.hide(languageCode)

Hides the given language from widget. Prevent Bablic from showing that language, and switch to original if this language is the current language of the page.

bablic.languages.hide('zh');

languages.show(languageCode)

Restores a language, if it was hidden

bablic.languages.show('zh');

languages.flag(languageCode,flagSize)

Returns the flag image url of the given language and the given size.
size is an integer between 1 and 6, with the following values:
1=16px, 2=24px, 3=32px, 4=48px, 5=64px, 6=128px

bablic.languages.flag('zh',2); "//uploads.bablic.com/flags/24/zh.png"

element(elementsOrSelector)

Wrap element or selector that are currently loaded in the DOM

bablic.element(document.querySelector('#menu'));

element(elementsOrSelector).restore()

Restore the given elements, or element query selector, to the original language. You can pass a single DOM element, a list of elements, or a single CSS Query Selector as string. The matched elements will be reverted to the original language unless element.translate is called on them.

bablic.element('#menu').restore().done();

element(elementsOrSelector).translate()

Undo element.restore

bablic.element('#menu').translate().done();

element(elementsOrSelector).exclude()

Excludes this element from translation all together (Same as bablic.exclude())

bablic.element('#menu').exclude().done();

element(elementsOrSelector).include()

Undo element.exclude

bablic.element('#menu').include().done();

element(elementsOrSelector).markup(markupKey,markupValue)

Adds Bablic markup to an element

bablic.element('#menu').markup('no-vars').done();

element(elementsOrSelector).watch(eventHandler)

Fire the eventHandler every time Bablic has changed the given element

bablic.element('#menu').watch(function(){ console.log('changed');}).done();

element(elementsOrSelector).pre()

Fire an event just before this element is going to be processed for translation

bablic.element('#menu').pre(function() {
    removeHighlight(this);
}).post(function() {
    showHighlight(this);
}).done();

element(elementsOrSelector).post()

Fire an event just after this element was processed for translation

bablic.element('#menu').pre(function() {
    removeHighlight(this);
}).post(function() {
    showHighlight(this);
}).done();

selector(cssSelector)

Wrap a selector accross all document. The elements matching this selector might not be loaded in the DOM yet

bablic.selector('#menu li');

selector(cssSelector).exclude()

Excludes this selector from translation all together (Same as bablic.exclude())

bablic.selector('#menu li').exclude().done();

selector(cssSelector).include()

Undo selector.exclude

bablic.selector('#menu li').include().done();

selector(cssSelector).markup(markupKey,markupValue)

Adds Bablic markup to all elements matching

bablic.selector('#menu li').markup('block').done();

selector(cssSelector).pre()

Fire an event just before a matching element is going to be processed for translation

bablic.selector('#menu li').pre(function() {
    removeHighlight(this);
}).post(function() {
    showHighlight(this);
}).done();

selector(cssSelector).post()

Fire an event just after a matching element was processed for translation

bablic.selector('#menu li').pre(function() {
    removeHighlight(this);
}).post(function() {
    showHighlight(this);
}).done();

getLocale()

Returns the current locale code ('en','ch','es_ar'...)

bablic.getLocale(); "es"

getLink(languageCode)

Returns the URI of the current web page with the given locale

bablic.getLink('fr'); "http://mywebsite.com/?locale=fr"

redirectTo(languageCode,options)

Switches the page language to the given language code. Use options.forceRedirect to make sure page is refreshed.

bablic.redirectTo('en'); bablic.redirectTo('ru',{forceRedirect:true});

__(textToTranslate,..)

Returns the localized text. Supports format templates

bablic.__('You have a message from %s','Shila'); "Usted tiene un mensaje de Shila" bablic.__('Do you want {0} and {2}, {1} and {2} or just {2}?', 'Ham', 'Bacon','Cheese'); "¿Quieres Jamón y queso, tocino y queso o simplemente queso?"

__n(single_text, plural_text, count, ..)

Returns the localized string according the the right plural state.

bablic.__n('You have a message from %s', 'You have %d messages from %s',3,'Shila'); "Usted tiene 3 mensajes de Shila"

exclude(querySelector | Element | HTMLCollection )

Excludes the elements from translation

bablic.exclude('#menu .message'); bablic.exclude(document.getElementById('menu'));

include(querySelector | Element | HTMLCollection )

Includes the elements for translation, even if parents were excluded.

bablic.exclude('#menu'); bablic.include('#menu .message');

markup(markupKey,querySelector | Element | HTMLCollection,value)

Applies markup for given elements

bablic.markup('phrase','p.message');

processElement(Element)

Bablic will process the given element syncronicly

bablic.processElement($popup);

on(eventName,handlerFunc)

Listen to Bablic event. To read more check out Javascript Events

bablic.on('done',function() { bablic.widget.expand(); });