flowbite icon indicating copy to clipboard operation
flowbite copied to clipboard

Fix missing theme button in doc example

Open CH4R4F opened this issue 3 years ago • 0 comments

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

CH4R4F avatar Jul 18 '22 01:07 CH4R4F