mirror of
https://github.com/woutdp/live_svelte
synced 2026-05-24 09:28:21 +00:00
Make breaking news example use a sigil
This commit is contained in:
Wout De Puysseleir
parent
417ca0ce5b
commit
5c55a32a10
2 changed files with 92 additions and 93 deletions
|
|
@ -1,91 +0,0 @@
|
|||
<script>
|
||||
import {slide, fly} from "svelte/transition"
|
||||
import {Marquee} from "dynamic-marquee"
|
||||
import {onMount} from "svelte"
|
||||
|
||||
export let news = []
|
||||
export let pushEvent
|
||||
|
||||
let newItem = ""
|
||||
let marquee
|
||||
let marqueeEl
|
||||
let index = 0
|
||||
let speed = -150
|
||||
|
||||
// Function to add a new item to the news feed
|
||||
function addItem() {
|
||||
if (newItem === "") return
|
||||
if (news.length === 0) marquee.appendItem(createItem(newItem))
|
||||
pushEvent("add_news_item", {body: newItem})
|
||||
newItem = ""
|
||||
}
|
||||
|
||||
// Function to remove an item from the news feed
|
||||
function removeItem(id) {
|
||||
pushEvent("remove_news_item", {id: id})
|
||||
}
|
||||
|
||||
// Run this code when the component is mounted to the DOM
|
||||
onMount(async () => {
|
||||
// Create a new Marquee instance
|
||||
marquee = new Marquee(marqueeEl, {
|
||||
rate: speed,
|
||||
startOnScreen: false,
|
||||
})
|
||||
|
||||
// Add the first item to the Marquee, if there is one
|
||||
if (news.length > 0) marquee.appendItem(createItem(news[0].body))
|
||||
|
||||
// Add an item to the Marquee whenever it is required
|
||||
marquee.onItemRequired(() => {
|
||||
if (news.length === 0) return
|
||||
index += 1
|
||||
if (index > news.length - 1) index = 0
|
||||
return createItem(news[index].body)
|
||||
})
|
||||
})
|
||||
|
||||
// Function to create a new Marquee item
|
||||
function createItem(text) {
|
||||
const item = document.createElement("span")
|
||||
item.classList.add("mx-8")
|
||||
item.classList.add("hover:text-black")
|
||||
item.textContent = text
|
||||
return item
|
||||
}
|
||||
|
||||
// Set the Marquee speed whenever it is changed
|
||||
$: marquee && marquee.setRate(speed)
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col w-full justify-center items-center h-[50vh]">
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<form>
|
||||
<input class="rounded" type="text" bind:value={newItem} />
|
||||
<button class="bg-black text-white rounded px-2 py-1" on:click|preventDefault={addItem} type="submit">Add Item</button>
|
||||
</form>
|
||||
<div class="ml-4">
|
||||
<button class="bg-black text-white rounded px-2 py-1 active:opacity-95" on:click={() => (speed -= 20)}>← Faster</button>
|
||||
<button class="bg-black text-white rounded px-2 py-1 active:opacity-95" on:click={() => (speed += 20)}>Slower →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 mt-2">
|
||||
{#each news as item (item.id)}
|
||||
<div in:fly={{y: 20}} out:slide={{y: -20}} class="mb-1">
|
||||
<button class="bg-[#F00] px-2 py-1 rounded" on:click={() => removeItem(item.id)}>Remove</button>
|
||||
{item.body}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed bottom-0 left-0 text-white font-bold text-4xl z-20 p-4 rounded-r-lg bg-gradient-to-b from-[#f00] via-[#f77] to-[#f00]">
|
||||
BREAKING NEWS
|
||||
</div>
|
||||
<div
|
||||
bind:this={marqueeEl}
|
||||
class="fixed bottom-0 w-screen text-white font-bold text-xl py-2 bg-gradient-to-b from-[#f00] via-[#f77] to-[#f00]"
|
||||
/>
|
||||
|
|
@ -17,8 +17,98 @@ defmodule ExampleWeb.LiveExample5 do
|
|||
]
|
||||
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<LiveSvelte.render name="BreakingNews" props={%{news: @news}} />
|
||||
~V"""
|
||||
<script>
|
||||
import {slide, fly} from "svelte/transition"
|
||||
import {Marquee} from "dynamic-marquee"
|
||||
import {onMount} from "svelte"
|
||||
|
||||
export let news = []
|
||||
export let pushEvent
|
||||
|
||||
let newItem = ""
|
||||
let marquee
|
||||
let marqueeEl
|
||||
let index = 0
|
||||
let speed = -150
|
||||
|
||||
// Function to add a new item to the news feed
|
||||
function addItem() {
|
||||
if (newItem === "") return
|
||||
if (news.length === 0) marquee.appendItem(createItem(newItem))
|
||||
pushEvent("add_news_item", {body: newItem})
|
||||
newItem = ""
|
||||
}
|
||||
|
||||
// Function to remove an item from the news feed
|
||||
function removeItem(id) {
|
||||
pushEvent("remove_news_item", {id: id})
|
||||
}
|
||||
|
||||
// Run this code when the component is mounted to the DOM
|
||||
onMount(async () => {
|
||||
// Create a new Marquee instance
|
||||
marquee = new Marquee(marqueeEl, {
|
||||
rate: speed,
|
||||
startOnScreen: false,
|
||||
})
|
||||
|
||||
// Add the first item to the Marquee, if there is one
|
||||
if (news.length > 0) marquee.appendItem(createItem(news[0].body))
|
||||
|
||||
// Add an item to the Marquee whenever it is required
|
||||
marquee.onItemRequired(() => {
|
||||
if (news.length === 0) return
|
||||
index += 1
|
||||
if (index > news.length - 1) index = 0
|
||||
return createItem(news[index].body)
|
||||
})
|
||||
})
|
||||
|
||||
// Function to create a new Marquee item
|
||||
function createItem(text) {
|
||||
const item = document.createElement("span")
|
||||
item.classList.add("mx-8")
|
||||
item.classList.add("hover:text-black")
|
||||
item.textContent = text
|
||||
return item
|
||||
}
|
||||
|
||||
// Set the Marquee speed whenever it is changed
|
||||
$: marquee && marquee.setRate(speed)
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col w-full justify-center items-center h-[50vh]">
|
||||
<div>
|
||||
<div class="flex items-center">
|
||||
<form>
|
||||
<input class="rounded" type="text" bind:value={newItem} />
|
||||
<button class="bg-black text-white rounded px-2 py-1" on:click|preventDefault={addItem} type="submit">Add Item</button>
|
||||
</form>
|
||||
<div class="ml-4">
|
||||
<button class="bg-black text-white rounded px-2 py-1 active:opacity-95" on:click={() => (speed -= 20)}>← Faster</button>
|
||||
<button class="bg-black text-white rounded px-2 py-1 active:opacity-95" on:click={() => (speed += 20)}>Slower →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1 mt-2">
|
||||
{#each news as item (item.id)}
|
||||
<div in:fly={{y: 20}} out:slide={{y: -20}} class="mb-1">
|
||||
<button class="bg-[#F00] px-2 py-1 rounded" on:click={() => removeItem(item.id)}>Remove</button>
|
||||
{item.body}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed bottom-0 left-0 text-white font-bold text-4xl z-20 p-4 rounded-r-lg bg-gradient-to-b from-[#f00] via-[#f77] to-[#f00]">
|
||||
BREAKING NEWS
|
||||
</div>
|
||||
<div
|
||||
bind:this={marqueeEl}
|
||||
class="fixed bottom-0 w-screen text-white font-bold text-xl py-2 bg-gradient-to-b from-[#f00] via-[#f77] to-[#f00]"
|
||||
/>
|
||||
"""
|
||||
end
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue