Skip to content

Commit f50c028

Browse files
dysfuncdysfunc
committed
refactor(animations): change durations and apply timeout when rendering
1 parent 4fa2a7d commit f50c028

File tree

7 files changed

+85
-75
lines changed

7 files changed

+85
-75
lines changed

‎docs/public/global.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/src/App.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,12 +183,12 @@
183183
<Prism code={"<b use:tooltip={{ content: 'Just another tooltip.', animation: 'slide' }}>tooltip</b>"} />
184184
</div>
185185
<div class="example">
186-
<p>This tooltip uses the <b use:tooltip={{ content: 'Just another tooltip.', animation: 'puff', maxWidth: 140 }}>Puff</b> animation.</p>
186+
<p>This tooltip uses the <b use:tooltip={{ content: 'Just another tooltip.', animation: 'puff' }}>Puff</b> animation.</p>
187187
<Prism code={"<b use:tooltip={{ content: 'Just another tooltip.', animation: 'puff' }}>tooltip</b>"} />
188188
</div>
189189

190190
<div class="example">
191-
<p>This tooltip uses the <b use:tooltip={{ content: 'Just another tooltip.', animation: 'bounce', maxWidth: 140 }}>Bounce</b> animation.</p>
191+
<p>This tooltip uses the <b use:tooltip={{ content: 'Just another tooltip.', animation: 'bounce' }}>Bounce</b> animation.</p>
192192
<Prism code={"<b use:tooltip={{ content: 'Just another tooltip.', animation: 'bounce' }}>tooltip</b>"} />
193193
</div>
194194

‎package-lock.json

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@svelte-plugins/tooltips",
3-
"version": "0.1.2",
3+
"version": "0.1.3",
44
"license": "MIT",
55
"description": "A simple tooltip action and component designed for Svelte.",
66
"author": "Kieran Boyle (https://github.com/dysfunc)",

