-
Notifications
You must be signed in to change notification settings - Fork 39
/
Example.svelte
72 lines (64 loc) · 2.45 KB
/
Example.svelte
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
<script>
import { onMount, onDestroy } from 'svelte'
import SplitType from '../../lib/SplitType'
import debounce from 'lodash/debounce'
// The html content of the target element(s). This can be single `string` or
// an `Array` of strings. If it's an array, we will render
// multiple target elements.
export let children
// className for the cotainer element
export let className = ''
// SplitType options
export let options = {}
// Coerce children to an array
const childrenArray = Array.isArray(children) ? children : [children]
// Reference to the container element
let containerElement
// Resizer observer
let resizeObserver = { observe: () => {}, disconnect: () => {} }
// Stores teh width of the container element
let previousContainerWidth = null
// SplitType instance
let instance
// Event handler that will be called when the target element is resized.
// When absolute position is enabled, we will reposition text after the
// element is resized.
function handleResize(entry) {
let width
// Only proceed if we are splitting text into lines or using absolute pos
if (options.absolute || /lines/.test(String(options.types))) {
const [{ contentRect }] = entry
width = Math.floor(contentRect.width)
// Only proceed if 1) `previousContainerWidth` has been set (this avoids
// calling the split method when the resize observer is triggered on the
// initial render) and 2) if the width of the container element has
// changed.
if (previousContainerWidth && previousContainerWidth !== width) {
instance.split()
}
}
// Store the width of the `contentRect`
previousContainerWidth = width
}
// If supported, create a resize observer for the container element
if (window.ResizeObserver !== undefined) {
resizeObserver = new ResizeObserver(debounce(handleResize, 100))
}
// Support "types=none" as an alias for types=""
if (options.types === 'none') options.types = ''
onMount(() => {
// Split the the target element(s) using the provided options
instance = SplitType.create('.target', options)
resizeObserver.observe(containerElement)
})
onDestroy(() => {
// Cleanup splitType instance
instance.revert()
resizeObserver.disconnect()
})
</script>
<div bind:this={containerElement} class={`container ${className || ''}`}>
{#each childrenArray as childContent}
<div class="target">{@html childContent}</div>
{/each}
</div>