95 lines
3.0 KiB
HTML
95 lines
3.0 KiB
HTML
|
<!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)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
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>
|