1455 lines
52 KiB
XML
1455 lines
52 KiB
XML
|
<!--
|
||
|
|
~ Copyright (C) 2023 Xibo Signage Ltd
|
||
|
|
~
|
||
|
|
~ Xibo - Digital Signage - https://xibosignage.com
|
||
|
|
~
|
||
|
|
~ This file is part of Xibo.
|
||
|
|
~
|
||
|
|
~ Xibo is free software: you can redistribute it and/or modify
|
||
|
|
~ it under the terms of the GNU Affero General Public License as published by
|
||
|
|
~ the Free Software Foundation, either version 3 of the License, or
|
||
|
|
~ any later version.
|
||
|
|
~
|
||
|
|
~ Xibo is distributed in the hope that it will be useful,
|
||
|
|
~ but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
|
|
~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
|
|
~ GNU Affero General Public License for more details.
|
||
|
|
~
|
||
|
|
~ You should have received a copy of the GNU Affero General Public License
|
||
|
|
~ along with Xibo. If not, see <http://www.gnu.org/licenses/>.
|
||
|
|
-->
|
||
|
|
<templates>
|
||
|
|
<template>
|
||
|
|
<id>article_custom_html</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>article</dataType>
|
||
|
|
<showIn>none</showIn>
|
||
|
|
<title>Articles shown with custom HTML</title>
|
||
|
|
<properties>
|
||
|
|
<property id="customTemplate" type="hidden">
|
||
|
|
<default>1</default>
|
||
|
|
</property>
|
||
|
|
<property id="moduleType" type="hidden">
|
||
|
|
<default>article</default>
|
||
|
|
</property>
|
||
|
|
<property id="effect" type="effectSelector" variant="all">
|
||
|
|
<title>Effect</title>
|
||
|
|
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
||
|
|
<default>noTransition</default>
|
||
|
|
</property>
|
||
|
|
<property id="speed" type="number">
|
||
|
|
<title>Speed</title>
|
||
|
|
<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="itemsSideBySide" type="checkbox">
|
||
|
|
<title>Show items side by side?</title>
|
||
|
|
<helpText>Should items be shown side by side?</helpText>
|
||
|
|
<default>0</default>
|
||
|
|
</property>
|
||
|
|
<property id="itemsPerPage" type="number">
|
||
|
|
<title>Items per page</title>
|
||
|
|
<helpText>If an effect has been selected from the General tab, how many pages should we split the items across? If you don't enter anything here 1 item will be put on each page.</helpText>
|
||
|
|
<default>1</default>
|
||
|
|
</property>
|
||
|
|
<property id="dateFormat" type="text" variant="dateFormat">
|
||
|
|
<title>Date Format</title>
|
||
|
|
<helpText>The format to apply to all dates returned by the Widget.</helpText>
|
||
|
|
<default>#DATE_FORMAT#</default>
|
||
|
|
</property>
|
||
|
|
<property id="backgroundColor" type="color">
|
||
|
|
<title>Background Colour</title>
|
||
|
|
<helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="textDirection" type="dropdown" mode="single">
|
||
|
|
<title>Text direction</title>
|
||
|
|
<helpText>Which direction does the text in the feed use?</helpText>
|
||
|
|
<default>ltr</default>
|
||
|
|
<options>
|
||
|
|
<option name="ltr">Left to Right (LTR)</option>
|
||
|
|
<option name="rtl">Right to Left (RTL)</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property id="template" type="code" allowLibraryRefs="true" variant="html">
|
||
|
|
<title>Item Template</title>
|
||
|
|
<helpText>Enter text in the box below, used to display each article.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="dataTypeSnippets" type="snippet" mode="dataType" target="template">
|
||
|
|
<title>Snippets</title>
|
||
|
|
<helpText>Choose element to add to template</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="noDataMessage" type="code" allowLibraryRefs="true" variant="html">
|
||
|
|
<title>No data message</title>
|
||
|
|
<helpText>A message to display when no data is returned from the source</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="css" type="code" allowLibraryRefs="true" variant="css">
|
||
|
|
<title>Optional Stylesheet Template</title>
|
||
|
|
</property>
|
||
|
|
<property id="javaScript" type="code" allowLibraryRefs="true" variant="javascript">
|
||
|
|
<title>Optional JavaScript</title>
|
||
|
|
<helpText>Add JavaScript to be included immediately before the closing body tag. Do not use [] array notation as this is reserved for library references. Do not include script tags.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="copyright" type="text">
|
||
|
|
<title>Copyright</title>
|
||
|
|
<helpText>Copyright information to display as the last item in this feed.</helpText>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if javaScript %}<script type="text/javascript">{{javaScript|raw}}</script>{% endif %}
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% if css or itemsSideBySide or backgroundColor or textDirection == "rtl" %}
|
||
|
|
{% if itemsSideBySide %}.text-render-item, .page { float: left; }{% endif %}
|
||
|
|
{% if textDirection == "rtl" %}#content { direction: rtl; }{% endif %}
|
||
|
|
{% if backgroundColor %}body { background-color: {{backgroundColor}} !important; }{% endif %}
|
||
|
|
{{css|raw}}
|
||
|
|
{% endif %}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<onTemplateRender><![CDATA[
|
||
|
|
// id: The id of the widget
|
||
|
|
// target: The target element to render
|
||
|
|
// items: The items to render
|
||
|
|
// properties: The properties for the widget
|
||
|
|
// -------------------------------------------
|
||
|
|
if (items.length > 0) {
|
||
|
|
items = $(items).xiboSubstitutesParser(properties.template, properties.dateFormat, ['date', 'publishedDate'], {
|
||
|
|
description: 'summary',
|
||
|
|
copyright: 'author',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// No data message
|
||
|
|
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
|
||
|
|
items.push(properties.noDataMessage);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Copyright
|
||
|
|
if (properties.copyright) {
|
||
|
|
items.push({
|
||
|
|
title: properties.copyright
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Clear container
|
||
|
|
$(target).find('#content').empty();
|
||
|
|
|
||
|
|
// Add items to container
|
||
|
|
for (var index = 0; index < items.length; index++) {
|
||
|
|
var $newItem = $('<div>').addClass('item').html(items[index]);
|
||
|
|
$(target).find('#content').append($newItem);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Render
|
||
|
|
$(target).xiboLayoutScaler(properties);
|
||
|
|
$(target).xiboTextRender(properties, $(target).find('#content > *'));
|
||
|
|
$(target).find('img').xiboImageRender(properties);
|
||
|
|
]]></onTemplateRender>
|
||
|
|
<onTemplateVisible><![CDATA[
|
||
|
|
// Start effects for this template
|
||
|
|
$(target).xiboLayoutAnimate(properties);
|
||
|
|
]]></onTemplateVisible>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>article_image_only</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>article</dataType>
|
||
|
|
<title>Image only</title>
|
||
|
|
<thumbnail>article_image_only</thumbnail>
|
||
|
|
<startWidth>600</startWidth>
|
||
|
|
<startHeight>400</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="backgroundColor" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="itemImageFit" type="dropdown" mode="single">
|
||
|
|
<title>Image Fit</title>
|
||
|
|
<helpText>How should images be scaled by default?</helpText>
|
||
|
|
<default>contain</default>
|
||
|
|
<options>
|
||
|
|
<option name="contain">Contain</option>
|
||
|
|
<option name="cover">Cover</option>
|
||
|
|
<option name="fill">Fill</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property id="effect" type="effectSelector" variant="showPaged">
|
||
|
|
<title>Effect</title>
|
||
|
|
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
||
|
|
<default>noTransition</default>
|
||
|
|
</property>
|
||
|
|
<property id="speed" type="number">
|
||
|
|
<title>Speed</title>
|
||
|
|
<helpText>The transition speed of the selected effect in milliseconds (normal = 1000).</helpText>
|
||
|
|
</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>
|
||
|
|
</property>
|
||
|
|
<property id="copyright" type="text">
|
||
|
|
<title>Copyright</title>
|
||
|
|
<helpText>Copyright information to display as the last item in this feed.</helpText>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<hbs><![CDATA[
|
||
|
|
<div class="image">
|
||
|
|
{{#if image}}<img src="{{image}}"/>{{/if}}
|
||
|
|
</div>
|
||
|
|
]]></hbs>
|
||
|
|
<style><![CDATA[
|
||
|
|
#content, .text-render-item, .image, .image img {
|
||
|
|
width:100%; height: 100%;
|
||
|
|
}
|
||
|
|
.image img {
|
||
|
|
object-fit: {{itemImageFit}} !important;
|
||
|
|
}
|
||
|
|
{% if backgroundColor %}
|
||
|
|
body {
|
||
|
|
background-color: {{backgroundColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
{% if copyright %}
|
||
|
|
.copyright {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.copyright span {
|
||
|
|
position: relative;
|
||
|
|
font-size: 30px;
|
||
|
|
line-height: 0;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<onTemplateRender><![CDATA[
|
||
|
|
// id: The id of the widget
|
||
|
|
// target: The target element to render
|
||
|
|
// items: The items to render
|
||
|
|
// properties: The properties for the widget
|
||
|
|
// -------------------------------------------
|
||
|
|
// No data message
|
||
|
|
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
|
||
|
|
$(target).find('#content').append(properties.noDataMessage);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add copyright if we have at least one item
|
||
|
|
// and copyright is not already added
|
||
|
|
if (
|
||
|
|
properties.copyright &&
|
||
|
|
$(target).find('#content > .image').length > 0 &&
|
||
|
|
$(target).find('#content > .copyright').length <= 0
|
||
|
|
) {
|
||
|
|
$(target).find('#content').append(
|
||
|
|
$('<div class="copyright"><span>' + properties.copyright + '</span></div>')
|
||
|
|
);
|
||
|
|
|
||
|
|
// Increase numItems to include the copyright
|
||
|
|
properties.numItems = parseInt(properties.numItems) + 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Render
|
||
|
|
$(target).xiboLayoutScaler(properties);
|
||
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .image, #content > .copyright'));
|
||
|
|
$(target).find('img').xiboImageRender(properties);
|
||
|
|
]]></onTemplateRender>
|
||
|
|
<onTemplateVisible><![CDATA[
|
||
|
|
// Start effects for this template
|
||
|
|
$(target).xiboLayoutAnimate(properties);
|
||
|
|
]]></onTemplateVisible>
|
||
|
|
<assets>
|
||
|
|
<asset id="article_image_only" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/image-only.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>article_with_left_hand_text</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>article</dataType>
|
||
|
|
<title>Image overlaid with the Feed Content on the Left</title>
|
||
|
|
<thumbnail>article_with_left_hand_text</thumbnail>
|
||
|
|
<startWidth>600</startWidth>
|
||
|
|
<startHeight>400</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="backgroundColor" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="itemBackgroundColor" type="color">
|
||
|
|
<title>Background (content)</title>
|
||
|
|
<default>black</default>
|
||
|
|
</property>
|
||
|
|
<property id="backgroundOpacity" type="number">
|
||
|
|
<title>Background opacity (content)</title>
|
||
|
|
<default>0.6</default>
|
||
|
|
</property>
|
||
|
|
<property id="itemTitleColor" type="color">
|
||
|
|
<title>Title</title>
|
||
|
|
<default>white</default>
|
||
|
|
</property>
|
||
|
|
<property id="itemDescriptionColor" type="color">
|
||
|
|
<title>Description</title>
|
||
|
|
<default>white</default>
|
||
|
|
</property>
|
||
|
|
<property id="itemFontSize" type="number">
|
||
|
|
<title>Font Size</title>
|
||
|
|
<default>16</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="itemImageFit" type="dropdown" mode="single">
|
||
|
|
<title>Image Fit</title>
|
||
|
|
<helpText>How should images be scaled by default?</helpText>
|
||
|
|
<default>contain</default>
|
||
|
|
<options>
|
||
|
|
<option name="contain">Contain</option>
|
||
|
|
<option name="cover">Cover</option>
|
||
|
|
<option name="fill">Fill</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property id="effect" type="effectSelector" variant="showPaged">
|
||
|
|
<title>Effect</title>
|
||
|
|
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
||
|
|
<default>noTransition</default>
|
||
|
|
</property>
|
||
|
|
<property id="speed" type="number">
|
||
|
|
<title>Speed</title>
|
||
|
|
<helpText>The transition speed of the selected effect in milliseconds (normal = 1000).</helpText>
|
||
|
|
</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>
|
||
|
|
</property>
|
||
|
|
<property id="copyright" type="text">
|
||
|
|
<title>Copyright</title>
|
||
|
|
<helpText>Copyright information to display as the last item in this feed.</helpText>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<hbs><![CDATA[
|
||
|
|
<div class="image">
|
||
|
|
{{#if image}}<img src="{{image}}"/>{{/if}}
|
||
|
|
<div class="cycle-overlay background">
|
||
|
|
<div class="title">{{title}}</div>
|
||
|
|
<div class="description">{{{summary}}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></hbs>
|
||
|
|
<style><![CDATA[
|
||
|
|
html {
|
||
|
|
/* Global font size, change for font scale */
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content, .text-render-item, .image, .image img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cycle-overlay {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
color: white;
|
||
|
|
background: black;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
top: 0px;
|
||
|
|
width: 20%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 0.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cycle-overlay>div {
|
||
|
|
font-family: Arial, Verdana, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cycle-overlay .title {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: white;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cycle-overlay .description {
|
||
|
|
font-size: 1rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
{% if backgroundColor %}
|
||
|
|
body {
|
||
|
|
background-color: {{backgroundColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if backgroundOpacity %}
|
||
|
|
.cycle-overlay {
|
||
|
|
opacity: {{backgroundOpacity}};
|
||
|
|
filter: alpha(opacity={{backgroundOpacity*100}});
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemImageFit %}
|
||
|
|
.image img {
|
||
|
|
object-fit: {{itemImageFit}};
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemBackgroundColor %}
|
||
|
|
.background {
|
||
|
|
background-color: {{itemBackgroundColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemTitleColor %}
|
||
|
|
.title {
|
||
|
|
color: {{itemTitleColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemDescriptionColor %}
|
||
|
|
.description {
|
||
|
|
color: {{itemDescriptionColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemFontSize %}
|
||
|
|
html {
|
||
|
|
font-size: {{itemFontSize}}px !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if fontFamily %}
|
||
|
|
.description, .title {
|
||
|
|
font-family: {{fontFamily}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if copyright %}
|
||
|
|
.copyright {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.copyright span {
|
||
|
|
position: relative;
|
||
|
|
font-size: 30px;
|
||
|
|
line-height: 0;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<onTemplateRender><![CDATA[
|
||
|
|
// id: The id of the widget
|
||
|
|
// target: The target element to render
|
||
|
|
// items: The items to render
|
||
|
|
// properties: The properties for the widget
|
||
|
|
// -------------------------------------------
|
||
|
|
// No data message
|
||
|
|
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
|
||
|
|
$(target).find('#content').append(properties.noDataMessage);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add copyright if we have at least one item
|
||
|
|
// and copyright is not already added
|
||
|
|
if (
|
||
|
|
properties.copyright &&
|
||
|
|
$(target).find('#content > .image').length > 0 &&
|
||
|
|
$(target).find('#content > .copyright').length <= 0
|
||
|
|
) {
|
||
|
|
$(target).find('#content').append(
|
||
|
|
$('<div class="copyright"><span>' + properties.copyright + '</span></div>')
|
||
|
|
);
|
||
|
|
|
||
|
|
// Increase numItems to include the copyright
|
||
|
|
properties.numItems = parseInt(properties.numItems) + 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Render
|
||
|
|
$(target).xiboLayoutScaler(properties);
|
||
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .image, #content > .copyright'));
|
||
|
|
$(target).find('img').xiboImageRender(properties);
|
||
|
|
]]></onTemplateRender>
|
||
|
|
<onTemplateVisible><![CDATA[
|
||
|
|
// Start effects for this template
|
||
|
|
$(target).xiboLayoutAnimate(properties);
|
||
|
|
]]></onTemplateVisible>
|
||
|
|
<assets>
|
||
|
|
<asset id="article_with_left_hand_text" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/image-with-left-hand-text.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>article_with_title</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>article</dataType>
|
||
|
|
<title>Image overlaid with the Title</title>
|
||
|
|
<thumbnail>article_with_title</thumbnail>
|
||
|
|
<startWidth>600</startWidth>
|
||
|
|
<startHeight>400</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="backgroundColor" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="itemBackgroundColor" type="color">
|
||
|
|
<title>Background (content)</title>
|
||
|
|
<default>black</default>
|
||
|
|
</property>
|
||
|
|
<property id="backgroundOpacity" type="number">
|
||
|
|
<title>Background opacity (content)</title>
|
||
|
|
<default>0.6</default>
|
||
|
|
</property>
|
||
|
|
<property id="itemTitleColor" type="color">
|
||
|
|
<title>Title</title>
|
||
|
|
<default>white</default>
|
||
|
|
</property>
|
||
|
|
<property id="itemFontSize" type="number">
|
||
|
|
<title>Font Size</title>
|
||
|
|
<default>16</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="itemImageFit" type="dropdown" mode="single">
|
||
|
|
<title>Image Fit</title>
|
||
|
|
<helpText>How should images be scaled by default?</helpText>
|
||
|
|
<default>contain</default>
|
||
|
|
<options>
|
||
|
|
<option name="contain">Contain</option>
|
||
|
|
<option name="cover">Cover</option>
|
||
|
|
<option name="fill">Fill</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property id="effect" type="effectSelector" variant="showPaged">
|
||
|
|
<title>Effect</title>
|
||
|
|
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
||
|
|
<default>noTransition</default>
|
||
|
|
</property>
|
||
|
|
<property id="speed" type="number">
|
||
|
|
<title>Speed</title>
|
||
|
|
<helpText>The transition speed of the selected effect in milliseconds (normal = 1000).</helpText>
|
||
|
|
</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>
|
||
|
|
</property>
|
||
|
|
<property id="copyright" type="text">
|
||
|
|
<title>Copyright</title>
|
||
|
|
<helpText>Copyright information to display as the last item in this feed.</helpText>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<hbs><![CDATA[
|
||
|
|
<div class="image">
|
||
|
|
{{#if image}}<img src="{{image}}"/>{{/if}}
|
||
|
|
<div class="cycle-overlay background">
|
||
|
|
<div class="title">{{title}}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></hbs>
|
||
|
|
<style><![CDATA[
|
||
|
|
html {
|
||
|
|
/* Global font size, change for font scale */
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content, .text-render-item, .image, .image img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image img {
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cycle-overlay {
|
||
|
|
color: white;
|
||
|
|
background: black;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
width: 100%;
|
||
|
|
padding: 2rem 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cycle-overlay>div {
|
||
|
|
font-family: Arial, Verdana, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cycle-overlay .title {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: white;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
{% if backgroundColor %}
|
||
|
|
body {
|
||
|
|
background-color: {{backgroundColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if backgroundOpacity %}
|
||
|
|
.cycle-overlay {
|
||
|
|
opacity: {{backgroundOpacity}};
|
||
|
|
filter: alpha(opacity={{backgroundOpacity*100}});
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemImageFit %}
|
||
|
|
.image img {
|
||
|
|
object-fit: {{itemImageFit}};
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemBackgroundColor %}
|
||
|
|
.background {
|
||
|
|
background-color: {{itemBackgroundColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemTitleColor %}
|
||
|
|
.title {
|
||
|
|
color: {{itemTitleColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemFontSize %}
|
||
|
|
html {
|
||
|
|
font-size: {{itemFontSize}}px !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if fontFamily %}
|
||
|
|
.title {
|
||
|
|
font-family: {{fontFamily}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if copyright %}
|
||
|
|
.copyright {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.copyright span {
|
||
|
|
position: relative;
|
||
|
|
font-size: 30px;
|
||
|
|
line-height: 0;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<onTemplateRender><![CDATA[
|
||
|
|
// id: The id of the widget
|
||
|
|
// target: The target element to render
|
||
|
|
// items: The items to render
|
||
|
|
// properties: The properties for the widget
|
||
|
|
// -------------------------------------------
|
||
|
|
// No data message
|
||
|
|
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
|
||
|
|
$(target).find('#content').append(properties.noDataMessage);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add copyright if we have at least one item
|
||
|
|
// and copyright is not already added
|
||
|
|
if (
|
||
|
|
properties.copyright &&
|
||
|
|
$(target).find('#content > .image').length > 0 &&
|
||
|
|
$(target).find('#content > .copyright').length <= 0
|
||
|
|
) {
|
||
|
|
$(target).find('#content').append(
|
||
|
|
$('<div class="copyright"><span>' + properties.copyright + '</span></div>')
|
||
|
|
);
|
||
|
|
|
||
|
|
// Increase numItems to include the copyright
|
||
|
|
properties.numItems = parseInt(properties.numItems) + 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Render
|
||
|
|
$(target).xiboLayoutScaler(properties);
|
||
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .image, #content > .copyright'));
|
||
|
|
$(target).find('img').xiboImageRender(properties);
|
||
|
|
]]></onTemplateRender>
|
||
|
|
<onTemplateVisible><![CDATA[
|
||
|
|
// Start effects for this template
|
||
|
|
$(target).xiboLayoutAnimate(properties);
|
||
|
|
]]></onTemplateVisible>
|
||
|
|
<assets>
|
||
|
|
<asset id="article_with_title" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/image-with-title.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>article_with_desc_and_name_separator</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>article</dataType>
|
||
|
|
<title>Prominent title with description and name separator</title>
|
||
|
|
<thumbnail>article_with_desc_and_name_separator</thumbnail>
|
||
|
|
<startWidth>600</startWidth>
|
||
|
|
<startHeight>600</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="backgroundColor" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="itemNameColor" type="color">
|
||
|
|
<title>Name</title>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="itemTitleColor" type="color">
|
||
|
|
<title>Title</title>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="itemDescriptionColor" type="color">
|
||
|
|
<title>Description</title>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="itemFontSize" type="number">
|
||
|
|
<title>Font Size</title>
|
||
|
|
<default>16</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="effect" type="effectSelector" variant="all">
|
||
|
|
<title>Effect</title>
|
||
|
|
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
||
|
|
<default>noTransition</default>
|
||
|
|
</property>
|
||
|
|
<property id="speed" type="number">
|
||
|
|
<title>Speed</title>
|
||
|
|
<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="showSideBySide" type="checkbox">
|
||
|
|
<title>Show items side by side?</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>
|
||
|
|
</property>
|
||
|
|
<property id="copyright" type="text">
|
||
|
|
<title>Copyright</title>
|
||
|
|
<helpText>Copyright information to display as the last item in this feed.</helpText>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<hbs><![CDATA[
|
||
|
|
<div class="article">
|
||
|
|
<div><div class="name">{{author}}</div></div>
|
||
|
|
<div><div class="title"><strong>{{title}}</strong></div></div>
|
||
|
|
<div><div class="description">{{{summary}}}</div></div>
|
||
|
|
</div>
|
||
|
|
]]></hbs>
|
||
|
|
<style><![CDATA[
|
||
|
|
html {
|
||
|
|
/* Global font size, change for font scale */
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-render-item {
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-render-item.cycle-slide {
|
||
|
|
width: calc(100% - 2rem) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.article > div {
|
||
|
|
font-family: Arial, Verdana, sans-serif;
|
||
|
|
{% if showSideBySide %}
|
||
|
|
display: inline-block;
|
||
|
|
padding-left: 10px;
|
||
|
|
{% endif %}
|
||
|
|
}
|
||
|
|
|
||
|
|
.name {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.description, .title {
|
||
|
|
font-size: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
{% if backgroundColor %}
|
||
|
|
body {
|
||
|
|
background-color: {{backgroundColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemTitleColor %}
|
||
|
|
.title {
|
||
|
|
color: {{itemTitleColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemDescriptionColor %}
|
||
|
|
.description {
|
||
|
|
color: {{itemDescriptionColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemNameColor %}
|
||
|
|
.name {
|
||
|
|
color: {{itemNameColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemFontSize %}
|
||
|
|
html {
|
||
|
|
font-size: {{itemFontSize}}px !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if fontFamily %}
|
||
|
|
.title, .name, .description {
|
||
|
|
font-family: {{fontFamily}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if copyright %}
|
||
|
|
.copyright {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.js-marquee .copyright {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
.copyright span {
|
||
|
|
position: relative;
|
||
|
|
font-size: 30px;
|
||
|
|
line-height: 0;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<onTemplateRender><![CDATA[
|
||
|
|
// id: The id of the widget
|
||
|
|
// target: The target element to render
|
||
|
|
// items: The items to render
|
||
|
|
// properties: The properties for the widget
|
||
|
|
// -------------------------------------------
|
||
|
|
// No data message
|
||
|
|
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
|
||
|
|
$(target).find('#content').append(properties.noDataMessage);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add copyright if we have at least one item
|
||
|
|
// and copyright is not already added
|
||
|
|
if (
|
||
|
|
properties.copyright &&
|
||
|
|
$(target).find('#content .article').length > 0 &&
|
||
|
|
$(target).find('#content .copyright').length <= 0
|
||
|
|
) {
|
||
|
|
$(target).find('#content').append(
|
||
|
|
$('<div class="copyright"><span>' + properties.copyright + '</span></div>')
|
||
|
|
);
|
||
|
|
|
||
|
|
// Increase numItems to include the copyright
|
||
|
|
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, #content .separator'));
|
||
|
|
]]></onTemplateRender>
|
||
|
|
<onTemplateVisible><![CDATA[
|
||
|
|
// Start effects for this template
|
||
|
|
$(target).xiboLayoutAnimate(properties);
|
||
|
|
]]></onTemplateVisible>
|
||
|
|
<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" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>article_title_only</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>article</dataType>
|
||
|
|
<title>Title Only</title>
|
||
|
|
<thumbnail>article_title_only</thumbnail>
|
||
|
|
<startWidth>600</startWidth>
|
||
|
|
<startHeight>200</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="backgroundColor" type="color">
|
||
|
|
<title>Background</title>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="itemTitleColor" type="color">
|
||
|
|
<title>Title</title>
|
||
|
|
<default>#000</default>
|
||
|
|
</property>
|
||
|
|
<property id="itemFontSize" type="number">
|
||
|
|
<title>Font Size</title>
|
||
|
|
<default>16</default>
|
||
|
|
</property>
|
||
|
|
<property id="fontFamily" type="fontSelector">
|
||
|
|
<title>Font</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="effect" type="effectSelector" variant="all">
|
||
|
|
<title>Effect</title>
|
||
|
|
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
||
|
|
<default>noTransition</default>
|
||
|
|
</property>
|
||
|
|
<property id="speed" type="number">
|
||
|
|
<title>Speed</title>
|
||
|
|
<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>
|
||
|
|
</property>
|
||
|
|
<property id="copyright" type="text">
|
||
|
|
<title>Copyright</title>
|
||
|
|
<helpText>Copyright information to display as the last item in this feed.</helpText>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<hbs><![CDATA[
|
||
|
|
<div class="article">
|
||
|
|
<div><div class="title"><strong>{{title}}</strong></div></div>
|
||
|
|
</div>
|
||
|
|
]]></hbs>
|
||
|
|
<style><![CDATA[
|
||
|
|
html {
|
||
|
|
/* Global font size, change for font scale */
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-render-item {
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-render-item.cycle-slide {
|
||
|
|
width: calc(100% - 2rem) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.article > div {
|
||
|
|
font-family: Arial, Verdana, sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
{% if backgroundColor %}
|
||
|
|
body {
|
||
|
|
background-color: {{backgroundColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemTitleColor %}
|
||
|
|
.title {
|
||
|
|
color: {{itemTitleColor}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if itemFontSize %}
|
||
|
|
html {
|
||
|
|
font-size: {{itemFontSize}}px !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if fontFamily %}
|
||
|
|
.title {
|
||
|
|
font-family: {{fontFamily}} !important;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if copyright %}
|
||
|
|
.copyright {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.copyright span {
|
||
|
|
position: relative;
|
||
|
|
font-size: 30px;
|
||
|
|
line-height: 0;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
}
|
||
|
|
.js-marquee .copyright {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
{% endif %}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<onTemplateRender><![CDATA[
|
||
|
|
// id: The id of the widget
|
||
|
|
// target: The target element to render
|
||
|
|
// items: The items to render
|
||
|
|
// properties: The properties for the widget
|
||
|
|
// -------------------------------------------
|
||
|
|
// No data message
|
||
|
|
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
|
||
|
|
$(target).find('#content').append(properties.noDataMessage);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add copyright if we have at least one item
|
||
|
|
// and copyright is not already added
|
||
|
|
if (
|
||
|
|
properties.copyright &&
|
||
|
|
$(target).find('#content .article').length > 0 &&
|
||
|
|
$(target).find('#content .copyright').length <= 0
|
||
|
|
) {
|
||
|
|
$(target).find('#content').append(
|
||
|
|
$('<div class="copyright"><span>' + properties.copyright + '</span></div>')
|
||
|
|
);
|
||
|
|
|
||
|
|
// Increase numItems to include the copyright
|
||
|
|
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, #content .separator'));
|
||
|
|
]]></onTemplateRender>
|
||
|
|
<onTemplateVisible><![CDATA[
|
||
|
|
// Start effects for this template
|
||
|
|
$(target).xiboLayoutAnimate(properties);
|
||
|
|
]]></onTemplateVisible>
|
||
|
|
<assets>
|
||
|
|
<asset id="article_title_only" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/article/title-only.png" />
|
||
|
|
</assets>
|
||
|
|
</template>
|
||
|
|
<template>
|
||
|
|
<id>article_marquee</id>
|
||
|
|
<type>static</type>
|
||
|
|
<dataType>article</dataType>
|
||
|
|
<title>Articles shown in a marquee</title>
|
||
|
|
<startWidth>1200</startWidth>
|
||
|
|
<startHeight>80</startHeight>
|
||
|
|
<properties>
|
||
|
|
<property id="selectedTags" type="tickerTagSelector">
|
||
|
|
<title>Selected Tags</title>
|
||
|
|
<helpText>Select tags to be displayed.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="effect" type="effectSelector" variant="showAll">
|
||
|
|
<title>Effect</title>
|
||
|
|
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
||
|
|
<default>marqueeLeft</default>
|
||
|
|
</property>
|
||
|
|
<property id="speed" type="number">
|
||
|
|
<title>Speed</title>
|
||
|
|
<helpText>Marquee Speed in a low to high scale (normal = 1)</helpText>
|
||
|
|
<default>1</default>
|
||
|
|
</property>
|
||
|
|
<property id="dateFormat" type="text" variant="dateFormat">
|
||
|
|
<title>Date Format</title>
|
||
|
|
<helpText>The format to apply to all dates returned by the Widget.</helpText>
|
||
|
|
<default>#DATE_FORMAT#</default>
|
||
|
|
</property>
|
||
|
|
<property id="gapTags" type="number">
|
||
|
|
<title>Gap between tags</title>
|
||
|
|
<helpText>Value (in pixels) to set a gap between each item's tags.</helpText>
|
||
|
|
<default>6</default>
|
||
|
|
</property>
|
||
|
|
<property id="gapItems" type="number">
|
||
|
|
<title>Gap between items</title>
|
||
|
|
<helpText>Value (in pixels) to set a gap between each item.</helpText>
|
||
|
|
<default>6</default>
|
||
|
|
</property>
|
||
|
|
<property id="backgroundColor" type="color">
|
||
|
|
<title>Background Colour</title>
|
||
|
|
<helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="textDirection" type="dropdown" mode="single">
|
||
|
|
<title>Text direction</title>
|
||
|
|
<helpText>Which direction does the text in the feed use?</helpText>
|
||
|
|
<default>ltr</default>
|
||
|
|
<options>
|
||
|
|
<option name="ltr">Left to Right (LTR)</option>
|
||
|
|
<option name="rtl">Right to Left (RTL)</option>
|
||
|
|
</options>
|
||
|
|
</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: 16px;">/</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="copyright" type="text">
|
||
|
|
<title>Copyright</title>
|
||
|
|
<helpText>Copyright information to display as the last item in this feed.</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="copyrightFontFamily" type="fontSelector">
|
||
|
|
<title>Copyright Font Family</title>
|
||
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="copyright" type="neq"></condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="copyrightFontColor" type="color">
|
||
|
|
<title>Copyright Font Colour</title>
|
||
|
|
<default></default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="copyright" type="neq"></condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="copyrightFontSize" type="number">
|
||
|
|
<title>Copyright Font Size</title>
|
||
|
|
<default></default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="copyright" type="neq"></condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="copyrightBold" type="checkbox">
|
||
|
|
<title>Bold</title>
|
||
|
|
<helpText>Should the copyright text be bold?</helpText>
|
||
|
|
<default>0</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="copyright" type="neq"></condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="copyrightItalics" type="checkbox">
|
||
|
|
<title>Italics</title>
|
||
|
|
<helpText>Should the copyright text be italicised?</helpText>
|
||
|
|
<default>0</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="copyright" type="neq"></condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="copyrightUnderline" type="checkbox">
|
||
|
|
<title>Underline</title>
|
||
|
|
<helpText>Should the copyright text be underlined?</helpText>
|
||
|
|
<default>0</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="copyright" type="neq"></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>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<stencil>
|
||
|
|
<twig><![CDATA[
|
||
|
|
{% if javaScript %}<script type="text/javascript">{{javaScript|raw}}</script>{% endif %}
|
||
|
|
]]></twig>
|
||
|
|
<style><![CDATA[
|
||
|
|
{% if textDirection == "rtl" %}#content { direction: rtl; }{% endif %}
|
||
|
|
{% if backgroundColor %}body { background-color: {{backgroundColor}} !important; }{% endif %}
|
||
|
|
{% if (effect == "marqueeLeft") or (effect == "marqueeRight") %}
|
||
|
|
{% if gapTags %}.marquee-item { margin-right: {{gapTags}}px; }{% endif %}
|
||
|
|
{% if gapItems %}.item.text-render-item, .separator { margin-right: {{gapItems}}px; }{% endif %}
|
||
|
|
.is-media-item { display: inline-block; }
|
||
|
|
.marquee-item { vertical-align: middle; }
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
{% if (effect == "marqueeUp") or (effect == "marqueeDown") %}
|
||
|
|
{% if gapTags %}.marquee-item { margin-bottom: {{gapTags}}px; }{% endif %}
|
||
|
|
{% if gapItems %}.item.text-render-item, .separator { margin-bottom: {{gapItems}}px; }{% endif %}
|
||
|
|
.marquee-item { display: block; }
|
||
|
|
{% endif %}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<onTemplateRender><![CDATA[
|
||
|
|
// id: The id of the widget
|
||
|
|
// target: The target element to render
|
||
|
|
// items: The items to render
|
||
|
|
// properties: The properties for the widget
|
||
|
|
// -------------------------------------------
|
||
|
|
|
||
|
|
// Generate template from chosen fields
|
||
|
|
var selectedTags = (properties.selectedTags != null && properties.selectedTags != '') ? JSON.parse(properties.selectedTags) : [];
|
||
|
|
|
||
|
|
properties.template = '';
|
||
|
|
|
||
|
|
for (var tag in selectedTags) {
|
||
|
|
var isImage = (selectedTags[tag]['tagType'] === 'image');
|
||
|
|
|
||
|
|
properties.template += '<span class="marquee-item marquee-' + tag;
|
||
|
|
|
||
|
|
if (isImage) {
|
||
|
|
properties.template += ' is-media-item';
|
||
|
|
}
|
||
|
|
|
||
|
|
properties.template += '" style="';
|
||
|
|
|
||
|
|
for (var style in selectedTags[tag]) {
|
||
|
|
if (style === 'fontSize' && selectedTags[tag][style]) {
|
||
|
|
properties.template += 'font-size:' + selectedTags[tag][style] + 'px;';
|
||
|
|
}
|
||
|
|
if (style === 'fontColor' && selectedTags[tag][style]) {
|
||
|
|
properties.template += 'color:' + selectedTags[tag][style] + ';';
|
||
|
|
}
|
||
|
|
if (style === 'fontFamily' && selectedTags[tag][style]) {
|
||
|
|
properties.template += 'font-family:' + selectedTags[tag][style] + ';';
|
||
|
|
}
|
||
|
|
if (style === 'bold' && selectedTags[tag][style]) {
|
||
|
|
properties.template += 'font-weight: bold;';
|
||
|
|
}
|
||
|
|
if (style === 'italics' && selectedTags[tag][style]) {
|
||
|
|
properties.template += 'font-style: italic;';
|
||
|
|
}
|
||
|
|
if (style === 'underline' && selectedTags[tag][style]) {
|
||
|
|
properties.template += 'text-decoration: underline;';
|
||
|
|
}
|
||
|
|
if (style === 'width' && selectedTags[tag][style]) {
|
||
|
|
properties.template += 'width:' + selectedTags[tag][style] + 'px;';
|
||
|
|
}
|
||
|
|
if (style === 'height' && selectedTags[tag][style]) {
|
||
|
|
properties.template += 'height:' + selectedTags[tag][style] + 'px;';
|
||
|
|
}
|
||
|
|
if (style === 'opacity' && selectedTags[tag][style]) {
|
||
|
|
properties.template += 'opacity:' + selectedTags[tag][style] + ';';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isImage) {
|
||
|
|
properties.template += '"><img style="width: 100%; height: 100%;" src="[' + tag + ']" /></span>';
|
||
|
|
} else {
|
||
|
|
properties.template += '">[' + tag + ']</span>';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (items.length > 0) {
|
||
|
|
items = $(items).xiboSubstitutesParser(properties.template, properties.dateFormat, ['date', 'publishedDate'], {
|
||
|
|
description: 'summary',
|
||
|
|
copyright: 'author',
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// No data message
|
||
|
|
if (items.length <= 0 && properties.noDataMessage && properties.noDataMessage !== '') {
|
||
|
|
// Add message to the target content
|
||
|
|
$(target).find('#content').after(
|
||
|
|
$('<div>')
|
||
|
|
.addClass('no-data-message')
|
||
|
|
.append(properties.noDataMessage)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Copyright
|
||
|
|
if (properties.copyright) {
|
||
|
|
var copyrightTemplate = '<span class="marquee-item marquee-copyright" style="';
|
||
|
|
|
||
|
|
if (properties.copyrightFontFamily) {
|
||
|
|
copyrightTemplate += 'font-family:' + properties.copyrightFontFamily + ';';
|
||
|
|
}
|
||
|
|
if (properties.copyrightFontColor) {
|
||
|
|
copyrightTemplate += 'color:' + properties.copyrightFontColor + ';';
|
||
|
|
}
|
||
|
|
if (properties.copyrightFontSize) {
|
||
|
|
copyrightTemplate += 'font-size:' + properties.copyrightFontSize + 'px;';
|
||
|
|
}
|
||
|
|
if (properties.copyrightBold) {
|
||
|
|
copyrightTemplate += 'font-weight: bold;';
|
||
|
|
}
|
||
|
|
if (properties.copyrightItalics) {
|
||
|
|
copyrightTemplate += 'font-style: italic;';
|
||
|
|
}
|
||
|
|
if (properties.copyrightUnderline) {
|
||
|
|
copyrightTemplate += 'text-decoration: underline;';
|
||
|
|
}
|
||
|
|
|
||
|
|
copyrightTemplate += '">' + properties.copyright + '</span>';
|
||
|
|
|
||
|
|
items.push(copyrightTemplate);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Clear container
|
||
|
|
$(target).find('#content').empty();
|
||
|
|
|
||
|
|
// Add items to container
|
||
|
|
for (var index = 0; index < items.length; index++) {
|
||
|
|
var $newItem = $('<div>').addClass('item').html(items[index]);
|
||
|
|
$(target).find('#content').append($newItem);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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('.item').after($separator);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Render
|
||
|
|
$(target).xiboLayoutScaler(properties);
|
||
|
|
$(target).xiboTextRender(properties, $(target).find('#content > *'));
|
||
|
|
$(target).find('img').xiboImageRender(properties);
|
||
|
|
]]></onTemplateRender>
|
||
|
|
<onTemplateVisible><![CDATA[
|
||
|
|
// Start effects for this template
|
||
|
|
$(target).xiboLayoutAnimate(properties);
|
||
|
|
]]></onTemplateVisible>
|
||
|
|
</template>
|
||
|
|
</templates>
|