Skip to content

refactor(main): modernize DOM update flow with async/await #4186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
khassel merged 1 commit into from
Jun 16, 2026
+39 −45
Merged

refactor(main): modernize DOM update flow with async/await #4186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 37 additions & 43 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ let modules = [];
/**
* Create dom objects for all modules that are configured for a specific position.
*/
function createDomObjects () {
async function createDomObjects () {
const domCreationPromises = [];

modules.forEach(function (module) {
Expand Down Expand Up @@ -50,27 +50,33 @@ function createDomObjects () {
moduleContent.className = "module-content";
dom.appendChild(moduleContent);

// create the domCreationPromise with AnimateCSS (with animateIn of module definition)
// or just display it
var domCreationPromise;
if (haveAnimateIn) domCreationPromise = _updateDom(module, { options: { speed: 1000, animate: { in: haveAnimateIn } } }, true);
else domCreationPromise = _updateDom(module, 0);

domCreationPromises.push(domCreationPromise);
domCreationPromise
.then(function () {
_sendNotification("MODULE_DOM_CREATED", null, null, module);
})
.catch(Log.error);
domCreationPromises.push(createModuleDom(module, haveAnimateIn));
});

updateWrapperStates();

Promise.all(domCreationPromises)
.then(function () {
_sendNotification("DOM_OBJECTS_CREATED");
})
.catch(Log.error);
try {
await Promise.all(domCreationPromises);
_sendNotification("DOM_OBJECTS_CREATED");
} catch (error) {
Log.error(error);
}
}

/**
* Create and render a module DOM, then notify the module.
* @param {Module} module The module to render.
* @param {string|null} haveAnimateIn Optional animateIn animation name.
* @returns {Promise<void>} Resolved when module DOM is created.
*/
async function createModuleDom (module, haveAnimateIn) {
if (haveAnimateIn) {
await _updateDom(module, { options: { speed: 1000, animate: { in: haveAnimateIn } } }, true);
} else {
await _updateDom(module, 0);
}

_sendNotification("MODULE_DOM_CREATED", null, null, module);
}

/**
Expand Down Expand Up @@ -166,20 +172,11 @@ async function updateDomWithContent (module, speed, newHeader, newContent, anima
return;
}

await new Promise((resolve) => {
_hideModule(
module,
speed / 2,
function () {
updateModuleContent(module, newHeader, newContent);
if (!module.hidden) {
_showModule(module, speed / 2, null, { animate: animateIn });
}
resolve();
},
{ animate: animateOut }
);
});
await new Promise((resolve) => _hideModule(module, speed / 2, resolve, { animate: animateOut }));
updateModuleContent(module, newHeader, newContent);
if (!module.hidden) {
await new Promise((resolve) => _showModule(module, speed / 2, resolve, { animate: animateIn }));
}
}

/**
Expand Down Expand Up @@ -241,7 +238,7 @@ function updateModuleContent (module, newHeader, newContent) {
* Hide the module.
* @param {Module} module The module to hide.
* @param {number} speed The speed of the hide animation.
* @param {Promise} callback Called when the animation is done.
* @param {() => void} callback Called when the animation is done.
* @param {object} [options] Optional settings for the hide method.
*/
function _hideModule (module, speed, callback, options = {}) {
Expand Down Expand Up @@ -325,7 +322,7 @@ function _hideModule (module, speed, callback, options = {}) {
* Show the module.
* @param {Module} module The module to show.
* @param {number} speed The speed of the show animation.
* @param {Promise} callback Called when the animation is done.
* @param {() => void} callback Called when the animation is done.
* @param {object} [options] Optional settings for the show method.
*/
function _showModule (module, speed, callback, options = {}) {
Expand Down Expand Up @@ -657,7 +654,7 @@ export const MM = {
* @param {Module} module The module that needs an update.
* @param {object|number} [updateOptions] The (optional) number of microseconds for the animation or object with updateOptions (speed/animates)
*/
updateDom (module, updateOptions) {
async updateDom (module, updateOptions) {
if (!(module instanceof Module)) {
Log.error("updateDom: Sender should be a module.");
return;
Expand All @@ -669,12 +666,9 @@ export const MM = {
}

// Further implementation is done in the private method.
_updateDom(module, updateOptions)
.then(function () {
// Once the update is complete and rendered, send a notification to the module that the DOM has been updated
_sendNotification("MODULE_DOM_UPDATED", null, null, module);
})
.catch(Log.error);
await _updateDom(module, updateOptions);
// Once the update is complete and rendered, send a notification to the module that the DOM has been updated
_sendNotification("MODULE_DOM_UPDATED", null, null, module);
},

/**
Expand All @@ -690,7 +684,7 @@ export const MM = {
* Hide the module.
* @param {Module} module The module to hide.
* @param {number} speed The speed of the hide animation.
* @param {Promise} callback Called when the animation is done.
* @param {() => void} callback Called when the animation is done.
* @param {object} [options] Optional settings for the hide method.
*/
hideModule (module, speed, callback, options) {
Expand All @@ -702,7 +696,7 @@ export const MM = {
* Show the module.
* @param {Module} module The module to show.
* @param {number} speed The speed of the show animation.
* @param {Promise} callback Called when the animation is done.
* @param {() => void} callback Called when the animation is done.
* @param {object} [options] Optional settings for the show method.
*/
showModule (module, speed, callback, options) {
Expand Down
4 changes: 2 additions & 2 deletions js/module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,7 @@ export class Module {
/**
* Hide this module.
* @param {number} speed The speed of the hide animation.
* @param {Promise} callback Called when the animation is done.
* @param {() => void} callback Called when the animation is done.
* @param {object} [options] Optional settings for the hide method.
*/
hide (speed, callback, options = {}) {
Expand All @@ -392,7 +392,7 @@ export class Module {
/**
* Show this module.
* @param {number} speed The speed of the show animation.
* @param {Promise} callback Called when the animation is done.
* @param {() => void} callback Called when the animation is done.
* @param {object} [options] Optional settings for the show method.
*/
show (speed, callback, options) {
Expand Down