From 2831ae985c831cc978f063a1e2820dacf0fe27e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bugsounet=20-=20C=C3=A9dric?= <github@bugsounet.fr>
Date: Thu, 8 May 2025 10:15:02 +0200
Subject: [PATCH] [Feature Request] Allow to make an display order of module
 position in config (#3762)

My proposal for #3761

* I use `flex` box for create region container
* I have moved `container` definition to `main.css` (for css tunning,
maybe it can be useful)
* I create `order` in module config for define module order display from
position

# Advantage:

We don't have to move module config in another place in array of modules

# Another advantage that i did'nt think:

We can change dynamicaly module order of a container:

- So, in this case, for a module config builder, (I won't mention the
name because otherwise I'll get angry...)
It can be usefull for a config preview (before saving config)
--> just change style css `order` module value for see preview

- Or, change `order` value in dev console for testing

# Disadvantages

I don't see any ;)
---
 CHANGELOG.md |  1 +
 css/main.css | 13 +++++++++++++
 js/loader.js |  3 ++-
 js/main.js   |  5 ++++-
 4 files changed, 20 insertions(+), 2 deletions(-)

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";
 		});
 	};