HTML5, CSS3 & JS Experiments

By Martin Ivanov

Language Selector

X-Lang is a HTML5 WebComponent that can be used for displaying language selectors. It has been built using another component - X-Flag, developed by WeMakeSites.

Open your browser's console to check the custom events triggered by the component and to understand how to use them.

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

Demo

Selector without Default Language Explicitly Set



Selector with Default Language Explicitly Set



Disabled Selector)



No Language Labels, Just Flags



Register Mozilla's X-Tags

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<script src="AcidJs.XLang/lib/x-tag-components.js"></script>

Register the Component on the Page via HTML5 @import

You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.

<link rel="import" href="AcidJs.XLang/classes/XLang.html" />

HTML Attributes

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

JavaScript API: Methods, Getters and Setters

Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).

Usage and Code Insight

            
            <h4>Selector without Default Language Explicitly Set</h4>
            
            <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>
            
            <br /><br />
            <h4>Selector with Default Language Explicitly Set</h4>
            
            <acidjs-xlang id="lang-02">
                <acidjs-xlang-culture label="Dutch" code="nl"></acidjs-xlang-culture>
                <acidjs-xlang-culture label="Japanese" code="jp" selected></acidjs-xlang-culture>
                <acidjs-xlang-culture label="Bulgarian" code="mt"></acidjs-xlang-culture>
            </acidjs-xlang>
            
            <br /><br />
            <h4>Disabled Selector)</h4>
            
            <acidjs-xlang id="lang-03" disabled>
                <acidjs-xlang-culture label="Deutsch" code="de"></acidjs-xlang-culture>
                <acidjs-xlang-culture label="English" code="uk" selected></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>
            
            <br /><br />
            <h4>No Language Labels, Just Flags</h4>
            
            <acidjs-xlang id="lang-04">
                <acidjs-xlang-culture code="de"></acidjs-xlang-culture>
                <acidjs-xlang-culture code="uk"></acidjs-xlang-culture>
                <acidjs-xlang-culture code="bg" selected></acidjs-xlang-culture>
                <acidjs-xlang-culture code="cz"></acidjs-xlang-culture>
                <acidjs-xlang-culture code="mt"></acidjs-xlang-culture>
            </acidjs-xlang>
            
            <br /><br />
        
/*
 * X-Lang Language Switcher HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
 * More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/wemakesitesnet
 * @url developer blog http://martinivanov.net
 **/

/*
 * USAGE:
 * 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
 * 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required. 
 **/

acidjs-xlang,
acidjs-xlang div,
acidjs-xlang li *
{
    display: inline-block;
    vertical-align: middle;
}

acidjs-xlang li *
{
    white-space: nowrap;
}

acidjs-xlang,
acidjs-xlang *
{
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    outline: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

acidjs-xlang ul,
acidjs-xlang div
{
    border: solid 1px #666;
    background: #fff;
    transition: all .25s ease-in;
}

acidjs-xlang[open] ul,
acidjs-xlang[open] div
{
    background: #f6f6f6;
}

acidjs-xlang div,
acidjs-xlang label
{
    cursor: pointer;
}

acidjs-xlang label:hover span,
acidjs-xlang input:checked ~ span
{
    color: #000;
}

acidjs-xlang:hover div,
acidjs-xlang:hover ul
{
    border-color: #000;
}

acidjs-xlang
{
    font: normal 12px/16px Helvetica, Arial, Sans-serif;
}

acidjs-xlang span
{
    color: #666;
    margin: 0 0 0 4px;
}

acidjs-xlang input
{
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

acidjs-xlang input:checked ~ span
{
    text-decoration: underline;
}

acidjs-xlang ul
{
    position: absolute;
    z-index: 100;
    clip: rect(0, 0, 0, 0);
    margin: 2px 0 0;
    border: solid 1px #666;
}

acidjs-xlang[open] ul
{
    clip: initial;
}

acidjs-xlang li acidjs-xflag
{
    margin: 0;
}

acidjs-xlang div
{
    padding: 1px;
}

acidjs-xlang div img
{
    opacity: .85;
    transition: opacity .25s ease-in;
}

acidjs-xlang:hover div img
{
    opacity: 1;
}


acidjs-xlang div acidjs-xflag
{
    margin: 4px;
}

acidjs-xlang acidjs-xflag img
{
    width: 20px;
    height: 13px;
}

acidjs-xlang label
{
    display: block;
    padding: .4em;
    overflow: hidden;
    text-overflow: ellipsis;
}

acidjs-xlang span:empty
{
    display: none;
}

acidjs-xlang[hidden]
{
    display: none;
}

acidjs-xlang[disabled]
{
    opacity: .5;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}