UNPKG

3.01 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3 <head>
4 <script type="module" src="/node_modules/greenwood-starter-presentation/dist/components/presenter-mode.js"></script>
5 <script type="module" src="/node_modules/greenwood-starter-presentation/dist/components/slide-list.js"></script>
6 <script type="module" src="/node_modules/greenwood-starter-presentation/dist/components/slide-viewer.js"></script>
7 <script type="module">
8 fetch('/graph.json')
9 .then((response) => response.json())
10 .then((response) => {
11 // auto generated default page by Greenwood
12 const hideListIds = ['404'];
13 return response.filter(slide => hideListIds.indexOf(slide.id) < 0)
14 }).then((response) => {
15 const urlParams = new URLSearchParams(window.location.search);
16 const selectedSlideId = urlParams.get('selectedSlideId');
17 const slides = response.filter(slide => slide.id !== 'index');
18 const currentSlideIndex = selectedSlideId ? slides.findIndex(slide => slide.id === selectedSlideId) : 0;
19
20 document.querySelector('presenter-mode').setAttribute('slides', JSON.stringify(slides));
21 document.querySelector('slide-list').setAttribute('slides', JSON.stringify(slides));
22 document.querySelector('slide-viewer').setAttribute('slide', JSON.stringify(slides[currentSlideIndex]));
23 });
24 </script>
25
26 <script>
27 document.addEventListener('slide-selected', (slide) => {
28 document.querySelector('slide-viewer').setAttribute('slide', JSON.stringify(slide.detail));
29 })
30 </script>
31
32 <style>
33 body {
34 background-color: #e8dcd2;
35 }
36
37 main {
38 min-width: 1024px;
39 }
40
41 header {
42 width: 90%;
43 }
44
45 header > * {
46 float: right;
47 }
48
49 .column {
50 display: flex;
51 flex-direction: column;
52 flex-basis: 100%;
53 flex: 1;
54 min-height: 300px;
55 }
56
57 .left {
58 float: left;
59 min-width: 23%;
60
61 }
62
63 .right {
64 min-width: 67%;
65 }
66
67 footer {
68 margin-top: 20px;
69 }
70
71 footer a {
72 text-decoration: none;
73 }
74
75 footer a:visited {
76 color: #020202;
77 }
78
79 footer h4, header h1 {
80 width: 90%;
81 margin: 0 auto;
82 padding: 0;
83 text-align: center;
84 }
85 </style>
86 </head>
87 <body>
88 <main>
89 <section>
90 <header>
91 <presenter-mode></presenter-mode>
92 </header>
93 </section>
94
95 <section>
96 <div class="column left">
97 <h1>Slides</h1>
98 <slide-list></slide-list>
99 </div>
100
101 <div class="column right">
102 <h1>Current Slide</h1>
103 <slide-viewer></slide-viewer>
104 </div>
105 </section>
106
107 <section>
108 <footer>
109 <h4>
110 <a href="https://www.greenwoodjs.io/">GWD/PPT &#9672 Built with GreenwoodJS</a>
111 </h4>
112 </footer>
113 </section>
114 </main>
115 </body>
116</html>
\No newline at end of file