Skip to content

Commit 42692b2

Browse files
akhmadullinakhmadullin
authored
Чинит демку в рецепте про тултип (#5920)
1 parent eca0e99 commit 42692b2

File tree

5 files changed

+215
-147
lines changed

5 files changed

+215
-147
lines changed

‎recipes/tooltip/demos/adaptive-js/index.html‎

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,6 @@
2929
font-size: 18px;
3030
}
3131

32-
.height-wrapper {
33-
width: 100%;
34-
height: 100%;
35-
overflow: scroll;
36-
}
37-
38-
.scrollable-container {
39-
display: flex;
40-
justify-content: center;
41-
align-items: center;
42-
min-height: 200vh;
43-
min-width: 200vw;
44-
}
45-
4632
.button {
4733
display: block;
4834
min-width: 210px;
@@ -78,6 +64,11 @@
7864
}
7965
}
8066

67+
/* нужен только для демки, чтобы работал drap'n'drop */
68+
.draggable-container {
69+
position: absolute;
70+
}
71+
8172
.tooltip-container {
8273
position: relative;
8374
display: inline-block;
@@ -168,26 +159,16 @@
168159
</style>
169160
</head>
170161
<body>
171-
<div class="height-wrapper" id="height-wrapper">
172-
<div class="scrollable-container">
173-
<div class="tooltip-container">
174-
<button class="button tooltip-anchor" id="tooltip-anchor" aria-describedby="tooltip">
175-
❤️
176-
</button>
177-
<div class="tooltip hidden" role="tooltip" id="tooltip" data-position="top">
178-
Добавить в «Избранное»
179-
</div>
162+
<div class="draggable-container" id="draggable-container">
163+
<div class="tooltip-container">
164+
<button class="button tooltip-anchor" id="tooltip-anchor" aria-describedby="tooltip">
165+
❤️
166+
</button>
167+
<div class="tooltip hidden" role="tooltip" id="tooltip" data-position="top">
168+
Добавить в «Избранное»
180169
</div>
181170
</div>
182171
</div>
183-
<script>
184-
const heightWrapper = document.querySelector('#height-wrapper')
185-
heightWrapper.scrollTo({
186-
top: heightWrapper.offsetHeight / 2,
187-
left: heightWrapper.offsetWidth / 2,
188-
behavior: 'instant'
189-
})
190-
</script>
191172
<script>
192173
const tooltip = document.querySelector('#tooltip')
193174
const tooltipAnchor = document.querySelector('#tooltip-anchor')
@@ -252,5 +233,36 @@
252233

253234
observer.observe(tooltip)
254235
</script>
236+
<script>
237+
// этот скрипт реализует dran'n'drop для демки
238+
let isDragging = false
239+
let offsetX, offsetY
240+
241+
tooltipAnchor.style.cursor = 'move'
242+
243+
const draggableContainer = document.querySelector('#draggable-container')
244+
245+
document.addEventListener('mousedown', (e) => {
246+
isDragging = true
247+
248+
const rect = draggableContainer.getBoundingClientRect()
249+
offsetX = e.clientX - rect.left
250+
offsetY = e.clientY - rect.top
251+
252+
tooltipAnchor.style.cursor = 'grabbing'
253+
})
254+
255+
document.addEventListener('mousemove', (e) => {
256+
if (!isDragging) return
257+
258+
draggableContainer.style.left = (e.clientX - offsetX) + 'px'
259+
draggableContainer.style.top = (e.clientY - offsetY) + 'px'
260+
})
261+
262+
document.addEventListener('mouseup', () => {
263+
isDragging = false
264+
tooltipAnchor.style.cursor = 'move'
265+
})
266+
</script>
255267
</body>
256268
</html>

‎recipes/tooltip/demos/adaptive-popover-and-css-anchor-positioning/index.html‎

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,6 @@
2929
font-size: 18px;
3030
}
3131

32-
.height-wrapper {
33-
width: 100%;
34-
height: 100%;
35-
overflow: scroll;
36-
}
37-
38-
.scrollable-container {
39-
display: flex;
40-
justify-content: center;
41-
align-items: center;
42-
min-height: 200vh;
43-
min-width: 200vw;
44-
}
45-
4632
.button {
4733
display: block;
4834
min-width: 210px;
@@ -58,6 +44,11 @@
5844
background-color: #C56FFF;
5945
}
6046

