272 lines
7.7 KiB
JavaScript
272 lines
7.7 KiB
JavaScript
//find and place wg-ajax-button-switcher
|
|
|
|
function switcherPlacement() {
|
|
const button_switcher_ajax = document.querySelectorAll(".weglot-custom-switcher-ajax")
|
|
Array.prototype.forEach.call(button_switcher_ajax, function (el, i) {
|
|
let button_sibling = null;
|
|
let button_target = null;
|
|
let targetSelector = null;
|
|
let siblingSelector = null;
|
|
|
|
if (el.getAttribute('data-wg-target') !== '') {
|
|
targetSelector = el.getAttribute('data-wg-target');
|
|
}
|
|
|
|
if (el.getAttribute('data-wg-sibling') !== '') {
|
|
siblingSelector = el.getAttribute('data-wg-sibling');
|
|
}
|
|
|
|
if (targetSelector) {
|
|
button_target = document.querySelector(targetSelector)
|
|
}
|
|
if (siblingSelector) {
|
|
button_sibling = document.querySelector(siblingSelector)
|
|
}
|
|
|
|
if (button_target != null && button_sibling != null) {
|
|
button_target.insertBefore(el, button_sibling)
|
|
el.classList.remove("weglot-custom-switcher-ajax")
|
|
} else if (button_target && button_sibling == null) {
|
|
button_target.insertBefore(el, button_target.firstChild)
|
|
el.classList.remove("weglot-custom-switcher-ajax")
|
|
} else if (button_sibling && button_target == null) {
|
|
button_sibling.parentNode.insertBefore(el, button_sibling)
|
|
el.classList.remove("weglot-custom-switcher-ajax")
|
|
}
|
|
})
|
|
}
|
|
|
|
//detect iframe
|
|
function inFrame() {
|
|
try {
|
|
return window.frameElement || window.self !== window.top;
|
|
} catch (_) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
setTimeout(() => {
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener( "DOMContentLoaded", () => switcherPlacement() );
|
|
} else {
|
|
switcherPlacement();
|
|
}
|
|
}, 1500);
|
|
|
|
document.addEventListener( "DOMContentLoaded", function ( event ) {
|
|
|
|
function getOffset(element) {
|
|
let top = 0, left = 0;
|
|
do {
|
|
top += element.offsetTop || 0;
|
|
left += element.offsetLeft || 0;
|
|
element = element.offsetParent;
|
|
} while (element);
|
|
|
|
return {
|
|
top: top, left: left
|
|
};
|
|
}
|
|
|
|
const button = document.querySelector(".country-selector");
|
|
if (!button) {
|
|
return;
|
|
}
|
|
const h = getOffset(button).top;
|
|
const body = document.body, html = document.documentElement;
|
|
const page_height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
|
|
|
|
const position = window.getComputedStyle(button).getPropertyValue("position");
|
|
const bottom = window.getComputedStyle(button).getPropertyValue("bottom");
|
|
const top = window.getComputedStyle(button).getPropertyValue("top");
|
|
|
|
if ((position !== "fixed" && h > page_height / 2) || (position === "fixed" && h > 100)) {
|
|
button.className += " weglot-invert";
|
|
}
|
|
|
|
//check if your page is load by an iframe
|
|
if (inFrame()) {
|
|
const switchers = document.querySelectorAll('.weglot-dropdown')
|
|
if (switchers !== null) {
|
|
[].forEach.call(switchers, function (switcher) {
|
|
switcher.style.display = "none";
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener("click", (evt) => {
|
|
let targetEl = evt.target;
|
|
|
|
if(targetEl.closest('.country-selector.close_outside_click') == null){
|
|
document.querySelectorAll(".country-selector.close_outside_click.weglot-dropdown input").forEach( (node) => {
|
|
node.checked = false
|
|
})
|
|
}
|
|
});
|
|
|
|
const asides = document.getElementsByClassName("country-selector");
|
|
const isOpen = link => !link.className.includes("closed");
|
|
let focusedLang;
|
|
if (asides.length > 0) {
|
|
const selectedLang = document.getElementsByClassName("wgcurrent");
|
|
for (let aside of asides) {
|
|
|
|
// accessiblity button
|
|
const KEYCODE = {
|
|
ENTER: 13, ESCAPE: 27, ARROWUP: 38, ARROWDOWN: 40,
|
|
};
|
|
|
|
const isOpenUp = () => {
|
|
// If switcher is in second half of page, set weg-openup class
|
|
const {bottom = 0} = aside.getBoundingClientRect();
|
|
return bottom > window.innerHeight / 2;
|
|
};
|
|
|
|
const openSwitcher = () => {
|
|
aside.classList.remove("closed");
|
|
document.querySelectorAll(".country-selector.weglot-dropdown input").checked = true;
|
|
aside.setAttribute("aria-expanded", "true");
|
|
};
|
|
|
|
const closeSwitcher = () => {
|
|
aside.classList.add("closed");
|
|
document.querySelectorAll(".country-selector.weglot-dropdown input").checked = false
|
|
aside.setAttribute("aria-expanded", "false");
|
|
if (focusedLang) {
|
|
focusedLang.classList.remove("focus");
|
|
focusedLang = null;
|
|
}
|
|
};
|
|
|
|
const setAriaLabel = code => {
|
|
const fullNameLang = getLangNameFromCode(code);
|
|
//aside.setAttribute("aria-activedescendant", "weglot-language-" + code);
|
|
aside.setAttribute("aria-label", "Language selected: " + code);
|
|
};
|
|
|
|
const toggleSwitcher = () => {
|
|
if (aside.classList.contains("closed")) {
|
|
openSwitcher();
|
|
} else {
|
|
closeSwitcher();
|
|
}
|
|
if (focusedLang) {
|
|
focusedLang.classList.remove("focus");
|
|
}
|
|
focusedLang = null;
|
|
};
|
|
|
|
// Toggle when focused and keydown ENTER.
|
|
aside.addEventListener("keydown", event => {
|
|
if (event.keyCode === KEYCODE.ENTER) {
|
|
//event.preventDefault();
|
|
//selectedLang.click();
|
|
for (var i = 0; i < selectedLang.length; i++) {
|
|
selectedLang[i].click();
|
|
}
|
|
if (focusedLang) {
|
|
const destinationLanguage = focusedLang.getAttribute("data-l");
|
|
setAriaLabel(destinationLanguage);
|
|
aside.focus();
|
|
}
|
|
toggleSwitcher();
|
|
return;
|
|
}
|
|
if (event.keyCode === KEYCODE.ARROWDOWN || event.keyCode === KEYCODE.ARROWUP) {
|
|
event.preventDefault();
|
|
moveFocus(event.keyCode);
|
|
return;
|
|
}
|
|
if (event.keyCode === KEYCODE.ESCAPE && isOpen(aside)) {
|
|
// Close switcher.
|
|
event.preventDefault();
|
|
closeSwitcher();
|
|
aside.focus();
|
|
}
|
|
});
|
|
|
|
aside.addEventListener("mousedown", event => {
|
|
if (focusedLang) {
|
|
const destinationLanguage = focusedLang.getAttribute("data-l");
|
|
setAriaLabel(destinationLanguage);
|
|
aside.focus();
|
|
}
|
|
toggleSwitcher();
|
|
return;
|
|
});
|
|
|
|
if(aside.className.includes("open_hover")){
|
|
aside.addEventListener("mouseenter", event => {
|
|
if (focusedLang) {
|
|
const destinationLanguage = focusedLang.getAttribute("data-l");
|
|
setAriaLabel(destinationLanguage);
|
|
aside.focus();
|
|
}
|
|
toggleSwitcher();
|
|
aside.querySelector("input.weglot_choice").checked = true
|
|
return;
|
|
});
|
|
|
|
aside.addEventListener("mouseleave", event => {
|
|
if (focusedLang) {
|
|
const destinationLanguage = focusedLang.getAttribute("data-l");
|
|
setAriaLabel(destinationLanguage);
|
|
aside.focus();
|
|
}
|
|
toggleSwitcher();
|
|
aside.querySelector("input.weglot_choice").checked = false
|
|
return;
|
|
});
|
|
}
|
|
|
|
|
|
const moveFocus = keyCode => {
|
|
const direction = keyCode === KEYCODE.ARROWDOWN ? "nextSibling" : "previousSibling";
|
|
const openUp = isOpenUp();
|
|
|
|
if (!focusedLang || !isOpen(aside)) {
|
|
// Focus the first or last language
|
|
const selector = openUp ? "ul li.wg-li:last-child" : "ul li.wg-li";
|
|
|
|
for (var i = 0; i < selectedLang.length; i++) {
|
|
//selectedLang[i].click();
|
|
focusedLang = selectedLang[i].parentNode.querySelector(selector);
|
|
}
|
|
|
|
if (!focusedLang) {
|
|
return;
|
|
}
|
|
focusedLang.classList.add("focus");
|
|
focusedLang.childNodes[0].focus();
|
|
focusedLang.scrollIntoView({block: "center"});
|
|
|
|
// if right direction, open it
|
|
const needToOpen = (keyCode === KEYCODE.ARROWUP && openUp) || (keyCode === KEYCODE.ARROWDOWN && !openUp);
|
|
if (!isOpen(aside) && needToOpen) {
|
|
openSwitcher();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Focus next or prev language, if exists
|
|
if (!focusedLang[direction]) {
|
|
// if last element, close it
|
|
if ((keyCode === KEYCODE.ARROWUP && !openUp) || (keyCode === KEYCODE.ARROWDOWN && openUp)) {
|
|
closeSwitcher();
|
|
aside.focus();
|
|
}
|
|
return;
|
|
}
|
|
|
|
focusedLang.classList.remove("focus");
|
|
focusedLang = focusedLang[direction];
|
|
focusedLang.classList.add("focus");
|
|
focusedLang.childNodes[0].focus();
|
|
focusedLang.scrollIntoView({block: "center"});
|
|
};
|
|
}
|
|
}
|
|
|
|
return false;
|
|
});
|