tibi-svelte-starter/src/components/widgets/Article.svelte

<script lang="ts">
    import { fade } from "svelte/transition"
    import { _ } from "svelte-i18n"
    // import { navigate } from "svelte-routing"

    import TibiArticleMediaFile from "./TibiArticleMediaFile.svelte"

    export let entry: CollectionEntry = null
    export let cssClass: string = ""
    export let showDetails: boolean = false

    let article = null
    if (entry) {
        article = entry.article
    }

    let marginClasses: string = ""
    let paddingClasses: string = ""
    let published: boolean = true

    const updatePublishedState = () => {
        let currentDate = new Date().getTime()
        let from = new Date(article?.general?.publish_date?.from).getTime()
        let until = new Date(article?.general?.publish_date?.until).getTime()
        let publish = true

        if (from && until) {
            if (currentDate > from && currentDate < until) {
                publish = true
            } else {
                publish = false
            }
        } else {
            if (from) {
                if (currentDate > from) {
                    publish = true
                } else {
                    publish = false
                }
            }

            if (until && publish) {
                if (currentDate < until) {
                    publish = true
                } else {
                    publish = false
                }
            }
        }

        published = publish
    }

    $: if (article) {
        marginClasses = Object.values(article?.layout?.properties?.margin).join(" ").replace("  ", " ")
        paddingClasses = Object.values(article?.layout?.properties?.padding).join(" ").replace("  ", " ")
    }

    $: if (article?.general?.publish_date?.from || article?.general?.publish_date?.until) updatePublishedState()

    // Update publish state every interval time (default 60sec)
    setInterval(
        updatePublishedState,
        article?.general?.publish_date?.interval ? article?.general?.publish_date?.interval : 60000
    )
</script>

{#if article && published}
    <article class="{cssClass} {article?.layout?.variant} {marginClasses} {paddingClasses}">
        {#if article?.layout?.variant === "top"}
            {#if article?.content?.types?.media?.files?.length}
                <TibiArticleMediaFile
                    collectionName="articles"
                    entryId="{entry.id}"
                    mediaFile="{article?.content?.types?.media?.files[0]}"
                />
            {/if}
            {#if article?.content?.title}
                <div class="article-title">{@html article?.content?.title}</div>
            {/if}

            {#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?.link?.url}
                <a
                    href="{article?.link?.url}"
                    target="{article?.link?.target ? article?.link?.target : '_self'}"
                    class="article-link">{@html article?.link?.text ? article?.link?.text : $_("details")}</a
                >
            {/if}

            {#if article?.content?.types?.details && showDetails}
                <div class="article-details">{@html article?.content?.types?.details}</div>
            {/if}
        {:else if article?.layout?.variant === "right"}
            <div class="row">
                <div class="col-md-8">
                    {#if article?.content?.title}
                        <div class="article-title">{@html article?.content?.title}</div>
                    {/if}

                    {#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?.link?.url}
                        <a
                            href="{article?.link?.url}"
                            target="{article?.link?.target ? article?.link?.target : '_self'}"
                            class="article-link">{@html article?.link?.text ? article?.link?.text : $_("details")}</a
                        >
                    {/if}

                    {#if article?.content?.types?.details && showDetails}
                        <div class="article-details">{@html article?.content?.types?.details}</div>
                    {/if}
                </div>
                <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>
            </div>
        {:else if article?.layout?.variant === "bottom"}
            {#if article?.content?.title}
                <div class="article-title">{@html article?.content?.title}</div>
            {/if}

            {#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?.link?.url}
                <a
                    href="{article?.link?.url}"
                    target="{article?.link?.target ? article?.link?.target : '_self'}"
                    class="article-link">{@html article?.link?.text ? article?.link?.text : $_("details")}</a
                >
            {/if}

            {#if article?.content?.types?.details && showDetails}
                <div class="article-details">{@html article?.content?.types?.details}</div>
            {/if}

            {#if article?.content?.types?.media?.files?.length}
                <TibiArticleMediaFile
                    collectionName="articles"
                    entryId="{entry.id}"
                    mediaFile="{article?.content?.types?.media?.files[0]}"
                />
            {/if}
        {:else if article?.layout?.variant === "left" || article?.layout?.variant === "default"}
            <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>
                <div class="col-md-8">
                    {#if article?.content?.title}
                        <div class="article-title">{@html article?.content?.title}</div>
                    {/if}

                    {#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?.link?.url}
                        <a
                            href="{article?.link?.url}"
                            target="{article?.link?.target ? article?.link?.target : '_self'}"
                            class="article-link">{@html article?.link?.text ? article?.link?.text : $_("details")}</a
                        >
                    {/if}

                    {#if article?.content?.types?.details && showDetails}
                        <div class="article-details">{@html article?.content?.types?.details}</div>
                    {/if}
                </div>
            </div>
        {/if}
    </article>
{/if}