Skip to content

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

Update changing language

parent 1921a14f
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 99 deletions
.index.html.swp 0 → 100644
View file @ 8adeda0a
File added
de/index.html
View file @ 8adeda0a
......@@ -9,35 +9,39 @@
</head>
<body>
<header>
<nav>
<div class="logo">
<a href="./">
<img src="../src/images/logo.png" alt="">
</a>
</div>
<ul class="menu-right">
<li><a href="#about">Über uns</a></li>
<li><a href="#products">Produkt</a></li>
<li><a href="#services">Dienstleistungen</a></li>
<li><a href="#contact-us">Kontaktieren Sie uns</a></li>
<select id="changeLanguage" name="change-language">
<option value="ru"><img src="../src/image/ru.png" alt=""> Ru</option>
<option value="en"><img src="../src/image/uk.png" alt=""> En</option>
<option value="de"><img src="../src/image/de.png" alt=""> De</option>
</select>
<div class="menu-button" id="menuButton">
<span class="burger-icon"></span>
</div>
</ul>
</nav>
</header>
<menu id="menu">
<a href="#about"><span>Über uns</span></a>
<a href="#products"><span>Produkt</span></a>
<a href="#services"><span>Dienstleistungen</span></a>
<a href="#contact-us"><span>Kontaktieren Sie uns</span></a>
</menu>
<header class="top-0">
<nav class="transparent">
<div class="logo">
<a href="./">
<img src="../src/images/logo.png" alt="">
</a>
</div>
<div class="menu-right">
<ul class="menu-right">
<li><a href="#about">Über uns</a></li>
<li><a href="#products">Produkt</a></li>
<li><a href="#services">Dienstleistungen</a></li>
<li><a href="#contact-us">Kontaktieren Sie uns</a></li>
</ul>
<div class="change-language">
<ul class="language-list" id="changeLanguage">
<li class="language-list-item"><a href="../" data-lang="ru">Ru</a></li>
<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">
<span class="burger-icon"></span>
</div>
</div>
</nav>
</header>
<menu id="menu" class="menu">
<a href="#about"><span>Über uns</span></a>
<a href="#products"><span>Produkt</span></a>
<a href="#services"><span>Dienstleistungen</span></a>
<a href="#contact-us"><span>Kontaktieren Sie uns</span></a>
</menu>
<div class="hello-banner">
<div class="hello-banner__gradient"></div>
<div class="hello-banner__img"></div>
......
en/index.html
View file @ 8adeda0a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Eterlanding</title>
<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">
</head>
<body>
<header>
<nav>
<div class="logo">
<a href="./">
<img src="../src/images/logo.png" alt="">
</a>
</div>
<ul class="menu-right">
<li><a href="#about">About us</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact-us">Contact us</a></li>
<select id="changeLanguage" name="change-language">
<option value="ru"><img src="../src/image/ru.png" alt=""> Ru</option>
<option value="en"><img src="../src/image/uk.png" alt=""> En</option>
<option value="de"><img src="../src/image/de.png" alt=""> De</option>
</select>
<div class="menu-button" id="menuButton">
<span class="burger-icon"></span>
</div>
</ul>
</nav>
</header>
<menu id="menu">
<a href="#about"><span>About us</span></a>
<a href="#products"><span>Products</span></a>
<a href="#services"><span>Services</span></a>
<a href="#contact-us"><span>Contact us</span></a>
</menu>
<head>
<meta charset="UTF-8">
<title>Etersoft — Решения для перехода на Linux и свободное ПО</title>
<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">
</head>
<body>
<header class="top-0">
<nav class="transparent">
<div class="logo">
<a href="./">
<img src="../src/images/logo.png" alt="">
</a>
</div>
<div class="menu-right">
<ul class="menu-right">
<li><a href="#about">About us</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact-us">Contact us</a></li>
</ul>
<div class="change-language">
<ul class="language-list" id="changeLanguage">
<li class="language-list-item"><a href="../" data-lang="ru">Ru</a></li>
<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">
<span class="burger-icon"></span>
</div>
</div>
</nav>
</header>
<menu id="menu" class="menu">
<a href="#about"><span>About us</span></a>
<a href="#products"><span>Products</span></a>
<a href="#services"><span>Services</span></a>
<a href="#contact-us"><span>Contact us</span></a>
</menu>
<div class="hello-banner">
<div class="hello-banner__gradient"></div>
<div class="hello-banner__img"></div>
......
index.html
View file @ 8adeda0a
......@@ -24,11 +24,13 @@
<li><a href="#services">Услуги</a></li>
<li><a href="#contact-us">Контакты</a></li>
</ul>
<select id="changeLanguage" name="change-language" class="change-language">
<option value="ru">Ru</option>
<option value="en">En</option>
<option value="de">De</option>
</select>
<div class="change-language">
<ul class="language-list" id="changeLanguage">
<li class="language-list-item active"><a href="../" data-lang="ru">Ru</a></li>
<li class="language-list-item"><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">
<span class="burger-icon"></span>
</div>
......
src/js/language.js
View file @ 8adeda0a
let changeLanguage = document.getElementById('changeLanguage');
let pageLanguage = document.querySelector('html').lang;
let languageOptions = document.querySelectorAll('.language-list-item a');
let pageLanguage = document.querySelector('.language-list-item.active a').dataset['lang'];
let userLanguage = navigator.language.slice(0, 2);
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) {
let languagePath = languageValue === 'ru' ? '../' : '../' + languageValue;
......@@ -37,3 +19,11 @@ window.addEventListener('load', function() {
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() {
};
})();
var slider = multiItemSlider(".slider", {
multiItemSlider(".slider", {
isCycling: true
});
slider();
src/scss/utils/common.scss
View file @ 8adeda0a
......@@ -250,12 +250,40 @@ a:hover {
.change-language {
background: $default-color;
border: 1px solid $border-base;
border-radius: 5px;
order: 2;
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 {
padding-top: 2rem !important;
}
......@@ -273,5 +301,3 @@ a:hover {
margin: 0 auto;
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