Skip to content

E
etersoft.com
Commit 8adeda0a authored by Davyd Dobryakov's avatar Davyd Dobryakov
Browse files
Options

Update changing language

parent 1921a14f
Show whitespace changes
Inline Side-by-side
Showing with 80 additions and 56 deletions
.index.html.swp 0 → 100644
View file @ 8adeda0a
File added
de/index.html
View file @ 8adeda0a
...@@ -9,30 +9,34 @@ ...@@ -9,30 +9,34 @@
</head> </head>
<body> <body>
<header> <header class="top-0">
<nav> <nav class="transparent">
<div class="logo"> <div class="logo">
<a href="./"> <a href="./">
<img src="../src/images/logo.png" alt=""> <img src="../src/images/logo.png" alt="">
</a> </a>
</div> </div>
<div class="menu-right">
<ul class="menu-right"> <ul class="menu-right">
<li><a href="#about">Über uns</a></li> <li><a href="#about">Über uns</a></li>
<li><a href="#products">Produkt</a></li> <li><a href="#products">Produkt</a></li>
<li><a href="#services">Dienstleistungen</a></li> <li><a href="#services">Dienstleistungen</a></li>
<li><a href="#contact-us">Kontaktieren Sie uns</a></li> <li><a href="#contact-us">Kontaktieren Sie uns</a></li>
<select id="changeLanguage" name="change-language"> </ul>
<option value="ru"><img src="../src/image/ru.png" alt=""> Ru</option> <div class="change-language">
<option value="en"><img src="../src/image/uk.png" alt=""> En</option> <ul class="language-list" id="changeLanguage">
<option value="de"><img src="../src/image/de.png" alt=""> De</option> <li class="language-list-item"><a href="../" data-lang="ru">Ru</a></li>
</select> <li class="language-list-item"><a href="/en" data-lang="en">En</a></li>
<li class="language-list-item active"><a href="/de" data-lang="de">De</a></li>
</ul>
</div>
<div class="menu-button" id="menuButton"> <div class="menu-button" id="menuButton">
<span class="burger-icon"></span> <span class="burger-icon"></span>
</div> </div>
</ul> </div>
</nav> </nav>
</header> </header>
<menu id="menu"> <menu id="menu" class="menu">
<a href="#about"><span>Über uns</span></a> <a href="#about"><span>Über uns</span></a>
<a href="#products"><span>Produkt</span></a> <a href="#products"><span>Produkt</span></a>
<a href="#services"><span>Dienstleistungen</span></a> <a href="#services"><span>Dienstleistungen</span></a>
......
en/index.html
View file @ 8adeda0a
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Eterlanding</title> <title>Etersoft — Решения для перехода на Linux и свободное ПО</title>
<link rel="stylesheet" href="../dist/app.css"> <link rel="stylesheet" href="../dist/app.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="viewport"
</head> content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body> <body>
<header> <header class="top-0">
<nav> <nav class="transparent">
<div class="logo"> <div class="logo">
<a href="./"> <a href="./">
<img src="../src/images/logo.png" alt=""> <img src="../src/images/logo.png" alt="">
</a> </a>
</div> </div>
<div class="menu-right">
<ul class="menu-right"> <ul class="menu-right">
<li><a href="#about">About us</a></li> <li><a href="#about">About us</a></li>
<li><a href="#products">Products</a></li> <li><a href="#products">Products</a></li>
<li><a href="#services">Services</a></li> <li><a href="#services">Services</a></li>
<li><a href="#contact-us">Contact us</a></li> <li><a href="#contact-us">Contact us</a></li>
<select id="changeLanguage" name="change-language"> </ul>
<option value="ru"><img src="../src/image/ru.png" alt=""> Ru</option> <div class="change-language">
<option value="en"><img src="../src/image/uk.png" alt=""> En</option> <ul class="language-list" id="changeLanguage">
<option value="de"><img src="../src/image/de.png" alt=""> De</option> <li class="language-list-item"><a href="../" data-lang="ru">Ru</a></li>
</select> <li class="language-list-item active"><a href="/en" data-lang="en">En</a></li>
<li class="language-list-item"><a href="/de" data-lang="de">De</a></li>
</ul>
</div>
<div class="menu-button" id="menuButton"> <div class="menu-button" id="menuButton">
<span class="burger-icon"></span> <span class="burger-icon"></span>
</div> </div>
</div>
</ul>
</nav> </nav>
</header> </header>
<menu id="menu"> <menu id="menu" class="menu">
<a href="#about"><span>About us</span></a> <a href="#about"><span>About us</span></a>
<a href="#products"><span>Products</span></a> <a href="#products"><span>Products</span></a>
<a href="#services"><span>Services</span></a> <a href="#services"><span>Services</span></a>
......
index.html
View file @ 8adeda0a
...@@ -24,11 +24,13 @@ ...@@ -24,11 +24,13 @@
<li><a href="#services">Услуги</a></li> <li><a href="#services">Услуги</a></li>
<li><a href="#contact-us">Контакты</a></li> <li><a href="#contact-us">Контакты</a></li>
</ul> </ul>
<select id="changeLanguage" name="change-language" class="change-language"> <div class="change-language">
<option value="ru">Ru</option> <ul class="language-list" id="changeLanguage">
<option value="en">En</option> <li class="language-list-item active"><a href="../" data-lang="ru">Ru</a></li>
<option value="de">De</option> <li class="language-list-item"><a href="/en" data-lang="en">En</a></li>
</select> <li class="language-list-item"><a href="/de" data-lang="de">De</a></li>
</ul>
</div>
<div class="menu-button" id="menuButton"> <div class="menu-button" id="menuButton">
<span class="burger-icon"></span> <span class="burger-icon"></span>
</div> </div>
......
src/js/language.js
View file @ 8adeda0a
let changeLanguage = document.getElementById('changeLanguage'); let languageOptions = document.querySelectorAll('.language-list-item a');
let pageLanguage = document.querySelector('html').lang; let pageLanguage = document.querySelector('.language-list-item.active a').dataset['lang'];
let userLanguage = navigator.language.slice(0, 2); let userLanguage = navigator.language.slice(0, 2);
let currentLanguage = localStorage.language === undefined ? userLanguage : localStorage.language; let currentLanguage = localStorage.language === undefined ? userLanguage : localStorage.language;
if (changeLanguage.value !== currentLanguage) {
let languageOptions = changeLanguage.getElementsByTagName('option');
for (let i = 0; i < languageOptions.length; i++) {
if (languageOptions[i].value === currentLanguage) {
languageOptions[i].selected = true;
}
}
}
changeLanguage.addEventListener('change', function(e) {
e.preventDefault();
let languageValue = changeLanguage.value;
let languagePath = getLanguagePath(languageValue);
localStorage.setItem('language', languageValue);
currentLanguage = localStorage.language;
window.location = languagePath;
})
function getLanguagePath(languageValue) { function getLanguagePath(languageValue) {
let languagePath = languageValue === 'ru' ? '../' : '../' + languageValue; let languagePath = languageValue === 'ru' ? '../' : '../' + languageValue;
...@@ -37,3 +19,11 @@ window.addEventListener('load', function() { ...@@ -37,3 +19,11 @@ window.addEventListener('load', function() {
window.location = languagePath; window.location = languagePath;
} }
}) })
// add listener to languageOptions for collecting data in localStorage
Array.from(languageOptions).map((option) => {
option.addEventListener('click', function() {
lang = option.dataset['lang'];
localStorage.language = lang;
})
})
src/js/slider.js
View file @ 8adeda0a
...@@ -166,8 +166,6 @@ var multiItemSlider = (function() { ...@@ -166,8 +166,6 @@ var multiItemSlider = (function() {
}; };
})(); })();
var slider = multiItemSlider(".slider", { multiItemSlider(".slider", {
isCycling: true isCycling: true
}); });
slider();
src/scss/utils/common.scss
View file @ 8adeda0a
...@@ -250,12 +250,40 @@ a:hover { ...@@ -250,12 +250,40 @@ a:hover {
.change-language { .change-language {
background: $default-color; background: $default-color;
border: 1px solid $border-base;
border-radius: 5px;
order: 2; order: 2;
padding: 0.25rem; padding: 0.25rem;
} }
.language-list {
display: flex;
flex-flow: row wrap;
}
.language-list-item::after {
color: $light-color !important;
content: '|';
}
.language-list-item:last-child::after {
content: '';
}
.language-list-item a {
color: $light-color !important;
}
.language-list-item a:hover {
color: $neutral-primary !important;
}
.language-list-item.active a {
color: $neutral-primary !important;
}
.language-list-item.active a:hover {
color: $light-color !important;
}
.pt-2 { .pt-2 {
padding-top: 2rem !important; padding-top: 2rem !important;
} }
...@@ -273,5 +301,3 @@ a:hover { ...@@ -273,5 +301,3 @@ a:hover {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment