diff --git a/README.md b/README.md
index e21d1d33c03ddfea467584e0eb4721253cc3a4c5..0bc90b18ce54683a82c52438cd7305ca8aecea4a 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,9 @@
QUIQQER Timeline
========
-Timline and roadmap for your project.
+This package provides a collection of templates designed
+for easy creation of visually appealing timelines and roadmaps,
+making it simple to showcase progress, project stages, and historical events.
Package Name:
@@ -11,8 +13,10 @@ Package Name:
Features
--------
-- Timline template with content and icon (image)
-- Responsive
+- Timeline template with content and icon (image)
+- Timelines templates are responsive
+- Site type "Timeline". The page will list all its subpages in the form of a timeline
+- Brick "Timeline". You can show selected sites as entries in the timeline.
Installation
diff --git a/locale.xml b/locale.xml
index a17011b86c30d3f1524f07ff16cecd87f67c5741..efe4e9cee88b82bb3176124569bbac4470286dbb 100644
--- a/locale.xml
+++ b/locale.xml
@@ -4,30 +4,20 @@
<locale name="package.title">
<de><![CDATA[QUIQQER - Timeline]]></de>
<en><![CDATA[QUIQQER - Timeline]]></en>
- <en><![CDATA[QUIQQER - Linia czasu]]></en>
</locale>
<locale name="package.description" html="true">
- <de><![CDATA[
- Das Paket ermöglicht das einfache Erstellen von Timelines oder Roadmaps.
- ]]></de>
- <en><![CDATA[
- The package allows you to easily create timelines or roadmaps.
- ]]></en>
- <pl><![CDATA[
- Za pomocÄ… tego rozszerzenia moĹĽliwe jest szybie i proste dodanie do Twojego projekt dtzw. linni czasu albo "road map".
- ]]></pl>
+ <de><![CDATA[Das Paket ermöglicht das einfache Erstellen von Timelines oder Roadmaps.]]></de>
+ <en><![CDATA[This package contains templates for easily creating timelines and roadmaps.]]></en>
</locale>
<!-- timeline -->
<locale name="admin.types.timeline">
<de><![CDATA[Timeline]]></de>
<en><![CDATA[Timeline]]></en>
- <pl><![CDATA[Linnia czasu]]></pl>
</locale>
<locale name="admin.types.timeline.desc">
- <de><![CDATA[Die Seite wird alle ihre Unterseite in Form von einer Timeline auflisten. Um gutes Ergebnis zu bekommen ist es notwendig, jede Unterseite mit Titel, Kurzbeschreibung und einer Icon bzw. Seitenbild zu versehen.]]></de>
- <en><![CDATA[This site type will list all of its subpages in the form of a timline. It is necessary to add a title, short description and an icon or page image to each subpage.]]></en>
- <pl><![CDATA[Ta strona wylistuje wszystkie jej podstrony w formie tzw. linni czasowej. Żeby uzyskać najlepszy efekt, musisz ustawić każdej stronie tytuł, krótki opis oraz ikonę lub obrazek.]]></pl>
+ <de><![CDATA[Die Seite wird alle ihre Unterseiten in Form einer Timeline auflisten. Um ein gutes Ergebnis zu erzielen, ist es notwendig, jede Unterseite mit einem Titel, einer Kurzbeschreibung und einem Icon oder Seitenbild zu versehen.]]></de>
+ <en><![CDATA[The page will list all its subpages in the form of a timeline. To achieve good results, it is necessary to provide each subpage with a title, a short description, and an icon or page image.]]></en>
</locale>
<!-- timeline brick -->
@@ -37,8 +27,8 @@
</locale>
<locale name="brick.timeline.description">
- <de><![CDATA[Erstelle ohne Aufwand Timelines oder Roadmaps.]]></de>
- <en><![CDATA[Create timelines or roadmaps without effort.]]></en>
+ <de><![CDATA[Erstelle mĂĽhelos Timelines oder Roadmaps.]]></de>
+ <en><![CDATA[Easily create timelines or roadmaps.]]></en>
</locale>
<locale name="brick.timeline.setting.site">
<de><![CDATA[Seite(n) auswählen]]></de>
@@ -49,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>
@@ -89,7 +83,6 @@
<locale name="timeline.settings.title">
<de><![CDATA[Timeline: Einstellungen]]></de>
<en><![CDATA[Timeline: settings]]></en>
- <pl><![CDATA[Timeline: ustawienia]]></pl>
</locale>
<!-- template / display -->
@@ -99,34 +92,32 @@
<pl><![CDATA[Template]]></pl>
</locale>
<locale name="timeline.display.VerticalBothSides">
- <de><![CDATA[Verticale Linnie mit Inhalt und Icon (Bild)]]></de>
- <en><![CDATA[Vertical timeline wiht content and icon (image)]]></en>
- <pl><![CDATA[Wertykalna linnia czasu z treścią i ikona (obrazkiem)]]></pl>
+ <de><![CDATA[Vertikale Linnie mit Inhalt und Icon (Bild)]]></de>
+ <en><![CDATA[Vertical timeline with content and icon (image)]]></en>
</locale>
<!-- show url -->
<locale name="timeline.showLinks">
<de><![CDATA[Links zu den Seiten anzeigen?]]></de>
- <en><![CDATA[Show hyerlinks for each site?]]></en>
- <pl><![CDATA[]]></pl>
+ <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 -->
diff --git a/site.xml b/site.xml
index b17d8db41db1db7c9bb97df5265f62f68c6ff02b..480c246795883c635b8a185170df6b363a8099fd 100644
--- a/site.xml
+++ b/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>
diff --git a/src/QUI/Timeline/Bricks/Timeline.html b/src/QUI/Timeline/Bricks/Timeline.html
index aba7f76a0abc166c85b7684bece0eb8f480ad097..9c451cffc1f1e377d09f6926f52420b5b379029e 100644
--- a/src/QUI/Timeline/Bricks/Timeline.html
+++ b/src/QUI/Timeline/Bricks/Timeline.html
@@ -11,5 +11,5 @@
{/if}
<div class="control-template">
- {$timelineHtml}
+ {$TimelineControl->create()}
</div>
diff --git a/src/QUI/Timeline/Bricks/Timeline.php b/src/QUI/Timeline/Bricks/Timeline.php
index 8f33e199bfb001eab6d8bfaa5c034364b8b1733f..b9d053c880f5a27c259c9698869f901bb6a89951 100644
--- a/src/QUI/Timeline/Bricks/Timeline.php
+++ b/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);
diff --git a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
index b086e397d47e72db0c32e058baec59d292a36bf7..36665ff68ce284810513e78b389b27ad4b895488 100644
--- a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
+++ b/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;
diff --git a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
index 11a45b2bdbb365b68373e5495c07f940fa1dd7fb..115e5a13c2e3bc4f058f704078cc3c537cdc97e2 100644
--- a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
+++ b/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>
diff --git a/src/QUI/Timeline/Controls/Timeline.php b/src/QUI/Timeline/Controls/Timeline.php
index 1a64be32321994875b788b73d9b07768407ff283..226d0796981a6a568c2676a9e7e1158ea36dee7c 100644
--- a/src/QUI/Timeline/Controls/Timeline.php
+++ b/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 . ')'
+ );
+ }
}