msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

resolve TODO in Actions tutorial

Browse Source
pull/2779/head
Peter Varholak 6 years ago
parent 5121a3cba8
commit 65cc0d8b3f
No known key found for this signature in database
GPG Key ID: 19AC6B9476876A84
7 changed files with 258 additions and 129 deletions
Show Stats Download Patch File Download Diff File

85
site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
Unescape View File

@ -1,70 +1,27 @@
<script>
let language = "english";
import Converter from './Converter.svelte';
const translations = {
english: {
tooltip: "Switch Languages",
},
latin: {
tooltip: "Itchsway Anguageslay",
}
};
function tooltip(node, text) {
const tooltip = document.createElement('div');
tooltip.textContent = text;
Object.assign(tooltip.style, {
position: 'absolute',
background: 'black',
color: 'white',
padding: '0.5em 1em',
fontSize: '12px',
pointerEvents: 'none',
transform: 'translate(5px, -50%)',
borderRadius: '2px',
transition: 'opacity 0.4s'
});
function position() {
const { top, right, bottom } = node.getBoundingClientRect();
tooltip.style.top = `${(top + bottom) / 2}px`;
tooltip.style.left = `${right}px`;
}
function append() {
document.body.appendChild(tooltip);
tooltip.style.opacity = 0;
setTimeout(() => tooltip.style.opacity = 1);
position();
}
function remove() {
tooltip.remove();
}
node.addEventListener('mouseenter', append);
node.addEventListener('mouseleave', remove);
return {
update(text) {
tooltip.textContent = text;
position();
},
let value = 'Every word in this input gets converted into symbol on hover';
</script>
destroy() {
tooltip.remove();
node.removeEventListener('mouseenter', append);
node.removeEventListener('mouseleave', remove);
}
};
<style>
input {
width: 500px;
}
function toggleLanguage() {
language = language === 'english' ? 'latin' : 'english'
section {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 200px;
}
</script>
</style>
<input bind:value placeholder="Write something" />
<h1>Hover us</h1>
<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
{language}
</button>
<section>
<Converter symbol="🍕" text={value} />
<Converter symbol="🙈" text={value} />
<Converter symbol="🥔" text={value} />
</section>

33
site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/Converter.svelte
Unescape View File

@ -0,0 +1,33 @@
<script>
export let symbol;
export let text;
</script>
<style>
div {
align-items: center;
background-color: #fafafa;
border: 1px solid #bfbfbf;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
cursor: default;
display: flex;
height: 50px;
justify-content: center;
transition: box-shadow 0.3s ease-in-out, transform 0.3s;
width: 50px;
}
div:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transform: scale(1.1, 1.1);
}
span {
cursor: default;
font-size: 25px;
}
</style>
<div>
<span>{symbol}</span>
</div>

51
site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/convertable.js
Unescape View File

@ -0,0 +1,51 @@
function convertText (text, symbol) {
return text
.split(' ')
.map(word => word && symbol)
.join(' ')
}
export function convertable (node, { symbol, text }) {
const tooltip = document.createElement('div')
tooltip.textContent = convertText(text, symbol)
Object.assign(tooltip.style, {
position: 'absolute',
background: 'black',
color: 'white',
padding: '0.5em 1em',
fontSize: '15px',
pointerEvents: 'none',
transform: 'translate(5px, -50%)',
borderRadius: '2px',
transition: 'opacity 0.4s'
})
function position () {
const { top, right, bottom, left } = node.getBoundingClientRect()
tooltip.style.top = `${bottom + 35}px`
tooltip.style.left = `${left}px`
}
function append () {
document.body.appendChild(tooltip)
tooltip.style.opacity = 0
setTimeout(() => (tooltip.style.opacity = 1))
position()
}
function remove () {
tooltip.remove()
}
node.addEventListener('mouseenter', append)
node.addEventListener('mouseleave', remove)
return {
destroy () {
tooltip.remove()
node.removeEventListener('mouseenter', append)
node.removeEventListener('mouseleave', remove)
}
}
}

85
site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
Unescape View File

@ -1,70 +1,27 @@
<script>
let language = "english";
import Converter from './Converter.svelte';
const translations = {
english: {
tooltip: "Switch Languages",
},
latin: {
tooltip: "Itchsway Anguageslay",
}
};
function tooltip(node, text) {
const tooltip = document.createElement('div');
tooltip.textContent = text;
Object.assign(tooltip.style, {
position: 'absolute',
background: 'black',
color: 'white',
padding: '0.5em 1em',
fontSize: '12px',
pointerEvents: 'none',
transform: 'translate(5px, -50%)',
borderRadius: '2px',
transition: 'opacity 0.4s'
});
function position() {
const { top, right, bottom } = node.getBoundingClientRect();
tooltip.style.top = `${(top + bottom) / 2}px`;
tooltip.style.left = `${right}px`;
}
function append() {
document.body.appendChild(tooltip);
tooltip.style.opacity = 0;
setTimeout(() => tooltip.style.opacity = 1);
position();
}
function remove() {
tooltip.remove();
}
node.addEventListener('mouseenter', append);
node.addEventListener('mouseleave', remove);
return {
update(text) {
tooltip.textContent = text;
position();
},
let value = 'Every word in this input gets converted into symbol on hover';
</script>
destroy() {
tooltip.remove();
node.removeEventListener('mouseenter', append);
node.removeEventListener('mouseleave', remove);
}
};
<style>
input {
width: 500px;
}
function toggleLanguage() {
language = language === 'english' ? 'latin' : 'english'
section {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 200px;
}
</script>
</style>
<input bind:value placeholder="Write something" />
<h1>Hover us</h1>
<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
{language}
</button>
<section>
<Converter symbol="🍕" text={value} />
<Converter symbol="🙈" text={value} />
<Converter symbol="🥔" text={value} />
</section>

35
site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/Converter.svelte
Unescape View File

@ -0,0 +1,35 @@
<script>
import { convertable } from './convertable.js';
export let symbol;
export let text;
</script>
<style>
div {
align-items: center;
background-color: #fafafa;
border: 1px solid #bfbfbf;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
cursor: default;
display: flex;
height: 50px;
justify-content: center;
transition: box-shadow 0.3s ease-in-out, transform 0.3s;
width: 50px;
}
div:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transform: scale(1.1, 1.1);
}
span {
cursor: default;
font-size: 25px;
}
</style>
<div use:convertable={{ symbol, text }}>
<span>{symbol}</span>
</div>

55
site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/convertable.js
Unescape View File

@ -0,0 +1,55 @@
function convertText (text, symbol) {
return text
.split(' ')
.map(word => word && symbol)
.join(' ')
}
export function convertable (node, { symbol, text }) {
const tooltip = document.createElement('div')
tooltip.textContent = convertText(text, symbol)
Object.assign(tooltip.style, {
position: 'absolute',
background: 'black',
color: 'white',
padding: '0.5em 1em',
fontSize: '15px',
pointerEvents: 'none',
transform: 'translate(5px, -50%)',
borderRadius: '2px',
transition: 'opacity 0.4s'
})
function position () {
const { top, right, bottom, left } = node.getBoundingClientRect()
tooltip.style.top = `${bottom + 35}px`
tooltip.style.left = `${left}px`
}
function append () {
document.body.appendChild(tooltip)
tooltip.style.opacity = 0
setTimeout(() => (tooltip.style.opacity = 1))
position()
}
function remove () {
tooltip.remove()
}
node.addEventListener('mouseenter', append)
node.addEventListener('mouseleave', remove)
return {
update ({ symbol, text }) {
tooltip.textContent = convertText(text, symbol)
},
destroy () {
tooltip.remove()
node.removeEventListener('mouseenter', append)
node.removeEventListener('mouseleave', remove)
}
}
}

43
site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
Unescape View File

@ -2,4 +2,45 @@
title: Adding parameters
---
TODO come up with a better example
An Action can also accept parameters. This is useful when we want to work with variables inside the Action.
In this app we want to convert the text in the input field into specified symbol once you hover over it. In order to do so we must firstly import the `convertable` function into `Converter.svelte`
```html
<script>
import { convertable } from './convertable.js';
export let symbol;
export let text;
</script>
```
We can now use it with the element:
```html
<div use:convertable={{ symbol, text }}>
<span>{symbol}</span>
</div>
```
Hover over the symbols now and behold the magic of converting text into emojis. 🎉
You might notice that when you change the text in the input, the amount of symbols in the popup doesn't change. Fortunately we have an easy way to **update** the Action every time the parameters change. We can do so by adding an `update` function into the object returned by the Action. This function is called with updated parameters every time they change.
Update the return value of `convertable` function in `convertable.js`:
```js
return {
update ({ symbol, text }) {
tooltip.textContent = convertText(text, symbol)
},
destroy () {
tooltip.remove()
node.removeEventListener('mouseenter', append)
node.removeEventListener('mouseleave', remove)
}
}
```
If you change the text now and hover over the symbols, you will see the amount changing properly.

Write Preview
Loading…
Cancel
Save