You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
179 lines
5.1 KiB
JavaScript
179 lines
5.1 KiB
JavaScript
2 years ago
|
let menu = 0
|
||
|
let show = 0
|
||
|
let instruction = 0
|
||
|
let info = 0
|
||
|
let colors = ['#b4bddf', '#e4cd8c', 'rgb(228, 205, 254)', "white"]
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
// STYLishING
|
||
|
|
||
|
document.getElementsByTagName("body")[0].addEventListener("dblclick", function () {
|
||
|
// alert("cane")
|
||
|
let r = Math.floor(Math.random() * 3)
|
||
|
let r2 = r + 1
|
||
|
console.log(r)
|
||
|
document.getElementsByTagName("body")[0].style.background = colors[r]
|
||
|
document.getElementById("navbar").style.setProperty('--navbar_back', colors[r2]);
|
||
|
document.getElementById("customizer").style.setProperty('--navbar_back', colors[r2]);
|
||
|
if (r2 == 4) {
|
||
|
document.getElementById("navbar").style.setProperty('--navbar_text', 'black');
|
||
|
}
|
||
|
})
|
||
|
|
||
|
let dark = 0
|
||
|
|
||
|
|
||
|
document.getElementById("darkbck").addEventListener("click", function(){
|
||
|
if (dark==0){
|
||
|
document.body.style.background= "black"
|
||
|
dark++}
|
||
|
else if (dark ==1){
|
||
|
document.body.style.background= "white"
|
||
|
dark--
|
||
|
}
|
||
|
})
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
document.getElementById("nav_button").innerHTML = "OPEN TREE"
|
||
|
document.getElementById("custom_button").innerHTML = "OPEN CUSTOMIZER"
|
||
|
|
||
|
document.getElementById("nav_button").addEventListener("click", function () {
|
||
|
if (menu == 0) {
|
||
|
document.getElementById("nav_button").innerHTML = "CLOSE TREE"
|
||
|
document.getElementById("navbar").style.display = "block"
|
||
|
menu++
|
||
|
} else if (menu == 1) {
|
||
|
document.getElementById("nav_button").innerHTML = "OPEN TREE"
|
||
|
document.getElementById("navbar").style.display = "none"
|
||
|
menu = 0
|
||
|
}
|
||
|
})
|
||
|
|
||
|
document.getElementById("custom_button").addEventListener("click", function () {
|
||
|
if (show == 0) {
|
||
|
document.getElementById("custom_button").innerHTML = "CLOSE CUSTOMIZER"
|
||
|
document.getElementById("customizer").style.display = "block"
|
||
|
show++
|
||
|
} else if (show == 1) {
|
||
|
document.getElementById("custom_button").innerHTML = "OPEN CUSTOMIZER"
|
||
|
document.getElementById("customizer").style.display = "none"
|
||
|
show = 0
|
||
|
}
|
||
|
})
|
||
|
|
||
|
function dark_back() { //and also close_all button
|
||
|
if (info == 1 || instruction == 1) {
|
||
|
// document.getElementById("layer_dark").style.display = "block"
|
||
|
document.getElementById("close_all").style.display = "block";
|
||
|
} else if (info == 0 && instruction == 0) {
|
||
|
// document.getElementById("layer_dark").style.display = "none"
|
||
|
document.getElementById("close_all").style.display = "none";
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
function infos() {
|
||
|
if (info == 0) {
|
||
|
document.getElementById("info").style.display = "block"
|
||
|
document.getElementById("instruction").style.display = "none"
|
||
|
info++
|
||
|
instruction = 0
|
||
|
} else if (info == 1) {
|
||
|
document.getElementById("info").style.display = "none"
|
||
|
info = 0
|
||
|
}
|
||
|
dark_back()
|
||
|
}
|
||
|
|
||
|
function instructions() {
|
||
|
if (instruction == 0) {
|
||
|
document.getElementById("instruction").style.display = "block"
|
||
|
document.getElementById("info").style.display = "none"
|
||
|
instruction++
|
||
|
info = 0
|
||
|
} else if (instruction == 1) {
|
||
|
document.getElementById("instruction").style.display = "none"
|
||
|
instruction = 0
|
||
|
}
|
||
|
dark_back()
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
function closeclose() {
|
||
|
document.getElementById("instruction").style.display = "none";
|
||
|
document.getElementById("info").style.display = "none";
|
||
|
info = 0
|
||
|
instruction = 0
|
||
|
dark_back()
|
||
|
document.getElementById("close_all").style.display = "none";
|
||
|
}
|
||
|
|
||
|
document.getElementById("info_button").addEventListener("click", infos)
|
||
|
document.getElementById("instruction_button").addEventListener("click", instructions)
|
||
|
document.getElementById("close_all").addEventListener("click", closeclose)
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
var isInViewport = function(elem) {
|
||
|
var distance = elem.getBoundingClientRect();
|
||
|
return (
|
||
|
distance.top >= 0 &&
|
||
|
distance.left >= 0 &&
|
||
|
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
|
||
|
distance.right <= (window.innerWidth || document.documentElement.clientWidth)
|
||
|
);
|
||
|
};
|
||
|
|
||
|
var findMe = document.querySelectorAll('.box');
|
||
|
var bars = document.querySelectorAll(".showbar")
|
||
|
|
||
|
window.addEventListener('scroll', function(event) {
|
||
|
|
||
|
findMe.forEach(element => {
|
||
|
if (isInViewport(element)) {
|
||
|
let trig = element.classList[1]
|
||
|
console.log(trig)
|
||
|
if(document.querySelector(".showbar."+trig).style.display ="none"){
|
||
|
bars.forEach(bar => {
|
||
|
bar.style.display ="none"
|
||
|
});
|
||
|
document.querySelector(".showbar."+trig).style.display ="block"
|
||
|
}else{
|
||
|
console.log()
|
||
|
}}
|
||
|
});
|
||
|
}, false);
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
var links = document.querySelectorAll('a');
|
||
|
links = Array.prototype.slice.call(links);
|
||
|
|
||
|
links.forEach(link => {
|
||
|
var href = link.getAttribute('href');
|
||
|
if(link.getAttribute('href').startsWith('#')){
|
||
|
// console.log('addingClickHandler',link);
|
||
|
link.addEventListener('click',function(e){
|
||
|
e.preventDefault();
|
||
|
var dest = document.getElementById(href.substring(1)).parentNode;
|
||
|
// console.log('click', href, dest)
|
||
|
dest.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
|
||
|
})
|
||
|
}
|
||
|
|
||
|
});
|