forked from cms/tibi-svelte-starter
XXErste Collections für eine Media-Library. Weitere Collections für spätere neue Projekte hinzugefügt. (alles WorkInProgress)
This commit is contained in:
73
src/components/page/Article.svelte
Normal file
73
src/components/page/Article.svelte
Normal file
@@ -0,0 +1,73 @@
|
||||
<script lang="ts">
|
||||
import { navigate } from "svelte-routing"
|
||||
|
||||
import { apiBaseURL } from "../../config"
|
||||
|
||||
export let article: SWArticle
|
||||
export let cssClass: string = ""
|
||||
export let showDetails: boolean = false
|
||||
|
||||
const getImageSrc = () => {
|
||||
return `${apiBaseURL}articles/${article?.id}/${article?.image?.src}?filter=l`
|
||||
}
|
||||
</script>
|
||||
|
||||
<article class="{article?.position} {cssClass}">
|
||||
{#if article?.position !== "content"}
|
||||
<div
|
||||
class="article-image"
|
||||
style="background-image: url({getImageSrc()});"
|
||||
>
|
||||
{#if article?.title}
|
||||
<div class="article-title">{@html article?.title}</div>
|
||||
{/if}
|
||||
{#if article?.position === "top" || article?.position === "end-of-content"}
|
||||
{#if article?.subtitle}
|
||||
<div class="article-subtitle">
|
||||
{@html article?.subtitle}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if article?.position !== "top"}
|
||||
<div class="article-content">
|
||||
{#if article?.position === "content"}
|
||||
{#if article?.title}
|
||||
<div class="article-title">{@html article?.title}</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{#if article?.position === "content" || article?.position === "top-of-content"}
|
||||
{#if article?.subtitle}
|
||||
<div class="article-subtitle mb-md">
|
||||
{@html article?.subtitle}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if !showDetails && article?.content}
|
||||
<div class="mb-lg">
|
||||
{@html article?.content}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showDetails && article?.details?.length}
|
||||
<div class="mb-lg">
|
||||
{@html article?.details}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !showDetails && article?.details}
|
||||
<div
|
||||
class="article-link"
|
||||
on:click="{() => {
|
||||
navigate('/articles/' + article?.id)
|
||||
}}"
|
||||
>
|
||||
Details
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
114
src/components/page/Galleries.svelte
Normal file
114
src/components/page/Galleries.svelte
Normal file
@@ -0,0 +1,114 @@
|
||||
<script lang="ts">
|
||||
import { fade } from "svelte/transition"
|
||||
|
||||
import { getGalleries } from "../../api"
|
||||
import { apiBaseURL } from "../../config"
|
||||
|
||||
import Modal from "./Modal.svelte"
|
||||
|
||||
export let article
|
||||
let galleries: Gallery[]
|
||||
|
||||
const loadLinkedGalleries = async () => {
|
||||
galleries = await getGalleries(article?.galleries)
|
||||
}
|
||||
loadLinkedGalleries()
|
||||
|
||||
let selectedImage = null
|
||||
let selectedGallery = null
|
||||
const showDetails = (gallery, image) => {
|
||||
selectedImage = image
|
||||
selectedGallery = gallery
|
||||
console.log(selectedGallery.items.indexOf(image))
|
||||
}
|
||||
const closeDetails = () => {
|
||||
selectedImage = null
|
||||
selectedGallery = null
|
||||
}
|
||||
|
||||
const next = () => {
|
||||
let nextImage
|
||||
let nextIndex = selectedGallery.items.indexOf(selectedImage) + 1
|
||||
if (!selectedGallery.items[nextIndex]) {
|
||||
nextImage = selectedGallery.items[0]
|
||||
} else {
|
||||
nextImage = selectedGallery.items[nextIndex]
|
||||
}
|
||||
selectedImage = nextImage
|
||||
}
|
||||
|
||||
const prev = () => {
|
||||
let prevImage
|
||||
let prevIndex = selectedGallery.items.indexOf(selectedImage) - 1
|
||||
if (prevIndex < 0) {
|
||||
prevImage = selectedGallery.items[selectedGallery.items.length - 1]
|
||||
} else {
|
||||
prevImage = selectedGallery.items[prevIndex]
|
||||
}
|
||||
selectedImage = prevImage
|
||||
}
|
||||
|
||||
const handleKeydown = (e) => {
|
||||
if (e.keyCode === 37) {
|
||||
prev()
|
||||
}
|
||||
if (e.keyCode === 39) {
|
||||
next()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown="{handleKeydown}" />
|
||||
|
||||
<section class="galleries">
|
||||
{#each galleries || [] as gallery}
|
||||
<div class="gallery gallery-{gallery.variant}">
|
||||
{#each gallery.items || [] as image, index}
|
||||
<div
|
||||
class="gallery-item"
|
||||
on:click="{() => showDetails(gallery, image)}"
|
||||
>
|
||||
<img
|
||||
src="{apiBaseURL}galleries/{gallery.id}/{image.file
|
||||
.src}?filter=s"
|
||||
alt="{image.alt ? image.alt : image.title}"
|
||||
/>
|
||||
{#if gallery.variant === "simple-with-title"}
|
||||
<div class="gallery-item-title">
|
||||
{image.title}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if selectedGallery && selectedImage}
|
||||
<Modal show="{selectedGallery && selectedImage}">
|
||||
<div transition:fade class="gallery-image-details">
|
||||
<img
|
||||
src="{apiBaseURL}galleries/{selectedGallery.id}/{selectedImage
|
||||
.file.src}?filter=l"
|
||||
alt="{selectedImage.alt
|
||||
? selectedImage.alt
|
||||
: selectedImage.title}"
|
||||
on:click="{closeDetails}"
|
||||
/>
|
||||
<div class="gallery-info">
|
||||
{#if selectedImage.title}
|
||||
<div class="gallery-title">
|
||||
{selectedImage.title}
|
||||
</div>
|
||||
{/if}
|
||||
{#if selectedImage.description}
|
||||
<div class="gallery-description">
|
||||
{selectedImage.description}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="prev" on:click|preventDefault="{prev}">‹</div>
|
||||
<div class="next" on:click|preventDefault="{next}">›</div>
|
||||
</div>
|
||||
</Modal>
|
||||
{/if}
|
||||
</section>
|
||||
35
src/components/page/Modal.svelte
Normal file
35
src/components/page/Modal.svelte
Normal file
@@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { scale } from "svelte/transition"
|
||||
|
||||
export let show: boolean = false
|
||||
export let size: string = "md"
|
||||
|
||||
const clickOnBackground = () => {
|
||||
show = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="modal-wrapper" class:show on:click="{clickOnBackground}">
|
||||
<div class="modal modal-{size}" transition:scale on:click|stopPropagation="{() => {}}">
|
||||
{#if $$slots.close}
|
||||
<div class="modal-close">
|
||||
<slot name="close" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if $$slots.header}
|
||||
<div class="modal-header">
|
||||
<slot name="header" />
|
||||
</div>
|
||||
{/if}
|
||||
{#if $$slots.default}
|
||||
<div class="modal-content">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
{#if $$slots.header}
|
||||
<div class="modal-footer">
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user