‎src/action-tooltip.svelte

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import { onMount, onDestroy } from 'svelte';
3-
import { formatVariableKey, isInViewport } from './helpers';
3+
import { formatVariableKey, getMinWidth, isInViewport } from './helpers';
44
import { inverse } from './constants';
55
66
export let content = '';
@@ -16,23 +16,18 @@
1616
let ref = null;
1717
let minWidth = 0;
1818
let component = null;
19+
let animationEffect = null;
20+
let show = false;
1921
2022
onMount(() => {
21-
let delay = 0;
23+
const delay = animation ? 200 : 0;
2224
2325
if (ref !== null) {
2426
if (isComponent && !component) {
2527
component = new content.component({ target: ref, props: content.props });
2628
}
2729
28-
const elementWidth = ref.getBoundingClientRect().width;
29-
const elementStyle = window.getComputedStyle(ref);
30-
const elementPaddingLeft = parseInt(elementStyle.getPropertyValue('padding-left'), 10);
31-
const elementPaddingRight = parseInt(elementStyle.getPropertyValue('padding-right'), 10);
32-
const elementPadding = elementPaddingLeft + elementPaddingRight;
33-
const contentWidth = elementWidth - elementPadding;
34-
35-
minWidth = Math.round(Math.min(maxWidth, contentWidth));
30+
minWidth = getMinWidth(ref, maxWidth);
3631
3732
if (style && typeof style === 'object') {
3833
for (let prop in style) {
@@ -46,10 +41,13 @@
4641
4742
if (autoPosition && !isInViewport(ref)) {
4843
position = inverse[position];
49-
delay = 200;
5044
}
5145
52-
setTimeout(() => ref.classList.add('show'), delay);
46+
if (animation) {
47+
animationEffect = animation;
48+
}
49+
50+
setTimeout(() => (show = true), delay);
5351
});
5452
5553
onDestroy(() => {
@@ -64,7 +62,8 @@
6462

6563
<div
6664
bind:this={ref}
67-
class="tooltip animation-{animation} {position} {theme}"
65+
class="tooltip animation-{animationEffect} {position} {theme}"
66+
class:show
6867
class:arrowless={!arrow}
6968
style="min-width: {minWidth}px; max-width: {maxWidth}px; text-align: {align};"
7069
>
@@ -99,16 +98,11 @@
9998
* Tooltip Styling
10099
*--------------------------*/
101100
102-
.tooltip-container {
103-
position: relative;
104-
}
105-
106101
.tooltip {
107102
background-color: var(--tooltip-background-color);
108103
box-shadow: var(--tooltip-box-shadow);
109104
border-radius: var(--tooltip-border-radius);
110105
color: var(--tooltip-color);
111-
opacity: 0;
112106
font-family: var(--tooltip-font-family);
113107
font-size: var(--tooltip-font-size);
114108
font-style: normal;
@@ -117,14 +111,11 @@
117111
padding: var(--tooltip-padding);
118112
position: absolute;
119113
text-align: left;
120-
visibility: hidden;
121114
white-space: nowrap;
122115
z-index: var(--tooltip-z-index);
123116
}
124117
125118
.tooltip.show {
126-
opacity: 1;
127-
visibility: visible;
128119
white-space: normal;
129120
}
130121
@@ -201,7 +192,7 @@
201192
202193
.tooltip.animation-fade {
203194
opacity: 0;
204-
transition: opacity 0.3s ease-in-out;
195+
transition: opacity 0.25s ease-in-out;
205196
}
206197
207198
.tooltip.animation-fade.show {
@@ -213,7 +204,7 @@
213204
.tooltip.top.animation-slide {
214205
margin-top: 10px;
215206
opacity: 0;
216-
transition: opacity 0.3s ease-in-out, margin 0.3s ease-in-out;
207+
transition: opacity 0.25s ease-in-out, margin 0.25s ease-in-out;
217208
}
218209
219210
.tooltip.top.animation-slide.show {
@@ -224,7 +215,7 @@
224215
.tooltip.bottom.animation-slide {
225216
margin-bottom: 20px;
226217
opacity: 0;
227-
transition: opacity 0.3s ease-in-out, margin 0.3s ease-in-out;
218+
transition: opacity 0.25s ease-in-out, margin 0.25s ease-in-out;
228219
}
229220
230221
.tooltip.bottom.animation-slide.show {
@@ -235,7 +226,7 @@
235226
.tooltip.right.animation-slide {
236227
margin-right: 20px;
237228
opacity: 0;
238-
transition: opacity 0.3s ease-in-out, margin 0.3s ease-in-out;
229+
transition: opacity 0.25s ease-in-out, margin 0.25s ease-in-out;
239230
}
240231
241232
.tooltip.right.animation-slide.show {
@@ -246,7 +237,7 @@
246237
.tooltip.left.animation-slide {
247238
margin-left: 20px;
248239
opacity: 0;
249-
transition: opacity 0.3s ease-in-out, margin 0.3s ease-in-out;
240+
transition: opacity 0.25s ease-in-out, margin 0.25s ease-in-out;
250241
}
251242
252243
.tooltip.left.animation-slide.show {
@@ -261,7 +252,7 @@
261252
opacity: 0;
262253
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%) scale(2, 2);
263254
transform-origin: 50% 50%;
264-
transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s ease-in-out;
255+
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
265256
}
266257
267258
.tooltip.left.animation-puff.show {
@@ -275,7 +266,7 @@
275266
opacity: 0;
276267
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%) scale(2, 2);
277268
transform-origin: 50% 50%;
278-
transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s ease-in-out;
269+
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
279270
}
280271
281272
.tooltip.right.animation-puff.show {
@@ -289,7 +280,7 @@
289280
opacity: 0;
290281
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y))) scale(2, 2);
291282
transform-origin: 50% 50%;
292-
transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s ease-in-out;
283+
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
293284
}
294285
295286
.tooltip.top.animation-puff.show {
@@ -303,7 +294,7 @@
303294
opacity: 0;
304295
transform: translate(-50%, calc(100% + var(--tooltip-offset-y))) scale(2, 2);
305296
transform-origin: 50% 50%;
306-
transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.3s ease-in-out;
297+
transition: opacity 0.25s ease-in-out, filter 0.25s ease-in-out, transform 0.25s ease-in-out;
307298
}
308299
309300
.tooltip.bottom.animation-puff.show {
@@ -318,7 +309,7 @@
318309
opacity: 0;
319310
transform: translate(calc(-100% - var(--tooltip-offset-x)), -50%) scale(1.2, 1.2);
320311
transform-origin: 50% 50%;
321-
transition: opacity 0.3s ease-in-out, transform 0.3s cubic-bezier(0.5, -1, 0.5, 3);
312+
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
322313
}
323314
324315
.tooltip.left.animation-bounce.show {
@@ -330,7 +321,7 @@
330321
opacity: 0;
331322
transform: translate(calc(100% + var(--tooltip-offset-x)), -50%) scale(1.2, 1.2);
332323
transform-origin: 50% 50%;
333-
transition: opacity 0.3s ease-in-out, transform 0.3s cubic-bezier(0.5, -1, 0.5, 3);
324+
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
334325
}
335326
336327
.tooltip.right.animation-bounce.show {
@@ -342,7 +333,7 @@
342333
opacity: 0;
343334
transform: translate(-50%, calc(-100% - var(--tooltip-offset-y))) scale(1.2, 1.2);
344335
transform-origin: 50% 50%;
345-
transition: opacity 0.3s ease-in-out, transform 0.3s cubic-bezier(0.5, -1, 0.5, 3);
336+
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
346337
}
347338
348339
.tooltip.top.animation-bounce.show {
@@ -354,7 +345,7 @@
354345
opacity: 0;
355346
transform: translate(-50%, calc(100% + var(--tooltip-offset-y))) scale(1.2, 1.2);
356347
transform-origin: 50% 50%;
357-
transition: opacity 0.3s ease-in-out, transform 0.3s cubic-bezier(0.5, -1, 0.5, 3);
348+
transition: opacity 0.25s ease-in-out, transform 0.25s cubic-bezier(0.5, -1, 0.5, 3);
358349
}
359350
360351
.tooltip.bottom.animation-bounce.show {

‎src/helpers.js

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
1+
export const formatVariableKey = (str) => {
2+
return str
3+
.replace(/-_$/g, '')
4+
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
5+
.replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
6+
.toLowerCase();
7+
};
8+
9+
export const getMinWidth = (element, maxWidth) => {
10+
const extraCharPadding = 2;
11+
const elementWidth = element.getBoundingClientRect().width + extraCharPadding;
12+
const elementStyle = window.getComputedStyle(element);
13+
const elementPaddingLeft = parseInt(elementStyle.getPropertyValue('padding-left'), 10);
14+
const elementPaddingRight = parseInt(elementStyle.getPropertyValue('padding-right'), 10);
15+
const elementPadding = elementPaddingLeft + elementPaddingRight;
16+
const contentWidth = elementWidth - elementPadding;
17+
18+
return Math.round(Math.min(maxWidth, contentWidth));
19+
};
20+
121
export const isInViewport = (element) => {
222
const rect = element.getBoundingClientRect();
323

@@ -8,11 +28,3 @@ export const isInViewport = (element) => {
828
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
929
);
1030
};
11-
12-
export const formatVariableKey = (str) => {
13-
return str
14-
.replace(/-_$/g, '')
15-
.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
16-
.replace(/([A-Z])([A-Z])(?=[a-z])/g, '$1-$2')
17-
.toLowerCase();
18-
};

0 commit comments

Comments
 (0)