|
1 | 1 | <div class="row"> |
2 | | - <div class="col-md-12"> |
3 | | - <img class="banner" src="/assets/banners/banner000.jpg"><a href="/"> |
4 | | - <img class="logo" src='/assets/logos/or_logo.png' alt="Logo for Open Rails"> |
5 | | - <span class="logo_text">Open Rails</span> |
6 | | - </a><a href="#" title="Click for another picture"> |
7 | | - <span class="glyphicon glyphicon-chevron-right next_banner"></span> |
8 | | - </a><script type="text/javascript"> |
9 | | -(async function(){ |
10 | | -const banner = document.currentScript.previousSibling.previousSibling.previousSibling; |
11 | | -const another = document.currentScript.previousSibling; |
12 | | -let session; |
13 | | -try { |
14 | | - session = sessionStorage; |
15 | | -} catch { |
16 | | - session = undefined; |
17 | | -} |
| 2 | + <div class="col-md-12"> |
| 3 | + <img class="banner" id="banner" src="/assets/banners/banner000.jpg" /> |
| 4 | + <a href="/" class="logo-container"> |
| 5 | + <img class="logo" src="/assets/logos/or_logo.png" alt="Logo for Open Rails" /> |
| 6 | + <span class="logo_text">Open Rails</span> |
| 7 | + </a> |
| 8 | + <a href="#" title="Click for another picture" id="show-another-image"> |
| 9 | + <span class="glyphicon glyphicon-chevron-right next_banner"></span> |
| 10 | + </a> |
| 11 | + <script type="text/javascript"> |
| 12 | + (async function () { |
| 13 | + const banner = document.getElementById('banner'); |
| 14 | + const another = document.getElementById('show-another-image'); |
| 15 | + let session; |
| 16 | + try { |
| 17 | + session = sessionStorage; |
| 18 | + } catch { |
| 19 | + session = undefined; |
| 20 | + } |
18 | 21 |
|
19 | | -const show = () => { |
20 | | - if (session === undefined) |
21 | | - return false; |
22 | | - const curImage = session.getItem("or_banner_image"); |
23 | | - const curTitle = session.getItem("or_banner_title"); |
24 | | - const curSupplier = session.getItem("or_banner_supplier"); |
25 | | - if ([curImage, curTitle, curSupplier].some(x => x === null)) |
26 | | - return false; |
27 | | - banner.src = curImage; |
28 | | - banner.title = `${curTitle}\nposted by ${curSupplier}`; |
29 | | - return true; |
30 | | -}; |
31 | | -const loadJson = async (url) => new Promise((resolve, reject) => { |
32 | | - const req = new XMLHttpRequest(); |
33 | | - req.open("GET", url); |
34 | | - req.addEventListener("load", (e) => { |
35 | | - resolve(req.response); |
36 | | - }); |
37 | | - req.addEventListener("error", reject); |
38 | | - req.addEventListener("abort", reject); |
39 | | - req.responseType = "json"; |
40 | | - req.send(); |
41 | | -}); |
| 22 | + const show = () => { |
| 23 | + if (session === undefined) return false; |
| 24 | + const curImage = session.getItem('or_banner_image'); |
| 25 | + const curTitle = session.getItem('or_banner_title'); |
| 26 | + const curSupplier = session.getItem('or_banner_supplier'); |
| 27 | + if ([curImage, curTitle, curSupplier].some((x) => x === null)) return false; |
| 28 | + banner.src = curImage; |
| 29 | + banner.title = `${curTitle}\nposted by ${curSupplier}`; |
| 30 | + return true; |
| 31 | + }; |
| 32 | + const loadJson = async (url) => |
| 33 | + new Promise((resolve, reject) => { |
| 34 | + const req = new XMLHttpRequest(); |
| 35 | + req.open('GET', url); |
| 36 | + req.addEventListener('load', (e) => { |
| 37 | + resolve(req.response); |
| 38 | + }); |
| 39 | + req.addEventListener('error', reject); |
| 40 | + req.addEventListener('abort', reject); |
| 41 | + req.responseType = 'json'; |
| 42 | + req.send(); |
| 43 | + }); |
42 | 44 |
|
43 | | -/* Load the current banner, as stored in the cookies, immediately. |
44 | | - * It takes a visibly long time for the browser to load the banner list, |
45 | | - * even when it's already cached. */ |
46 | | -const showAgain = !show(); |
47 | | -const list = await loadJson("/assets/banners/banner_list.json"); |
| 45 | + /* Load the current banner, as stored in the cookies, immediately. |
| 46 | + * It takes a visibly long time for the browser to load the banner list, |
| 47 | + * even when it's already cached. */ |
| 48 | + const showAgain = !show(); |
| 49 | + const list = await loadJson('/assets/banners/banner_list.json'); |
48 | 50 |
|
49 | | -const pick = (l) => l[Math.floor(Math.random() * l.length)]; |
50 | | -const next = () => { |
51 | | - if (session === undefined) |
52 | | - return; |
53 | | - const b = pick(list); |
54 | | - const path = `/assets/banners/${b["image"]}`; |
55 | | - session.setItem("or_banner_image", path); |
56 | | - session.setItem("or_banner_title", b["title"]); |
57 | | - session.setItem("or_banner_supplier", b["supplier"]); |
| 51 | + const pick = (l) => l[Math.floor(Math.random() * l.length)]; |
| 52 | + const next = () => { |
| 53 | + if (session === undefined) return; |
| 54 | + const b = pick(list); |
| 55 | + const path = `/assets/banners/${b['image']}`; |
| 56 | + session.setItem('or_banner_image', path); |
| 57 | + session.setItem('or_banner_title', b['title']); |
| 58 | + session.setItem('or_banner_supplier', b['supplier']); |
58 | 59 |
|
59 | | - // Preload the next banner. |
60 | | - new Image().src = path; |
61 | | -}; |
| 60 | + // Preload the next banner. |
| 61 | + new Image().src = path; |
| 62 | + }; |
62 | 63 |
|
63 | | -another.addEventListener("click", (e) => { |
64 | | - show(); |
65 | | - next(); |
66 | | - e.preventDefault(); |
67 | | -}); |
| 64 | + another.addEventListener('click', (e) => { |
| 65 | + show(); |
| 66 | + next(); |
| 67 | + e.preventDefault(); |
| 68 | + }); |
68 | 69 |
|
69 | | -next(); |
70 | | -if (showAgain) |
71 | | -{ |
72 | | - show(); |
73 | | - next(); |
74 | | -} |
75 | | -})(); |
76 | | - </script> |
77 | | - </div> |
| 70 | + next(); |
| 71 | + if (showAgain) { |
| 72 | + show(); |
| 73 | + next(); |
| 74 | + } |
| 75 | + })(); |
| 76 | + </script> |
| 77 | + </div> |
78 | 78 | </div> |
0 commit comments