flowbite
flowbite copied to clipboard
Fix missing theme button in doc example
Fixed issue #220
In the initiateToggleDarkState function inside docs.js you handle the examples in the docs, this function can change the them and the size of components based on media button, each button execute a function whenever you click on it, and it needs the theme for reloading the iframe
this is a snapshot of the code that handles the mobile size
var button = element.getElementsByClassName("toggle-dark-state-example")[0];
.
.
.
if (mobileViewButton) {
mobileViewButton.addEventListener('click', () => {
const theme = button.getAttribute('data-toggle-dark'); // the error
iframeCodeEl.classList.add('max-w-sm')
iframeCodeEl.classList.add('max-w-lg')
iframeCodeEl.contentWindow.location.reload();
iframeCodeEl.classList.add('opacity-0')
iframeCodeEl.onload = () => {
updateiFrameHeight(iframeCodeEl)
updateiFrameDarkMode(iframeCodeEl, theme)
}
setTimeout(() => {
iframeCodeEl.classList.remove('opacity-0')
}, 500)
})
}
as you can see the function need data from theme button
but in that example you missed the them button so button is undefined
and that's why it produces the error Uncaught TypeError: Cannot read properties of undefined (reading 'getAttribute')
I added the theme button this way
{{< example id="default-carousel-example" github="components/carousel.md" show_dark=true >}}
and it's solved