fix: improve timeline control

locale.xml

@@ -39,6 +39,10 @@
             <de><![CDATA[Bild verhalten]]></de>
             <en><![CDATA[Bild mode]]></en>
         </locale>
+        <locale name="brick.timeline.setting.imageFillMode.desc">
+            <de><![CDATA[Die Einstellung bezieht sich nur auf die Bilder, nicht auf die Icons]]></de>
+            <en><![CDATA[The setting refers only to the images, not to the icons]]></en>
+        </locale>
         <locale name="brick.timeline.setting.imageFillMode.cover">
             <de><![CDATA[Ganze Fläche füllen. Das Bild kann u.U. gestreckt werden (cover)]]></de>
             <en><![CDATA[Fill entire area. The image can be stretched (cover)]]></en>
@@ -98,22 +102,22 @@
             <en><![CDATA[Show links to the pages?]]></en>
         </locale>
 
-        <!-- image fit -->
-        <locale name="timeline.imageFit">
-            <de><![CDATA[Bild]]></de>
-            <en><![CDATA[Image]]></en>
+        <!-- image fill mode -->
+        <locale name="timeline.setting.imageFillMode">
+            <de><![CDATA[Bild verhalten]]></de>
+            <en><![CDATA[Bild mode]]></en>
         </locale>
-        <locale name="timeline.imageFit.desc">
+        <locale name="timeline.setting.imageFillMode.desc">
             <de><![CDATA[Die Einstellung bezieht sich nur auf die Bilder, nicht auf die Icons]]></de>
             <en><![CDATA[The setting refers only to the images, not to the icons]]></en>
         </locale>
-        <locale name="timeline.imageFit.original">
-            <de><![CDATA[Original]]></de>
-            <en><![CDATA[Original]]></en>
+        <locale name="timeline.setting.imageFillMode.cover">
+            <de><![CDATA[Ganze Fläche füllen. Das Bild kann u.U. gestreckt werden (cover)]]></de>
+            <en><![CDATA[Fill entire area. The image can be stretched (cover)]]></en>
         </locale>
-        <locale name="timeline.imageFit.cover">
-            <de><![CDATA[Decken (Bild kann gestreckt werden)]]></de>
-            <en><![CDATA[Cover (image can be stretched)]]></en>
+        <locale name="timeline.setting.imageFillMode.contain">
+            <de><![CDATA[Ganzes Bild anzeigen (contain)]]></de>
+            <en><![CDATA[Show full image (contain)]]></en>
         </locale>
 
         <!-- counter text -->

site.xml

@@ -12,8 +12,8 @@
             <!-- list attributes -->
             <attributes>
                 <attribute default="VerticalBothSides">quiqqer.timeline.display</attribute>
-                <attribute default="1">quiqqer.timeline.showLinks</attribute>
-                <attribute default="original">quiqqer.timeline.imageFit</attribute>
+                <attribute default="0">quiqqer.timeline.showLinks</attribute>
+                <attribute default="cover">quiqqer.timeline.imageFillMode</attribute>
             </attributes>
 
             <!-- list settings -->
@@ -44,23 +44,23 @@
                             </text>
                         </input>
 
-                        <select conf="quiqqer.timeline.imageFit">
+                        <select conf="quiqqer.timeline.imageFillMode">
                             <text>
                                 <locale group="quiqqer/timeline"
-                                        var="timeline.imageFit"/>
+                                        var="timeline.setting.imageFillMode"/>
                             </text>
                             <description>
                                 <locale group="quiqqer/timeline"
-                                        var="timeline.imageFit.desc"/>
+                                        var="timeline.setting.imageFillMode.desc"/>
                             </description>
 
-                            <option value="original">
+                            <option value="cover">
                                 <locale group="quiqqer/timeline"
-                                        var="timeline.imageFit.original"/>
+                                        var="timeline.setting.imageFillMode.cover"/>
                             </option>
-                            <option value="cover">
+                            <option value="contain">
                                 <locale group="quiqqer/timeline"
-                                        var="timeline.imageFit.cover"/>
+                                        var="timeline.setting.imageFillMode.contain"/>
                             </option>
                         </select>
 

src/QUI/Timeline/Bricks/Timeline.html

@@ -11,5 +11,5 @@
 {/if}
 
 <div class="control-template">
-    {$timelineHtml}
+    {$TimelineControl->create()}
 </div>

src/QUI/Timeline/Bricks/Timeline.php

@@ -49,27 +49,26 @@ public function getBody(): string
 
         $limit = $this->getAttribute('limit');
 
