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.
221 lines
5.9 KiB
221 lines
5.9 KiB
import "@hotwired/turbo-rails"
|
|
|
|
var input_range
|
|
const max_value = 180
|
|
const speed = 12
|
|
|
|
var curr_value
|
|
var raf_id
|
|
var random_salt = Math.random()
|
|
|
|
|
|
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__container')
|
|
const card_ids = Array.from(cards).map(card => card.getAttribute('data-id'))
|
|
let shown_cards = JSON.parse(localStorage.getItem('shown_cards')) || [];
|
|
|
|
let cards_not_shown = card_ids.filter(id => !shown_cards.includes(id));
|
|
|
|
if (cards_not_shown.length <= 0) {
|
|
cards_not_shown = card_ids
|
|
shown_cards = []
|
|
}
|
|
const random_id = cards_not_shown[Math.floor(Math.random() * cards_not_shown.length)];
|
|
|
|
cards.forEach((card) => {
|
|
if (card.getAttribute('data-id') == random_id) {
|
|
card.style.zIndex = '1'
|
|
card.style.transform = ''
|
|
card.classList.add('active')
|
|
} 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)`
|
|
}
|
|
})
|
|
|
|
shown_cards.push(random_id);
|
|
localStorage.setItem('shown_cards', JSON.stringify(shown_cards));
|
|
}
|
|
|
|
document.addEventListener("turbo:load", ()=> {
|
|
init()
|
|
|
|
})
|
|
|
|
document.addEventListener("turbo:before-cache", () => {
|
|
if (input_range) {
|
|
input_range.value = 0;
|
|
input_range.closest('.reveal__container').style.setProperty('--opacity', 1);
|
|
updateRotation(input_range.value)
|
|
}
|
|
|
|
let images = document.querySelectorAll("img.fade-in.loaded")
|
|
images.forEach(image => {
|
|
image.classList.remove("loaded")
|
|
})
|
|
|
|
|
|
})
|
|
|
|
function init() {
|
|
|
|
random_salt = Math.random()
|
|
|
|
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
|
|
Turbo.visit('/' + document.getElementById('language_select').value, {advance: 'advance'})
|
|
|
|
})
|
|
})
|
|
|
|
|
|
// Copy link to clipboard
|
|
document.querySelectorAll('[data-share-title]').forEach((share_btn) => {
|
|
share_btn.addEventListener('click', (e) => {
|
|
|
|
if (navigator.share) {
|
|
navigator.share({
|
|
title: e.currentTarget.getAttribute('data-share-title'),
|
|
text: e.currentTarget.getAttribute('data-share-text'),
|
|
url: window.location.href
|
|
}).then(() => {
|
|
console.log('Thanks for sharing!');
|
|
})
|
|
.catch(console.error);
|
|
} else {
|
|
navigator.clipboard.writeText(window.location.href)
|
|
alert('URL copied to clipboard!')
|
|
}
|
|
|
|
|
|
})
|
|
})
|
|
|
|
document.querySelectorAll('.card__stack a').forEach((card_link) => {
|
|
card_link.addEventListener('click', (e) => {
|
|
e.preventDefault()
|
|
})
|
|
})
|
|
|
|
|
|
// 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'
|
|
}
|
|
|
|
input_range = document.getElementsByClassName('reveal')[0]
|
|
|
|
if (input_range) {
|
|
input_range.min = 0;
|
|
input_range.max = max_value;
|
|
}
|
|
|
|
if (input_range) {
|
|
input_range.addEventListener('mousedown', unlockStartHandler, false)
|
|
input_range.addEventListener('touchstart', 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))
|
|
|
|
updateRotation(e.currentTarget.value)
|
|
})
|
|
}
|
|
|
|
let images = document.querySelectorAll("img.fade-in")
|
|
|
|
images.forEach(image => {
|
|
image.addEventListener("load", () => {
|
|
image.classList.add("loaded")
|
|
})
|
|
|
|
// For cached images that may already be loaded
|
|
if (image.complete) {
|
|
window.requestAnimationFrame(() => {
|
|
image.classList.add("loaded")
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
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__container.active')
|
|
//window.location.href = card.parentNode.getAttribute('href')
|
|
Turbo.visit(card.parentNode.getAttribute('href'), { action: 'advance'} )
|
|
|
|
} 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));
|
|
updateRotation(input_range.value)
|
|
|
|
// continue?
|
|
if (curr_value > -1) {
|
|
window.requestAnimationFrame(animateHandler);
|
|
}
|
|
|
|
// decrement
|
|
curr_value = curr_value - speed;
|
|
}
|
|
|
|
|
|
function updateRotation(angle) {
|
|
document.documentElement.style.setProperty('--flip-deg', angle + 'deg')
|
|
document.documentElement.style.setProperty('--flip-scale', calculateScaleFactor(angle))
|
|
document.documentElement.style.setProperty('--flip-rotate', calculateRotateFactor(angle) + 'deg')
|
|
}
|
|
|
|
|
|
function calculateScaleFactor(angle) {
|
|
const radians = angle * (Math.PI / 180)
|
|
return 1 + (0.1 * Math.sin(radians))
|
|
// return 1 + (0.2 * (angle / 180))
|
|
}
|
|
|
|
|
|
function calculateRotateFactor(angle) {
|
|
const radians = angle * (Math.PI / 180)
|
|
return (4 * Math.sin(radians)) + (random_salt * 2)
|
|
|
|
}
|