Difference between revisions of "Template:Vilnius-Lithuania/JS/Team"

Revision as of 16:18, 23 October 2020

let suggestClick = document.querySelector(".suggestClick"); let introContainer = document.querySelector(".introContainer");

let heading1 = document.querySelector(".introContainer .heading"); let heading2 = document.querySelector(".introContainer .heading.other");

function createADiv(className, innerHTML){

   let newDiv = document.createElement("div");
   newDiv.className = className;
   newDiv.innerHTML = innerHTML;
   return newDiv;

}

function showPersonInfo(personData) {

   suggestClick.classList.add("hidden");

   introImage.classList.add("novideo");
   introVideoPlay.classList.add("novideo");
   heading1.classList.add("novideo");
   heading2.classList.add("novideo");

   if (memberName.innerText.toUpperCase() == personData.name.toUpperCase()) return;

   // Animation begin
   let newImgDiv = document.createElement("div");
   newImgDiv.style = (personData.bigImg == undefined) ? "background-image: unset" : "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.bigImg + ".jpg');";
   introImage.appendChild(newImgDiv);

   let newMemberDiv = document.createElement("div");
   newMemberDiv.classList.add("memberDiv", "alternative");
   let newMemberName = createADiv("memberName", "");
   personData.name.split(" ").forEach((word)=>{
       let wordSpan = document.createElement("span");
       wordSpan.innerText = word;
       newMemberName.appendChild(wordSpan);
   });
   if (personData.linkedin != undefined){
       let linkin = document.createElement("a");
       linkin.rel = "noreferrer noopener";
       linkin.target = "_blank";
       linkin.href = "https://www.linkedin.com/in/" + personData.linkedin;
       newMemberName.appendChild(linkin);
   }
   newMemberDiv.appendChild(newMemberName);
   let newMemberRole = createADiv("memberRole", personData.role);
   newMemberDiv.appendChild(newMemberRole);
   let newMemberStudy = createADiv("memberStudy", personData.study);
   newMemberDiv.appendChild(newMemberStudy);
   let newMemberQuestion = createADiv("memberQuestion", (personData.bigImg == undefined) ? "" : "What water creature are they?");
   newMemberDiv.appendChild(newMemberQuestion);
   let newMemberFunFact = createADiv("memberFunFact", personData.about);
   newMemberDiv.appendChild(newMemberFunFact);
   introContainer.appendChild(newMemberDiv);

   setTimeout(()=>{
       newImgDiv.classList.add("transition");
       memberDiv.classList.add("transition");
       newMemberDiv.classList.add("transition");
   }, 10);
   setTimeout(()=>{
       introImage.style = (personData.bigImg == undefined) ? "background-image: unset" : "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.bigImg + ".jpg');";
       newImgDiv.remove();
       
       memberDiv.classList.remove("transition");
       memberRole.innerHTML = personData.role;
       memberStudy.innerText = personData.study;
       memberQuestion.innerText = (personData.bigImg == undefined) ? "" : "What water creature are they?";
       memberFunFact.innerHTML = personData.about;
       memberName.innerHTML = "";
       personData.name.split(" ").forEach((word)=>{
           let wordSpan = document.createElement("span");
           wordSpan.innerText = word;
           memberName.appendChild(wordSpan);
       });
       if (personData.linkedin != undefined){
           let linkin = document.createElement("a");
           linkin.rel = "noreferrer noopener";
           linkin.target = "_blank";
           linkin.href = "https://www.linkedin.com/in/" + personData.linkedin;
           memberName.appendChild(linkin);
       }
       newMemberDiv.remove();
   }, 400);
   // Animation end;

}

