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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<div class="card-shadow">
<div class="card">
<!--h3>${note.id}</h3-->
<textarea rows=1></textarea>
</div>
</div>
<script setup>
import { debounce } from "./utils.js";
import { saveNote } from "./api.js";
export default class extends HTMLElement {
#resizeFn;
connectedCallback() {
const ta = this.$("textarea");
ta.value = this.textContent;
ta.addEventListener("input", debounce(() => { // TODO ensure good debounce behavior
saveNote(this.dataset.id, ta.value);
}, 500));
//ta.addEventListener("input", () => this.dispatchEvent(new Event("edit")));
this.#resizeFn = () => this.resizeTextarea();
ta.addEventListener("input", this.#resizeFn);
ta.addEventListener("focus", this.#resizeFn);
window.addEventListener("resize", this.#resizeFn);
setTimeout(this.#resizeFn);
}
disconnectedCallback() {
window.removeEventListener("resize", this.#resizeFn);
}
resizeTextarea() { // TODO simplify?
const cs = this.$(".card-shadow");
const ta = this.$("textarea");
cs.style.height = (cs.scrollHeight) + "px";
ta.style.height = "";
ta.style.height = (ta.scrollHeight) + "px";
cs.style.height = "";
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
textarea {
font-family: inherit;
}
/* TODO :target? */
.card-shadow {
position: relative;
margin: 16px auto;
max-width: 5.5in;
border-radius: 24px;
box-shadow: 0 2px 16px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.1);
transition: box-shadow .2s;
}
.card-shadow:hover,
.card-shadow:focus-within {
box-shadow: 0 2px 16px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.15);
}
.card-shadow::after {
content: "";
position: absolute;
inset: 0;
box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset;
border-radius: 24px;
pointer-events: none;
transition: box-shadow .2s;
}
.card-shadow:hover::after,
.card-shadow:focus-within::after {
box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset;
}
.card {
/*padding-bottom: 16px;*/
border-radius: 24px;
background-color: var(--bg-color);
color: var(--text-color);
overflow: hidden;
}
.card > textarea { /* TODO */
display: block;
width: 100%;
padding: 16px 24px;
border: none;
resize: none;
outline: none;
font-size: 16px;
line-height: 24px;
letter-spacing: .3px;
background: transparent;
color: inherit;
}
</style>
|
