Difference between revisions of "Template:Queens Canada/Scripts"

m
m
 
(89 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Queens_Canada/Particles&action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:Queens_Canada/Particles&action=raw&ctype=text/javascript"></script>
 +
 
<script>
 
<script>
 +
  
 
// makes the default page title not display  
 
// makes the default page title not display  
Line 11: Line 13:
 
var navItems = document.getElementsByClassName("nav-item"); // gets all of the nav-items
 
var navItems = document.getElementsByClassName("nav-item"); // gets all of the nav-items
 
var foodItems = document.getElementsByClassName("food-item-inner");
 
var foodItems = document.getElementsByClassName("food-item-inner");
 +
var foodItems2 = document.getElementsByClassName("food-item");
 
var team = document.getElementsByClassName("overlay");
 
var team = document.getElementsByClassName("overlay");
 
var navbarLinks = document.getElementsByClassName("navbar-links");
 
var navbarLinks = document.getElementsByClassName("navbar-links");
Line 105: Line 108:
 
     navbarLinks[0].style.height = "100%";
 
     navbarLinks[0].style.height = "100%";
 
     var navBtn = document.getElementById("nav-icon");
 
     var navBtn = document.getElementById("nav-icon");
 +
    var navLinks = document.getElementsByClassName("navbar-links")[0];
 
     navBtn.setAttribute("onclick", "closeMobileNav()");
 
     navBtn.setAttribute("onclick", "closeMobileNav()");
 +
    navBtn.classList.toggle("toggle-nav");
 +
    navBtn.title = "Close Nav";
 +
    navLinks.classList.toggle("openNavLinks");
 +
   
 
}
 
}
  
 
function closeMobileNav() {
 
function closeMobileNav() {
−
     closeSubmenus();
+
     //closeSubmenus();//
 
     navbarLinks[0].style.height = 0;
 
     navbarLinks[0].style.height = 0;
 
     var navBtn = document.getElementById("nav-icon");
 
     var navBtn = document.getElementById("nav-icon");
 +
    var navLinks = document.getElementsByClassName("navbar-links")[0];
 
     navBtn.setAttribute("onclick", "openMobileNav()");
 
     navBtn.setAttribute("onclick", "openMobileNav()");
 +
    navBtn.classList.toggle("toggle-nav");
 +
    navBtn.title = "Open Nav";
 +
    navLinks.classList.toggle("openNavLinks");
 
}
 
}
  
Line 132: Line 144:
  
 
function flipFood(x) {
 
function flipFood(x) {
−
     unFlipFood();
+
     foodItems[x-1].className = "food-item-inner flipped-food-item-inner";  
−
 
+
    foodItems2[x-1].setAttribute("onclick", "unFlipFood(" +x.toString()+ ")");
−
    for(i = 0; i < foodItems.length; i++) {
+
−
        if(i == (x-1)) {
+
−
            foodItems[i].className = "food-item-inner flipped-food-item-inner";
+
−
            foodItems[i].setAttribute("onclick","unFlipFood()");
+
−
        }
+
−
    }
+
 
     foodPop(x);
 
     foodPop(x);
 
}
 
}
  
−
function unFlipFood() {
+
function unFlipFood(x) {
−
     for(i = 0; i < foodItems.length; i++) {
+
     foodItems[x-1].className = "food-item-inner food-item-inner-1";
−
        foodItems[i].className = "food-item-inner food-item-inner-1";
+
    foodItems2[x-1].setAttribute("onclick", "flipFood(" +x.toString()+ ")");
−
        var newOnClick = "flipFood(" + (i+1).toString() + ")";
+
     foodPop(x);
−
        foodItems[i].setAttribute("onclick", newOnClick);
+
−
        if(homeFoodConts[i].className == "food-img-container popped") {
+
−
            homeFoodConts[i].className = "food-img-container";
+
−
            setTimeout(function(){ homeFoodConts[i].className = "food-img-container popped"; }, 500);
+
−
           
+
−
        }
+
−
     }
+
 
}
 
}
  
Line 166: Line 165:
 
function toInteractive() {
 
function toInteractive() {
 
     var startOfInteractive = (document.getElementById("home-welcome").offsetHeight) + (document.getElementsByClassName("navbar")[0].offsetHeight);
 
     var startOfInteractive = (document.getElementById("home-welcome").offsetHeight) + (document.getElementsByClassName("navbar")[0].offsetHeight);
−
     window.scrollTo(0, startOfInteractive);
+
     //window.scrollTo(0, startOfInteractive);
 +
    window.scroll({top: startOfInteractive, left: 0, behaviour: 'smooth'});
 +
    console.log("It should have just scrolled");
 
    
 
    
 
}
 
}
Line 172: Line 173:
 
     window.scrollTo(0, document.getElementById("team-title").offsetHeight);
 
     window.scrollTo(0, document.getElementById("team-title").offsetHeight);
 
}
 
}
 +
