Умный переключатель языков

Обычно переключение языков на сайте сделано обычными ссылками вида |ru|en|cn|, которое никак не отслеживает на какой странице пользователь решил поменять язык, и просто переходит на главную страницу сайта с другим языком.

Попробуем сделать интелектуальный переключатель языков, который бы отслеживал, где в данный момент находится пользователь, чтобы перенаправить его на ту же страницу, но на выбранном языке.

Разметка HTML-кода:

<ul>
    <li><a onclick="return switch_language('ru', 'ru')" href="/ru/">ru</a></li>
    <li><a onclick="return switch_language('ru', 'en')" href="/en/">en</a></li>
    <li><a onclick="return switch_language('ru', 'cn')" href="/cn/">cn</a></li>
</ul>

Первый параметр в функции - текущий язык, у меня он определяется в РНР-коде и вставляется в шаблон. Как понятно из примера - это вариант, когда текущий язык - русский(ru).

Java Script код:

// Аналог РНР-функции str_replace
function str_replace ( search, replace, subject ) {

if(!(replace instanceof Array)){
replace=new Array(replace);
if(search instanceof Array){
while(search.length>replace.length){
replace[replace.length]=replace[0];
}
}
}

if(!(search instanceof Array))search=new Array(search);
while(search.length>replace.length){
replace[replace.length]='';
}

if(subject instanceof Array){
for(k in subject){
subject[k]=str_replace(search,replace,subject[k]);
}
return subject;
}

for(var k=0; k-1){
subject = subject.replace(search[k], replace[k]);
i = subject.indexOf(search[k],i);
}
}

return subject;

}

// Аналог РНР-функции parse_url
function parse_url (str, component) {

var  o   = {
strictMode: false,
key: ["source","protocol","authority","userInfo","user","password","host","port","relative","path","directory","file","query","anchor"],
q:   {
name:   "queryKey",
parser: /(?:^|&)([^&=]*)=?([^&]*)/g
},
parser: {
strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
loose:  /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/\/?)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/ // Added one optional slash to post-protocol to catch file:/// (should restrict this)
}
};

var m   = o.parser[o.strictMode ? "strict" : "loose"].exec(str),
uri = {},
i   = 14;
while (i--) {uri[o.key[i]] = m[i] || "";}
switch (component) {
case 'PHP_URL_SCHEME':
return uri.protocol;
case 'PHP_URL_HOST':
return uri.host;
case 'PHP_URL_PORT':
return uri.port;
case 'PHP_URL_USER':
return uri.user;
case 'PHP_URL_PASS':
return uri.password;
case 'PHP_URL_PATH':
return uri.path;
case 'PHP_URL_QUERY':
return uri.query;
case 'PHP_URL_FRAGMENT':
return uri.anchor;
default:
var retArr = {};
if (uri.protocol !== '') {retArr.scheme=uri.protocol;}
if (uri.host !== '') {retArr.host=uri.host;}
if (uri.port !== '') {retArr.port=uri.port;}
if (uri.user !== '') {retArr.user=uri.user;}
if (uri.password !== '') {retArr.pass=uri.password;}
if (uri.path !== '') {retArr.path=uri.path;}
if (uri.query !== '') {retArr.query=uri.query;}
if (uri.anchor !== '') {retArr.fragment=uri.anchor;}
return retArr;
}
}

// Собственно, само переключение
function switch_language(from, to) {
    // Если языки совпадают - пропустить
    if (from == to) return false;
    // Получить УРЛ
    var url = document.location.href;
    // Распарсить
    var purl = parse_url(url);
    // Взять ток путь
    var path = purl.path;
    var nurl;
    // Вариант для главной страницы
    if (path == '/') {
        nurl = url+to+'/';
        // Для внутренних страниц
    } else {
        nurl = str_replace('/'+from+'/', '/'+to+'/', url);
        //nurl = url.replace(/from/, to);
    }
    // Переход по новому адресу
    document.location.href = nurl;
    return false;
}

Пример работы вы можете посмотреть на сайте Шанхайской Организации Сотрудничества (ШОС)

Нет похожих публикаций

Теги: JavaScript

Поделиться: