|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Slides</title>
- <style>
- * {
- -moz-user-select: none;
- -ms-user-select: none;
- -webkit-user-select: none;
- user-select: none;
- cursor: none;
- }
- html, body {
- margin: 0px;
- padding: 0px;
- height: 100%;
- overflow: hidden;
- font-size: 2em;
-
- font-family: sans-serif;
- }
-
- #_overlay {
- z-index: 2;
- will-change: opacity;
- }
- #_main {
- z-index: 1;
- }
- #_msg {
- z-index: 3;
- position: absolute;
- top: 6px;
- right: 6px;
- backgrounud: white;
- display: none;
- font-size: 15px;
- }
- #_msg.active {
- display: block;
- }
-
- ._content {
- background: white;
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0%;
- left: 0px;
-
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- ._content ._wrapper {
- display: inline-block;
- text-align: center;
- }
-
- ._content h1 { font-size: 2em }
- ._content h2 { font-size: 1.4em }
- ._content h3 { font-size: 1.2em }
-
- ._content p { font-size: 1.4em }
-
- ._content .fullscreen {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0px;
- left: 50%;
- -moz-transform: translateX(-50%);
- -ms-transform: translateX(-50%);
- -webkit-transform: translateX(-50%);
- transform: translateX(-50%);
- }
- ._content img.fullscreen {
- width: auto;
- }
- ._content img.fullscreen.stretch {
- width: 100%;
- }
-
- ._content ul,
- ._content ol {
- text-align: left;
- line-height: 1.3em;
- }
-
- #_overlay {
- transition: opacity <<transition_time>>s, transform <<transition_time>>s;
- opacity: 1;
- }
- #_overlay.hidden {
- opacity: 0;
- transform: scale(1.1);
- }
- </style>
- </head>
- <body>
- <div id="_main" class="_content"></div>
- <div id="_overlay" class="_content"></div>
- <div id="_msg"></div>
-
- <!-- Fetch polyfill -->
- <script src="/polyfills.js"></script>
-
- <script>
- (function fullscreen() {
- var elem = document.body;
- var rFS = elem.requestFullScreen ||
- elem.msRequestFullScreen ||
- elem.mozRequestFullScreen ||
- elem.webkitRequestFullScreen;
-
- if (rFS)
- rFS.call(elem);
- })();
-
- var overlay = () => document.querySelector("#_overlay");
- var main = () => document.querySelector("#_main");
- var msg = () => document.querySelector("#_msg");
-
- function message(str) {
- msg().innerHTML = str;
- msg().className = "active";
- }
-
- // Swap the IDs of two elements
- function swap(elem1, elem2) {
- var tmp = elem1.id;
- elem1.id = elem2.id;
- elem2.id = tmp;
- }
-
- // Change slides with a transition
- function update(name) {
- overlay().innerHTML = "";
- overlay().className = "_content";
- swap(main(), overlay());
-
- fetch("/slide")
- .then(response => response.text())
- .then(text => {
- history.replaceState({}, "", "/"+name+"/");
- main().innerHTML = "<div class='_wrapper'>"+text+"</div>";
- setTimeout(() => {
- overlay().className = "_content hidden";
- }, 1000);
- })
- .catch(err => console.error(err));
- }
-
- function reload() {
- message("Server down, waiting");
- var i = setInterval(() => {
- fetch("/")
- .then(() => {
- history.replaceState({}, "", "/");
- location.reload();
- })
- .catch(() => {});
- }, 1000);
- }
-
- function await() {
- // Wait for the next slide change, then update again
- console.log("fetching");
- fetch("/await", { method: "POST" })
- .then(response => response.json())
- .then(obj => {
- console.log("fetched", JSON.stringify(obj));
- if (obj.evt === "next") {
- update(obj.args.name);
- } else if (obj.evt === "reload") {
- return reload();
- } else {
- console.log("Unknown event: "+obj.evt);
- }
- await();
- })
- .catch(err => { console.error(err); await(); });
- }
-
- await();
-
- fetch("/init")
- .then(response => response.text())
- .then(name => update(name));
- </script>
- </body>
- </html>
|