Skip to content

Commit

Permalink
RSS Ticker: not possible to easily add a separator between marquee it…
Browse files Browse the repository at this point in the history
…ems (#2206)

relates to xibosignage/xibo#3135
  • Loading branch information
maurofmferrao committed Nov 14, 2023
1 parent c211781 commit 23e2b13
Showing 1 changed file with 110 additions and 2 deletions.
112 changes: 110 additions & 2 deletions modules/templates/article-static.xml
Expand Up @@ -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>
Expand Down Expand Up @@ -762,6 +798,9 @@ html {
height: 100%;
text-align: center;
}
.js-marquee .copyright {
width: auto;
}
.copyright span {
position: relative;
font-size: 30px;
Expand Down Expand Up @@ -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" />
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -907,6 +997,9 @@ html {
top: 50%;
transform: translateY(-50%);
}
.js-marquee .copyright {
width: auto;
}
{% endif %}
</style>
]]></twig>
Expand Down Expand Up @@ -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" />
Expand Down

0 comments on commit 23e2b13

Please sign in to comment.