-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpreact_01.html
85 lines (74 loc) · 2.64 KB
/
preact_01.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>preact-01</title>
<style>
* { box-sizing: border-box; }
body { background: darkgoldenrod; color: gold;}
#app {margin: 1rem auto; padding: 1rem 1.5rem; background: goldenrod;
border-radius: 1rem; width: 50vw;}
ul {display: flex; flex-direction: column-reverse;
background: radial-gradient(darkgoldenrod, goldenrod 75%); padding: 2rem 1.5rem 0.5rem; }
ul li { list-style: inside none; padding: 0.25rem 0; }
ul li:hover, footer > button { cursor: pointer; }
li::after { content:''; border: 8px solid transparent; border-right-color:#000; /* arrow */
position: absolute; transform: translateX(1rem); opacity: 0;
transition: all 300ms ease-in-out;}
li:hover::after { transform: translateX(-0.25rem); opacity: 1;}
</style>
</head>
<body>
<script type="module">
//import { h, Component, render } from 'https://unpkg.com/preact?module';
//import { useEffect } from 'https://unpkg.com/preact/hooks/dist/hooks?module'
//import htm from 'https://unpkg.com/htm?module';
//const html = htm.bind(h)
import { useEffect, useState, useContext, useRef, useReducer, html, Component, render }
from 'https://unpkg.com/htm/preact/standalone.module.js'
// const i = 'geccc'
// const app = html`<h1>Hello <em>${i}</em> World!</h1>`;
// console.log(app)
class App extends Component {
addTodo() {
const { todos = [] } = this.state
this.setState({ todos: todos.concat(`Item #${todos.length}`) })
}
render({ page }, { todos = []} ) {
return html`
<div id=app>
<${Header} name="XXTodo's (${page})" />
<ul> ${todos.map((todo, idx) => html`
<li key="x${idx}">${todo + ', idx:'+idx}</li>
`)} </ul>
<button onclick=${_ => this.addTodo()}> Add new Todo <//>
<${Footer}name=geciszar class=fost> <//>
</div>
`;
}
}
function Repeat({numTimes, children}) {
let items = []
for (let i=0; i < numTimes; i++)
items.push(children)
return items
}
class OnOff extends Component {
state = {isOn: false};
// handleClick() { };
handleClick = () => { this.setState({isOn: !this.state.isOn}) }
render({}, {isOn}) { return html`
<button style="margin:1em; font: bold 1.2em/1.5em Dank Mono" onclick=${this.handleClick}>
${isOn?'On':'Off'}
<//>
`}
}
const Header = ({name}) => html`<h1>${name} List<//>`
const Footer = props => html`
<footer ...${props}>
<${Repeat} numTimes=3> <${OnOff} /> <//>
<//>`
render(html`<${App} page="All" />`, document.body)
</script>
</body>
</html>