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

m
m
 
(202 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
 
<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>
 
<script>
 +
  
 
// makes the default page title not display  
 
// makes the default page title not display  
Line 10: 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 navBtn = document.getElementById("nav-icon");
+
var foodItems2 = document.getElementsByClassName("food-item");
 +
var team = document.getElementsByClassName("overlay");
 +
var navbarLinks = document.getElementsByClassName("navbar-links");
 +
var dropdownLinks = document.getElementsByClassName("dropdown");
 +
var dropdownContent = document.getElementsByClassName("dropdown-content");
 +
var wordArray = ["Humans", "Scientists", "Researchers", "Engineers", "Designers"]
 +
var wordIndex = 0; //Start at first word in wordArray
 +
var displayWord = wordArray[wordIndex];
 +
var stateChange = 0;
 +
var wordIncrement = -1 //controls whether the word is being generated or deleted
 +
const wordTime = 1000;
 +
const changeWordTime = 100; //Time to switch letters
 +
var homeFoodConts = document.getElementsByClassName("food-img-container");
 +
 
 +
for(i = 0; i < dropdownLinks.length; i++)
 +
{
 +
    dropdownLinks[i].addEventListener("click", function()
 +
    {
 +
        var dropdownContent = this.nextElementSibling;
 +
        if(dropdownContent.style.visiblity == "visible")
 +
        {
 +
            dropdownContent.style.visibility = "hidden";
 +
        }
 +
        else
 +
        {
 +
            dropdownContent.style.visiblity = "visible";
 +
        }
 +
    })
 +
}
  
 
$(document).ready(function(){
 
$(document).ready(function(){
Line 17: Line 48:
 
});
 
});
 
});
 
});
−
 
+
// old
 
function openNav() {
 
function openNav() {
 
     document.getElementById("nav-elements").style.right = "0";
 
     document.getElementById("nav-elements").style.right = "0";
Line 36: Line 67:
  
 
}
 
}
−
 
+
//old
 
function closeNav() {
 
function closeNav() {
 
     closeSubmenus();
 
     closeSubmenus();
Line 56: Line 87:
 
     //document.getElementById("close-nav-button").style.display = "none";
 
     //document.getElementById("close-nav-button").style.display = "none";
 
}
 
}
−
       
+
// old   
 
function closeSubmenus() {
 
function closeSubmenus() {
 +
   
 
     for(i = 0; i < dropLinks.length; i++) {
 
     for(i = 0; i < dropLinks.length; i++) {
 
         dropLinks[i].className = "drop-link nav-item"; // gets rid of the active-menu class name
 
         dropLinks[i].className = "drop-link nav-item"; // gets rid of the active-menu class name
 
     }
 
     }
 
}
 
}
−
           
+
// old           
 
function showSubmenu(x) {
 
function showSubmenu(x) {
 
     closeSubmenus(); // first closes the current open submenu
 
     closeSubmenus(); // first closes the current open submenu
Line 73: Line 105:
 
}
 
}
  
−
function flipFood(x) {
+
function openMobileNav() {
−
     unFlipFood();
+
     navbarLinks[0].style.height = "100%";
 +
    var navBtn = document.getElementById("nav-icon");
 +
    var navLinks = document.getElementsByClassName("navbar-links")[0];
 +
    navBtn.setAttribute("onclick", "closeMobileNav()");
 +
    navBtn.classList.toggle("toggle-nav");
 +
    navBtn.title = "Close Nav";
 +
    navLinks.classList.toggle("openNavLinks");
 +
   
 +
}
  
−
    for(i = 0; i < foodItems.length; i++) {
+
function closeMobileNav() {
−
        if(i == (x-1)) {
+
    //closeSubmenus();//
−
            foodItems[i].className = "food-item-inner flipped-food-item-inner";
+
    navbarLinks[0].style.height = 0;
−
            foodItems[i].setAttribute("onclick","unFlipFood()");
+
    var navBtn = document.getElementById("nav-icon");
−
        }
+
    var navLinks = document.getElementsByClassName("navbar-links")[0];
−
     }
+
    navBtn.setAttribute("onclick", "openMobileNav()");
 +
    navBtn.classList.toggle("toggle-nav");
 +
     navBtn.title = "Open Nav";
 +
    navLinks.classList.toggle("openNavLinks");
 
}
 
}
  
