parsav  Diff

Differences From Artifact [6fb4c9ec70]:

• File static/live.js — part of check-in [24ec409083] at 2021-01-01 04:33:10 on branch trunk — add live updates, system to only update when necessary almost works (user: lexi, size: 1980) [annotate] [blame] [check-ins using]

To Artifact [15d09c6d9b]:

• File static/live.js — part of check-in [aa17a03321] at 2021-01-01 16:24:44 on branch trunk — move from webp to svg except where necessary (user: lexi, size: 1931) [annotate] [blame] [check-ins using]

    16     16   	 * data-live property, an html element registers itself for live
    17     17   	 * updates from the server. this is pretty straightforward: we
    18     18   	 * retrieve this url from the server as a get request, create a
    19     19   	 * tree from its html, find the element in question, ferret out
    20     20   	 * any deltas, and apply them. */
    21     21   	document.querySelectorAll('*[data-live]').forEach(function(container) {
    22     22   		let interv = parseFloat(container.attributes.getNamedItem('data-live').nodeValue) * 1000;
    23         -		container._liveLastArrival = '0'; /* TODO include header for this */
           23  +		container._liveLastArrival = 0; /* TODO include initial value in document */
    24     24   
    25     25   		window.setInterval(function() {
    26     26   			var req = new Request(window.location, {
    27     27   				method: 'GET',
    28     28   				headers: {
    29     29   					'X-Live-Last-Arrival': container._liveLastArrival
    30     30   				}
    31     31   			})
    32     32   			
    33     33   			fetch(req).then(function(resp) {
    34     34   				if (!resp.ok) return;
    35         -				let newest = resp.headers.get('X-Live-Newest-Artifact');
           35  +				let newest = parseInt(resp.headers.get('X-Live-Newest-Artifact'));
    36     36   				if (newest <= container._liveLastArrival) {
    37     37   					resp.body.cancel();
    38     38   					return;
    39     39   				}
    40     40   				container._liveLastArrival = newest
    41     41   
    42     42   				resp.text().then(function(htmlbody) {
    43     43   					var parser = new DOMParser();
    44     44   					var newdoc = parser.parseFromString(htmlbody,'text/html')
    45         -					// console.log(newdoc.getElementById(container.id).innerHTML)
    46     45   					container.innerHTML = newdoc.getElementById(container.id).innerHTML
    47     46   				})
    48     47   			})
    49     48   		}, interv)
    50     49   	});
    51     50   });