Module Position

maxbachmann

@strawberry-3-141 Can you help me with how that would look like in software? I am sorry this project is the first time I use javascript at all and absolutely clueless when it’s about the dom

strawberry 3.141

@maxbachmann

// get the module to move with it's identifier
var clock = document.getElementById('module_0_clock');

// append it to the region you like
document.querySelector('div.region.top.left div.container').appendChild(clock);

it will work only if you already have a module in that position, otherwise you need to ovverride the style to display block

document.querySelector('div.region.top.left div.container').style.display = 'block';

that’s it

maxbachmann

@strawberry-3-141 So I always have to know wether there is already a element in that region? Is there a way to check all modules and return the ID’s of the elements that are in this position?

maxbachmann

@strawberry-3-141 and where to add that? is that already the “end code”? I tried in the domupdate function and it did not work, so I guess that was wrong

strawberry 3.141

it is safe to always run the code so you don’t need to check if there is a module necessarily.

it is not related to the get dom function, you can put it where ever you want except node_helper (because its not executed in the browser)

can you post the code of your module or upload it to github, then i can have a look

maxbachmann

In general I want to add it to all kind of modules so I can change the position when sending them a socketmessage to do so

strawberry 3.141

@maxbachmann i wouldn’t place that code in other modules, you can perform that from your module for every module, this isn’t magicmirror related. its pure dom manipulation.

maxbachmann

Ah did not know that ;) well yes then it’s definetly in my program. All my program does so far is subscribe to a mqtt broker, load some data and according to this show/hide modules. Now I want to add the possibility to move modules to different positions.
Can send the current code later

maxbachmann

@strawberry-3-141 so in general use all 3 commands and then it works in both senarios? where can I find the right ID for each module?

strawberry 3.141

@maxbachmann you can get all modules https://github.com/MichMich/MagicMirror/tree/master/modules#module-selection then iterate over them and when you find the module execute the cmds

const moduleToMove = 'clock';
const targetRegion = 'top.left';

MM.getModules().enumerate((module) => {
    if (module.name === moduleToMove) {
        const instance = document.getElementById(module.identifier);
        const region = document.querySelector(`div.region.${targetRegion} div.container`);
        region.appendChild(instance);
        region.style.display = 'block';
    }
});

something similar to this