From 23e2b13efc90c0ed0f5215d5e81cc9d0b46f7ea4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauro=20Ferr=C3=A3o?= <maurofmferrao@gmail.com>
Date: Tue, 14 Nov 2023 10:44:14 +0000
Subject: [PATCH] RSS Ticker: not possible to easily add a separator between
 marquee items (#2206)

relates to xibosignage/xibo#3135
---
 modules/templates/article-static.xml | 112 ++++++++++++++++++++++++++-
 1 file changed, 110 insertions(+), 2 deletions(-)

diff --git a/modules/templates/article-static.xml b/modules/templates/article-static.xml
index 1de3ef5a37..565dcb94cc 100644
--- a/modules/templates/article-static.xml
+++ b/modules/templates/article-static.xml
@@ -682,6 +682,42 @@ $(target).xiboTextRender(properties, $(target).find('#content > .image, #content
                 <helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)</helpText>
                 <default>1000</default>
             </property>
+            <property id="showSeparator" type="checkbox">
+                <title>Show a separator between items?</title>
+                <default>0</default>
+                <visibility>
+                    <test type="or">
+                        <condition field="effect" type="eq">marqueeLeft</condition>
+                        <condition field="effect" type="eq">marqueeRight</condition>
+                        <condition field="effect" type="eq">marqueeUp</condition>
+                        <condition field="effect" type="eq">marqueeDown</condition>
+                    </test>
+                </visibility>
+            </property>
+            <property id="separator" type="richText" allowLibraryRefs="false" variant="html">
+                <title>Separator</title>
+                <helpText>A separator to show between marquee items</helpText>
+                <default>
+                <![CDATA[
+                    <p><span style="font-size: 72px;">/</span></p>
+                ]]></default>
+                <visibility>
+                    <test type="and">
+                        <condition field="effect" type="neq">none</condition>
+                        <condition field="effect" type="neq">noTransition</condition>
+                        <condition field="effect" type="neq">fade</condition>
+                        <condition field="effect" type="neq">fadeout</condition>
+                        <condition field="effect" type="neq">scrollHorz</condition>
+                        <condition field="effect" type="neq">scrollVert</condition>
+                        <condition field="effect" type="neq">flipHorz</condition>
+                        <condition field="effect" type="neq">flipVert</condition>
+                        <condition field="effect" type="neq">shuffle</condition>
+                        <condition field="effect" type="neq">tileSlide</condition>
+                        <condition field="effect" type="neq">tileBlind</condition>
+                        <condition field="showSeparator" type="eq">1</condition>
+                    </test>
+                </visibility>
+            </property>
             <property id="noDataMessage" type="richText" allowLibraryRefs="true" variant="html">
                 <title>No data message</title>
                 <helpText>A message to display when no data is returned from the source</helpText>
@@ -762,6 +798,9 @@ html {
     height: 100%;
     text-align: center;
 }
+.js-marquee .copyright {
+    width: auto;
+}
 .copyright span {
     position: relative;
     font-size: 30px;
@@ -799,9 +838,24 @@ if (
     properties.numItems = parseInt(properties.numItems) + 1;
 }
 
+// Add separator
+if (
+    (
+        properties.effect == 'marqueeLeft' ||
+        properties.effect == 'marqueeRight' ||
+        properties.effect == 'marqueeUp' ||
+        properties.effect == 'marqueeDown'
+    ) && properties.showSeparator == 1 &&
+    properties.separator != ''
+) {
+    var $separator = $(properties.separator);
+    $separator.addClass('separator');
+    $(target).find('#content .article, #content .copyright').after($separator);
+}
+
 // Render
 $(target).xiboLayoutScaler(properties);
-$(target).xiboTextRender(properties, $(target).find('#content .article, #content .copyright'));
+$(target).xiboTextRender(properties, $(target).find('#content .article, #content .copyright, #content .separator'));
         ]]></onTemplateRender>
         <assets>
             <asset id="article_with_desc_and_name_separator" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/title-description-name.png" />
@@ -838,6 +892,42 @@ $(target).xiboTextRender(properties, $(target).find('#content .article, #content
                 <helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)</helpText>
                 <default>1000</default>
             </property>
+            <property id="showSeparator" type="checkbox">
+                <title>Show a separator between items?</title>
+                <default>0</default>
+                <visibility>
+                    <test type="or">
+                        <condition field="effect" type="eq">marqueeLeft</condition>
+                        <condition field="effect" type="eq">marqueeRight</condition>
+                        <condition field="effect" type="eq">marqueeUp</condition>
+                        <condition field="effect" type="eq">marqueeDown</condition>
+                    </test>
+                </visibility>
+            </property>
+            <property id="separator" type="richText" allowLibraryRefs="false" variant="html">
+                <title>Separator</title>
+                <helpText>A separator to show between marquee items</helpText>
+                <default>
+                <![CDATA[
+                    <p><span style="font-size: 72px;">/</span></p>
+                ]]></default>
+                <visibility>
+                    <test type="and">
+                        <condition field="effect" type="neq">none</condition>
+                        <condition field="effect" type="neq">noTransition</condition>
+                        <condition field="effect" type="neq">fade</condition>
+                        <condition field="effect" type="neq">fadeout</condition>
+                        <condition field="effect" type="neq">scrollHorz</condition>
+                        <condition field="effect" type="neq">scrollVert</condition>
+                        <condition field="effect" type="neq">flipHorz</condition>
+                        <condition field="effect" type="neq">flipVert</condition>
+                        <condition field="effect" type="neq">shuffle</condition>
+                        <condition field="effect" type="neq">tileSlide</condition>
+                        <condition field="effect" type="neq">tileBlind</condition>
+                        <condition field="showSeparator" type="eq">1</condition>
+                    </test>
+                </visibility>
+            </property>
             <property id="noDataMessage" type="richText" allowLibraryRefs="true" variant="html">
                 <title>No data message</title>
                 <helpText>A message to display when no data is returned from the source</helpText>
@@ -907,6 +997,9 @@ html {
     top: 50%;
     transform: translateY(-50%);
 }
+.js-marquee .copyright {
+    width: auto;
+}
 {% endif %}
 </style>
             ]]></twig>
@@ -937,9 +1030,24 @@ if (
     properties.numItems = parseInt(properties.numItems) + 1;
 }
 
+// Add separator
+if (
+    (
+        properties.effect == 'marqueeLeft' ||
+        properties.effect == 'marqueeRight' ||
+        properties.effect == 'marqueeUp' ||
+        properties.effect == 'marqueeDown'
+    ) && properties.showSeparator == 1 &&
+    properties.separator != ''
+) {
+    var $separator = $(properties.separator);
+    $separator.addClass('separator');
+    $(target).find('#content .article, #content .copyright').after($separator);
+}
+
 // Render
 $(target).xiboLayoutScaler(properties);
-$(target).xiboTextRender(properties, $(target).find('#content .article, #content .copyright'));
+$(target).xiboTextRender(properties, $(target).find('#content .article, #content .copyright, #content .separator'));
         ]]></onTemplateRender>
         <assets>
             <asset id="article_title_only" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/title-only.png" />