generated from cms/tibi-docs
first version
This commit is contained in:
34
frontend/src/lib/components/Pagebuilder/Module.svelte
Normal file
34
frontend/src/lib/components/Pagebuilder/Module.svelte
Normal file
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { jobOffers, modules, team } from "../../store"
|
||||
import Worldcard from "../widgets/Worldcard/worldcard.svelte"
|
||||
import Boxlist from "../widgets/boxlist.svelte"
|
||||
import ExtendableBox from "../widgets/extendableBox.svelte"
|
||||
import IconCycleBox from "../widgets/iconCycleBox.svelte"
|
||||
import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
|
||||
import PageLinkBlocks from "../widgets/pageLinkBlocks.svelte"
|
||||
import Persons from "../widgets/persons.svelte"
|
||||
|
||||
let col: { contentType: "moduleImport"; moduleImport: string }
|
||||
let pageId: string
|
||||
let bright: boolean
|
||||
let isHP: boolean
|
||||
let row: Row
|
||||
|
||||
let module = $modules[col.moduleImport]
|
||||
</script>
|
||||
|
||||
{#if module.type == "iconCycleCircle"}
|
||||
<IconCycleCircle iconCycleCircle="{module.iconCycleCircle}" pageId="{pageId}" />
|
||||
{:else if module.type == "iconCycleSquare"}
|
||||
<IconCycleBox iconCycleSquare="{module.iconCycleSquare}" pageId="{pageId}" />
|
||||
{:else if module.type == "worldCard"}
|
||||
<Worldcard worldCard="{module.worldCard}" pageId="{pageId}" />
|
||||
{:else if module.type == "chefTeam"}
|
||||
<Persons persons="{Object.values($team).filter((p) => p.personType == 'chef')}" pageId="{pageId}" />
|
||||
{:else if module.type == "employeeTeam"}
|
||||
<Boxlist persons="{Object.values($team).filter((p) => p.personType == 'employee')}" />
|
||||
{:else if module.type == "jobOffer"}
|
||||
<ExtendableBox pages="{Object.values($jobOffers)}" />
|
||||
{:else if module.type == "jobOfferLink"}
|
||||
<PageLinkBlocks pages="{Object.values($jobOffers)}" />
|
||||
{/if}
|
||||
@@ -14,26 +14,19 @@
|
||||
import TextLink from "../widgets/textLink.svelte"
|
||||
import TopDown from "../widgets/topDown.svelte"
|
||||
import WorldCard from "../widgets/Worldcard/worldcard.svelte"
|
||||
import { pages, rerender } from "../../store"
|
||||
import { modules, pages, rerender, team } from "../../store"
|
||||
import IconCycleCircle from "../widgets/iconCycleCircle.svelte"
|
||||
import IconCycleBox from "../widgets/iconCycleBox.svelte"
|
||||
import Module from "./Module.svelte"
|
||||
|
||||
export let row: Row
|
||||
export let pageId: string
|
||||
export let bright: boolean
|
||||
export let isHP: boolean
|
||||
export let i: number
|
||||
export let page: Page
|
||||
export let personPage: boolean
|
||||
|
||||
function checkNestedPath() {
|
||||
const pathSegments = location.pathname.split("/").filter((segment) => segment.length)
|
||||
|
||||
if (pathSegments.length > 1) {
|
||||
pathSegments.pop() // remove the last segment
|
||||
return "/" + pathSegments.join("/")
|
||||
}
|
||||
|
||||
return ""
|
||||
}
|
||||
let nestedPath = checkNestedPath()
|
||||
window.addEventListener("popstate", function (event) {
|
||||
$rerender = $rerender + 1
|
||||
})
|
||||
@@ -41,18 +34,18 @@
|
||||
|
||||
{#if Object.keys(row).length}
|
||||
{#if row.topTitle}
|
||||
<h3 class="{row.topTitleUpperCase ? 'hph3' : 'nmh3'}" class:red="{row.topTitleRed}">
|
||||
<h3 class="{row.topTitleUpperCase ? 'hph3' : 'nmh3'}">
|
||||
{row.topTitle}
|
||||
</h3>
|
||||
{/if}
|
||||
{#if nestedPath}
|
||||
{#if personPage}
|
||||
<div class="top-header" style="display: flex; width: 100%; justify-content: space-between;">
|
||||
<h3
|
||||
style="cursor: pointer; display: flex; align-items: center; gap: 10px; line-height: 1.4;"
|
||||
on:keydown
|
||||
on:click="{() => {
|
||||
$rerender = $rerender + 1
|
||||
navigate(nestedPath)
|
||||
navigate('/' + location.pathname.split('/').at(0))
|
||||
}}"
|
||||
>
|
||||
<img src="/media/arrow-l.svg" alt="arrow" /> Zurück zur Übersicht
|
||||
@@ -62,15 +55,19 @@
|
||||
on:keydown
|
||||
on:click="{() => {
|
||||
$rerender = $rerender + 1
|
||||
navigate(row?.nextPage || nestedPath)
|
||||
let chefs = Object.values($team).filter((p) => p.personType == 'chef')
|
||||
let i = chefs.findIndex((p) => p.path == page.path)
|
||||
if (i == chefs.length - 1) i = 0
|
||||
else i++
|
||||
navigate(chefs[i].path)
|
||||
}}"
|
||||
>
|
||||
Zum nächsten Profil <img src="/media/arrowr.svg" alt="arrow" />
|
||||
</h3>
|
||||
</div>
|
||||
{/if}
|
||||
{#if row.pageTitle}
|
||||
<h1>{row.pageTitle}</h1>
|
||||
{#if page.pageTitle && i == 0}
|
||||
<h1>{page.pageTitle}</h1>
|
||||
{/if}
|
||||
{#if row.title}
|
||||
<h2 class="">{row.title}</h2>
|
||||
@@ -83,10 +80,16 @@
|
||||
class="row"
|
||||
class:twoToThree="{row.twoToThree}"
|
||||
class:normalWrap="{row.flexWrapNormal}"
|
||||
class:dominant="{row.columns.some((col) => col.contentType == 'iconCycleCircle')}"
|
||||
class:dominant="{row.columns.some(
|
||||
(col) => col.contentType == 'moduleImport' && $modules?.[col.moduleImport]?.type == 'iconCycleCircle'
|
||||
)}"
|
||||
>
|
||||
{#each row?.columns as col}
|
||||
<div class="col" class:dominant="{col.contentType == 'iconCycleCircle'}">
|
||||
<div
|
||||
class="col"
|
||||
class:dominant="{col.contentType == 'moduleImport' &&
|
||||
$modules?.[col.moduleImport]?.type == 'iconCycleCircle'}"
|
||||
>
|
||||
{#if col?.contentType == "text"}
|
||||
<Text text="{col?.text}" />
|
||||
{:else if col?.contentType == "textLink"}
|
||||
@@ -95,12 +98,12 @@
|
||||
path="{Object.values($pages)?.find((o) => o.id == col.textLink.link)?.path || '/'}"
|
||||
bright="{bright}"
|
||||
/>
|
||||
{:else if col.contentType == "moduleImport"}
|
||||
<Module col="{col}" pageId="{pageId}" bright="{bright}" isHP="{isHP}" row="{row}" />
|
||||
{:else if col.contentType == "image"}
|
||||
<Image image="{col?.image}" col="{col}" pageId="{pageId}" />
|
||||
{:else if col.contentType == "iconBlocks"}
|
||||
<IconBlock pageId="{pageId}" col="{col}" />
|
||||
{:else if col.contentType == "pageLinkBlocks"}
|
||||
<PageLinkBlocks col="{col}" />
|
||||
{:else if col.contentType == "networkEvents"}
|
||||
<Events col="{col}" pageId="{pageId}" />
|
||||
{:else if col.contentType == "publications"}
|
||||
@@ -111,18 +114,8 @@
|
||||
<InfoBoard col="{col}" pageId="{pageId}" />
|
||||
{:else if col.contentType == "nestedCard"}
|
||||
<NestedCard col="{col}" />
|
||||
{:else if col.contentType == "boxlist"}
|
||||
<Boxlist col="{col}" />
|
||||
{:else if col.contentType == "extendableBoxes"}
|
||||
<ExtendableBox col="{col}" />
|
||||
{:else if col.contentType == "personPreview"}
|
||||
<Persons col="{col}" pageId="{pageId}" />
|
||||
{:else if col.contentType == "iconCycleCircle"}
|
||||
<IconCycleCircle col="{col}" pageId="{pageId}" />
|
||||
{:else if col.contentType == "iconCycleSquare"}
|
||||
<IconCycleBox col="{col}" pageId="{pageId}" />
|
||||
{:else if col.contentType == "worldCard"}
|
||||
<WorldCard col="{col}" pageId="{pageId}" />
|
||||
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@@ -1,27 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { pages, scrollToRowNr } from "../../store"
|
||||
import { mediaLibrary, pages, scrollToRowNr, team } from "../../store"
|
||||
import Homepage from "./Homepage.svelte"
|
||||
import Pagebuilder from "./Pagebuilder.svelte"
|
||||
import { apiBaseURL } from "../../../config"
|
||||
import { onMount } from "svelte"
|
||||
|
||||
export let path
|
||||
export let path: string
|
||||
export let homepage = false
|
||||
export let image: FileField
|
||||
let page: Page
|
||||
let personPage = false
|
||||
function initPage() {
|
||||
page = $pages[path]
|
||||
if ($pages[path]) {
|
||||
page = $pages[path]
|
||||
} else if (
|
||||
Object.values($team)
|
||||
.map((p) => p.path == path)
|
||||
.includes(true)
|
||||
) {
|
||||
page = Object.values($team).find((p) => p.path == path)
|
||||
personPage = true
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if ($scrollToRowNr !== -1) {
|
||||
console.log("test321-", $scrollToRowNr)
|
||||
if (!$scrollToRowNr) {
|
||||
$scrollToRowNr = -1
|
||||
return
|
||||
}
|
||||
let element = document.getElementById("row-" + $scrollToRowNr)
|
||||
console.log(element)
|
||||
if (!element) {
|
||||
$scrollToRowNr = -1
|
||||
return
|
||||
@@ -35,7 +43,7 @@
|
||||
})
|
||||
|
||||
$: {
|
||||
if (Object.keys($pages).length) {
|
||||
if (Object.keys($pages).length || Object.keys($team).length) {
|
||||
initPage()
|
||||
}
|
||||
}
|
||||
@@ -50,22 +58,27 @@
|
||||
id="row-{i}"
|
||||
style="{path == '/' && i == page.rows.length - 1
|
||||
? 'padding-bottom: 300px; margin-bottom: -40px;'
|
||||
: ''} {row.row.noBottomMargin ? 'margin-bottom: 0px; padding-bottom: 0px;' : ''} {row.row
|
||||
.noTopMargin
|
||||
: ''} {row.noBottomMargin ? 'margin-bottom: 0px; padding-bottom: 0px;' : ''} {row.noTopMargin
|
||||
? 'margin-top: 0px; padding-top: 0px;'
|
||||
: ''}"
|
||||
>
|
||||
{#if row.row.backgroundImage}
|
||||
{#if row.backgroundImage && mediaLibrary[row.backgroundImage]}
|
||||
<div class="background-image">
|
||||
<img src="{`${apiBaseURL}page/${page.id}/${row.row.backgroundImage?.src}`}" alt="img" />
|
||||
<img
|
||||
src="{`${apiBaseURL}medialib/${row?.backgroundImage}/${
|
||||
mediaLibrary?.[row?.backgroundImage]?.file?.src
|
||||
}`}"
|
||||
alt="img"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="content" class:bright="{row.row.backgroundImage}">
|
||||
<div class="content" class:bright="{row.backgroundImage}">
|
||||
<Pagebuilder
|
||||
personPage
|
||||
isHP="{path == '/'}"
|
||||
row="{row.row}"
|
||||
row="{row}"
|
||||
pageId="{page.id}"
|
||||
bright="{!!row.row.backgroundImage}"
|
||||
bright="{!!row.backgroundImage}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user