MMM-Carousel and modules that are currently generating an empty div

[redfishbluefish]

Hi!

I have a nicely working setup with MMM-Carousel and recently discovered MMM-CanadianPublicWeatherAlerts. This modules was rather handy in the last few days when there have been weather alerts.

Now the part I’d like to “fix”. MMM-CanadianPublicWeatherAlerts generates an empty <div> when there are no weather alerts. Unfortunately, this causes MMM-Carousel to still include the empty module output as it cycles through the set of modules in that area (top_center in my case). I know this is likely a limitation of MMM-Carousel.

What is the “correct” way to prevent MMM-CanadianPublicWeatherAlerts from generating the empty <div>?

I had thought I could just muck with getDom() in the module to return nothing, but that doesn’t seem to work. Other thought was to see if there’s a way to dynamically move the generated <div> to some where other than top_center but that’s currently beyond my understanding.

Thoughts?

[sdetweil]

@redfishbluefish

i think you can do
in custom.css

.MMM-CanadianPublicWeatherAlerts div:empty {
    display:none;
}

[redfishbluefish]

@sdetweil that definitely works for the <div> created by the module for when it generates content but not for the surrounding <div> that I’m pretty sure are the standard one generated by any module:

<div id="module_9_MMM-CanadianPublicWeatherAlerts" class="module MMM-CanadianPublicWeatherAlerts hidden" style="transition: opacity; opacity: 0; position: fixed;">
  <header class="module-header" style="display: none;">undefined</header>
    <div class="module-content">
      <div>
        <div></div> <--- This gets display:none applied to it.
      </div>
    </div>
  </div>
</div>

To make MMM-Carousel happy I think I need the top level <div> to not be generated but I’m realizing that implies I would need to modify MMM-CanadianPublicWeatherAlerts to dynamically unregister and register as a module and I don’t see how that can be done.

What might be easier is if I can figure out how to dynamically update the MMM-Carousel settings read from my config.js:

module: 'MMM-Carousel',
position: 'bottom_bar',
config: {
 transitionInterval: 10000,
 ignoreModules: [],
 mode: 'positional',
 top_right: {enabled: true, ignoreModules: ['currentweather']},
 top_center: {enabled: true, ignoreModules: ['updatenotification']}
}

I would need to add/remove MMM-CanadianPublicWeatherAlerts from the ignoreModules list for top_center depending on if it wants to generate content or not. No output - add to the ignoredModules list and MMM-Carousel ignores it for the rotation. Output - remove from the ignoredModules list and now it gets rotated with the rest.

[sdetweil]

@redfishbluefish magicmirror can only show or hide content
when a module is hidden that tree is display:none;

that content should take no space

carousel/pages/… etc have no idea what is in the module div
they just hide it or show it

[mumblebaj]

@sdetweil and @redfishbluefish When I had the same issue with my MMM-NewsAPI module where if a user opted not to show a QR Code, it would create an empty div which took up space. I had to implement the following in code to dynamically remove the div for it if the option is not selected. You would need to have similar logic for if no alert results are returned you remove all traces of the parent div.

else {
                const qrCodeElement = document.getElementById("NEWSAPI_QRCODE")
                if (qrCodeElement) {
                    qrCodeElement.parentNode.removeChild(qrCodeElement)
                }
            }

This is how I have implemented it in my module, may not be the most elegant but works for me and the QR div no longer takes up the space if the user did not opt to show it.

[sdetweil]

@mumblebaj but that is effectively what display:none does