You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.2 KiB
118 lines
3.2 KiB
function rand_in_range(from, to) {
|
|
|
|
const rand = Math.floor(Math.random() * (to - from + 1)) + from
|
|
const is_neg = Math.random() < 0.5
|
|
|
|
return is_neg ? -rand : rand
|
|
}
|
|
|
|
|
|
|
|
function shuffle_cards() {
|
|
|
|
const cards = document.querySelectorAll('.card')
|
|
const random_index = Math.floor(Math.random() * cards.length);
|
|
|
|
cards.forEach((card, index) => {
|
|
if (index == random_index) {
|
|
card.classList.add('active')
|
|
card.style.zIndex = '1'
|
|
card.style.transform = `none`
|
|
} else {
|
|
card.classList.remove('active')
|
|
card.style.zIndex = 'auto'
|
|
card.style.transform = `rotate(${rand_in_range(2,5)}deg) translate(${rand_in_range(2,5)}px, ${rand_in_range(2,5)}px)`
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
document.querySelectorAll('.button_shuffle_cards').forEach((item, index) => {
|
|
item.addEventListener('click', (e) => {
|
|
shuffle_cards()
|
|
})
|
|
if (index == 0)
|
|
shuffle_cards()
|
|
})
|
|
|
|
|
|
// Choose language confirmation button
|
|
document.querySelectorAll('#confirm_btn').forEach((confirm_btn) => {
|
|
confirm_btn.addEventListener('click', (e) => {
|
|
window.location.href = '/' + document.getElementById('language_select').value
|
|
})
|
|
})
|
|
|
|
// Copy link to clipboard
|
|
document.querySelectorAll('[data-share-url]').forEach((share_btn) => {
|
|
share_btn.addEventListener('click', (e) => {
|
|
navigator.clipboard.writeText(e.currentTarget.getAttribute('data-share-url'))
|
|
alert('URL copied to clipboard!')
|
|
})
|
|
})
|
|
|
|
// Open all external links in ny tab
|
|
for (const link of document.links) {
|
|
if (link.hostname.replace(/^www\./i, "") != window.location.hostname.replace(/^www\./i, "") && (link.protocol == 'https:' || link.protocol == 'http:'))
|
|
link.target = '_blank'
|
|
}
|
|
|
|
|
|
const input_range = document.getElementsByClassName('reveal')[0]
|
|
const max_value = 200
|
|
const speed = 12
|
|
|
|
var curr_value
|
|
var raf_id
|
|
|
|
if (input_range) {
|
|
input_range.min = 0;
|
|
input_range.max = max_value;
|
|
}
|
|
|
|
function unlockStartHandler() {
|
|
window.cancelAnimationFrame(raf_id);
|
|
curr_value = +this.value;
|
|
}
|
|
|
|
function unlockEndHandler() {
|
|
curr_value = +this.value;
|
|
|
|
if (curr_value >= this.max) {
|
|
|
|
const card = document.querySelector('.card.active')
|
|
window.location.href = card.parentNode.getAttribute('href')
|
|
|
|
// reset
|
|
this.value = 0;
|
|
this.closest('.reveal__container').style.setProperty('--opacity', 1);
|
|
} else {
|
|
raf_id = window.requestAnimationFrame(animateHandler);
|
|
}
|
|
}
|
|
|
|
// handle range animation
|
|
function animateHandler() {
|
|
|
|
input_range.value = curr_value;
|
|
input_range.closest('.reveal__container').style.setProperty('--opacity', 1 - (input_range.value/input_range.max));
|
|
|
|
// continue?
|
|
if (curr_value > -1) {
|
|
window.requestAnimationFrame(animateHandler);
|
|
}
|
|
|
|
// decrement
|
|
curr_value = curr_value - speed;
|
|
}
|
|
|
|
if (input_range) {
|
|
input_range.addEventListener('mousedown', unlockStartHandler, false)
|
|
input_range.addEventListener('mousestart', unlockStartHandler, false)
|
|
input_range.addEventListener('mouseup', unlockEndHandler, false)
|
|
input_range.addEventListener('touchend', unlockEndHandler, false)
|
|
|
|
input_range.addEventListener("input", (e) => {
|
|
e.currentTarget.closest('.reveal__container').style.setProperty('--opacity', 1 - (e.currentTarget.value/e.currentTarget.max))
|
|
})
|
|
}
|