Floating Button "Refresh" button to dynamically reload ALL Blocks on page & TopBar "Refresh" Button

[skip_to_my_louis]

Are you looking to have floating refresh button to automatically detect all dynamic blocks REGARDLESS OF NAME on your pages / page details?

Drop this in the specific page custom code footer:

CODE:

<style>
#refresh-loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
#refresh-loader .spinner-border {
  width: 3rem;
  height: 3rem;
  color: white;
}

#floating-refresh-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  font-size: 16px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
#floating-refresh-button:hover {
  background-color: #0056b3;
}
</style>

<div id="refresh-loader">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

<button id="floating-refresh-button" title="Refresh">⟳ Refresh</button>

<script>
setTimeout(() => {
  const refreshBtn = document.getElementById('floating-refresh-button');
  const loader = document.getElementById('refresh-loader');

  refreshBtn.addEventListener('click', () => {
    loader.style.display = 'block';

    const blockIDs = new Set();

    // Auto-detect reload-block-[id] from scripts
    document.querySelectorAll('script').forEach(script => {
      const matches = script.textContent.match(/reload-block-([\w-]+)/g);
      if (matches) {
        matches.forEach(m => {
          const id = m.replace('reload-block-', '');
          blockIDs.add(id);
        });
      }
    });

    // 🔁 Add manually known block names (fallback)
    ['files', 'events'].forEach(id => blockIDs.add(id));

    // Reload each block
    blockIDs.forEach(id => {
      window.dispatchEvent(new CustomEvent(`reload-block-${id}`));
    });

    setTimeout(() => {
      loader.style.display = 'none';
    }, 1500);
  });
}, 300);
</script>

FOR TOPBAR BUTTON (INDIVIDUAL BLOCK)
Add Button “Refresh” to OPEN URL and set to “#”.

If you want to change the name, just change “table1” in the line:

window.dispatchEvent(new CustomEvent(‘reload-block-table1’));

<style>
#refresh-loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
#refresh-loader .spinner-border {
  width: 3rem;
  height: 3rem;
  color: white;
}
</style>

<div id="refresh-loader">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

<script>
setTimeout(() => {
  const topBarButtons = document.querySelectorAll('a[href="#"], button');

  topBarButtons.forEach(button => {
    if (button.innerText.trim().toLowerCase() === 'refresh') {
      button.addEventListener('click', function(e) {
        e.preventDefault();
        
        const loader = document.getElementById('refresh-loader');
        loader.style.display = 'block';

        window.dispatchEvent(new CustomEvent('reload-block-table1'));

        setTimeout(() => {
          loader.style.display = 'none';
        }, 1500);
      });
    }
  });
}, 300);
</script>

Yeet