Panel handler
Handle your GetQuanty widget logic
Now that you have added the iframe panel and launcher to your code, you will need add some logic to it.
Here is an exemple of how you can open/close the panel :
- Open panel after 200 ms
function openPanel() {
setTimeout(() => {
// Show iframe panel
let panelWindow = document.getElementById('gqwindow');
panelWindow.style.width = "400px";
panelWindow.style.transform = "translateX(0%)";
// Show iframe launcher
let launcher = document.getElementById('gqlauncher');
launcher.style.right = "400px";
// Flag on the state of the panel
isPanelOpenedGlobal = true;
}, 200);
}
- Close panel
function closePanel() {
// Hide iframe panel
let panelWindow = document.getElementById('gqwindow');
panelWindow.style.transform = "translateX(100%)";
// Hide iframe launcher
let launcher = document.getElementById('gqlauncher');
launcher.style.right = "0%";
// Flag on the state of the panel
isPanelOpenedGlobal = false;
}
You can now have a handler function that uses those two functions to open/close the panel :
function handlePanel() {
if (isPanelOpenedGlobal)
closePanel();
else
openPanel();
}
Don't forget to attach the handlePanel
function to your iframe launcher by adding and event listener on the 'click' event :
let launcher = document.getElementById('gqlauncher');
launcher.addEventListener('click', () => handlePanel())
Updated 8 months ago
What’s Next