Template:Vilnius-Lithuania/JS/Team
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: "", study: "",
}; 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();