-        if ($limit === '') {
+        if (!$limit || $limit < 1) {
             $limit = 10;
         }
 
-        if ($limit <= 0) {
-            $limit = 1;
-        }
+        $attributes = [
+            'parentInputList' => $this->getAttribute('site'),
+            'imageFillMode' => $this->getAttribute('imageFillMode'),
+            'order' => $this->getAttribute('order'),
+            'showLinks' => $this->getAttribute('showLinks'),
+            'display' => $this->getAttribute('template'),
+            'limit' => $limit,
+        ];
 
-        $Control->setAttribute('parentInputList', $this->getAttribute('site'));
-        $Control->setAttribute('imageFillMode', $this->getAttribute('imageFillMode'));
-        $Control->setAttribute('order', $this->getAttribute('order'));
-        $Control->setAttribute('showLinks', $this->getAttribute('showLinks'));
-        $Control->setAttribute('display', $this->getAttribute('template'));
-        $Control->setAttribute('limit', $limit);
-        $html = $Control->create();
+        $Control->setAttributes($attributes);
 
         $this->addCSSFiles($Control->getCSSFiles());
 
         $options = [
             'this' => $this,
-            'timelineHtml' => $html
+            'TimelineControl' => $Control
         ];
 
         $Engine->assign($options);

src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css

@@ -25,7 +25,7 @@
 .timeline-entry-icon-wrapper {
     color: #aaa;
     font-size: 53px;
-    border: 8px solid #aaa;
+    border: 8px solid var(--_qui-timeline-timeline__borderColor);
     text-align: center;
     height: 120px;
     width: 120px;
@@ -48,7 +48,7 @@
     border-right: none;
     border-bottom: 20px solid transparent;
     border-top: 20px solid transparent;
-    border-left: 30px solid #aaa;
+    border-left: 30px solid var(--_qui-timeline-timeline__borderColor);
 }
 
 /* image */
@@ -62,11 +62,10 @@
     justify-content: center;
 }
 
-.timeline-entry-icon-wrapper picture img.image-fit-cover {
-    object-fit: cover;
+.timeline-entry__image {
+    object-fit: var(--_qui-timeline-timeline-imageFillMode);
     width: 100%;
     height: 100%;
-
 }
 
 /* line - middle */
@@ -96,7 +95,7 @@
     height: 12px;
     background: none;
     border-radius: 16px;
-    border: 2px solid #999;
+    border: 2px solid var(--_qui-timeline-timeline__borderColor);
 }
 
 .timeline-entry-line-caption-number {
@@ -111,7 +110,6 @@
     position: relative;
 }
 
-
 /* text content */
 .timeline-entry-desc {
     padding-left: 40px;
@@ -133,10 +131,7 @@
     font-size: 16px;
 }
 
-
 /* nth child */
-/*************/
-
 .timeline-entry:nth-child(2n+2) .timeline-entry-desc {
     order: 1;
     padding-left: 0;
@@ -150,7 +145,7 @@
 .timeline-entry:nth-child(2n+2) .timeline-entry-icon-wrapper:after {
     right: auto;
     left: -30px;
-    border-right: 30px solid #aaa;
+    border-right: 30px solid var(--_qui-timeline-timeline__borderColor);
     border-left: none;
 }
 
@@ -165,62 +160,28 @@
     content: '';
 }
 
