Custon fullscreen button

Question

Good afternoon, tell me, is it possible to add your own button to switch to full-screen mode and open fields? I need to hide the standard toolbar and add the button data to another location

I didn't find any similar questions

Answer 1

const fullscreenButton = document.getElementById("fullscreen-button");
const webdatarocks = new WebDataRocks({
  container: "webdatarocks",
  toolbar: true,
  report: {
    dataSource: {
        data: "https://cdn.webdatarocks.com/data/data.json"
    }
  }
});

function openFullscreen() {
        var elem = document.getElementById("webdatarocks");
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { /* Firefox */
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE/Edge */
            elem.msRequestFullscreen();
        }
    }

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<button id="fullscreen-button" onclick="openFullscreen()">Open in fullscreen</button>
<div id="webdatarocks"></div>

Answer 2

You can use the source code of the Toolbar – webdatarocks.toolbar.js file, find a prototype of the toolbar.getTabs() method, and use it to create your own toolbar.