function scrollDownProject(){
 +
    window.scrollTo(0, document.getElementById("page-content").offsetHeight);
 +
}
 +
 
function googleTranslateElementInit() {
 
function googleTranslateElementInit() {
 
   new google.translate.TranslateElement({pageLanguage: 'en'}, 'translate-feature');
 
   new google.translate.TranslateElement({pageLanguage: 'en'}, 'translate-feature');
Line 179: Line 184:
 
function mobileNav() {
 
function mobileNav() {
 
     if(window.innerWidth <= 1024) {
 
     if(window.innerWidth <= 1024) {
−
         //dropdownLinks[0].setAttribute("onclick", "openSubmenu(1)");
+
         var navBtn = document.getElementById("nav-icon");
−
         //dropdownLinks[1].setAttribute("onclick", "openSubmenu(2)");
+
         if(navBtn.classList.contains("toggle-nav")) {
−
        //dropdownLinks[2].setAttribute("onclick", "openSubmenu(3)");
+
            closeMobileNav();
−
         //dropdownLinks[3].setAttribute("onclick", "openSubmenu(4)");  
+
         }
 +
        else {
 +
            navbarLinks[0].style.height = 0;
 +
        }
 
     }
 
     }
 
     else {
 
     else {
−
         //for(i = 0; i < dropdownLinks.length; i++) {
+
         navbarLinks[0].style.height = "100%"; // to ensure that the regular nav bar gets set back to regular height even after
−
        //    dropdownLinks[i].setAttribute("onclick", "");
+
                                            // the mobile nav has been opened and closed(which would set the height back to 0)
−
        //}
+
 
     }
 
     }
 
}   
 
}   
Line 249: Line 256:
 
/*Script for opening video overlay*/
 
/*Script for opening video overlay*/
 
function toggle(){
 
function toggle(){
−
     var introVid = document.querySelector(".intro-video")
+
    // 74.07% x 48.25% is the size of the circle relative to its container. Not used right now.
−
      
+
     var introVidScreen = document.querySelector(".intro-video-screen")
−
     var video = document.querySelector("video")
+
     var circle = document.querySelector(".home-video-circle")
−
     introVid.classList.toggle("active");
+
     var video = document.querySelector(".actual-intro-video")
 +
 
 +
     var scrollValue = window.innerHeight * 0.1384;
 +
    var scrollValue2 = scrollValue - (scrollValue * 2);
 +
 
 +
    // the next two lines make it so that the full screen animation looks the best for the user
 +
    // and so that if they scroll while viewing the video, they go back to the same place
 +
    // the second line adjust the scrolling to accomadate for the wiki bar at the top
 +
    //document.getElementsByClassName("home-video")[0].scrollIntoView();
 +
    document.getElementById("home-intro-video").scrollIntoView();
 +
    if(window.innerWidth >= 992)
 +
    {
 +
        window.scrollBy(0,scrollValue2);
 +
    }
 +
 
 +
    if(circle.classList.contains("full-circle"))
 +
    {
 +
        introVidScreen.classList.toggle("active");
 +
        setTimeout(function(){ circle.classList.toggle("full-circle"); }, 800);
 +
    }
 +
    else
 +
    { 
 +
        circle.classList.toggle("full-circle");
 +
        setTimeout(function(){ introVidScreen.classList.toggle("active"); }, 800);
 +
    }
 +
 
     video.pause();
 
     video.pause();
 
     video.currentTime = 0;
 
     video.currentTime = 0;
 +
}
 +
 +
function pauseHomeVideo() {
 +
    var video = document.querySelector(".actual-intro-video")
 +
    video.pause();
 
}
 
}
  
Line 269: Line 306:
  
 
function foodPop(x) {   
 
function foodPop(x) {   
−
     homeFoodConts[x-1].className = "food-img-container popped";
+
     homeFoodConts[x-1].className = "food-img-container popped"
−
 
+
−
    for(i = 0; i < foodItems.length; i++) {
+
−
        if(i+1 != x)
+
−
            homeFoodConts[i].className = "food-img-container";
+
−
    }
+
−
 
+
  
 +
    setTimeout(function(){ for(i = 0; i < foodItems.length; i++) {
 +
        homeFoodConts[i].className = "food-img-container";
 +
    } }, 800);
 +
   
 +
 
 
}
 
}
 +
 +
window.addEventListener("load", function () {
 +
    const loader = document.querySelector(".loader-wrapper");
 +
    loader.className += " hidden";
 +
    const e = document.getElementById("loader-wrapper-id");
 +
    e.addEventListener("animationend", (ev) => {
 +
        if (ev.type === "animationend") {
 +
            e.style.display = "none";
 +
        }
 +
    }, false);
 +
});
  
 
</script>
 
</script>

Latest revision as of 01:18, 27 October 2020