migrated home.js and refactored into various sections
This commit is contained in:
parent
954507a20d
commit
67c1f520d8
13 changed files with 268 additions and 632 deletions
218
assets/scripts/sections/achievements.js
Normal file
218
assets/scripts/sections/achievements.js
Normal 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));
|
|
@ -2,3 +2,6 @@ import './navbar';
|
|||
import './sidebar';
|
||||
|
||||
import './education';
|
||||
import './achievements';
|
||||
import './projects';
|
||||
import './publications';
|
||||
|
|
18
assets/scripts/sections/projects.js
Normal file
18
assets/scripts/sections/projects.js
Normal file
|
@ -0,0 +1,18 @@
|
|||
import Filterizr from 'filterizr';
|
||||
import { insertScript } from '../core'
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// ================== Project cards =====================
|
||||
|
||||
// setup project filter buttons
|
||||
var projectCardHolder = document.getElementById("project-card-holder");
|
||||
if (projectCardHolder != null && projectCardHolder.children.length != 0) {
|
||||
new Filterizr(".filtr-projects", {
|
||||
layout: 'sameWidth',
|
||||
controlsSelector: '.project-filtr-control',
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// dynamically insert github buttons script.
|
||||
insertScript('github-buttons', 'https://buttons.github.io/buttons.js');
|
12
assets/scripts/sections/publications.js
Normal file
12
assets/scripts/sections/publications.js
Normal file
|
@ -0,0 +1,12 @@
|
|||
import Filterizr from 'filterizr';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
var publicationCardHolder = document.getElementById("publication-card-holder");
|
||||
if (publicationCardHolder != null && publicationCardHolder.children.length != 0) {
|
||||
new Filterizr(".filtr-publications", {
|
||||
layout: 'sameWidth',
|
||||
gridItemsSelector: '.pub-filtr-item',
|
||||
controlsSelector: '.pub-filtr-control',
|
||||
});
|
||||
}
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue