mirror of https://github.com/sveltejs/svelte
better tutorial for parameterised actions (#3930)
* better tutorial for parameterised actions * update example alongside tutorial * update thumbnailpull/3932/head
parent
927fcbfc71
commit
054f409950
@ -1,70 +1,20 @@
|
|||||||
<script>
|
<script>
|
||||||
let language = "english";
|
import { longpress } from './longpress.js';
|
||||||
|
|
||||||
const translations = {
|
let pressed = false;
|
||||||
english: {
|
let duration = 2000;
|
||||||
tooltip: "Switch Languages",
|
</script>
|
||||||
},
|
|
||||||
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();
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy() {
|
<label>
|
||||||
tooltip.remove();
|
<input type=range bind:value={duration} max={2000} step={100}>
|
||||||
node.removeEventListener('mouseenter', append);
|
{duration}ms
|
||||||
node.removeEventListener('mouseleave', remove);
|
</label>
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleLanguage() {
|
<button use:longpress={duration}
|
||||||
language = language === 'english' ? 'latin' : 'english'
|
on:longpress="{() => pressed = true}"
|
||||||
}
|
on:mouseout="{() => pressed = false}"
|
||||||
</script>
|
>press and hold</button>
|
||||||
|
|
||||||
<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
|
{#if pressed}
|
||||||
{language}
|
<p>congratulations, you pressed and held for {duration}ms</p>
|
||||||
</button>
|
{/if}
|
@ -0,0 +1,20 @@
|
|||||||
|
export function longpress(node, duration) {
|
||||||
|
const handleMousedown = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
node.dispatchEvent(
|
||||||
|
new CustomEvent('longpress')
|
||||||
|
);
|
||||||
|
}, duration);
|
||||||
|
};
|
||||||
|
|
||||||
|
node.addEventListener('mousedown', handleMousedown);
|
||||||
|
|
||||||
|
return {
|
||||||
|
update(newDuration) {
|
||||||
|
duration = newDuration;
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('mousedown', handleMousedown);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
@ -1,70 +1,20 @@
|
|||||||
<script>
|
<script>
|
||||||
let language = "english";
|
import { longpress } from './longpress.js';
|
||||||
|
|
||||||
const translations = {
|
let pressed = false;
|
||||||
english: {
|
let duration = 2000;
|
||||||
tooltip: "Switch Languages",
|
</script>
|
||||||
},
|
|
||||||
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();
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy() {
|
<label>
|
||||||
tooltip.remove();
|
<input type=range bind:value={duration} max={2000} step={100}>
|
||||||
node.removeEventListener('mouseenter', append);
|
{duration}ms
|
||||||
node.removeEventListener('mouseleave', remove);
|
</label>
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleLanguage() {
|
<button use:longpress
|
||||||
language = language === 'english' ? 'latin' : 'english'
|
on:longpress="{() => pressed = true}"
|
||||||
}
|
on:mouseout="{() => pressed = false}"
|
||||||
</script>
|
>press and hold</button>
|
||||||
|
|
||||||
<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
|
{#if pressed}
|
||||||
{language}
|
<p>congratulations, you pressed and held for {duration}ms</p>
|
||||||
</button>
|
{/if}
|
@ -0,0 +1,17 @@
|
|||||||
|
export function longpress(node) {
|
||||||
|
const handleMousedown = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
node.dispatchEvent(
|
||||||
|
new CustomEvent('longpress')
|
||||||
|
);
|
||||||
|
}, 500);
|
||||||
|
};
|
||||||
|
|
||||||
|
node.addEventListener('mousedown', handleMousedown);
|
||||||
|
|
||||||
|
return {
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('mousedown', handleMousedown);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
@ -1,70 +1,20 @@
|
|||||||
<script>
|
<script>
|
||||||
let language = "english";
|
import { longpress } from './longpress.js';
|
||||||
|
|
||||||
const translations = {
|
let pressed = false;
|
||||||
english: {
|
let duration = 2000;
|
||||||
tooltip: "Switch Languages",
|
</script>
|
||||||
},
|
|
||||||
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();
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy() {
|
<label>
|
||||||
tooltip.remove();
|
<input type=range bind:value={duration} max={2000} step={100}>
|
||||||
node.removeEventListener('mouseenter', append);
|
{duration}ms
|
||||||
node.removeEventListener('mouseleave', remove);
|
</label>
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleLanguage() {
|
<button use:longpress={duration}
|
||||||
language = language === 'english' ? 'latin' : 'english'
|
on:longpress="{() => pressed = true}"
|
||||||
}
|
on:mouseout="{() => pressed = false}"
|
||||||
</script>
|
>press and hold</button>
|
||||||
|
|
||||||
<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
|
{#if pressed}
|
||||||
{language}
|
<p>congratulations, you pressed and held for {duration}ms</p>
|
||||||
</button>
|
{/if}
|
@ -0,0 +1,20 @@
|
|||||||
|
export function longpress(node, duration) {
|
||||||
|
const handleMousedown = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
node.dispatchEvent(
|
||||||
|
new CustomEvent('longpress')
|
||||||
|
);
|
||||||
|
}, duration);
|
||||||
|
};
|
||||||
|
|
||||||
|
node.addEventListener('mousedown', handleMousedown);
|
||||||
|
|
||||||
|
return {
|
||||||
|
update(newDuration) {
|
||||||
|
duration = newDuration;
|
||||||
|
},
|
||||||
|
destroy() {
|
||||||
|
node.removeEventListener('mousedown', handleMousedown);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 4.2 KiB |
Loading…
Reference in new issue