whiplinker
Version:
Connect items visually by drawing whips/links/cables/connectors between them
122 lines (110 loc) • 3.38 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WhipLinker</title>
<style>
/* draw an arrow as background */
table {
position: relative;
}
table:before,
table:after {
content: "";
width: 20px;
position: absolute;
top: 55%;
left: 50%;
}
table:before {
height: 20px;
background-color: rgba(0,0,0,.2);
margin-left: -20px;
}
table:after {
height: 0;
border: solid 20px transparent;
border-left-color: rgba(0,0,0,.2);
margin-top: -10px;
}
input[type=number] {
width: 20px;
margin: 0 5px;
}
</style>
</head>
<body>
<table width="360" align="center" style="text-align: center;">
<tr>
<td colspan="2">
Drag from left to right<br /><br />
</td>
</tr>
<tr>
<td><input type="number" value="1" /><input type="radio" class="start" onclick="return false;" /></td>
<td><input type="radio" class="end" onclick="return false;" /><input type="number" readonly /></td>
</tr>
<tr>
<td><input type="number" value="2" /><input type="radio" class="start" onclick="return false;" /></td>
<td><input type="radio" class="end" onclick="return false;" /><input type="number" readonly /></td>
</tr>
<tr>
<td><input type="number" value="3" /><input type="radio" class="start" onclick="return false;" /></td>
<td><input type="radio" class="end" onclick="return false;" /><input type="number" readonly /></td>
</tr>
<tr>
<td><input type="number" value="4" /><input type="radio" class="start" onclick="return false;" /></td>
<td><input type="radio" class="end" onclick="return false;" /><input type="number" readonly /></td>
</tr>
</table>
<script src="dist/whiplinker.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
// basic example usage
var wl = new WhipLinker('.start', '.end')
// filters
// .addSourceFilter(function (detail) {
// // limit to only one connection per source
// return ! detail.sourceElement.checked;
// })
.addTargetFilter(function (detail) {
// limit to only one connection per target
return ! detail.targetElement.checked;
});
// events
document.addEventListener('wl-from', function (e) {
// you can transfer/store data within e.detail
wl.data(e.detail.sourceElement.previousSibling.value);
//console.log('from', e.detail, wl.data());
});
document.addEventListener('wl-to', function (e) {
//console.log('to', e.detail, wl.data());
});
document.addEventListener('wl-hit', function (e) {
e.detail.sourceElement.checked = true;
e.detail.targetElement.checked = true;
wl.sync(e.detail, e.detail.sourceElement.previousSibling, e.detail.targetElement.nextSibling);
//console.log('hit', e.detail);
});
document.addEventListener('wl-miss', function (e) {
//console.log('miss', e.detail);
});
document.addEventListener('wl-done', function (e) {
//console.log('done', e.detail);
});
document.addEventListener('wl-select', function (e) {
//console.log('select', e.detail);
});
document.addEventListener('wl-deselect', function (e) {
//console.log('deselect', e.detail);
});
document.addEventListener('wl-delete', function (e) {
e.detail.sourceElement.checked = false;
e.detail.targetElement.checked = false;
wl.unsync(e.detail, e.detail.sourceElement.previousSibling);
//console.log('delete', e.detail);
});
});
</script>
</body>
</html>