-
-/* FARBEN */
-/* 1 */
-.timeline-entry:nth-child(5n+1) .timeline-entry-icon-wrapper,
-.timeline-entry:nth-child(5n+1) .timeline-entry-line-caption:after {
-    border-color: lightcoral;
-}
-.timeline-entry:nth-child(5n+1) .timeline-entry-icon-wrapper:after {
-    border-left-color: lightcoral;
-    border-right-color: lightcoral;
+/* colors */
+.timeline-entry:nth-child(5n+1) {
+    --_qui-timeline-timeline__borderColor: var(--qui-timeline-timeline__borderColor, #f08080);
 }
 
-/* 2 */
-.timeline-entry:nth-child(5n+2) .timeline-entry-icon-wrapper,
-.timeline-entry:nth-child(5n+2) .timeline-entry-line-caption:after {
-    border-color: lightblue;
-}
-.timeline-entry:nth-child(5n+2) .timeline-entry-icon-wrapper:after {
-    border-left-color: lightblue;
-    border-right-color: lightblue;
+.timeline-entry:nth-child(5n+2) {
+    --_qui-timeline-timeline__borderColor: var(--qui-timeline-timeline__borderColor, #add8e6);
 }
 
-/* 3 */
-.timeline-entry:nth-child(5n+3) .timeline-entry-icon-wrapper,
-.timeline-entry:nth-child(5n+3) .timeline-entry-line-caption:after {
-    border-color: lightsalmon;
-}
-.timeline-entry:nth-child(5n+3) .timeline-entry-icon-wrapper:after {
-    border-left-color: lightsalmon;
-    border-right-color: lightsalmon;
+.timeline-entry:nth-child(5n+3) {
+    --_qui-timeline-timeline__borderColor: var(--qui-timeline-timeline__borderColor, #ffa07a);
 }
 
-/* 4 */
-.timeline-entry:nth-child(5n+4) .timeline-entry-icon-wrapper,
-.timeline-entry:nth-child(5n+4) .timeline-entry-line-caption:after {
-    border-color: lightseagreen;
-}
-.timeline-entry:nth-child(5n+4) .timeline-entry-icon-wrapper:after {
-    border-left-color: lightseagreen;
-    border-right-color: lightseagreen;
+.timeline-entry:nth-child(5n+4) {
+    --_qui-timeline-timeline__borderColor: var(--qui-timeline-timeline__borderColor, #1fb2aa);
 }
 
-/* 5 */
-.timeline-entry:nth-child(5n+5) .timeline-entry-icon-wrapper,
-.timeline-entry:nth-child(5n+5) .timeline-entry-line-caption:after {
-    border-color: yellowgreen;
-}
-.timeline-entry:nth-child(5n+5) .timeline-entry-icon-wrapper:after {
-    border-left-color: yellowgreen;
-    border-right-color: yellowgreen;
+.timeline-entry:nth-child(5n+5) {
+    --_qui-timeline-timeline__borderColor: var(--qui-timeline-timeline__borderColor, #9acd32);
 }
 
-/***************/
 /* media query */
-/***************/
-
 @media screen and (max-width: 767px) {
     .timeline-entry:nth-child(2n+2) .timeline-entry-desc {
         order: 3;

src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html

@@ -26,18 +26,13 @@
                  itemtype="{$this->getAttribute('child-itemtype')}"
                  class="timeline-entry"
         >
-            {assign var=imageFitClass value=''}
-            {if $imageFit == 'cover'}
-                {assign var=imageFitClass value='image-fit-cover'}
-            {/if}
-
             <!-- Entry Icon -->
             <div class="timeline-entry-icon">
                 {if $Child->getAttribute('image_site')}
                 <div class="timeline-entry-icon-wrapper">
                     {image src=$Child->getAttribute('image_site') max-width="500" max-height="500" type="resize"
                     title="{$Child->getAttribute('title')}"
-                    class="$imageFitClass"}
+                    class="timeline-entry__image"}
                 </div>
                 {/if}
             </div>

src/QUI/Timeline/Controls/Timeline.php

@@ -7,6 +7,7 @@
 namespace QUI\Timeline\Controls;
 
 use QUI;
+use QUI\Exception;
 use QUI\Projects\Site\Utils;
 
 /**
@@ -56,21 +57,13 @@ public function getBody(): string
         $Engine = QUI::getTemplateManager()->getEngine();
         $Site = $this->getSite();
         $Project = $this->getProject();
-        $limit = $this->getAttribute('limit');
 
         if (!$Site && !$this->getAttribute('parentInputList')) {
             return '';
         }
 
-        if (!$limit) {
-            $limit = 10;
-        }
-
-        $parents = $this->getAttribute('parentInputList');
-
-        if (!$parents) {
-            $parents = $Site->getId();
-        }
+        $limit = $this->getAttribute('limit') ?: 10;
+        $parents = $this->getAttribute('parentInputList') ?: $Site->getId();
 
         // only active sites
         $where['active'] = 1;
@@ -100,6 +93,10 @@ public function getBody(): string
             'imageFit' => $this->getAttribute('imageFillMode')
         ]);
 
+        if ($this->getAttribute('imageFillMode')) {
+            $this->setCustomVariable('imageFillMode', $this->getAttribute('imageFillMode'));
+        }
+
         // load custom template (if set)
         if (
             $this->getAttribute('displayTemplate')
@@ -115,19 +112,19 @@ public function getBody(): string
             return $Engine->fetch($this->getAttribute('displayTemplate'));
         }
 
+        // Load default template
+        $cssFile = dirname(__FILE__) . '/Timeline.' . $this->getAttribute('display') . '.css';
+        $templateFile = dirname(__FILE__) . '/Timeline.' . $this->getAttribute('display') . '.html';
 
-        // template
-        $css = dirname(__FILE__) . '/Timeline.' . $this->getAttribute('display') . '.css';
-        $template = dirname(__FILE__) . '/Timeline.' . $this->getAttribute('display') . '.html';
-
-        $this->addCSSFile($css);
+        $this->addCSSFile($cssFile);
 
-        return $Engine->fetch($template);
+        return $Engine->fetch($templateFile);
     }
 
 
     /**
      * @return null|QUI\Projects\Site
+     * @throws Exception
      */
     protected function getSite(): ?QUI\Interfaces\Projects\Site
     {
@@ -141,4 +138,28 @@ protected function getSite(): ?QUI\Interfaces\Projects\Site
 
         return $Site;
     }
+
+    /**
+     * Set custom css variable to the control as inline style
+     *   --_qui-timeline-timeline-$name: var(--qui-timeline-timeline-$name, $value);
+     *
+     * Example:
+     *   --_qui-timeline-timeline-imageFillMode: var(--qui-timeline-timeline-imageFillMode, 'cover');
+     *
+     * @param string $name
+     * @param string $value
+     *
+     * @return void
+     */
+    private function setCustomVariable(string $name, string $value): void
+    {
+        if (!$name || !$value) {
+            return;
+        }
+
+        $this->setStyle(
+            '--_qui-timeline-timeline-' . $name,
+            'var(--qui-timeline-timeline-' . $name . ', ' . $value . ')'
+        );
+    }
 }