Update chyron text with text field
parent
74d45e311e
commit
ea5fe03ad0
|
@ -0,0 +1,6 @@
|
|||
/** @type {import('./$types').Actions} */
|
||||
export const actions = {
|
||||
default: async (event) => {
|
||||
// TODO log the user in
|
||||
}
|
||||
};
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import Ticker from 'svelte-ticker';
|
||||
import {HsvPicker} from 'svelte-color-picker';
|
||||
import { enhance } from '$app/forms';
|
||||
|
||||
function colorCallback(rgba) {
|
||||
let r = rgba.detail.r;
|
||||
|
@ -11,7 +12,10 @@ function colorCallback(rgba) {
|
|||
let horizontal = document.querySelector(".horizontal");
|
||||
horizontal.style.color = `rgb(${r},${g},${b})`;
|
||||
}
|
||||
export let chyrontext='chyron text here. Mooooo. 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here. Mooooo. 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.'
|
||||
|
||||
/** @type {import('./$types').ActionData} */
|
||||
export let form;
|
||||
let chyron_text = 'chyron text here. Mooooo. 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here. Mooooo. 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
|
||||
|
||||
</script>
|
||||
|
||||
|
@ -25,19 +29,14 @@ export let chyrontext='chyron text here. Mooooo. 1234567890. qwertyuyiop. asdf
|
|||
</div>
|
||||
<p></p>
|
||||
<div class="form">
|
||||
<form method="POST">
|
||||
<label>
|
||||
<p>Text</p>
|
||||
<input name="chyrontext" type="text">
|
||||
</label>
|
||||
<button>Update</button>
|
||||
</form>
|
||||
</div>
|
||||
<p><input bind:value={chyron_text} placeholder="{chyron_text}">
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="horizontal">
|
||||
<!-- delay affects text starting point offset-->
|
||||
<Ticker pausing=false duration=60 delay=-5>
|
||||
<!-- foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo foooo barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr barrrr -->
|
||||
{chyrontext}
|
||||
{chyron_text}
|
||||
</Ticker>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue