(Created page with "let suggestClick = document.querySelector(".suggestClick"); let introContainer = document.querySelector(".introContainer"); let heading1 = document.querySelector(".introConta...") |
m |
||
Line 5: | Line 5: | ||
let heading2 = document.querySelector(".introContainer .heading.other"); | let heading2 = document.querySelector(".introContainer .heading.other"); | ||
− | function createADiv(className, innerHTML) { | + | function createADiv(className, innerHTML){ |
let newDiv = document.createElement("div"); | let newDiv = document.createElement("div"); | ||
newDiv.className = className; | newDiv.className = className; | ||
Line 30: | Line 30: | ||
newMemberDiv.classList.add("memberDiv", "alternative"); | newMemberDiv.classList.add("memberDiv", "alternative"); | ||
let newMemberName = createADiv("memberName", ""); | let newMemberName = createADiv("memberName", ""); | ||
− | personData.name.split(" ").forEach((word) => { | + | personData.name.split(" ").forEach((word)=>{ |
let wordSpan = document.createElement("span"); | let wordSpan = document.createElement("span"); | ||
wordSpan.innerText = word; | wordSpan.innerText = word; | ||
newMemberName.appendChild(wordSpan); | newMemberName.appendChild(wordSpan); | ||
}); | }); | ||
− | if (personData.linkedin != undefined) { | + | if (personData.linkedin != undefined){ |
let linkin = document.createElement("a"); | let linkin = document.createElement("a"); | ||
linkin.rel = "noreferrer noopener"; | linkin.rel = "noreferrer noopener"; | ||
Line 45: | Line 45: | ||
let newMemberRole = createADiv("memberRole", personData.role); | let newMemberRole = createADiv("memberRole", personData.role); | ||
newMemberDiv.appendChild(newMemberRole); | newMemberDiv.appendChild(newMemberRole); | ||
− | let newMemberQuestion = createADiv("memberQuestion", (personData.bigImg == undefined) ? "" : "What water creature are | + | let newMemberStudy = createADiv("memberStudy", personData.study); |
+ | newMemberDiv.appendChild(newMemberStudy); | ||
+ | let newMemberQuestion = createADiv("memberQuestion", (personData.bigImg == undefined) ? "" : "What water creature are they?"); | ||
newMemberDiv.appendChild(newMemberQuestion); | newMemberDiv.appendChild(newMemberQuestion); | ||
let newMemberFunFact = createADiv("memberFunFact", personData.about); | let newMemberFunFact = createADiv("memberFunFact", personData.about); | ||
Line 51: | Line 53: | ||
introContainer.appendChild(newMemberDiv); | introContainer.appendChild(newMemberDiv); | ||
− | setTimeout(() => { | + | setTimeout(()=>{ |
newImgDiv.classList.add("transition"); | newImgDiv.classList.add("transition"); | ||
memberDiv.classList.add("transition"); | memberDiv.classList.add("transition"); | ||
newMemberDiv.classList.add("transition"); | newMemberDiv.classList.add("transition"); | ||
}, 10); | }, 10); | ||
− | setTimeout(() => { | + | setTimeout(()=>{ |
introImage.style = (personData.bigImg == undefined) ? "background-image: unset" : "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.bigImg + ".jpg');"; | introImage.style = (personData.bigImg == undefined) ? "background-image: unset" : "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.bigImg + ".jpg');"; | ||
newImgDiv.remove(); | newImgDiv.remove(); | ||
− | + | ||
memberDiv.classList.remove("transition"); | memberDiv.classList.remove("transition"); | ||
memberRole.innerHTML = personData.role; | memberRole.innerHTML = personData.role; | ||
− | memberQuestion.innerText = (personData.bigImg == undefined) ? "" : "What water creature are | + | memberStudy.innerText = personData.study; |
+ | memberQuestion.innerText = (personData.bigImg == undefined) ? "" : "What water creature are they?"; | ||
memberFunFact.innerHTML = personData.about; | memberFunFact.innerHTML = personData.about; | ||
memberName.innerHTML = ""; | memberName.innerHTML = ""; | ||
− | personData.name.split(" ").forEach((word) => { | + | personData.name.split(" ").forEach((word)=>{ |
let wordSpan = document.createElement("span"); | let wordSpan = document.createElement("span"); | ||
wordSpan.innerText = word; | wordSpan.innerText = word; | ||
memberName.appendChild(wordSpan); | memberName.appendChild(wordSpan); | ||
}); | }); | ||
− | if (personData.linkedin != undefined) { | + | if (personData.linkedin != undefined){ |
let linkin = document.createElement("a"); | let linkin = document.createElement("a"); | ||
linkin.rel = "noreferrer noopener"; | linkin.rel = "noreferrer noopener"; | ||
Line 84: | Line 87: | ||
function addPersonBubble(to, personData) { | function addPersonBubble(to, personData) { | ||
let item = document.createElement("span"); | 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.style = "background-image: url('https://static.igem.org/mediawiki/2020/" + personData.img + ".png');"; | ||
item.onclick = () => showPersonInfo(personData); | item.onclick = () => showPersonInfo(personData); | ||
Line 95: | Line 101: | ||
about: "", | about: "", | ||
}; | }; | ||
− | let team = [{ | + | 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: "<b>Axolotl.</b> 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ė", | name: "Auksė Kazlauskaitė", | ||
img: "a/a5/T--Vilnius-Lithuania--team-small-Auksė", | img: "a/a5/T--Vilnius-Lithuania--team-small-Auksė", | ||
bigImg: "7/74/T--Vilnius-Lithuania--team-big-Auksė", | bigImg: "7/74/T--Vilnius-Lithuania--team-big-Auksė", | ||
role: "Wet Lab", | role: "Wet Lab", | ||
− | about: "<b>Fur seal.</b> As fur seal | + | about: "<b>Fur seal.</b> 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/", | linkedin: "aukse-kazlauskaite-5309281b8/", | ||
+ | roleShort: "LAB", | ||
+ | study: "BSc Genetics", | ||
}, | }, | ||
{ | { | ||
Line 110: | Line 129: | ||
about: "<b>Sea turtle.</b> She spends most of her free time travelling.", | about: "<b>Sea turtle.</b> She spends most of her free time travelling.", | ||
linkedin: "austėja-sungailaitė-b4a9981b9/", | linkedin: "austėja-sungailaitė-b4a9981b9/", | ||
+ | roleShort: "LAB", | ||
+ | study: "BSc Molecular Biology", | ||
}, | }, | ||
{ | { | ||
Line 118: | Line 139: | ||
about: "<b>Crucian carp.</b> Remarkably hardy and finds a way to breathe even when brought out of water.", | about: "<b>Crucian carp.</b> Remarkably hardy and finds a way to breathe even when brought out of water.", | ||
linkedin: "edvinas-jurgelaitis-263645194/", | linkedin: "edvinas-jurgelaitis-263645194/", | ||
+ | roleShort: "LAB", | ||
+ | study: "BSc Biochemistry", | ||
}, | }, | ||
{ | { | ||
Line 125: | Line 148: | ||
role: "Wet Lab", | role: "Wet Lab", | ||
about: "<b>False killer whale.</b> Social, extremely rare and always shares her findings and ideas with others.", | about: "<b>False killer whale.</b> Social, extremely rare and always shares her findings and ideas with others.", | ||
+ | linkedin: "eglė-vitkūnaitė-601b881b8/", | ||
+ | roleShort: "LAB", | ||
+ | study: "BSc Biophysics", | ||
}, | }, | ||
{ | { | ||
Line 133: | Line 159: | ||
about: "<b>North Pacific giant octopus.</b> Has eight hands to accomplish all the tasks and can rapidly adapt to the environment.", | about: "<b>North Pacific giant octopus.</b> Has eight hands to accomplish all the tasks and can rapidly adapt to the environment.", | ||
linkedin: "emilija-radlinskaitė-51967717b/", | linkedin: "emilija-radlinskaitė-51967717b/", | ||
+ | roleShort: "LAB", | ||
+ | study: "BSc Molecular Biology", | ||
}, | }, | ||
{ | { | ||
Line 141: | Line 169: | ||
about: "<b>Siamese fighting fish.</b> Shows off his colors and flare in sharply written texts and fashion.", | about: "<b>Siamese fighting fish.</b> Shows off his colors and flare in sharply written texts and fashion.", | ||
linkedin: "emilis-gaidauskas-1a3088175/", | linkedin: "emilis-gaidauskas-1a3088175/", | ||
− | + | roleShort: "LAB", | |
− | + | study: "BSc (Hons) Biomedical Sciences, MSc Health Sciences", | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
}, | }, | ||
{ | { | ||
Line 157: | Line 179: | ||
about: "<b>Sea otter.</b> She has mastered digital tools to open the shells of delicious looking editing. Needs to be protected at all costs.", | about: "<b>Sea otter.</b> She has mastered digital tools to open the shells of delicious looking editing. Needs to be protected at all costs.", | ||
linkedin: "barbora-vasiliauskaite/", | linkedin: "barbora-vasiliauskaite/", | ||
+ | roleShort: "HP", | ||
+ | study: "BSc Bioinformatics", | ||
}, | }, | ||
{ | { | ||
Line 165: | Line 189: | ||
about: "<b>Black stingray.</b> 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.", | about: "<b>Black stingray.</b> 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/", | linkedin: "kamilė-vainiūtė-b29845159/", | ||
+ | roleShort: "IT", | ||
+ | study: "BSc Genetics & Bioinformatics", | ||
}, | }, | ||
{ | { | ||
Line 173: | Line 199: | ||
about: "<b>Emperor penguin.</b> Remains chill even in challenging conditions. Likes to slide on thin ice.", | about: "<b>Emperor penguin.</b> Remains chill even in challenging conditions. Likes to slide on thin ice.", | ||
linkedin: "pauliussasnauskas/", | linkedin: "pauliussasnauskas/", | ||
+ | roleShort: "IT", | ||
+ | study: "BSc Software Engineering", | ||
}, | }, | ||
{ | { | ||
Line 181: | Line 209: | ||
about: "<b>Parrotfish.</b> Just like a parrotfish, Liepa is not afraid to play with different colors, shapes and patterns and even completely switch them up if needed.", | about: "<b>Parrotfish.</b> 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/", | linkedin: "liepa-siupsinskaite-56971a1b7/", | ||
+ | roleShort: "GD", | ||
+ | study: "BSc Natural Sciences", | ||
}, | }, | ||
{ | { | ||
Line 188: | Line 218: | ||
role: "Finances", | role: "Finances", | ||
about: "<b>Blue tang.</b> May look relatively harmless, but when in need she can use her razor-sharp communication skills to persuade sponsors to fund the project.", | about: "<b>Blue tang.</b> 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", | ||
}, | }, | ||
]; | ]; |
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();