ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Fix resize event debounce method + Clean up and re-organize app file

Browse Source
This commit is contained in:
Lucas Bigot
2024-03-26 18:30:36 -04:00
parent bc3fd3a492
commit 6d37049989
1 changed files with 72 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
assets/scripts/app.js
View File

@@ -10,7 +10,73 @@ const app = new modular({
modules, modules,
}); });
const setViewportSizes = () => { function init() {
bindEvents();
globals();
setViewportSizes();
app.init(app);
$html.classList.add(CSS_CLASS.LOADED, CSS_CLASS.READY);
$html.classList.remove(CSS_CLASS.LOADING);
/**
* Debug focus
*/
// document.addEventListener(
// "focusin",
// function () {
// console.log('focused: ', document.activeElement)
// }, true
// );
/**
* Eagerly load the following fonts.
*/
if (isFontLoadingAPIAvailable) {
loadFonts(FONT.EAGER, ENV.IS_DEV).then((eagerFonts) => {
$html.classList.add(CSS_CLASS.FONTS_LOADED);
/**
* Debug fonts loading
*/
// if (ENV.IS_DEV) {
// console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
// console.group('State of eager fonts:');
// eagerFonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
// console.groupEnd();
// console.group('State of all fonts:');
// document.fonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
// console.groupEnd();
// }
});
}
}
////////////////
// Global events
////////////////
function bindEvents() {
// Resize event
const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END)
window.addEventListener(
"resize",
debounce(() => {
window.dispatchEvent(resizeEndEvent)
}, 200, false)
)
window.addEventListener(
"resize",
onResize
)
}
function onResize() {
setViewportSizes()
}
function setViewportSizes() {
// Document styles // Document styles
const documentStyles = document.documentElement.style; const documentStyles = document.documentElement.style;
@@ -25,10 +91,10 @@ const setViewportSizes = () => {
} }
// Viewport height // Viewport height
const height = window.innerHeight;
const svh = document.documentElement.clientHeight * 0.01; const svh = document.documentElement.clientHeight * 0.01;
documentStyles.setProperty('--svh', `${svh}px`); documentStyles.setProperty('--svh', `${svh}px`);
const dvh = height * 0.01;
const dvh = window.innerHeight * 0.01;
documentStyles.setProperty('--dvh', `${dvh}px`); documentStyles.setProperty('--dvh', `${dvh}px`);
if (document.body) { if (document.body) {
@@ -53,6 +119,9 @@ const setViewportSizes = () => {
} }
} }
////////////////
// Execute
////////////////
window.addEventListener('load', () => { window.addEventListener('load', () => {
const $style = document.getElementById('main-css'); const $style = document.getElementById('main-css');
@@ -66,46 +135,3 @@ window.addEventListener('load', () => {
console.warn('The "main-css" stylesheet not found'); console.warn('The "main-css" stylesheet not found');
} }
}); });
function init() {
globals();
setViewportSizes();
app.init(app);
$html.classList.add(CSS_CLASS.LOADED);
$html.classList.add(CSS_CLASS.READY);
$html.classList.remove(CSS_CLASS.LOADING);
// Bind window resize event with default vars
const resizeEndEvent = new CustomEvent(CUSTOM_EVENT.RESIZE_END);
window.addEventListener('resize', () => {
setViewportSizes();
debounce(() => {
window.dispatchEvent(resizeEndEvent);
}, 200, false)
})
window.addEventListener('orientationchange', () => {
setViewportSizes();
})
/**
* Eagerly load the following fonts.
*/
if (isFontLoadingAPIAvailable) {
loadFonts(FONT.EAGER, ENV.IS_DEV).then((eagerFonts) => {
$html.classList.add(CSS_CLASS.FONTS_LOADED);
if (ENV.IS_DEV) {
console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
console.group('State of eager fonts:');
eagerFonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
console.groupEnd();
console.group('State of all fonts:');
document.fonts.forEach(font => console.log(font.family, font.style, font.weight, font.status));
console.groupEnd();
}
});
}
}