Spaces:
Running
Running
File size: 3,209 Bytes
20ecd05 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
const translate_size = 140
const carts = [...document.querySelectorAll('.feature-viz-intro .gallery-container-img')]
carts.map(car => {
car.addEventListener("click", (event) => {
// show little crops
hidden_images = [...car.querySelectorAll(".hidden-images img")]
hidden_images.map((img, i) => {
theta = i * 2 * Math.PI / hidden_images.length
if (img.style.transform == `translate(0px, 0px)` || img.style.transform == `` || img.style.transform == `translate(0px)`) {
img.style.transform = `translate(${Math.cos(theta) * 140}px, ${Math.sin(theta) * 140}px)`
img.style.opacity = 1
} else {
img.style.transform = `translate(0px, 0px)`
img.style.opacity = 0
}
//console.log(img, theta)
//img.style.transform = `translate(${'{'}Math.cos(theta) * translate_size{'}'}px, ${'{'}Math.sin(theta) * translate_size{'}'}px)`
})
// if possible, show the most similar classes
let concept_id = car.id.split('-')[1]
if (concept_id in concept_to_classes) {
document.querySelector('.classes-proximity-info').innerHTML = concept_to_classes[concept_id]
document.querySelector('.classes-proximity').style.borderColor = car.style.borderColor
document.querySelector('.classes-proximity').style.opacity = 1.0
} else {
document.querySelector('.classes-proximity-info').innerHTML = ""
document.querySelector('.classes-proximity').style.borderColor = "white"
document.querySelector('.classes-proximity').opacity = 0.0
}
// remove the previous selected
carts.map(c => {
if (c.id != car.id) {
// hide the little crops
hidden_images = [...c.querySelectorAll(".hidden-images img")]
hidden_images.map((img, i) => {
img.style.transform = `translate(0px, 0px)`
img.style.opacity = 0
})
// opacity on the other carts
c.style.opacity = 0.25
}
});
});
})
// on hover on some cart, hide the other little crops
carts.map(car => {
car.addEventListener("mouseleave", (event) => {
carts.map(c => {
hidden_images = [...c.querySelectorAll(".hidden-images img")]
hidden_images.map((img, i) => {
img.style.transform = `translate(0px, 0px)`
img.style.opacity = 0
})
// put the original opacity
c.style.opacity = 1.0
});
});
})
const hide_image = () => {
let img = document.getElementById("img-tooltip");
let container = document.querySelector(".image-hover");
container.style.display = "none";
}
function go_random_class(){
let links = document.querySelectorAll('.md-nav.md-nav--primary .md-nav__item--nested .md-nav__item');
let random_index = Math.floor(Math.random() * links.length);
let random_link = links[random_index];
let anchor = random_link.querySelector('a');
let href = anchor.href;
window.location.href = href;
}
|