r/hugvey
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add follow checkbox to timeline

Browse source
This commit is contained in:
Your Name 2019-05-11 18:17:06 +02:00
parent 99f819ad02
commit 0b69b87e9b
2 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
www/js/hugvey_timeline.js
View file

@ -38,14 +38,31 @@ class Timeline{
startDate.setMinutes(startDate.getMinutes()-1); startDate.setMinutes(startDate.getMinutes()-1);
let endDate = new Date(); let endDate = new Date();
endDate.setMinutes(endDate.getMinutes()+20); endDate.setMinutes(endDate.getMinutes()+20);
setTimeout(function(){
tl.setWindow(startDate, endDate);
}, 500);
//follow the timeline or not if checkbox is checked
setTimeout(function(){
tl.setWindow(startDate, endDate);
}, 500);
this.moveInterval = setInterval(function(){
// skip movement if not visible
tl.moveTo(new Date());
}, 1000);
var checkbox = document.getElementById('follow_checkbox')
checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
this.moveInterval = setInterval(function(){ this.moveInterval = setInterval(function(){
// skip movement if not visible // skip movement if not visible
tl.moveTo(new Date()); tl.moveTo(new Date());
}, 1000); }, 1000);
} else {
clearInterval(this.moveInterval)
}
})
ws.addEventListener( 'message', this); ws.addEventListener( 'message', this);

7
www/timeline.html
View file

@ -31,7 +31,7 @@
background-color: greenyellow; background-color: greenyellow;
border-color: green; border-color: green;
} }
.vis-text,.vis-labelset .vis-label { .vis-text,.vis-labelset .vis-label {
color: #999; color: #999;
} }
@ -71,8 +71,9 @@ font-size: 4.5pt;
</style> </style>
</head> </head>
<body id='timeline'> <body id='timeline'>
<input id="follow_checkbox" type="checkbox" name="follow" value="follow" checked> Follow timeline<br>
<div id='line'></div> <div id='line'></div>
<script type='application/javascript' src="/js/hugvey_timeline.js"></script> <script type='application/javascript' src="/js/hugvey_timeline.js"></script>
</body> </body>
</html> </html>