−
function unFlipFood() {
+
function openSubmenu(x) {
−
     for(i = 0; i < foodItems.length; i++) {
+
    dropdownContent[x-1].style.visibility = "visible";
−
         foodItems[i].className = "food-item-inner food-item-inner-1";
+
}
−
        var newOnClick = "flipFood(" + (i+1).toString() + ")";
+
 
−
        foodItems[i].setAttribute("onclick", newOnClick);
+
/* when i click on the x, that is technically also clicking on the li */
 +
function closeSubmenus() {
 +
     for(i = 0; i < dropdownContent.length; i++) {
 +
         dropdownContent[i].style.visibility = "hidden";
 
     }
 
     }
 +
}
 +
 +
 +
function closeSubTest() {
 +
  this.stlye.display = "none";
 +
}
 +
 +
function flipFood(x) {
 +
    foodItems[x-1].className = "food-item-inner flipped-food-item-inner";
 +
    foodItems2[x-1].setAttribute("onclick", "unFlipFood(" +x.toString()+ ")");
 +
    foodPop(x);
 +
}
 +
 +
function unFlipFood(x) {
 +
    foodItems[x-1].className = "food-item-inner food-item-inner-1";
 +
    foodItems2[x-1].setAttribute("onclick", "flipFood(" +x.toString()+ ")");
 +
    foodPop(x);
 
}
 
}
  
Line 101: Line 164:
  
 
function toInteractive() {
 
function toInteractive() {
−
     window.scrollTo(0, document.getElementById("home-welcome").offsetHeight);
+
    var startOfInteractive = (document.getElementById("home-welcome").offsetHeight) + (document.getElementsByClassName("navbar")[0].offsetHeight);
 +
    //window.scrollTo(0, startOfInteractive);
 +
    window.scroll({top: startOfInteractive, left: 0, behaviour: 'smooth'});
 +
    console.log("It should have just scrolled");
 +
 
 +
}
 +
function scrollDownTeam(){
 +
     window.scrollTo(0, document.getElementById("team-title").offsetHeight);
 +
}
 +
function scrollDownProject(){
 +
    window.scrollTo(0, document.getElementById("page-content").offsetHeight);
 
}
 
}
  
Line 108: Line 181:
 
   //({pageLanguage: 'en', includedLanguages: 'es,fr'}, 'translate-feature');
 
   //({pageLanguage: 'en', includedLanguages: 'es,fr'}, 'translate-feature');
 
}
 
}
 +
 +
function mobileNav() {
 +
    if(window.innerWidth <= 1024) {
 +
        var navBtn = document.getElementById("nav-icon");
 +
        if(navBtn.classList.contains("toggle-nav")) {
 +
            closeMobileNav();
 +
        }
 +
        else {
 +
            navbarLinks[0].style.height = 0;
 +
        }
 +
    }
 +
    else {
 +
        navbarLinks[0].style.height = "100%"; // to ensure that the regular nav bar gets set back to regular height even after
 +
                                            // the mobile nav has been opened and closed(which would set the height back to 0)
 +
    }
 +
} 
  
 
function windowResize() {
 
function windowResize() {
 
     fontResize();
 
     fontResize();
 +
    mobileNav();
 
}
 
}
  
 
function windowLoad() {
 
function windowLoad() {
 
     fontResize();
 
     fontResize();
 +
    mobileNav();
 
}
 
}
  
−
//Word generator script
+
function wordChangeWrapperFunc() {
−
var wordArray = ["Humans","Scientists", "Engineers", "Designers"]; // Create Array with buzzwords
+
  //Call word generator functions
−
var wordIndex = 0; // Start at the first word in the array
+
  setTimeout(alterDisplayWord,wordTime); //Set the first time delay
−
var displayWord = wordArray[wordIndex]; // display the first word
+
  updateWord();
−
var stateChange = 0;
+
}
−
var wordIncrement = -1; // variable that controls wether the word is being generated or deleted
+
−
const wordTime = 2000;
+
−
const changeWordTime = 250;
+
−
setTimeout(alterDisplayWord,wordTime); // Set the first time delay
+
−
updateWord(); // set the display word in the span element
+
−
 
