mirror of https://github.com/sveltejs/svelte
Richard Harris
7 years ago
parent
9037688dd9
commit
771d9eed06
@ -1,22 +0,0 @@
|
|||||||
<script>
|
|
||||||
let promise;
|
|
||||||
|
|
||||||
function findAnswer() {
|
|
||||||
promise = new Promise(fulfil => {
|
|
||||||
const delay = 1000 + Math.random() * 3000;
|
|
||||||
setTimeout(() => fulfil(42), delay);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<button on:click='{findAnswer}'>find the answer</button>
|
|
||||||
|
|
||||||
{#if promise}
|
|
||||||
{#await promise}
|
|
||||||
<p>wait for it...</p>
|
|
||||||
{:then answer}
|
|
||||||
<p>the answer is {answer}!</p>
|
|
||||||
{:catch error}
|
|
||||||
<p>well that's odd</p>
|
|
||||||
{/await}
|
|
||||||
{/if}
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
<script>
|
|
||||||
const selected = ['blue'];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input type=checkbox bind:group={selected} value="red">
|
|
||||||
red
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input type=checkbox bind:group={selected} value="green">
|
|
||||||
green
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input type=checkbox bind:group={selected} value="blue">
|
|
||||||
blue
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<p>{selected.join(', ') || 'nothing'} selected</p>
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
<script>
|
|
||||||
let a = 5;
|
|
||||||
let b = 5;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
input {
|
|
||||||
display: block;
|
|
||||||
width: 10em
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- number and range inputs are bound to numeric values -->
|
|
||||||
<input bind:value={a} type=number min=0 max=10>
|
|
||||||
<input bind:value={b} type=range min=0 max=10>
|
|
||||||
|
|
||||||
<p>{a} * {b} = {a * b}</p>
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
<script>
|
|
||||||
let selected = 'blue';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input type=radio bind:group={selected} value="red">
|
|
||||||
red
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input type=radio bind:group={selected} value="green">
|
|
||||||
green
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<input type=radio bind:group={selected} value="blue">
|
|
||||||
blue
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<p style="color: {selected};">selected {selected}</p>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
<script>
|
|
||||||
let name = '';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<input bind:value={name} placeholder="enter your name">
|
|
||||||
<p>Hello {name || 'stranger'}!</p>
|
|
||||||
@ -1,95 +0,0 @@
|
|||||||
<script>
|
|
||||||
let paused = true;
|
|
||||||
let t = 0;
|
|
||||||
let d;
|
|
||||||
let bg;
|
|
||||||
|
|
||||||
$: icon = `https://icon.now.sh/${paused ? 'play' : 'pause'}_circle_filled`;
|
|
||||||
|
|
||||||
$: {
|
|
||||||
const p = d ? t / d : 0;
|
|
||||||
const h = 90 + 90 * p;
|
|
||||||
const l = 10 + p * 30;
|
|
||||||
bg = `hsl(${h},50%,${l}%)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
function pad(num) {
|
|
||||||
return num < 10 ? '0' + num : num;
|
|
||||||
}
|
|
||||||
|
|
||||||
const format = time => {
|
|
||||||
if (isNaN(time)) return '--:--.-';
|
|
||||||
const minutes = Math.floor(time / 60);
|
|
||||||
const seconds = (time % 60).toFixed(1);
|
|
||||||
|
|
||||||
return minutes + ':' + pad(seconds)
|
|
||||||
};
|
|
||||||
|
|
||||||
function seek(event) {
|
|
||||||
if (event.buttons === 1) {
|
|
||||||
event.preventDefault();
|
|
||||||
const p = event.clientX / window.innerWidth;
|
|
||||||
t = p * d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:window on:click={seek} on:mousemove={seek}/>
|
|
||||||
|
|
||||||
<audio bind:currentTime={t} bind:duration={d} bind:paused>
|
|
||||||
<source type="audio/mp3" src="https://deepnote.surge.sh/deepnote.mp3">
|
|
||||||
</audio>
|
|
||||||
|
|
||||||
<p>THX Deep Note</p>
|
|
||||||
<div class="status" on:click="{event => event.stopPropagation()}">
|
|
||||||
<img alt="play/pause button" on:click="{() => paused = !paused}" src="{icon}/333333">
|
|
||||||
<span class="elapsed">{format(t)}</span>
|
|
||||||
<span class="duration">{format(d)}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="progress" style="width: {d ? 100 * t/d : 0}%; background: {bg};">
|
|
||||||
<p>THX Deep Note</p>
|
|
||||||
<div class="status" on:click="{event => event.stopPropagation()}">
|
|
||||||
<img alt="play/pause button" src="{icon}/ffffff">
|
|
||||||
<span class="elapsed">{format(t)}</span>
|
|
||||||
<span class="duration">{format(d)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.progress {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
color: white;
|
|
||||||
overflow: hidden;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
position: absolute;
|
|
||||||
left: 1em;
|
|
||||||
top: 1em;
|
|
||||||
width: 20em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 1em;
|
|
||||||
left: 1em;
|
|
||||||
width: calc(100vw - 2em);
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 2em;
|
|
||||||
width: 3em;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.elapsed { float: left; }
|
|
||||||
.duration { float: right; }
|
|
||||||
</style>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<script>
|
|
||||||
import marked from 'marked';
|
|
||||||
|
|
||||||
let markdown = `# Markdown editor\n\nTODOs:\n\n* make a Svelte app\n* think of a third item for this list`;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
height: 50%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<textarea bind:value={markdown} resize="none"></textarea>
|
|
||||||
<div class="output">{@html marked(markdown)}</div>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
<script>
|
|
||||||
const cats = [
|
|
||||||
{
|
|
||||||
name: 'Keyboard Cat',
|
|
||||||
video: 'https://www.youtube.com/watch?v=J---aiyznGQ'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Maru',
|
|
||||||
video: 'https://www.youtube.com/watch?v=z_AbfPXTKms'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Henri The Existential Cat',
|
|
||||||
video: 'https://www.youtube.com/watch?v=OUtn3pvWmpg'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h1>Cats of YouTube</h1>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{#each cats as cat}
|
|
||||||
<li><a target="_blank" href={cat.video}>{cat.name}</a></li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
<script>
|
|
||||||
let name = 'world';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<h1>Hello {name}!</h1>
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
<script>
|
|
||||||
let foo = true;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if foo}
|
|
||||||
<p>foo!</p>
|
|
||||||
{:else}
|
|
||||||
<p>not foo!</p>
|
|
||||||
{/if}
|
|
||||||
@ -1,57 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { spring } from 'svelte/motion';
|
|
||||||
|
|
||||||
let coords = spring({
|
|
||||||
x: window.innerWidth / 2,
|
|
||||||
y: window.innerHeight / 2
|
|
||||||
}, {
|
|
||||||
stiffness: 0.1,
|
|
||||||
damping: 0.25
|
|
||||||
});
|
|
||||||
|
|
||||||
let size = spring(10);
|
|
||||||
|
|
||||||
function follow(e) {
|
|
||||||
coords.set({
|
|
||||||
x: e.clientX,
|
|
||||||
y: e.clientY
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function embiggen() {
|
|
||||||
size.set(30);
|
|
||||||
}
|
|
||||||
|
|
||||||
function revert() {
|
|
||||||
size.set(10);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:window
|
|
||||||
on:mousemove={follow}
|
|
||||||
on:mousedown={embiggen}
|
|
||||||
on:mouseup={revert}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<svg>
|
|
||||||
<circle cx={$coords.x} cy={$coords.y} r={$size}/>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div class="controls">
|
|
||||||
<label>
|
|
||||||
<h3>stiffness ({coords.stiffness})</h3>
|
|
||||||
<input bind:value={coords.stiffness} type="range" min="0" max="1" step="0.01">
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<label>
|
|
||||||
<h3>damping ({coords.damping})</h3>
|
|
||||||
<input bind:value={coords.damping} type="range" min="0" max="1" step="0.01">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
:global(body) { padding: 0 }
|
|
||||||
svg { width: 100%; height: 100% }
|
|
||||||
circle { fill: #ff3e00 }
|
|
||||||
.controls { position: absolute; top: 1em; left: 1em }
|
|
||||||
</style>
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
<script>
|
|
||||||
import Nested from './Nested.svelte';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<p>This is a top-level element.</p>
|
|
||||||
<Nested/>
|
|
||||||
@ -1 +0,0 @@
|
|||||||
<p>And this is a nested component.</p>
|
|
||||||
@ -1,76 +0,0 @@
|
|||||||
<script>
|
|
||||||
let sy;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- this binds `sy` to the current value of `window.scrollY` -->
|
|
||||||
<svelte:window bind:scrollY={sy}/>
|
|
||||||
|
|
||||||
<!-- try changing the values that `sy` is multiplied by -
|
|
||||||
values closer to 0 appear further away -->
|
|
||||||
<div class="parallax-container">
|
|
||||||
<img style="transform: translate(0,{-sy * 0.2}px)" src="https://www.firewatchgame.com/images/parallax/parallax0.png">
|
|
||||||
<img style="transform: translate(0,{-sy * 0.3}px)" src="https://www.firewatchgame.com/images/parallax/parallax1.png">
|
|
||||||
<img style="transform: translate(0,{-sy * 0.4}px)" src="https://www.firewatchgame.com/images/parallax/parallax3.png">
|
|
||||||
<img style="transform: translate(0,{-sy * 0.5}px)" src="https://www.firewatchgame.com/images/parallax/parallax5.png">
|
|
||||||
<img style="transform: translate(0,{-sy * 0.6}px)" src="https://www.firewatchgame.com/images/parallax/parallax7.png">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="text">
|
|
||||||
<small style="
|
|
||||||
transform: translate(0,{-sy * 1.5}px);
|
|
||||||
opacity: {1 - Math.max( 0, sy / 80 )}
|
|
||||||
">(scroll down)</small>
|
|
||||||
<span>parallax has never been this easy</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.parallax-container {
|
|
||||||
position: fixed;
|
|
||||||
width: 2400px;
|
|
||||||
height: 712px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%,0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.parallax-container img {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100vh;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
padding: 50vh 0.5em 0.5em 0.5em;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: linear-gradient(to bottom, rgba(45,10,13,0) 60vh,rgba(45,10,13,1) 712px);
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
display: block;
|
|
||||||
font-size: 4vw;
|
|
||||||
will-change: transform, opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text span {
|
|
||||||
font-size: 20vw;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(body) { margin: 0; padding: 0; }
|
|
||||||
</style>
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<div class="foo">
|
|
||||||
Big red Comic Sans
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.foo {
|
|
||||||
color: red;
|
|
||||||
font-size: 2em;
|
|
||||||
font-family: 'Comic Sans MS';
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
<script>
|
|
||||||
const node = {
|
|
||||||
name: 'Fruit',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Red',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Cherry'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Strawberry'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Green',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
name: 'Apple'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Pear'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Lime'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>{node.name}
|
|
||||||
{#if node.children}
|
|
||||||
{#each node.children as child}
|
|
||||||
<svelte:self node={child}/>
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
@ -1,46 +0,0 @@
|
|||||||
<script>
|
|
||||||
import * as eases from 'svelte/easing';
|
|
||||||
import { fade } from 'svelte/transition';
|
|
||||||
|
|
||||||
let visible;
|
|
||||||
|
|
||||||
const wheee = (node, params) => {
|
|
||||||
return {
|
|
||||||
duration: params.duration,
|
|
||||||
css: t => {
|
|
||||||
const eased = eases.elasticOut(t);
|
|
||||||
|
|
||||||
return `
|
|
||||||
transform: scale(${eased}) rotate(${eased * 1080}deg);
|
|
||||||
color: hsl(
|
|
||||||
${~~(t * 360)},
|
|
||||||
${Math.min(100, 1000 - 1000 * t)}%,
|
|
||||||
${Math.min(50, 500 - 500 * t)}%
|
|
||||||
);`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<input type=checkbox bind:checked={visible}> visible
|
|
||||||
|
|
||||||
{#if visible}
|
|
||||||
<div class="centered" in:wheee="{{duration: 8000}}" out:fade>
|
|
||||||
<span>wheeee!!!!!</span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.centered {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
position: absolute;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
font-size: 4em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { fade } from 'svelte/transition';
|
|
||||||
|
|
||||||
let visible;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<input type=checkbox bind:checked={visible}> visible
|
|
||||||
|
|
||||||
{#if visible}
|
|
||||||
<p transition:fade>fades in and out</p>
|
|
||||||
{/if}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { fly } from 'svelte/transition';
|
|
||||||
|
|
||||||
let visible;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<input type=checkbox bind:checked={visible}> visible
|
|
||||||
|
|
||||||
{#if visible}
|
|
||||||
<p transition:fly="{{y: 200, duration: 1000}}">flies 200 pixels up, slowly</p>
|
|
||||||
{/if}
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { fade, fly } from 'svelte/transition';
|
|
||||||
|
|
||||||
let visible;
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<input type=checkbox bind:checked={visible}> visible
|
|
||||||
|
|
||||||
{#if visible}
|
|
||||||
<p in:fly="{{y: 50}}" out:fade>flies up, fades out</p>
|
|
||||||
{/if}
|
|
||||||
@ -1,9 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
let name = 'world';
|
let name = '';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<label>
|
<input bind:value={name} placeholder="enter your name">
|
||||||
<input bind:value={name}>
|
<p>Hello {name || 'stranger'}!</p>
|
||||||
</label>
|
|
||||||
|
|
||||||
<h1>Hello {name}!</h1>
|
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Clock"
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Bar chart"
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Area chart"
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Scatterplot"
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "SVG"
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue