|
|
|
|
|
|
|
|
<html> |
|
|
<html> |
|
|
<head> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<meta charset="utf-8"> |
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<title>Slides</title> |
|
|
<title>Slides</title> |
|
|
<style> |
|
|
<style> |
|
|
html, body { |
|
|
html, body { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#_overlay { |
|
|
#_overlay { |
|
|
z-index: 2; |
|
|
z-index: 2; |
|
|
|
|
|
will-change: opacity; |
|
|
} |
|
|
} |
|
|
#_main { |
|
|
#_main { |
|
|
z-index: 1; |
|
|
z-index: 1; |
|
|
|
|
|
|
|
|
position: absolute; |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
top: 0px; |
|
|
|
|
|
|
|
|
top: 0%; |
|
|
left: 0px; |
|
|
left: 0px; |
|
|
|
|
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
._content { |
|
|
|
|
|
|
|
|
._content ._wrapper { |
|
|
|
|
|
display: inline-block; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#_overlay { |
|
|
#_overlay { |
|
|
transition: opacity {{transition_time}}s; |
|
|
|
|
|
|
|
|
transition: opacity <<transition_time>>s; |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
#_overlay.hidden { |
|
|
#_overlay.hidden { |
|
|
|
|
|
|
|
|
fetch("/slide") |
|
|
fetch("/slide") |
|
|
.then(response => response.text()) |
|
|
.then(response => response.text()) |
|
|
.then(text => { |
|
|
.then(text => { |
|
|
|
|
|
history.replaceState({}, "", "/"+name+"/"); |
|
|
|
|
|
main().innerHTML = "<div class='_wrapper'>"+text+"</div>"; |
|
|
setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
history.replaceState({}, "", "/"+name+"/"); |
|
|
|
|
|
main().innerHTML = text; |
|
|
|
|
|
overlay().className = "_content hidden"; |
|
|
overlay().className = "_content hidden"; |
|
|
}, 1000); |
|
|
}, 1000); |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function await() { |
|
|
function await() { |
|
|
// Wait for the next slide change, then update again |
|
|
// Wait for the next slide change, then update again |
|
|
|
|
|
console.log("fetching"); |
|
|
fetch("/await") |
|
|
fetch("/await") |
|
|
.then(response => response.json()) |
|
|
.then(response => response.json()) |
|
|
.then(obj => { |
|
|
.then(obj => { |
|
|
|
|
|
console.log("fetched", JSON.stringify(obj)); |
|
|
if (obj.evt === "next") { |
|
|
if (obj.evt === "next") { |
|
|
update(obj.args.name); |
|
|
update(obj.args.name); |
|
|
} else if (obj.evt === "reload") { |
|
|
} else if (obj.evt === "reload") { |