+
  
−
/*
 
−
    Generates or deletes the display word letter by letter depending on the state.
 
−
*/
 
 
function alterDisplayWord(){
 
function alterDisplayWord(){
−
     if(stateChange == 0){ // if the word is in the process of being deleted or generated
+
     if(stateChange == 0){ //if word is in process of being generated
−
+
         displayWord = wordArray[wordIndex].substring(0,displayWord.length + wordIncrement); //Add or delete a letter
−
         displayWord = wordArray[wordIndex].substring(0,displayWord.length+wordIncrement); // add a letter or delete a letter from the display word
+
         if(wordArray[wordIndex] == displayWord || displayWord.length ==0){ //if word is fully generated or deleted
−
          
+
             stateChange = 1; //let next function call know about the change in state
−
if(wordArray[wordIndex] == displayWord || displayWord.length == 0){ // if the word is fully generated or fully deleted
+
−
             stateChange = 1; // let the next function call know about the change in state
+
 
         }
 
         }
−
+
         setTimeout(alterDisplayWord, changeWordTime); //call function again after a delay
−
         setTimeout(alterDisplayWord,changeWordTime);// call the function again after a delay and update the display word on the website
+
 
         updateWord();
 
         updateWord();
 
     }
 
     }
−
     else{ // if the word has been fully deleted or generated
+
     else{
−
          
+
         stateChange = 0;
−
stateChange = 0;
+
         if(displayWord.length == 0){
−
          
+
             if(wordIndex == wordArray.length - 1)
−
if(displayWord.length == 0){ // if there is no word being displayed (this means that a word was just deleted)
+
                wordIndex = 0;
−
           
+
−
            // move to the next word
+
−
             if(wordIndex == wordArray.length-1)
+
−
    wordIndex = 0;
+
 
             else
 
             else
 
                 wordIndex++;
 
                 wordIndex++;
−
           
+
             wordIncrement = 1; //change to the generating word increment
−
             wordIncrement = 1; // change to the generating word increment
+
             setTimeout(alterDisplayWord, changeWordTime); //set a short time for the next call of the function
−
             setTimeout(alterDisplayWord,changeWordTime); // set a short time for the next call of the function
+
         }
−
          
+
         else{
−
}
+
             wordIncrement = -1;
−
         else{ // when the word has been fully generated
+
             setTimeout(alterDisplayWord,wordTime);
−
              
+
         }
−
wordIncrement = -1; // change to the deleting state
+
−
             setTimeout(alterDisplayWord,wordTime); // display the word for a longer time before calling the function again
+
−
          
+
−
}
+
 
     }
 
     }
 
}
 
}
  
 
function updateWord(){
 
function updateWord(){
−
 
 
     document.getElementById("Changing-Text").innerHTML = displayWord;
 
     document.getElementById("Changing-Text").innerHTML = displayWord;
 +
}
  
 +
//These function controls the popups on click for the team page
 +
//I know this is lowkey inefficient but it works for now lol
 +
function overlayOn(x){
 +
    team[x-1].style.display = "block";
 
}
 
}
 +
 +
function overlayOff(x) {
 +
    team[x-1].style.display = "none"; 
 +
}
 +
 +
/*Script for opening video overlay*/
 +
function toggle(){
 +
    // 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 circle = document.querySelector(".home-video-circle")
 +
    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.currentTime = 0;
 +
}
 +
 +
function pauseHomeVideo() {
 +
    var video = document.querySelector(".actual-intro-video")
 +
    video.pause();
 +
}
 +
 +
//script for loader
 +
var loaderVar;
 +
function loaderFunc() {
 +
    loaderVar = setTimeout(showPage, 3000);
 +
}
 +
 +
function showPage() {
 +
document.getElementById("loader-wrapper").style.display = "none";
 +
document.getElementById("main-content").style.display = "block";
 +
}
 +
 +
function foodPop(x) { 
 +
    homeFoodConts[x-1].className = "food-img-container popped"
 +
 +
    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>
 
</script>
 
</html>
 
</html>

Latest revision as of 01:18, 27 October 2020