X-Lang: Language Selector HTML5 Web Component

Glad to announce that a new HTML5 Web Component has joined my gallery. Meet X-Lang – a language selector, wrapped as a custom tag, with small powerful API and custom events, utilizing another HTML5 endeavour – X-Flag.

Usage

[sourcecode language=”html”]<acidjs-xlang id="lang-01">
<acidjs-xlang-culture label="Deutsch" code="de"></acidjs-xlang-culture>
<acidjs-xlang-culture label="English" code="uk"></acidjs-xlang-culture>
<acidjs-xlang-culture label="Bulgarian" code="bg"></acidjs-xlang-culture>
<acidjs-xlang-culture label="Czech" code="cz"></acidjs-xlang-culture>
<acidjs-xlang-culture label="Malti" code="mt"></acidjs-xlang-culture>
</acidjs-xlang>[/sourcecode]

HTML Attributes of the <acidjs-xlang /> Tag
Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

• open – If attribute is set, the language dropdown will be visible when page loads.
• disabled – If attribute is set, the component will be disabled.

HTML Attributes of the <acidjs-xlang-culture /> Tag

• code – Country code, for example code="de".
• label – Optional. Label with the full name of the language item.
• selected – Optional. The language item with the attribute set will be preselected. If none of the <acidjs-xlang-culture /> contains the attribute, the first item in the list will be default.

Custom Events
The component publishes one custom event – "acidjs-xlang-change", triggered when language selection has been made. The event returns an object, which can be used to react to the change and load the requested language:

[sourcecode language=”javascript”]{
code: "de", // the language code, defined in the code attribute of the acidjs-xlang-culture tag
label: "Deutsch", // the language full name, if defined in the label attribute of the acidjs-xlang-culture tag
index: 0 // the index of the item in the dropdown
}[/sourcecode]

Binding to the "acidjs-xlang-change" event:

[sourcecode language=”javascript”]$("#lang-01").on("acidjs-xlang-change", function(e, data) {
window.console.log(e.type, data);
});[/sourcecode]

JavaScript Getters, Setters and Methods
The component does not expose any custom methods, setters or getters and all standard JavaScript APIs are supported.

Have a great week, and don’t forget to check the demo on this page.

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.