<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Card Debugging</title> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } body { display: flex; justify-content: center; align-items: center; } #scatter-container-dom { background-color: red; width: 800px; height: 600px; } </style> <link rel="stylesheet" href="../../../css/bulma.css" /> <link rel="stylesheet" href="./example/_theme/css/bundle.css" /> </head> <body> <div class="rows"> <div id="scatter-container-dom" class="row"></div> <div class="columns row"> <div class="column"> <div id="add-button" class="button is-success">Add</div> </div> <div class="column"> <div id="delete-button" class="button is-danger">Delete</div> </div> </div> </div> <script src="../../../dist/iwmlib.3rdparty.js"></script> <script src="../../../dist/iwmlib.js"></script> <script> const domContainer = document.getElementById("scatter-container-dom") const scatterContainer = new DOMScatterContainer(domContainer) let addBtn = document.getElementById('add-button') let deleteBtn = document.getElementById('delete-button') addBtn.addEventListener('click', createCard) deleteBtn.addEventListener('click', () => { Array.from(domContainer.childNodes).forEach(child =>{ ScatterCard.close(child) }) }) createCard() function createCard() { const path = './example/01/index.html' let card = null ScatterCard.loadHTML(path).then(response => { console.log("Nothing happening here") card = document.createElement('div') // // For debugging purpose to find the card fast with the debugging tools. card.setAttribute('data-source', path) scatterContainer.element.appendChild(card) new DOMScatter(card, scatterContainer, { width: 1400, height: 1200, scale: 0.5, minScale: 0.2, maxScale: 1 }) ScatterCard.setup(card, response, { basePath: './example/THE_USELESS_PART' }) }) } </script> </body> </html>