graham.systems
Generate web slides from Markdoc
refactor(templates): remove web components
-109
-65
templates/components/presentation.eta
-65
templates/components/presentation.eta
···
1
-
<script type="module">
2
-
import { LitElement, html, css } from 'lit';
3
-
4
-
class Presentation extends LitElement {
5
-
static properties = {
6
-
uuid: { type: String }
7
-
}
8
-
9
-
static styles = css`
10
-
:host {
11
-
display: block;
12
-
width: 100vw;
13
-
height: 100vh;
14
-
overflow-y: scroll;
15
-
scroll-behavior: smooth;
16
-
scroll-snap-type: y mandatory;
17
-
}
18
-
`
19
-
20
-
constructor() {
21
-
super()
22
-
23
-
this.observer = new IntersectionObserver(this.updateUrl, {
24
-
root: this,
25
-
threshold: 1
26
-
})
27
-
}
28
-
29
-
connectedCallback() {
30
-
super.connectedCallback()
31
-
document.addEventListener("readystatechange", e => {
32
-
if (event.target.readyState === "complete") {
33
-
const url = new URL(document.URL)
34
-
35
-
if (url.hash) {
36
-
document.querySelector(url.hash).scrollIntoView({ behavior: "instant"})
37
-
}
38
-
39
-
document.querySelectorAll("morkdeck-slide").forEach(e => this.observer.observe(e))
40
-
}
41
-
})
42
-
}
43
-
44
-
updateUrl(entries) {
45
-
for (const entry of entries) {
46
-
if (entry.isIntersecting) {
47
-
const url = new URL(document.URL)
48
-
const id = entry.target.getAttribute("id")
49
-
50
-
url.hash = `#${id}`
51
-
52
-
location.replace(url.toString())
53
-
54
-
break;
55
-
}
56
-
}
57
-
}
58
-
59
-
render () {
60
-
return html`<slot></slot>`
61
-
}
62
-
}
63
-
64
-
customElements.define("morkdeck-presentation", Presentation)
65
-
</script>
-44
templates/components/slide.eta
-44
templates/components/slide.eta
···
1
-
<script type="module">
2
-
import { LitElement, html, css } from 'lit';
3
-
4
-
class Slide extends LitElement {
5
-
static styles = css`
6
-
:host {
7
-
display: block;
8
-
width: 100%;
9
-
height: 100%;
10
-
scroll-snap-align: center;
11
-
position: relative;
12
-
}
13
-
14
-
:host > section {
15
-
container: slide / inline-size;
16
-
box-sizing: border-box;
17
-
position: absolute;
18
-
inset: 0;
19
-
margin: auto;
20
-
aspect-ratio: 16 / 9;
21
-
max-width: 100%;
22
-
max-height: 100%;
23
-
24
-
display: flex;
25
-
flex-direction: column;
26
-
justify-content: center;
27
-
align-items: center;
28
-
29
-
padding: 6cqmin;
30
-
background: #1f1d2e;
31
-
}
32
-
`
33
-
34
-
render() {
35
-
return html`
36
-
<section>
37
-
<slot></slot>
38
-
</section>
39
-
`
40
-
}
41
-
}
42
-
43
-
customElements.define("morkdeck-slide", Slide)
44
-
</script>