mirror of https://github.com/sveltejs/svelte
Richard Harris
6 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>
|
||||
let name = 'world';
|
||||
let name = '';
|
||||
</script>
|
||||
|
||||
<label>
|
||||
<input bind:value={name}>
|
||||
</label>
|
||||
|
||||
<h1>Hello {name}!</h1>
|
||||
<input bind:value={name} placeholder="enter your name">
|
||||
<p>Hello {name || 'stranger'}!</p>
|
||||
@ -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