diff --git a/CHANGELOG.md b/CHANGELOG.md index 88a081bf..05279fab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ planned for 2025-07-01 ### Added +- [config] Allow to change module order for final renderer (or dynamicaly with CSS): Feature `order` in config. (#3762) - [clock] Added option 'disableNextEvent' to hide next sun event (#3769) ### Changed diff --git a/css/main.css b/css/main.css index 0aa5c341..e981635b 100644 --- a/css/main.css +++ b/css/main.css @@ -239,3 +239,16 @@ sup { border-spacing: 0; border-collapse: separate; } + +/** + * Container Definitions. + */ + +.region .container { + display: flex; + flex-direction: column; +} + +.region .container.hidden { + display: none; +} diff --git a/js/loader.js b/js/loader.js index d86ef932..2380b02e 100644 --- a/js/loader.js +++ b/js/loader.js @@ -108,7 +108,8 @@ const Loader = (function () { header: moduleData.header, configDeepMerge: typeof moduleData.configDeepMerge === "boolean" ? moduleData.configDeepMerge : false, config: moduleData.config, - classes: typeof moduleData.classes !== "undefined" ? `${moduleData.classes} ${module}` : module + classes: typeof moduleData.classes !== "undefined" ? `${moduleData.classes} ${module}` : module, + order: (typeof moduleData.order === "number" && Number.isInteger(moduleData.order)) ? moduleData.order : 0 }); }); diff --git a/js/main.js b/js/main.js index 7c0e9db3..c2a56053 100644 --- a/js/main.js +++ b/js/main.js @@ -30,6 +30,8 @@ const MM = (function () { dom.className = `module ${dom.className} ${module.data.classes}`; } + dom.style.order = (typeof module.data.order === "number" && Number.isInteger(module.data.order)) ? module.data.order : 0; + dom.opacity = 0; wrapper.appendChild(dom); @@ -463,7 +465,8 @@ const MM = (function () { } }); - wrapper.style.display = showWrapper ? "block" : "none"; + // move container definitions to main CSS + wrapper.className = showWrapper ? "container" : "container hidden"; }); };