-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Expand file tree
/
Copy pathresize-observer-text.html
More file actions
115 lines (100 loc) · 3.49 KB
/
resize-observer-text.html
File metadata and controls
115 lines (100 loc) · 3.49 KB
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
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resize observer text test</title>
<style>
html {
height: 100%;
font-family: 'helvetica neue', arial, sans-serif;
}
body {
height: inherit;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
body > div {
background-color: #eee;
border: 1px solid #ccc;
padding: 20px;
width: 50%;
min-width: 320px;
}
h1 {
margin: 0;
}
p {
line-height: 1.5;
}
form {
width: 100%;
}
form > div {
display: flex;
}
form label {
flex: 2;
}
form input {
flex: 3;
}
input[type="checkbox"] {
height: 2rem;
}
</style>
</head>
<body>
<div>
<h1>So what happened?</h1>
<p>And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it! Ow, my spirit! I don't want to be rescued. You guys aren't Santa! You're not even robots. I've got to find a way to escape the horrible ravages of youth. Suddenly, I'm going to the bathroom like clockwork, every three hours. And those jerks at Social Security stopped sending me checks. Now 'I' have to pay 'them'!</p>
<form>
<div><label>Observer enabled:</label><input type="checkbox" checked></div>
<div><label>Adjust width:</label><input type="range" value="600" min="300" max="1300"></div>
</form>
</div>
<script>
if(window.ResizeObserver) {
const h1Elem = document.querySelector('h1');
const pElem = document.querySelector('p');
const divElem = document.querySelector('body > div');
const slider = document.querySelector('input[type="range"]');
const checkbox = document.querySelector('input[type="checkbox"]');
divElem.style.width = '600px';
slider.addEventListener('input', () => {
divElem.style.width = slider.value + 'px';
})
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
if(entry.contentBoxSize) {
// The standard makes contentBoxSize an array...
if (entry.contentBoxSize[0]) {
h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize[0].inlineSize/200) + 'rem';
pElem.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize/600) + 'rem';
} else {
// ...but old versions of Firefox treat it as a single item
h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
}
} else {
h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
}
}
console.log('Size changed');
});
resizeObserver.observe(divElem);
checkbox.addEventListener('change', () => {
if(checkbox.checked) {
resizeObserver.observe(divElem);
} else {
resizeObserver.unobserve(divElem);
}
});
} else {
console.log('Resize observer not supported!');
}
</script>
</body>
</html>