cms/tibi-svelte-starter
Template
4
0
Fork 2
Code Issues Pull Requests Projects Releases Wiki Activity

Neue Komponente für Article-Media-Image sowie eine allgemeine Image Komponente. Article-Komponente WorkInProgress.

Browse Source
This commit is contained in:
Mario Linz
2022-06-09 08:23:39 +02:00
parent d872767845
commit 4824effccb
12 changed files with 180 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/widgets/Article.svelte
View File

@@ -1,73 +1,77 @@
<script lang="ts">
import { navigate } from "svelte-routing"
// import { navigate } from "svelte-routing"
import { apiBaseURL } from "../../config"
import TibiArticleMediaFile from "./TibiArticleMediaFile.svelte"
export let article: SWArticle
export let entry: CollectionEntry
export let cssClass: string = ""
export let showDetails: boolean = false
const getImageSrc = () => {
return `${apiBaseURL}articles/${article?.id}/${article?.image?.src}?filter=l`
let article = entry.article
let marginClasses: string = ""
let paddingClasses: string = ""
$: if (article) {
marginClasses = Object.values(article?.layout?.properties?.margin).join(" ").replace(" ", " ")
paddingClasses = Object.values(article?.layout?.properties?.padding).join(" ").replace(" ", " ")
}
</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 article}
<article class="{cssClass} {article?.layout?.variant} {marginClasses} {paddingClasses}">
{#if article?.layout?.variant === "default"}
{#if article?.content?.types?.media?.files?.length}
<TibiArticleMediaFile
collectionName="articles"
entryId="{entry.id}"
mediaFile="{article?.content?.types?.media?.files[0]}"
/>
{/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 article?.content?.title}
<div class="article-title">{@html article?.content?.title}</div>
{/if}
{#if !showDetails && article?.content}
<div class="mb-lg">
{@html article?.content}
{#if article?.content?.subtitle}
<div class="article-subtitle">{@html article?.content?.subtitle}</div>
{/if}
{#if article?.content?.types?.teaser}
<div class="article-teaser">{@html article?.content?.types?.teaser}</div>
{/if}
{#if article?.content?.types?.details && showDetails}
<div class="article-details">{@html article?.content?.types?.details}</div>
{/if}
{:else if article?.layout?.variant === "left"}
<div class="row">
<div class="col-md-4">
{#if article?.content?.types?.media?.files?.length}
<TibiArticleMediaFile
collectionName="articles"
entryId="{entry.id}"
mediaFile="{article?.content?.types?.media?.files[0]}"
/>
{/if}
</div>
{/if}
<div class="col-md-8">
{#if article?.content?.title}
<div class="article-title">{@html article?.content?.title}</div>
{/if}
{#if showDetails && article?.details?.length}
<div class="mb-lg">
{@html article?.details}
{#if article?.content?.subtitle}
<div class="article-subtitle">{@html article?.content?.subtitle}</div>
{/if}
{#if article?.content?.types?.teaser}
<div class="article-teaser">{@html article?.content?.types?.teaser}</div>
{/if}
{#if article?.content?.types?.details && showDetails}
<div class="article-details">{@html article?.content?.types?.details}</div>
{/if}
</div>
{/if}
</div>
{/if}
{#if !showDetails && article?.details}
<div
class="article-link"
on:click="{() => {
navigate('/articles/' + article?.id)
}}"
>
Details
</div>
{/if}
</article>
</div>
{/if}
</article>
{/if}