Monthly Archives: December 2014

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.

thumb

Usage

<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>

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:

{
    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
}

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

$("#lang-01").on("acidjs-xlang-change", function(e, data) {
    window.console.log(e.type, data);
});

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.