Change lettersToSpan name to charsToSpan

This commit is contained in:
2020-03-24 19:44:42 +01:00
parent 3d9702db33
commit 846c575f1d
3 changed files with 8 additions and 8 deletions

View File

@@ -1,6 +1,6 @@
<script> <script>
import { onMount } from 'svelte' import { onMount } from 'svelte'
import { lettersToSpan } from '../utils/functions' import { charsToSpan } from '../utils/functions'
// Animations // Animations
import { animateIn } from '../animations/TitleSite.js' import { animateIn } from '../animations/TitleSite.js'
@@ -21,7 +21,7 @@
<div class="title-location title-location--inline" bind:this={scope}> <div class="title-location title-location--inline" bind:this={scope}>
<div role="heading" aria-level="1" aria-label="Houses"> <div role="heading" aria-level="1" aria-label="Houses">
<div class="anim-mask"> <div class="anim-mask">
{@html lettersToSpan('Houses')} {@html charsToSpan('Houses')}
</div> </div>
</div> </div>
@@ -32,7 +32,7 @@
<div aria-label="World"> <div aria-label="World">
<div class="anim-mask"> <div class="anim-mask">
{@html lettersToSpan('World')} {@html charsToSpan('World')}
</div> </div>
</div> </div>
</div> </div>

View File

@@ -33,7 +33,7 @@
pageReady, pageReady,
pageTransition pageTransition
} from '../utils/store' } from '../utils/store'
import { lettersToSpan } from '../utils/functions' import { charsToSpan } from '../utils/functions'
// Dependencies // Dependencies
import zenscroll from 'zenscroll' import zenscroll from 'zenscroll'
@@ -87,7 +87,7 @@
<div class="anim-mask"> <div class="anim-mask">
<div class="anim title-parallax" id="title-houses"> <div class="anim title-parallax" id="title-houses">
<h1 class="title-massive" aria-label="Houses"> <h1 class="title-massive" aria-label="Houses">
{@html lettersToSpan('Houses')} {@html charsToSpan('Houses')}
</h1> </h1>
</div> </div>
</div> </div>
@@ -110,7 +110,7 @@
<section class="explore explore--homepage"> <section class="explore explore--homepage">
<div class="of" id="title-of" aria-label="of"> <div class="of" id="title-of" aria-label="of">
<div class="anim-mask"> <div class="anim-mask">
{@html lettersToSpan('of')} {@html charsToSpan('of')}
</div> </div>
</div> </div>
@@ -122,7 +122,7 @@
<div class="anim-mask anim-title"> <div class="anim-mask anim-title">
<h1 class="title-massive title-parallax" id="title-world" aria-label="World"> <h1 class="title-massive title-parallax" id="title-world" aria-label="World">
{@html lettersToSpan('World')} {@html charsToSpan('World')}
</h1> </h1>
</div> </div>

View File

@@ -45,7 +45,7 @@ export function throttle (fn, delay) {
/* /*
** Wrap string's each letters into a span ** Wrap string's each letters into a span
*/ */
export const lettersToSpan = string => { export const charsToSpan = string => {
return string return string
.replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '<span>$&</span>')) .replace(/(<.*?>)|(.)/g, letter => letter.replace(/./g, '<span>$&</span>'))
.replace(/ /g, '\u00a0') .replace(/ /g, '\u00a0')