center-center 0.0.13 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/svg.html +278 -0
- package/package.json +1 -1
package/docs/svg.html
ADDED
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<script type="importmap">
|
|
6
|
+
{
|
|
7
|
+
"imports": {
|
|
8
|
+
"debug": "https://esm.sh/debug",
|
|
9
|
+
"center-center": "https://esm.sh/center-center"
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
</script>
|
|
13
|
+
<script type="module">
|
|
14
|
+
import debug from 'debug'
|
|
15
|
+
|
|
16
|
+
import {
|
|
17
|
+
getRects,
|
|
18
|
+
calculateLeft,
|
|
19
|
+
calculateTop
|
|
20
|
+
} from 'center-center'
|
|
21
|
+
|
|
22
|
+
export function getElementRect (element) {
|
|
23
|
+
const {
|
|
24
|
+
offsetWidth: width,
|
|
25
|
+
offsetHeight: height,
|
|
26
|
+
offsetLeft: left,
|
|
27
|
+
offsetTop: top
|
|
28
|
+
} = element
|
|
29
|
+
|
|
30
|
+
return {
|
|
31
|
+
width,
|
|
32
|
+
height,
|
|
33
|
+
left,
|
|
34
|
+
top,
|
|
35
|
+
right: (left + width),
|
|
36
|
+
bottom: (top + height)
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const log = debug('center-center')
|
|
41
|
+
|
|
42
|
+
const resizeObserver = new ResizeObserver(handleResize)
|
|
43
|
+
|
|
44
|
+
function handleOrientationChange () {
|
|
45
|
+
log('orientationchange')
|
|
46
|
+
|
|
47
|
+
const container = document.querySelector('main')
|
|
48
|
+
const target = container.querySelector('.target')
|
|
49
|
+
|
|
50
|
+
render(container, target)
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function handleScroll () {
|
|
54
|
+
log('scroll')
|
|
55
|
+
|
|
56
|
+
const container = document.querySelector('main')
|
|
57
|
+
const target = container.querySelector('.target')
|
|
58
|
+
|
|
59
|
+
render(container, target)
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function handleResize () {
|
|
63
|
+
log('resize')
|
|
64
|
+
|
|
65
|
+
const container = document.querySelector('main')
|
|
66
|
+
const target = container.querySelector('.target')
|
|
67
|
+
|
|
68
|
+
render(container, target)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
function handleDOMContentLoaded () {
|
|
72
|
+
log('DOMContentLoaded')
|
|
73
|
+
|
|
74
|
+
const container = document.querySelector('main')
|
|
75
|
+
|
|
76
|
+
resizeObserver.observe(container)
|
|
77
|
+
|
|
78
|
+
window.addEventListener('orientationchange', handleOrientationChange)
|
|
79
|
+
|
|
80
|
+
window.addEventListener('scroll', handleScroll)
|
|
81
|
+
|
|
82
|
+
document.addEventListener('scroll', handleScroll)
|
|
83
|
+
|
|
84
|
+
window.addEventListener('resize', handleResize)
|
|
85
|
+
|
|
86
|
+
document.addEventListener('resize', handleResize)
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
function render (container, target) {
|
|
90
|
+
log('render')
|
|
91
|
+
|
|
92
|
+
{
|
|
93
|
+
|
|
94
|
+
const {
|
|
95
|
+
width,
|
|
96
|
+
height,
|
|
97
|
+
left,
|
|
98
|
+
top
|
|
99
|
+
} = container.getBoundingClientRect()
|
|
100
|
+
|
|
101
|
+
console.log({
|
|
102
|
+
width,
|
|
103
|
+
height,
|
|
104
|
+
left,
|
|
105
|
+
top,
|
|
106
|
+
right: (left + width),
|
|
107
|
+
bottom: (top + height)
|
|
108
|
+
})
|
|
109
|
+
|
|
110
|
+
console.log(getElementRect(container))
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
{
|
|
114
|
+
const {
|
|
115
|
+
width,
|
|
116
|
+
height,
|
|
117
|
+
left,
|
|
118
|
+
top
|
|
119
|
+
} = container.getBoundingClientRect()
|
|
120
|
+
|
|
121
|
+
console.log({
|
|
122
|
+
width,
|
|
123
|
+
height,
|
|
124
|
+
left,
|
|
125
|
+
top,
|
|
126
|
+
right: (left + width),
|
|
127
|
+
bottom: (top + height)
|
|
128
|
+
})
|
|
129
|
+
|
|
130
|
+
console.log(getElementRect(target))
|
|
131
|
+
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
window.requestAnimationFrame(() => {
|
|
135
|
+
const rects = getRects(container, target)
|
|
136
|
+
const left = calculateLeft(rects)
|
|
137
|
+
const top = calculateTop(rects)
|
|
138
|
+
|
|
139
|
+
log('%d, %d', left, top)
|
|
140
|
+
|
|
141
|
+
const {
|
|
142
|
+
target: {
|
|
143
|
+
left: currentLeft,
|
|
144
|
+
top: currentTop
|
|
145
|
+
}
|
|
146
|
+
} = rects
|
|
147
|
+
|
|
148
|
+
if (currentLeft !== left) target.style.left = left + 'px'
|
|
149
|
+
if (currentTop !== top) target.style.top = top + 'px'
|
|
150
|
+
})
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
document.addEventListener('DOMContentLoaded', handleDOMContentLoaded)
|
|
154
|
+
</script>
|
|
155
|
+
<style>
|
|
156
|
+
*,
|
|
157
|
+
*::before,
|
|
158
|
+
*::after {
|
|
159
|
+
box-sizing: border-box;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
:root {
|
|
163
|
+
font-size: 16px;
|
|
164
|
+
line-height: 1.5;
|
|
165
|
+
font-synthesis: none;
|
|
166
|
+
text-rendering: optimizelegibility;
|
|
167
|
+
-webkit-font-smoothing: antialiased;
|
|
168
|
+
-moz-osx-font-smoothing: grayscale;
|
|
169
|
+
text-size-adjust: 100%;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
html {
|
|
173
|
+
overflow: auto
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
html,
|
|
177
|
+
body {
|
|
178
|
+
background-color: white;
|
|
179
|
+
min-height: 100vh;
|
|
180
|
+
min-height: 844px;
|
|
181
|
+
max-width: 100vw;
|
|
182
|
+
min-width: 390px;
|
|
183
|
+
margin: 0;
|
|
184
|
+
padding: 0;
|
|
185
|
+
border: none;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.container {
|
|
189
|
+
display: flex;
|
|
190
|
+
flex-direction: column;
|
|
191
|
+
width: 100%;
|
|
192
|
+
height: 100%;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
header,
|
|
196
|
+
footer {
|
|
197
|
+
flex: 0 0 auto;
|
|
198
|
+
width: 100%;
|
|
199
|
+
padding: 2rem;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
header h1 {
|
|
203
|
+
margin: 0
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
footer h2 {
|
|
207
|
+
margin: 0
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
main {
|
|
211
|
+
position: relative;
|
|
212
|
+
flex: 1;
|
|
213
|
+
background-color: #d3d3d3;
|
|
214
|
+
color: white;
|
|
215
|
+
padding: 2rem;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
main p:first-child {
|
|
219
|
+
margin-top: 0;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
main p:last-child {
|
|
223
|
+
margin-bottom: 0;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
main .target {
|
|
227
|
+
position: absolute;
|
|
228
|
+
left: 0;
|
|
229
|
+
top: 0;
|
|
230
|
+
width: 50px;
|
|
231
|
+
height: 50px;
|
|
232
|
+
border-radius: 50%;
|
|
233
|
+
background-color: gold;
|
|
234
|
+
overflow: hidden;
|
|
235
|
+
z-index: 1;
|
|
236
|
+
}
|
|
237
|
+
</style>
|
|
238
|
+
</head><body>
|
|
239
|
+
<div class="container">
|
|
240
|
+
<header>
|
|
241
|
+
<h1>Center Center</h1>
|
|
242
|
+
</header>
|
|
243
|
+
|
|
244
|
+
<main>
|
|
245
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec nulla metus. Vivamus quis nisi ut elit pretium consectetur. Aliquam erat volutpat. Curabitur ornare massa sed ligula pretium bibendum. Vivamus condimentum eget lectus a volutpat. Maecenas ut massa in est lacinia molestie eget non arcu. Donec condimentum tincidunt tellus ac pellentesque. Curabitur augue nunc, vestibulum non aliquet eu, bibendum quis urna. Mauris volutpat vitae enim nec lobortis. Proin vitae nisl ac libero finibus pretium. Fusce ac lorem sed ex aliquet volutpat. Nullam vel est ut massa pharetra posuere. Aliquam sem ipsum, egestas eu velit auctor, ullamcorper laoreet est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In accumsan mauris nec sem ultrices ullamcorper.</p>
|
|
246
|
+
|
|
247
|
+
<p>Maecenas feugiat risus ipsum, at facilisis dui molestie at. Curabitur eros diam, suscipit vitae sem sit amet, rhoncus varius arcu. Donec ultrices nisi nec scelerisque ornare. Nunc placerat tellus quis diam lobortis rhoncus. Proin convallis ultricies sollicitudin. Cras dictum lorem arcu, sit amet congue leo semper at. Etiam ultricies maximus velit, id facilisis orci suscipit eu. Fusce velit odio, consectetur ut laoreet quis, lobortis eu purus. Aliquam vel porttitor odio.</p>
|
|
248
|
+
|
|
249
|
+
<p>Maecenas eget lacus cursus justo accumsan pharetra vitae non purus. Nam risus risus, varius id lacus id, vestibulum porta turpis. Vestibulum varius odio ac purus viverra molestie. Nulla semper lectus non volutpat pharetra. Cras sed turpis eu lacus pharetra elementum id vitae dui. Praesent auctor felis a risus ultrices, quis aliquam velit auctor. Sed sagittis non augue in imperdiet. Aenean eget commodo urna. Mauris varius pulvinar nulla, vel aliquet justo malesuada eget. Pellentesque efficitur est at nunc rhoncus, sed ultrices lectus venenatis.</p>
|
|
250
|
+
|
|
251
|
+
<p>Mauris erat lorem, lobortis quis ligula et, commodo malesuada sem. Quisque pulvinar nec orci at vehicula. Donec a tempor nisl. Nam nec nibh cursus odio auctor pretium. Maecenas elementum in ante vitae venenatis. In bibendum tristique augue, in rhoncus neque semper eu. Aliquam rhoncus dignissim fermentum. Donec finibus neque velit, eget interdum nunc condimentum eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ornare metus nisl, eget vulputate massa auctor id. Fusce tincidunt eros sit amet sapien gravida, a lacinia quam laoreet.</p>
|
|
252
|
+
|
|
253
|
+
<p>Suspendisse ut tortor vel libero facilisis hendrerit quis vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet justo eget mauris lobortis luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc non lectus maximus, ultrices mauris sollicitudin, aliquet diam. Cras suscipit eros ac sagittis malesuada. Curabitur auctor ex sit amet metus imperdiet consequat. Aenean accumsan dictum augue. Etiam massa ex, mollis vitae tempus sed, ultricies ac sapien. Donec eu laoreet nisl. Nullam suscipit tincidunt eleifend.</p>
|
|
254
|
+
|
|
255
|
+
<p>Nam sed nisi id lacus lacinia ultrices efficitur ut dolor. Nam quis nibh porttitor, dictum magna tincidunt, tristique leo. Praesent vitae est ultricies, feugiat felis ac, euismod massa. In finibus, enim in feugiat fermentum, ante felis luctus turpis, et finibus risus metus sed mauris. Donec aliquet rutrum orci, et aliquam nisl rhoncus et. Integer dignissim lacus vitae egestas interdum. Aliquam semper eros eget eros viverra, quis placerat ex ultricies. Suspendisse tempor, justo a facilisis tempus, erat dui imperdiet orci, vel ullamcorper libero eros eu risus. Suspendisse mattis arcu arcu, ut rhoncus lacus semper sed.</p>
|
|
256
|
+
|
|
257
|
+
<p>Maecenas tempus lorem quam, sed aliquet erat rhoncus quis. In nibh eros, suscipit id accumsan et, dictum nec neque. Sed vitae ipsum et nisl dignissim molestie. Quisque eu auctor quam. Vestibulum sagittis lobortis ante, eu laoreet arcu pretium eu. In consectetur nisl semper bibendum venenatis. Phasellus non sollicitudin lacus, non efficitur dui. Proin scelerisque nunc ut venenatis sagittis. Integer faucibus diam non tortor pulvinar rutrum.</p>
|
|
258
|
+
|
|
259
|
+
<p>Cras fermentum tortor iaculis turpis placerat pellentesque. Curabitur tristique suscipit lorem, et ullamcorper leo faucibus ac. Nullam sit amet nulla eget arcu porttitor interdum eget in ante. Suspendisse tincidunt est et posuere porttitor. Pellentesque non turpis justo. Nunc malesuada ex vel risus pretium sodales. Donec quis condimentum est. Mauris bibendum egestas massa, nec malesuada nulla lobortis eu.</p>
|
|
260
|
+
|
|
261
|
+
<p>Sed a lectus feugiat, porttitor turpis ac, porta dui. Duis egestas elementum scelerisque. Pellentesque placerat interdum tortor, id hendrerit tellus tempor sed. Donec eu sapien nulla. Morbi convallis luctus rutrum. Nulla eget ex vel libero maximus vestibulum. Nam pretium maximus porttitor. Vestibulum porta, tellus ut posuere sodales, felis turpis scelerisque lorem, sed venenatis metus nibh ac velit. Donec vitae sollicitudin augue. Proin id ex et odio facilisis facilisis eu ac lectus. Morbi rutrum a metus vel eleifend. Vivamus convallis eros rutrum lectus vestibulum viverra. Sed fringilla pharetra nunc placerat rutrum.</p>
|
|
262
|
+
|
|
263
|
+
<p>Nullam auctor augue non tempus porta. Aliquam ante odio, dapibus id purus a, consequat ullamcorper dui. Nunc sodales metus felis, id volutpat lectus imperdiet eu. In lorem diam, luctus a neque convallis, suscipit luctus tortor. Duis tortor sapien, convallis eget placerat quis, volutpat nec velit. Quisque aliquam nunc orci, pharetra placerat orci gravida vitae. Donec eget congue mi. Pellentesque tellus risus, dictum ac ultrices nec, luctus eu mi. Proin sit amet blandit magna. Quisque diam est, rhoncus ut dictum eu, facilisis a ex. Aenean sed nisi sagittis, suscipit magna eu, congue neque. Donec porttitor sapien massa, sit amet pretium turpis rhoncus non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
|
|
264
|
+
|
|
265
|
+
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800" height="800" viewBox="0 0 60.051 60.051" class="target">
|
|
266
|
+
<path d="M56.963 32.026H55.14a3.091 3.091 0 0 0-3.088 3.088v3.912h-10v-6.219c3.646-1.177 5.957-6.052 5.957-12.781 0-7.235-2.669-12.333-6.8-12.988a1.028 1.028 0 0 0-.157-.012h-40a1 1 0 0 0-.982.816H.069c-.02.107-.472 2.648 1.243 4.714 1.138 1.371 2.92 2.169 5.292 2.395a23.298 23.298 0 0 0-.552 5.075c0 7.29 3.075 13 7 13h21v12.967a3.036 3.036 0 0 0 3.033 3.033h1.935a3.03 3.03 0 0 0 2.84-2h10.193v2.912a3.091 3.091 0 0 0 3.088 3.088h1.823a3.091 3.091 0 0 0 3.088-3.088V35.114a3.093 3.093 0 0 0-3.089-3.088zm-15.996-23c2.397.436 4.788 3.683 5.018 10h-20.52l-3.707-3.707a1 1 0 0 0-.707-.293h-7.404l-.029-.042a7.071 7.071 0 0 0-.34-.495c-.067-.09-.142-.18-.215-.27-.033-.041-.064-.082-.098-.123a7.743 7.743 0 0 0-.123-.141c-.044-.05-.08-.099-.125-.149-.017-.019-.039-.032-.058-.05a11.85 11.85 0 0 0-.593-.596 15.053 15.053 0 0 0-1.191-1.005c-.087-.067-.173-.134-.263-.201-1.513-1.131-3.265-2.134-4.846-2.928h35.201zm-26.916 9.666c0 2.09-.6 3.471-1 4.073-.4-.603-1-1.983-1-4.073 0-.806.087-1.489.21-2.053.004.006.012.008.017.013a.982.982 0 0 0 .378.28.987.987 0 0 0 .396.092h.862c.091.534.137 1.092.137 1.668zM2.864 11.296c-.482-.574-.696-1.218-.791-1.773 1.508.648 3.509 1.606 5.354 2.716-.098.246-.188.501-.276.759-2.004-.128-3.443-.699-4.287-1.702zm5.187 8.73c0-2.422.382-4.745 1.086-6.671l.06.042c.617.445 1.133.879 1.576 1.303-.351.861-.723 2.197-.723 3.992 0 3.374 1.402 6.333 3 6.333s3-2.959 3-6.333c0-.571-.048-1.125-.124-1.667h1.92a22.2 22.2 0 0 1 .204 3c0 6.195-2.688 11-5 11-2.363.001-4.999-4.517-4.999-10.999zm8.673 11c.028-.033.053-.075.081-.109.191-.231.376-.479.554-.742.03-.044.061-.082.091-.127.205-.313.399-.65.585-1.003.05-.094.095-.195.143-.292a15.117 15.117 0 0 0 .537-1.216c.119-.304.229-.618.334-.94.034-.106.072-.208.104-.315.131-.43.249-.872.354-1.328.021-.091.036-.185.056-.276.079-.371.15-.749.211-1.135.024-.155.045-.311.067-.467.047-.349.086-.703.117-1.061.013-.152.029-.303.039-.457a22.72 22.72 0 0 0 .056-1.532v-3h.586l3.707 3.707a1 1 0 0 0 .707.293h20.934c-.23 6.317-2.621 9.564-5.018 10H16.724zm22.295 16h-1.935a1.034 1.034 0 0 1-1.033-1.033V33.026h4V45.993c0 .569-.463 1.033-1.032 1.033zm3.032-2v-4h10v4h-10zm16 4.911c0 .6-.488 1.088-1.088 1.088H55.14a1.09 1.09 0 0 1-1.088-1.088V35.113c0-.6.488-1.088 1.088-1.088h1.823c.6 0 1.088.488 1.088 1.088v14.824z" />
|
|
267
|
+
<circle cx="32.051" cy="27.026" r="1" />
|
|
268
|
+
<circle cx="28.051" cy="27.026" r="1" />
|
|
269
|
+
<circle cx="24.051" cy="27.026" r="1" />
|
|
270
|
+
</svg>
|
|
271
|
+
</main>
|
|
272
|
+
|
|
273
|
+
<footer>
|
|
274
|
+
<h2>Center Center</h2>
|
|
275
|
+
</footer>
|
|
276
|
+
</div>
|
|
277
|
+
</body>
|
|
278
|
+
</html>
|