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