With the Bablic Javascript API you can control your web page localization on run-time.
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 learn more check out Javascript Events.
bablic.on('done',function() { bablic.widget.expand(); });