Skip to content

E
etersoft.com
Commit 89263e99 authored by Davyd Dobryakov's avatar Davyd Dobryakov
Browse files
Options

Creating separate .js-modules instead of common.js

parent 6a7fcf41
Hide whitespace changes
Inline Side-by-side
Showing with 253 additions and 271 deletions
src/css/main.css
View file @ 89263e99
.wrapper {
display: flex;
}
src/index.js
View file @ 89263e99
import './js/common'
import './js/header'
import './js/language'
import './js/toggleMenu'
import './js/slider'
import './css/main.css'
import './scss/main.scss'
src/js/common.js deleted 100644 → 0
View file @ 6a7fcf41
let menuButton = document.getElementById('menuButton');
let menu = document.getElementById('menu');
let menuItems = Array.from(menu.querySelectorAll('a'));
menuButton.addEventListener('click', function (e) {
menuButton.classList.toggle('is-active');
menu.classList.toggle('visually-visible');
e.preventDefault();
});
menuItems.map((item) => item.addEventListener('click', function (e) {
menuButton.classList.toggle('is-active');
menu.classList.toggle('visually-visible');
}));
menuItems.map((item) => item.addEventListener('touch', function (e) {
menuButton.classList.toggle('is-active');
menu.classList.toggle('visually-visible');
}));
let changeLanguage = document.getElementById('changeLanguage');
let pageLanguage = document.querySelector('html').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;
if (pageLanguage === 'ru') {
languagePath = './' + languageValue;
}
return languagePath;
};
window.addEventListener('load', function() {
console.log('page lang', pageLanguage, 'current lang', currentLanguage);
if (pageLanguage !== currentLanguage) {
let languagePath = getLanguagePath(currentLanguage);
window.location = languagePath;
};
});
let scrollment = document.getElementById('scrollment');
let lastScroll = 0;
let header = document.getElementsByTagName('header')[0];
function scroll(pageY) {
if (pageY > lastScroll) {
header.classList.remove('top-0');
} else {
header.classList.add('top-0');
}
lastScroll = pageY;
}
window.addEventListener('scroll', function(event) {
scroll(window.scrollY);
});
var multiItemSlider = (function() {
return function(selector, config) {
var _mainElement = document.querySelector(selector), // основный элемент блока
_sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // обертка для .slider-item
_sliderItems = _mainElement.querySelectorAll(".slider__item"), // элементы (.slider-item)
_sliderControls = _mainElement.querySelectorAll(".slider__control"), // элементы управления
_sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // кнопка "LEFT"
_sliderControlRight = _mainElement.querySelector(
".slider__control_right"
), // кнопка "RIGHT"
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента
_positionLeftItem = 0, // позиция левого активного элемента
_transform = 0, // значение транфсофрмации .slider_wrapper
_step = (_itemWidth / _wrapperWidth) * 100, // величина шага (для трансформации)
_items = [], // массив элементов
_interval = 0,
_config = {
isCycling: false, // автоматическая смена слайдов
direction: "right", // направление смены слайдов
interval: 5000, // интервал между автоматической сменой слайдов
pause: true // устанавливать ли паузу при поднесении курсора к слайдеру
};
for (var key in config) {
if (key in _config) {
_config[key] = config[key];
}
}
// наполнение массива _items
_sliderItems.forEach(function(item, index) {
_items.push({ item: item, position: index, transform: 0 });
});
var position = {
getItemMin: function() {
var indexItem = 0;
_items.forEach(function(item, index) {
if (item.position < _items[indexItem].position) {
indexItem = index;
}
});
return indexItem;
},
getItemMax: function() {
var indexItem = 0;
_items.forEach(function(item, index) {
if (item.position > _items[indexItem].position) {
indexItem = index;
}
});
return indexItem;
},
getMin: function() {
return _items[position.getItemMin()].position;
},
getMax: function() {
return _items[position.getItemMax()].position;
}
};
var _transformItem = function(direction) {
var nextItem;
if (direction === "right") {
_positionLeftItem++;
if (
_positionLeftItem + _wrapperWidth / _itemWidth - 1 >
position.getMax()
) {
nextItem = position.getItemMin();
_items[nextItem].position = position.getMax() + 1;
_items[nextItem].transform += _items.length * 100;
_items[nextItem].item.style.transform =
"translateX(" + _items[nextItem].transform + "%)";
}
_transform -= _step;
}
if (direction === "left") {
_positionLeftItem--;
if (_positionLeftItem < position.getMin()) {
nextItem = position.getItemMax();
_items[nextItem].position = position.getMin() - 1;
_items[nextItem].transform -= _items.length * 100;
_items[nextItem].item.style.transform =
"translateX(" + _items[nextItem].transform + "%)";
}
_transform += _step;
}
_sliderWrapper.style.transform = "translateX(" + _transform + "%)";
};
var _cycle = function(direction) {
if (!_config.isCycling) {
return;
}
_interval = setInterval(function() {
_transformItem(direction);
}, _config.interval);
};
function handleKeyboard(e) {
let key = e.key;
console.log(key);
if (key === "ArrowRight") {
_transformItem("right");
} else if (key === "ArrowLeft") {
_transformItem("left");
} else if (key === " ") {
e.preventDefault();
pauseSlider();
}
}
function pauseSlider() {
_mainElement.classList.toggle("start");
if (_mainElement.classList.contains("start")) {
clearInterval(_interval);
} else {
_cycle(_config.direction);
}
}
// обработчик события click для кнопок "назад" и "вперед"
var _controlClick = function(e) {
if (e.target.classList.contains("slider__control")) {
e.preventDefault();
var direction = e.target.classList.contains("slider__control_right")
? "right"
: "left";
_transformItem(direction);
clearInterval(_interval);
_cycle(_config.direction);
}
};
var _setUpListeners = function() {
// добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
_mainElement.onkeydown = handleKeyboard;
_sliderControls.forEach(function(item) {
item.addEventListener("click", _controlClick);
});
if (_config.pause && _config.isCycling) {
_mainElement.addEventListener("mouseenter", function() {
clearInterval(_interval);
});
_mainElement.addEventListener("mouseleave", function() {
clearInterval(_interval);
_cycle(_config.direction);
});
}
};
// инициализация
_setUpListeners();
_cycle(_config.direction);
return {
right: function() {
// метод right
_transformItem("right");
},
left: function() {
// метод left
_transformItem("left");
},
stop: function() {
// метод stop
_config.isCycling = false;
clearInterval(_interval);
},
cycle: function() {
// метод cycle
_config.isCycling = true;
clearInterval(_interval);
_cycle();
}
};
};
})();
var slider = multiItemSlider(".slider", {
isCycling: true
});
\ No newline at end of file
src/js/header.js 0 → 100644
View file @ 89263e99
let scrollment = document.getElementById('scrollment');
let lastScroll = 0;
let header = document.getElementsByTagName('header')[0];
function scroll(pageY) {
if (pageY > lastScroll) {
header.classList.remove('top-0');
} else {
header.classList.add('top-0');
}
lastScroll = pageY;
}
window.addEventListener('scroll', function(event) {
scroll(window.scrollY);
});
src/js/language.js 0 → 100644
View file @ 89263e99
let changeLanguage = document.getElementById('changeLanguage');
let pageLanguage = document.querySelector('html').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;
if (pageLanguage === 'ru') {
languagePath = './' + languageValue;
}
return languagePath;
};
window.addEventListener('load', function() {
if (pageLanguage !== currentLanguage) {
let languagePath = getLanguagePath(currentLanguage);
window.location = languagePath;
};
});
src/js/slider.js 0 → 100644
View file @ 89263e99
var multiItemSlider = (function() {
return function(selector, config) {
var _mainElement = document.querySelector(selector),
_sliderWrapper = _mainElement.querySelector(".slider__wrapper"),
_sliderItems = _mainElement.querySelectorAll(".slider__item"),
_sliderControls = _mainElement.querySelectorAll(".slider__control"),
_sliderControlLeft = _mainElement.querySelector(".slider__control_left"),
_sliderControlRight = _mainElement.querySelector(
".slider__control_right"
),
_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width),
_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width),
_positionLeftItem = 0,
_transform = 0,
_step = (_itemWidth / _wrapperWidth) * 100,
_items = [],
_interval = 0,
_config = {
isCycling: false,
direction: "right",
interval: 5000,
pause: true
};
for (var key in config) {
if (key in _config) {
_config[key] = config[key];
}
}
_sliderItems.forEach(function(item, index) {
_items.push({ item: item, position: index, transform: 0 });
});
var position = {
getItemMin: function() {
var indexItem = 0;
_items.forEach(function(item, index) {
if (item.position < _items[indexItem].position) {
indexItem = index;
}
});
return indexItem;
},
getItemMax: function() {
var indexItem = 0;
_items.forEach(function(item, index) {
if (item.position > _items[indexItem].position) {
indexItem = index;
}
});
return indexItem;
},
getMin: function() {
return _items[position.getItemMin()].position;
},
getMax: function() {
return _items[position.getItemMax()].position;
}
};
var _transformItem = function(direction) {
var nextItem;
if (direction === "right") {
_positionLeftItem++;
if (
_positionLeftItem + _wrapperWidth / _itemWidth - 1 >
position.getMax()
) {
nextItem = position.getItemMin();
_items[nextItem].position = position.getMax() + 1;
_items[nextItem].transform += _items.length * 100;
_items[nextItem].item.style.transform =
"translateX(" + _items[nextItem].transform + "%)";
}
_transform -= _step;
}
if (direction === "left") {
_positionLeftItem--;
if (_positionLeftItem < position.getMin()) {
nextItem = position.getItemMax();
_items[nextItem].position = position.getMin() - 1;
_items[nextItem].transform -= _items.length * 100;
_items[nextItem].item.style.transform =
"translateX(" + _items[nextItem].transform + "%)";
}
_transform += _step;
}
_sliderWrapper.style.transform = "translateX(" + _transform + "%)";
};
var _cycle = function(direction) {
if (!_config.isCycling) {
return;
}
_interval = setInterval(function() {
_transformItem(direction);
}, _config.interval);
};
function handleKeyboard(e) {
let key = e.key;
if (key === "ArrowRight") {
_transformItem("right");
} else if (key === "ArrowLeft") {
_transformItem("left");
} else if (key === " ") {
e.preventDefault();
pauseSlider();
}
}
function pauseSlider() {
_mainElement.classList.toggle("start");
if (_mainElement.classList.contains("start")) {
clearInterval(_interval);
} else {
_cycle(_config.direction);
}
}
var _controlClick = function(e) {
if (e.target.classList.contains("slider__control")) {
e.preventDefault();
var direction = e.target.classList.contains("slider__control_right")
? "right"
: "left";
_transformItem(direction);
clearInterval(_interval);
_cycle(_config.direction);
}
};
var _setUpListeners = function() {
_mainElement.onkeydown = handleKeyboard;
_sliderControls.forEach(function(item) {
item.addEventListener("click", _controlClick);
});
if (_config.pause && _config.isCycling) {
_mainElement.addEventListener("mouseenter", function() {
clearInterval(_interval);
});
_mainElement.addEventListener("mouseleave", function() {
clearInterval(_interval);
_cycle(_config.direction);
});
}
};
_setUpListeners();
_cycle(_config.direction);
return {
right: function() {
_transformItem("right");
},
left: function() {
_transformItem("left");
},
stop: function() {
_config.isCycling = false;
clearInterval(_interval);
},
cycle: function() {
_config.isCycling = true;
clearInterval(_interval);
_cycle();
}
};
};
})();
var slider = multiItemSlider(".slider", {
isCycling: true
});
src/js/toggleMenu.js 0 → 100644
View file @ 89263e99
let menuButton = document.getElementById('menuButton');
let menu = document.getElementById('menu');
let menuItems = Array.from(menu.querySelectorAll('a'));
menuButton.addEventListener('click', function (e) {
menuButton.classList.toggle('is-active');
menu.classList.toggle('visually-visible');
e.preventDefault();
});
menuItems.map((item) => item.addEventListener('click', function (e) {
menuButton.classList.toggle('is-active');
menu.classList.toggle('visually-visible');
}));
menuItems.map((item) => item.addEventListener('touch', function (e) {
menuButton.classList.toggle('is-active');
menu.classList.toggle('visually-visible');
}));
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