function addPersonBubble(to, personData) {

   let item = document.createElement("span");
   let itemInner = document.createElement("span");
   itemInner.innerText = personData.roleShort;
   item.appendChild(itemInner);
   item.style = "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.img + ".png');";
   item.onclick = () => showPersonInfo(personData);
   to.appendChild(item);

} let nullPerson = {

   name: "",
   img: undefined,
   bigImg: undefined,
   role: "",
   about: "",

}; let team = [

   {
       name: "Ieva Lingytė",
       img: "2/23/T--Vilnius-Lithuania--team-small-Ieva",
       bigImg: "6/69/T--Vilnius-Lithuania--team-big-Ieva",
       role: "Team Leader & Wet Lab",
       about: "Axolotl. Like an Axolotl regenerating limbs, she is capable of regenerating entire lost parts of the project without any visible scars.",
       linkedin: "ieva-lingytė-54a133181/",
       roleShort: "LAB",
       study: "BSc Molecular Biology",
   },
   {
       name: "Auksė Kazlauskaitė",
       img: "a/a5/T--Vilnius-Lithuania--team-small-Auksė",
       bigImg: "7/74/T--Vilnius-Lithuania--team-big-Auksė",
       role: "Wet Lab",
       about: "Fur seal. As a fur seal Auksė has a sharp eyesight and keen hearing. Furthermore, Auksė's kindness and helpfulness is a constant reminder of this animal's cuteness.",
       linkedin: "aukse-kazlauskaite-5309281b8/",
       roleShort: "LAB",
       study: "BSc Genetics",
   },
   {
       name: "Austėja Sungailaitė",
       img: "9/92/T--Vilnius-Lithuania--team-small-Austėja",
       bigImg: "9/9e/T--Vilnius-Lithuania--team-big-Austėja",
       role: "Wet Lab",
       about: "Sea turtle. She spends most of her free time travelling.",
       linkedin: "austėja-sungailaitė-b4a9981b9/",
       roleShort: "LAB",
       study: "BSc Molecular Biology",
   },
   {
       name: "Edvinas Jurgelaitis",
       img: "1/13/T--Vilnius-Lithuania--team-small-Edvinas",
       bigImg: "0/03/T--Vilnius-Lithuania--team-big-Edvinas",
       role: "Wet Lab",
       about: "Crucian carp. Remarkably hardy and finds a way to breathe even when brought out of water.",
       linkedin: "edvinas-jurgelaitis-263645194/",
       roleShort: "LAB",
       study: "BSc Biochemistry",
   },
   {
       name: "Eglė Vitkūnaitė",
       img: "c/c1/T--Vilnius-Lithuania--team-small-Eglė",
       bigImg: "a/a0/T--Vilnius-Lithuania--team-big-Eglė",
       role: "Wet Lab",
       about: "False killer whale. Social, extremely rare and always shares her findings and ideas with others.",
       linkedin: "eglė-vitkūnaitė-601b881b8/",
       roleShort: "LAB",
       study: "BSc Biophysics",
   },
   {
       name: "Emilija Radlinskaitė",
       img: "e/e5/T--Vilnius-Lithuania--team-small-Emilija",
       bigImg: "d/d7/T--Vilnius-Lithuania--team-big-Emilija",
       role: "Wet Lab",
       about: "North Pacific giant octopus. Has eight hands to accomplish all the tasks and can rapidly adapt to the environment.",
       linkedin: "emilija-radlinskaitė-51967717b/",
       roleShort: "LAB",
       study: "BSc Molecular Biology",
   },
   {
       name: "Emilis Gaidauskas",
       img: "a/a0/T--Vilnius-Lithuania--team-small-Emilis",
       bigImg: "2/2a/T--Vilnius-Lithuania--team-big-Emilis",
       role: "Wet Lab",
       about: "Siamese fighting fish. Shows off his colors and flare in sharply written texts and fashion.",
       linkedin: "emilis-gaidauskas-1a3088175/",
       roleShort: "LAB",
       study: "BSc (Hons) Biomedical Sciences, MSc Health Sciences",
   },
   {
       name: "Barbora Vasiliauskaitė",
       img: "6/60/T--Vilnius-Lithuania--team-small-Barbora",
       bigImg: "8/83/T--Vilnius-Lithuania--team-big-Barbora",
       role: "Human Practices",
       about: "Sea otter. She has mastered digital tools to open the shells of delicious looking editing. Needs to be protected at all costs.",
       linkedin: "barbora-vasiliauskaite/",
       roleShort: "HP",
       study: "BSc Bioinformatics",
   },
   {
       name: "Kamilė Liucija Vainiūtė",
       img: "a/a0/T--Vilnius-Lithuania--team-small-Kamilė",
       bigImg: "7/7e/T--Vilnius-Lithuania--team-big-Kamilė",
       role: "IT",
       about: "Black stingray. She is able to enclasp an impressive amount of knowledge and projects in a limited amount of time. If necessary, Kamilė will sting an incorrect part of the code with impeccable accuracy.",
       linkedin: "kamilė-vainiūtė-b29845159/",
       roleShort: "IT",
       study: "BSc Genetics & Bioinformatics",
   },
   {
       name: "Paulius Sasnauskas",
       img: "e/e6/T--Vilnius-Lithuania--team-small-Paulius",
       bigImg: "d/d0/T--Vilnius-Lithuania--team-big-Paulius",
       role: "IT",
       about: "Emperor penguin. Remains chill even in challenging conditions. Likes to slide on thin ice.",
       linkedin: "pauliussasnauskas/",
       roleShort: "IT",
       study: "BSc Software Engineering",
   },
   {
       name: "Liepa Šiupšinskaitė",
       img: "c/c3/T--Vilnius-Lithuania--team-small-Liepa",
       bigImg: "6/6e/T--Vilnius-Lithuania--team-big-Liepa",
       role: "Graphic Design",
       about: "Parrotfish. Just like a parrotfish, Liepa is not afraid to play with different colors, shapes and patterns and even completely switch them up if needed.",
       linkedin: "liepa-siupsinskaite-56971a1b7/",
       roleShort: "GD",
       study: "BSc Natural Sciences",
   },
   {
       name: "Monika Gineitytė",
       img: "f/f3/T--Vilnius-Lithuania--team-small-Monika",
       bigImg: "5/54/T--Vilnius-Lithuania--team-big-Monika",
       role: "Finances",
       about: "Blue tang. May look relatively harmless, but when in need she can use her razor-sharp communication skills to persuade sponsors to fund the project.",
       roleShort: "FIN",
       study: "MSc Microbiology",
   },

];

team.forEach((item) => addPersonBubble(bubbleList, item));

introVideoPlay.onclick = () => {

   showPersonInfo(nullPerson);
   heading1.classList.remove("novideo");
   heading2.classList.remove("novideo");
   introImage.classList.remove("novideo");
   introVideoPlay.classList.remove("novideo");
   introImage.firstElementChild.play();

}

function repositionSuggestion() {

   let bleft = bubbleList.firstElementChild.getBoundingClientRect().left;
   let bbottom = bubbleList.getBoundingClientRect().height;
   if (bleft < 10) bleft = 10;
   suggestClick.style.marginLeft = (bleft + 15) + "px";
   suggestClick.style.bottom = (bbottom + 0) + "px";

} window.addEventListener("resize", repositionSuggestion, { passive: 1 }); repositionSuggestion();