FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

migrated home.js and refactored into various sections

Browse source
This commit is contained in:
Aaron Qian 2022-11-11 12:18:28 -08:00 • committed by Aaron Qian
parent 954507a20d
commit 67c1f520d8
No known key found for this signature in database
GPG key ID: BF1A987C395B5B0E
13 changed files with 268 additions and 632 deletions
Download patch file Download diff file Expand all files Collapse all files

218
assets/scripts/sections/achievements.js Normal file
View file

@ -0,0 +1,218 @@
function fourColumRow(gallery, entries, i) {
let entry1 = document.createElement("div");
entry1.classList.add("col-lg-6", "m-0", "p-0");
entry1.appendChild(entries[i].cloneNode(true));
entry1.children[0].classList.add("img-type-1");
gallery.appendChild(entry1);
i++;
let entry2 = document.createElement("div");
entry2.classList.add("col-lg-3", "m-0", "p-0");
entry2.appendChild(entries[i].cloneNode(true));
entry2.children[0].classList.add("img-type-1");
gallery.appendChild(entry2);
i++;
let entry3 = document.createElement("div");
entry3.classList.add("col-lg-3", "m-0", "p-0");
entry3.appendChild(entries[i].cloneNode(true));
entry3.children[0].classList.add("img-type-2");
i++;
entry3.appendChild(entries[i].cloneNode(true));
entry3.children[1].classList.add("img-type-2");
gallery.appendChild(entry3);
i++;
}
function fourColumnReversedRow(gallery, entries, i) {
let entry1 = document.createElement("div");
entry1.classList.add("col-lg-3", "m-0", "p-0");
entry1.appendChild(entries[i].cloneNode(true));
entry1.children[0].classList.add("img-type-2");
i++;
entry1.appendChild(entries[i].cloneNode(true));
entry1.children[1].classList.add("img-type-2");
gallery.appendChild(entry1);
i++;
let entry2 = document.createElement("div");
entry2.classList.add("col-lg-3", "m-0", "p-0");
entry2.appendChild(entries[i].cloneNode(true));
entry2.children[0].classList.add("img-type-1");
gallery.appendChild(entry2);
i++;
let entry3 = document.createElement("div");
entry3.classList.add("col-lg-6", "m-0", "p-0");
entry3.appendChild(entries[i].cloneNode(true));
entry3.children[0].classList.add("img-type-1");
gallery.appendChild(entry3);
i++;
}
function threeColumnRow(gallery, entries, i) {
console.log(i);
let entry1 = document.createElement("div");
entry1.classList.add("col-lg-6", "col-md-6", "m-0", "p-0");
entry1.appendChild(entries[i].cloneNode(true));
entry1.children[0].classList.add("img-type-1");
gallery.appendChild(entry1);
i++;
let entry2 = document.createElement("div");
entry2.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
entry2.appendChild(entries[i].cloneNode(true));
entry2.children[0].classList.add("img-type-1");
gallery.appendChild(entry2);
i++;
let entry3 = document.createElement("div");
entry3.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
entry3.appendChild(entries[i].cloneNode(true));
entry3.children[0].classList.add("img-type-1");
gallery.appendChild(entry3);
i++;
}
function threeColumnReversedRow(gallery, entries, i) {
let entry1 = document.createElement("div");
entry1.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
entry1.appendChild(entries[i].cloneNode(true));
entry1.children[0].classList.add("img-type-1");
gallery.appendChild(entry1);
i++;
let entry2 = document.createElement("div");
entry2.classList.add("col-lg-3", "col-md-3", "m-0", "p-0");
entry2.appendChild(entries[i].cloneNode(true));
entry2.children[0].classList.add("img-type-1");
gallery.appendChild(entry2);
i++;
let entry3 = document.createElement("div");
entry3.classList.add("col-lg-6", "col-md-3", "m-0", "p-0");
entry3.appendChild(entries[i].cloneNode(true));
entry3.children[0].classList.add("img-type-1");
gallery.appendChild(entry3);
i++;
}
function twoColumnRow(gallery, entries, i) {
let entry1 = document.createElement("div");
entry1.classList.add("col-6", "m-0", "p-0");
entry1.appendChild(entries[i].cloneNode(true));
entry1.children[0].classList.add("img-type-1");
gallery.appendChild(entry1);
i++;
let entry2 = document.createElement("div");
entry2.classList.add("col-6", "m-0", "p-0");
entry2.appendChild(entries[i].cloneNode(true));
entry2.children[0].classList.add("img-type-1");
gallery.appendChild(entry2);
i++;
}
function singleColumnRow(gallery, entries, i) {
let entry1 = document.createElement("div");
entry1.classList.add("col-12", "m-0", "p-0");
entry1.appendChild(entries[i].cloneNode(true));
entry1.children[0].classList.add("img-type-1");
gallery.appendChild(entry1);
i++;
}
function showAchievements() {
// show achievements from achievements-holder div
let gallery = document.getElementById("gallery");
if (gallery == null) {
return
}
gallery.innerHTML = "";
const entries = document.getElementById("achievements-holder").children;
let len = entries.length;
let i = 0;
let rowNumber = 1;
while (i < len) {
if (isLaptop) {
if (i + 4 <= len) {
if (rowNumber % 2) {
fourColumRow(gallery, entries, i);
} else {
fourColumnReversedRow(gallery, entries, i);
}
i += 4;
} else if (i + 3 <= len) {
if (rowNumber % 2) {
threeColumnRow(gallery, entries, i);
} else {
threeColumnReversedRow(gallery, entries, i);
}
i += 3;
} else if (i + 2 <= len) {
twoColumnRow(gallery, entries, i);
i += 2;
} else {
singleColumnRow(gallery, entries, i);
i++;
}
} else if (isTablet) {
if (i + 2 <= len) {
twoColumnRow(gallery, entries, i);
i += 2;
} else {
singleColumnRow(gallery, entries, i);
i++;
}
} else {
singleColumnRow(gallery, entries, i);
i++;
}
rowNumber++;
}
// show full image on click
let elements = document.getElementsByClassName("achievement-entry");
len = elements.length;
for (let i = 0; i < len; i++) {
elements[i].onclick = function () {
let achievements = document.getElementsByClassName("achievement-entry");
let len2 = achievements.length;
for (let j = 0; j < len2; j++) {
achievements[j].classList.toggle("hidden");
}
this.classList.toggle("achievement-details");
this.classList.toggle("hidden");
this.parentElement.classList.toggle("col-lg-12");
this.parentElement.classList.toggle("col-md-12");
this.parentElement.classList.toggle("col-sm-12");
if (this.children["SmallImage"].hasAttribute("active")) {
let mainLogo = this.children["LargeImage"].getAttribute("Style");
this.children["LargeImage"].setAttribute("active", true);
this.children["SmallImage"].removeAttribute("active");
this.setAttribute("Style", mainLogo);
} else {
let mainLogo = this.children["SmallImage"].getAttribute("Style");
this.children["SmallImage"].setAttribute("active", true);
this.children["LargeImage"].removeAttribute("active");
this.setAttribute("Style", mainLogo);
}
if (this.children["caption"] != undefined) {
this.children["caption"].classList.toggle("hidden");
}
if (this.children["enlarge-icon"] != undefined) {
this.children["enlarge-icon"].classList.toggle("fa-search-plus");
this.children["enlarge-icon"].classList.toggle("fa-times");
}
if (this.children["achievement-title"] != undefined) {
this.children["achievement-title"].classList.toggle("hidden");
}
}
}
}
['DOMContentLoaded', 'resize'].forEach((event) =>
document.addEventListener(event, showAchievements));