47+
/* эти стили нужны только для демки, чтобы работал dran'n'drop */
48+
.button {
49+
position: absolute;
50+
}
51+
6152
.button:hover {
6253
background-color: #FFFFFF;
6354
}
@@ -86,7 +77,7 @@
8677
.tooltip {
8778
inset: unset;
8879
max-width: 300px;
89-
margin: 10px;
80+
bottom: 10px;
9081
padding: 10px 40px;
9182
background-color: #FFFFFF;
9283
color: #000000;
@@ -105,16 +96,22 @@
10596
/* описываем, что значат фолбэки */
10697
@position-try --bottom {
10798
position-area: bottom;
99+
bottom: unset;
100+
top: 10px;
108101
}
109102

110103
@position-try --left {
111104
position-area: left;
112105
max-width: 200px;
106+
bottom: unset;
107+
right: 10px;
113108
}
114109

115110
@position-try --right {
116111
position-area: right;
117112
max-width: 200px;
113+
bottom: unset;
114+
left: 10px;
118115
}
119116

120117
.tooltip-content {
@@ -190,16 +187,12 @@
190187
</style>
191188
</head>
192189
<body>
193-
<div class="height-wrapper" id="height-wrapper">
194-
<div class="scrollable-container">
195-
<button class="button tooltip-anchor" id="tooltip-anchor" aria-describedby="tooltip">
196-
❤️
197-
</button>
198-
<div class="tooltip" id="tooltip" role="tooltip" popover="manual">
199-
<div class="tooltip-content">
200-
Добавить в «Избранное»
201-
</div>
202-
</div>
190+
<button class="button tooltip-anchor" id="tooltip-anchor" aria-describedby="tooltip">
191+
❤️
192+
</button>
193+
<div class="tooltip" id="tooltip" role="tooltip" popover="manual">
194+
<div class="tooltip-content">
195+
Добавить в «Избранное»
203196
</div>
204197
</div>
205198
<script>
@@ -227,11 +220,32 @@
227220
})
228221
</script>
229222
<script>
230-
const heightWrapper = document.querySelector('#height-wrapper')
231-
heightWrapper.scrollTo({
232-
top: heightWrapper.offsetHeight / 2,
233-
left: heightWrapper.offsetWidth / 2,
234-
behavior: 'instant'
223+
// этот скрипт реализует dran'n'drop для демки
224+
let isDragging = false
225+
let offsetX, offsetY
226+
227+
tooltipAnchor.style.cursor = 'move'
228+
229+
document.addEventListener('mousedown', (e) => {
230+
isDragging = true
231+
232+
const rect = tooltipAnchor.getBoundingClientRect();
233+
offsetX = e.clientX - rect.left
234+
offsetY = e.clientY - rect.top
235+
236+
tooltipAnchor.style.cursor = 'grabbing'
237+
});
238+
239+
document.addEventListener('mousemove', (e) => {
240+
if (!isDragging) return
241+
242+
tooltipAnchor.style.left = (e.clientX - offsetX) + 'px'
243+
tooltipAnchor.style.top = (e.clientY - offsetY) + 'px'
244+
});
245+
246+
document.addEventListener('mouseup', () => {
247+
isDragging = false
248+
tooltipAnchor.style.cursor = 'move'
235249
})
236250
</script>
237251
</body>

‎recipes/tooltip/demos/static-four-sides/index.html‎

Lines changed: 70 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,6 @@
2929
font-size: 18px;
3030
}
3131

32-
.height-wrapper {
33-
width: 100%;
34-
height: 100%;
35-
overflow: scroll;
36-
}
37-
38-
.scrollable-container {
39-
display: flex;
40-
justify-content: center;
41-
align-items: center;
42-
min-height: 200vh;
43-
min-width: 200vw;
44-
}
45-
4632
.button {
4733
display: block;
4834
min-width: 100px;
@@ -160,6 +146,15 @@
160146
visibility: hidden;
161147
}
162148

149+
/* нужен только для демки, чтобы работал drap'n'drop */
150+
.draggable-container {
151+
position: absolute;
152+
}
153+
154+
.draggable-container * {
155+
cursor: move;
156+
}
157+
163158
.layout {
164159
display: flex;
165160
flex-direction: column;
@@ -195,45 +190,43 @@
195190
</style>
196191
</head>
197192
<body>
198-
<div class="height-wrapper" id="height-wrapper">
199-
<div class="scrollable-container">
200-
<div class="layout">
201-
<div class="layout-row">
202-
<div class="tooltip-container">
203-
<button class="button tooltip-anchor" id="tooltip-top-anchor" aria-describedby="tooltip-top">
204-
👆🏼
205-
</button>
206-
<div class="tooltip hidden" role="tooltip" id="tooltip-top" data-position="top">
207-
Добавить в «Избранное»
208-
</div>
193+
<div class="draggable-container" id="draggable-container">
194+
<div class="layout">
195+
<div class="layout-row">
196+
<div class="tooltip-container">
197+
<button class="button tooltip-anchor" id="tooltip-top-anchor" aria-describedby="tooltip-top">
198+
👆🏼
199+
</button>
200+
<div class="tooltip hidden" role="tooltip" id="tooltip-top" data-position="top">
201+
Добавить в «Избранное»
209202
</div>
210203
</div>
211-
<div class="layout-row">
212-
<div class="tooltip-container">
213-
<button class="button tooltip-anchor" id="tooltip-left-anchor" aria-describedby="tooltip-left">
214-
👈🏼
215-
</button>
216-
<div class="tooltip hidden" role="tooltip" id="tooltip-left" data-position="left">
217-
Добавить в «Избранное»
218-
</div>
204+
</div>
205+
<div class="layout-row">
206+
<div class="tooltip-container">
207+
<button class="button tooltip-anchor" id="tooltip-left-anchor" aria-describedby="tooltip-left">
208+
👈🏼
209+
</button>
210+
<div class="tooltip hidden" role="tooltip" id="tooltip-left" data-position="left">
211+
Добавить в «Избранное»
219212
</div>
220-
<div class="tooltip-container">
221-
<button class="button tooltip-anchor" id="tooltip-right-anchor" aria-describedby="tooltip-right">
222-
👉🏼
223-
</button>
224-
<div class="tooltip hidden" role="tooltip" id="tooltip-right" data-position="right">
225-
Добавить в «Избранное»
226-
</div>
213+
</div>
214+
<div class="tooltip-container">
215+
<button class="button tooltip-anchor" id="tooltip-right-anchor" aria-describedby="tooltip-right">
216+
👉🏼
217+
</button>
218+
<div class="tooltip hidden" role="tooltip" id="tooltip-right" data-position="right">
219+
Добавить в «Избранное»
227220
</div>
228221
</div>
229-
<div class="layout-row">
230-
<div class="tooltip-container">
231-
<button class="button tooltip-anchor" id="tooltip-bottom-anchor" aria-describedby="tooltip-bottom">
232-
👇🏼
233-
</button>
234-
<div class="tooltip hidden" role="tooltip" id="tooltip-bottom" data-position="bottom">
235-
Добавить в «Избранное»
236-
</div>
222+
</div>
223+
<div class="layout-row">
224+
<div class="tooltip-container">
225+
<button class="button tooltip-anchor" id="tooltip-bottom-anchor" aria-describedby="tooltip-bottom">
226+
👇🏼
227+
</button>
228+
<div class="tooltip hidden" role="tooltip" id="tooltip-bottom" data-position="bottom">
229+
Добавить в «Избранное»
237230
</div>
238231
</div>
239232
</div>
@@ -270,11 +263,35 @@
270263
tooltipPositions.forEach(initTooltip)
271264
</script>
272265
<script>
273-
const heightWrapper = document.querySelector('#height-wrapper')
274-
heightWrapper.scrollTo({
275-
top: heightWrapper.offsetHeight / 2,
276-
left: heightWrapper.offsetWidth / 2,
277-
behavior: 'instant'
266+
// этот скрипт реализует dran'n'drop для демки
267+
let isDragging = false
268+
let offsetX, offsetY
269+
let target
270+
271+
const draggableContainer = document.querySelector('#draggable-container')
272+
273+
document.addEventListener('mousedown', (e) => {
274+
isDragging = true
275+
276+
const rect = draggableContainer.getBoundingClientRect()
277+
offsetX = e.clientX - rect.left
278+
offsetY = e.clientY - rect.top
279+
280+
target = e.target;
281+
target.style.cursor = 'grabbing'
282+
})
283+
284+
document.addEventListener('mousemove', (e) => {
285+
if (!isDragging) return
286+
287+
draggableContainer.style.left = (e.clientX - offsetX) + 'px'
288+
draggableContainer.style.top = (e.clientY - offsetY) + 'px'
289+
})
290+
291+
document.addEventListener('mouseup', () => {
292+
isDragging = false
293+
target.style.cursor = 'move'
294+
target = null
278295
})
279296
</script>
280297
</body>

0 commit comments

Comments
 (0)