Bundling JS with ESBuild (#702)
* add npm dependencies used in this theme * implement helper to configure JS and ESBuild * migrate jquery popper.js bootstrap fontawesome to js bundle * refactor main.js into smaller pieces, and moved navbar.js to assets * remove list.js. It adjusts post card height to be the same, but is actually not needed. * refactored notes.js, search.js, single.js into application.js * move ityped to js asset, implement experiences horizontal vertical line in css * align recent post height via css * migrated home.js and refactored into various sections * migrated darkMode feature to js bundle * moved mermaid feature to js bundle * migrate syntax highlight to js bundle * migrate katex ( js portion ) to js bundle * migrate pdf-js to js bundle by delegating to cdn * set explicit comparisions for feature envvars so js can properly optimize * removed goat-counter * more fixes for broken achievements and small bugs * more bug fixes * allow configuration of hightlight.js, fix video-player shortcode * remove jquery all together * add null handling and fix merge conflicts Co-authored-by: Aaron Qian <aaron@yeet.io>
This commit is contained in:
Aaron Qian
GitHub
parent
fe14b0fbf5
commit
02db3d3044
491 changed files with 4919 additions and 151344 deletions
220
assets/scripts/sections/achievements.js
Normal file
220
assets/scripts/sections/achievements.js
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
import { getDeviceState } from '../core'
|
||||
|
||||
function fourColumRow (gallery, entries, i) {
|
||||
const 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++
|
||||
|
||||
const 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++
|
||||
|
||||
const 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) {
|
||||
const 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++
|
||||
|
||||
const 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++
|
||||
|
||||
const 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)
|
||||
const 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++
|
||||
|
||||
const 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++
|
||||
|
||||
const 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) {
|
||||
const 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++
|
||||
|
||||
const 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++
|
||||
|
||||
const 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) {
|
||||
const 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++
|
||||
|
||||
const 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) {
|
||||
const 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 () {
|
||||
const { isLaptop, isTablet } = getDeviceState()
|
||||
// show achievements from achievements-holder div
|
||||
const 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
|
||||
const elements = document.getElementsByClassName('achievement-entry')
|
||||
len = elements.length
|
||||
for (let i = 0; i < len; i++) {
|
||||
elements[i].onclick = function () {
|
||||
const achievements = document.getElementsByClassName('achievement-entry')
|
||||
const 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')) {
|
||||
const mainLogo = this.children.LargeImage.getAttribute('Style')
|
||||
this.children.LargeImage.setAttribute('active', true)
|
||||
this.children.SmallImage.removeAttribute('active')
|
||||
|
||||
this.setAttribute('Style', mainLogo)
|
||||
} else {
|
||||
const 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.getElementsByClassName('fa-xmark')[0].classList.toggle('hidden')
|
||||
this.getElementsByClassName('fa-magnifying-glass-plus')[0].classList.toggle('hidden')
|
||||
}
|
||||
if (this.children['achievement-title'] !== undefined) {
|
||||
this.children['achievement-title'].classList.toggle('hidden')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
['DOMContentLoaded', 'resize'].forEach((event) =>
|
||||
document.addEventListener(event, showAchievements))
|
||||
Loading…
Add table
Add a link
Reference in a new issue