bsi-software · derB4 · Dec 2, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Next
-
+* Add schedule-elements
 
 ## [1.4.8] - 11.10.2024
 * export text element with .editor() function where htmlEditorConfig can be customized

diff --git a/content-elements/schedule/container/index.js b/content-elements/schedule/container/index.js
@@ -0,0 +1,14 @@
+require('./../mobile.scss');
+require('./../event-info.scss');
+
+const { cx, Icon } = require('@bsi-cx/design-build');
+
+module.exports = cx.contentElement
+    .withElementId('schedule-container-VCR5nH')
+    .withLabel('Programmablauf')
+    .withFile(require('./template.twig'))
+    .withIcon(Icon.COMPASS)
+    .withDropzones(
+        cx.dropzone.withDropzone('schedule-days-QErh77')
+            .withAllowedElements(require('../day'))
+    )
diff --git a/content-elements/schedule/container/template.twig b/content-elements/schedule/container/template.twig
@@ -0,0 +1,7 @@
+<div data-bsi-element="schedule-container-VCR5nH" x-data="schedule">
+	<div data-bsi-dropzone="schedule-days-QErh77"> 
+        {% block scheduleDays %}
+            {% include "../day/template.twig" %}
+        {% endblock %}
+    </div>
+</div>
diff --git a/content-elements/schedule/day/index.js b/content-elements/schedule/day/index.js
@@ -0,0 +1,19 @@
+require('./styles.scss');
+
+const { cx, Icon } = require('@bsi-cx/design-build');
+
+module.exports = cx.contentElement
+    .withElementId('schedule-day-68IBcs')
+    .withLabel('Tag')
+    .withFile(require('./template.twig'))
+    .withIcon(Icon.COMPASS)
+    .withParts(
+        cx.part.plainText
+            .withId('schedule-day-label-IcQcw7')
+            .withLabel('Datum')
+    )
+    .withDropzones(
+        cx.dropzone
+            .withDropzone('schedule-rows-dropzone-OJmpt5')
+            .withAllowedElements(require('../row'))
+    );
diff --git a/content-elements/schedule/day/styles.scss b/content-elements/schedule/day/styles.scss
@@ -0,0 +1,3 @@
+.schedule-day {
+    margin: 1rem;
+}
diff --git a/content-elements/schedule/day/template.twig b/content-elements/schedule/day/template.twig
@@ -0,0 +1,9 @@
+<div data-bsi-element="schedule-day-68IBcs" class="schedule-day">
+    <h2 data-bsi-element-part="schedule-day-label-IcQcw7">24. Dezember 2026</h2>
+	<div data-bsi-dropzone="schedule-rows-dropzone-OJmpt5">
+		{% block scheduleRows %}
+			{% include "../row/template.twig" %}
+			{# {% include "../row/template.twig" %} #}
+		{% endblock %}
+	</div>
+</div>
diff --git a/content-elements/schedule/event-info.scss b/content-elements/schedule/event-info.scss
@@ -0,0 +1,39 @@
+/*
+    * Event info is generated by schedule.js
+    */
+.schedule-row .event-info {
+    display: flex;
+    align-items: center;
+    gap: 4rem;
+    padding: 2rem 10%;
+
+    .speaker {
+        display: flex;
+        flex-direction: column;
+        font-weight: 600;
+        text-align: center;
+        flex: 1 1 0;
+    }
+
+    .speaker-img img {
+        width: 25vw;
+        max-width: 200px;
+        border-radius: 10%;
+        object-fit: cover;
+        aspect-ratio: 1;
+        margin-bottom: 1rem;
+    }
+
+    .event-info-text {
+        flex: 2 1 0;
+    }
+
+    .title {
+        font-weight: 600;
+        font-size: 1.5rem;
+    }
+
+    .divided-text span:nth-child(n+2):not(:empty):before {
+        content: '• ';
+    }
+}
diff --git a/content-elements/schedule/event/index.js b/content-elements/schedule/event/index.js
@@ -0,0 +1,36 @@
+require('./styles.scss');
+
+const { cx, Icon } = require('@bsi-cx/design-build');
+
+module.exports = cx.contentElement
+    .withElementId('schedule-event-6GC7Ls')
+    .withLabel('Programmpunkt')
+    .withFile(require('./template.twig'))
+    .withIcon(Icon.COMPASS)
+    .withStyleConfigs(
+        require('../../../configs/styles/event-background')
+    )
+    .withParts(
+        cx.part.plainText
+            .withId('event-time-FcfDRX')
+            .withLabel('Uhrzeit'),
+        cx.part.plainText
+            .withId('event-room-qcny5Y')
+            .withLabel('Raum'),
+        cx.part.plainText
+            .withId('event-title-unhmXA')
+            .withLabel('Titel'),
+        cx.part.plainText
+            .withId('event-speaker-6vYPyO')
+            .withLabel('Speaker'),
+        cx.part.plainText
+            .withId('event-speaker-company-2yaglg')
+            .withLabel('Firma'),
+        cx.part.image
+            .withId('event-speaker-img-wX17Nt')
+            .withLabel('Speaker'),
+        cx.part.formattedText
+            .withId('event-description-U78Fcj')
+            .withHtmlEditorConfig(require('@bsi-cx/design-standard-library-web/configs/editor/full'))
+            .withLabel('Beschreibung'),
+    );
diff --git a/content-elements/schedule/event/styles.scss b/content-elements/schedule/event/styles.scss
@@ -0,0 +1,76 @@
+.schedule-event {
+    cursor: pointer;
+    display: grid;
+    grid: auto-flow / 75px 1fr;
+    gap: 10px;
+    font-size: 12px;
+
+    >* {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .time-room {
+        padding: 10px;
+        text-align: center;
+        font-weight: 600;
+
+        .time {
+            font-size: 20px;
+            line-height: 1;
+        }
+
+        .room:not(:empty) {
+            border-top: 2px solid #383e42;
+        }
+    }
+
+    .details {
+        padding: 10px 30px 10px 10px;
+        position: relative;
+
+        .title {
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        .abs-triangles {
+            width: 25px;
+            position: absolute;
+            right: 0px;
+            top: 10px;
+
+            #swipe {
+                display: none;
+            }
+        }
+    }
+
+    .additional-information {
+        display: none;
+    }
+
+    &.is-active #plus-icon {
+        display: none;
+    }
+
+    /* Background color style */
+    $background-colors: bsiProperty('scheduleBackgroundColors', ('blue': '#B0DAEE',
+            'orange': '#FFDB9D',
+            'brown': '#EAE3CF',
+            'green':'#94DECF',
+            'lavender':'#c2c9e4',
+            'grey': '#e7e7ee'
+        ));
+
+    @each $name, $bg-color in $background-colors {
+        &.background-#{$name} .bg {
+            background-color: $bg-color;
+        }
+    }
+
+    &.background-grey .bg .abs-triangles #plus {
+        display: none;
+    }
+}
diff --git a/content-elements/schedule/event/template.twig b/content-elements/schedule/event/template.twig
@@ -0,0 +1,34 @@
+<div data-bsi-element="schedule-event-6GC7Ls" class="schedule-event background-{{ backgroundStyle ?: 'grey'}}" @click="focusMe">
+	<div class="time-room bg">
+		<div class="time" data-bsi-element-part="event-time-FcfDRX">13:20</div>
+		<div class="room" data-bsi-element-part="event-room-qcny5Y">Raum 1</div>
+	</div>
+	<div class="details bg">
+		<div class="title" data-bsi-element-part="event-title-unhmXA">Quanten und Quatsch</div>
+		<div class="speaker" data-bsi-element-part="event-speaker-6vYPyO">Prof Quengel | Maria Mängel</div>
+		<div class="abs-triangles">
+			<svg id="plus" viewbox="0 0 50 100">
+				<polygon points="0 50, 50 100, 50 0" fill="white"></polygon>
+				<polygon id="plus-icon" points="20 53, 32 53, 32 65, 38 65, 38 53, 50 53, 50 47, 38 47, 38 35, 32 35, 32 47, 20 47" fill="black"></polygon>
+				<polygon id="minus" points="20 53, 50 53, 50 47, 20 47" fill="black"></polygon>
+			</svg>
+			<svg id="swipe" viewbox="0 0 50 100">
+				<polygon points="0 50, 50 100, 50 0" fill="white"></polygon>
+				<svg x="15" width="35" enable-background="new 0 0 298.305 298.305" version="1.1" viewbox="0 0 298.3 298.3" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+					<g fill="#222220">
+						<path d="m218.73 131.91-38.492-6.036v-67.175c0-15.952-12.978-28.93-28.93-28.93h-0.433c-15.952 0-28.93 12.978-28.93 28.93v107.88l-39.794-17.055c-7.996-3.427-17.105-2.613-24.367 2.176-7.262 4.788-11.597 12.841-11.597 21.539v0.363c0 7.361 3.155 14.389 8.656 19.28l67.103 59.669v28.989c0 4.143 3.358 7.5 7.5 7.5s7.5-3.357 7.5-7.5v-32.356c0-2.142-0.916-4.182-2.516-5.604l-69.619-61.906c-2.303-2.048-3.624-4.989-3.624-8.071v-0.363c0-3.695 1.77-6.982 4.854-9.017 3.085-2.034 6.804-2.367 10.201-0.911l50.247 21.534c0.461 0.198 0.944 0.353 1.447 0.456 0.749 0.155 1.505 0.188 2.244 0.115 0.105-0.01 0.207-0.03 0.311-0.044 0.134-0.019 0.268-0.035 0.401-0.062 0.152-0.029 0.299-0.069 0.447-0.108 0.082-0.021 0.166-0.04 0.247-0.063 0.163-0.049 0.321-0.107 0.48-0.166 0.067-0.025 0.135-0.047 0.201-0.074 0.153-0.062 0.302-0.133 0.449-0.205 0.071-0.034 0.143-0.066 0.213-0.103 0.132-0.069 0.259-0.146 0.387-0.223 0.083-0.05 0.167-0.098 0.248-0.151 0.106-0.07 0.208-0.146 0.31-0.221 0.096-0.07 0.193-0.139 0.286-0.214 0.084-0.068 0.163-0.141 0.243-0.212 0.103-0.09 0.206-0.18 0.304-0.276 0.071-0.07 0.136-0.144 0.204-0.217 0.097-0.104 0.196-0.206 0.287-0.316 0.073-0.086 0.138-0.178 0.207-0.268 0.077-0.101 0.156-0.199 0.228-0.305 0.091-0.133 0.173-0.272 0.255-0.411 0.041-0.069 0.085-0.134 0.124-0.205 0.36-0.651 0.628-1.361 0.781-2.113 0.104-0.503 0.152-1.01 0.152-1.512v-119.25c0-7.681 6.249-13.93 13.93-13.93h0.433c7.681 0 13.93 6.249 13.93 13.93v72.025c0 0.277 0.017 0.549 0.047 0.818-0.396 3.934 2.339 7.537 6.292 8.156l44.88 7.037c0.035 6e-3 0.071 0.011 0.106 0.017 27.148 3.857 47.621 27.444 47.621 54.866v0.766c0 12.691-3.097 25.35-8.956 36.606l-20.345 39.088c-1.913 3.675-0.484 8.203 3.19 10.115 1.106 0.576 2.29 0.85 3.457 0.85 2.708 0 5.323-1.472 6.659-4.039l20.345-39.088c6.968-13.387 10.65-28.44 10.65-43.532v-0.766c0-16.958-6.122-33.351-17.237-46.158-11.103-12.792-26.449-21.154-43.217-23.55z"/>
+						<path d="m57.678 98.843c1.149 0 2.303-0.264 3.368-0.799 2.533-1.273 4.131-3.866 4.131-6.701v-29.793h32.633c4.142 0 7.5-3.357 7.5-7.5s-3.358-7.5-7.5-7.5h-32.633v-29.792c0-2.835-1.599-5.428-4.131-6.701-2.533-1.273-5.567-1.009-7.842 0.682l-50.178 37.291c-1.904 1.415-3.026 3.648-3.026 6.02s1.122 4.604 3.026 6.02l50.177 37.293c1.319 0.979 2.892 1.48 4.475 1.48zm-7.501-22.419-30.104-22.374 30.104-22.373v44.747z"/>
+						<path d="m295.28 48.03-50.178-37.292c-2.274-1.689-5.309-1.953-7.842-0.682-2.533 1.273-4.131 3.866-4.131 6.701v29.793h-32.633c-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5h32.633v29.793c0 2.835 1.599 5.428 4.131 6.701 1.065 0.535 2.219 0.799 3.368 0.799 1.583 0 3.156-0.501 4.475-1.48l50.178-37.293c1.904-1.415 3.026-3.647 3.026-6.02s-1.122-4.605-3.027-6.02zm-47.151 28.394v-44.748l30.104 22.374-30.104 22.374z"/>
+					</g>
+				</svg>
+			</svg>
+		</div>
+	</div>
+	<div class="additional-information">
+		<div class="company" data-bsi-element-part="event-speaker-company-2yaglg">BSI</div>
+		<div class="speaker-img">
+			<img src="{{ bsi_cx_asset('../../../static/speaker-cat.png') }}" alt="" data-bsi-element-part="event-speaker-img-wX17Nt" data-bsi-hide-link=""/>
+		</div>
+		<div data-bsi-element-part="event-description-U78Fcj" class="description bg">{{bsi_cx_lorem(50)}}</div>
+	</div>
+</div>
diff --git a/content-elements/schedule/mobile.scss b/content-elements/schedule/mobile.scss
@@ -0,0 +1,29 @@
+@media (max-width: bsiProperty('gridBreakpointLG', '576px')) {
+    .event-info {
+        flex-direction: column;
+        gap: 1.5rem;
+
+        .speaker-img img {
+            width: 40vw;
+        }
+    }
+
+    .schedule-event.mobile-hidden {
+        max-width: 20px;
+        overflow: hidden;
+
+        .time,
+        .room,
+        .details {
+            display: none;
+        }
+    }
+
+    .schedule-row:has(.mobile-hidden) .schedule-event {
+        min-height: 120px;
+
+        #swipe {
+            display: block;
+        }
+    }
+}
diff --git a/content-elements/schedule/row/index.js b/content-elements/schedule/row/index.js
@@ -0,0 +1,19 @@
+require('./styles.scss');
+
+const { cx, Icon } = require('@bsi-cx/design-build');
+
+module.exports = cx.contentElement
+    .withElementId('schedule-row-XVVadl')
+    .withLabel('Zeitslot')
+    .withFile(require('./template.twig'))
+    .withIcon(Icon.COMPASS)
+    .withParts(
+        cx.part.plainText
+            .withId('schedule-day-label-IcQcw7')
+            .withLabel('Datum')
+    )
+    .withDropzones(
+        cx.dropzone
+            .withDropzone('row-events-dropzone-ANu4V7')
+            .withAllowedElements(require('../event'))
+    );
diff --git a/content-elements/schedule/row/styles.scss b/content-elements/schedule/row/styles.scss
@@ -0,0 +1,13 @@
+.schedule-row {
+    margin-bottom: 10px;
+
+    .row-container {
+        display: flex;
+        gap: 10px;
+        hyphens: auto;
+
+        >* {
+            flex: 1 1 0;
+        }
+    }
+}
diff --git a/content-elements/schedule/row/template.twig b/content-elements/schedule/row/template.twig
@@ -0,0 +1,11 @@
+<div data-bsi-element="schedule-row-XVVadl" class="schedule-row">
+	<div data-bsi-dropzone="row-events-dropzone-ANu4V7" class="row-container" @swipe="swipeRow">
+		{% block rowEvents %}
+			{% include "../event/template.twig" with {backgroundStyle:'grey'} %}
+			{% include "../event/template.twig" with {backgroundStyle:'orange'} %}
+			{% include "../event/template.twig" with {backgroundStyle:'blue'}%}
+			{% include "../event/template.twig"  with {backgroundStyle:'brown'}%}
+		{% endblock %}
+	</div>
+	<div class="event-details"></div>
+</div>