3085 lines
102 KiB
XML
3085 lines
102 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>social_media_custom_html</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<showIn>none</showIn>
|
|
<properties>
|
|
<property id="customTemplate" type="hidden">
|
|
<default>1</default>
|
|
</property>
|
|
<property id="moduleType" type="hidden">
|
|
<default>social-media</default>
|
|
</property>
|
|
<property id="widgetDesignWidth" type="number">
|
|
<title>Original Width</title>
|
|
<helpText>This is the intended width of the template and is used to scale the Widget within its region when the template is applied.</helpText>
|
|
</property>
|
|
<property id="widgetDesignHeight" type="number">
|
|
<title>Original Height</title>
|
|
<helpText>This is the intended height of the template and is used to scale the Widget within its region when the template is applied.</helpText>
|
|
</property>
|
|
<property id="widgetDesignGap" type="number">
|
|
<title>Original Padding</title>
|
|
<helpText>This is the intended padding of the template and is used to position the Widget within its region when the template is applied.</helpText>
|
|
</property>
|
|
<property id="template" type="code" allowLibraryRefs="true" parseTranslations="true" variant="html">
|
|
<title>Main Template</title>
|
|
</property>
|
|
<property id="styleSheet" 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="resultContent" type="dropdown" mode="single">
|
|
<default>1</default>
|
|
<title>Content Type</title>
|
|
<helpText>This is the intended tweet content type.</helpText>
|
|
<options>
|
|
<option name="0">All Posts</option>
|
|
<option name="1">Posts with text only content</option>
|
|
<option name="2">Posts with text and image content</option>
|
|
</options>
|
|
</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="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<twig><![CDATA[
|
|
{% if javaScript %}<script type="text/javascript">{{javaScript|raw}}</script>{% endif %}
|
|
|
|
<div class="item-template" style="display: none;">
|
|
{{template|raw}}
|
|
</div>
|
|
|
|
<div class="twitter-white-logo" data-url="[[assetAlias=providerLogoWhite]]" style="display: none;">
|
|
<div class="twitter-blue-logo" data-url="[[assetAlias=providerLogo]]" style="display: none;">
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
/* Legacy properties from bootstrap */
|
|
.social-media-item {
|
|
float: left;
|
|
}
|
|
|
|
.text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.container {
|
|
padding-right: 15px;
|
|
padding-left: 15px;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
*, :after, :before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.container:after, .container:before {
|
|
clear: both;
|
|
display: table;
|
|
content: " ";
|
|
}
|
|
|
|
body {
|
|
font-size: 14px;
|
|
}
|
|
|
|
{{styleSheet|raw}}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .social-media-item'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="fulltime-np" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/fulltime-np.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_1</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 1 - text, profile image</title>
|
|
<thumbnail>fulltime-np</thumbnail>
|
|
<startWidth>400</startWidth>
|
|
<startHeight>500</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<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="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postBackground" type="color">
|
|
<title>Post Background Colour</title>
|
|
<helpText>The colour of the post background</helpText>
|
|
<default>#ecf0f1</default>
|
|
</property>
|
|
<property id="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#333</default>
|
|
</property>
|
|
<property id="postHeaderTextColor" type="color">
|
|
<title>Post Header Text Colour</title>
|
|
<helpText>The colour of the post header text</helpText>
|
|
<default>#95a5a6</default>
|
|
</property>
|
|
<property id="profileBorderColor" type="color">
|
|
<title>Profile Border Colour</title>
|
|
<helpText>The colour of the profile border</helpText>
|
|
<default>#ecf0f1</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">1000</width>
|
|
<height id="height">200</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">24</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="social-container">
|
|
<div class="profileimage">
|
|
<img src="{{userProfileImage}}"/>
|
|
</div>
|
|
<div class="message-container">
|
|
<div class="message">
|
|
<div class="user"><span>{{user}}</span></div>
|
|
<div class="date"><span>{{date}}</span></div>
|
|
<div class="social"><span>{{text}}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.item {
|
|
float: left;
|
|
}
|
|
|
|
.social {
|
|
height: 120px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container {
|
|
width: 1000px !important;
|
|
height: 200px !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.social-container {
|
|
font-size: 24px;
|
|
line-height: 1.25;
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: lucida sans unicode, lucida grande, sans-serif;
|
|
{% endif %}
|
|
position: relative;
|
|
top: 8px;
|
|
left: 8px;
|
|
width: calc(100% - 16px);
|
|
height: calc(100% - 16px);
|
|
}
|
|
|
|
div.profileimage {
|
|
width: 100px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
div.profileimage img {
|
|
width: 90px;
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-ms-border-radius: 50%;
|
|
-o-border-radius: 50%;
|
|
border-radius: 50%;
|
|
border: 5px solid {{profileBorderColor}};
|
|
position: relative;
|
|
}
|
|
|
|
div.message-container {
|
|
width: 820px;
|
|
height: 100%;
|
|
padding-left: 20px;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
color: {{postTextColor}};
|
|
}
|
|
|
|
.message-container .user {
|
|
height: 30px;
|
|
font-weight: 700;
|
|
display: inline-block;
|
|
color: {{postHeaderTextColor}};
|
|
padding: 5px;
|
|
}
|
|
|
|
.message-container .date {
|
|
padding: 5px;
|
|
float: right;
|
|
height: 30px;
|
|
}
|
|
|
|
.message {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: {{postBackground}};
|
|
position: relative;
|
|
-webkit-border-radius: 8px;
|
|
-moz-border-radius: 8px;
|
|
-ms-border-radius: 8px;
|
|
-o-border-radius: 8px;
|
|
border-radius: 8px;
|
|
text-align: left;
|
|
display: inline-block;
|
|
max-height: 180px;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
if (properties.dateFormat) {
|
|
$(target).find('.date > span').each((_idx, el)=> {
|
|
$(el).html(moment($(el).html()).format(properties.dateFormat));
|
|
});
|
|
}
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="fulltime-np" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/fulltime-np.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_2</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 2 - text, profile image, photo</title>
|
|
<thumbnail>fulltime</thumbnail>
|
|
<startWidth>1200</startWidth>
|
|
<startHeight>300</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<default>2</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="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postBackground" type="color">
|
|
<title>Post Background Colour</title>
|
|
<helpText>The colour of the post background</helpText>
|
|
<default>#ecf0f1</default>
|
|
</property>
|
|
<property id="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#333</default>
|
|
</property>
|
|
<property id="postHeaderTextColor" type="color">
|
|
<title>Post Header Text Colour</title>
|
|
<helpText>The colour of the post header text</helpText>
|
|
<default>#95a5a6</default>
|
|
</property>
|
|
<property id="profileBorderColor" type="color">
|
|
<title>Profile Border Colour</title>
|
|
<helpText>The colour of the profile border</helpText>
|
|
<default>#ecf0f1</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">1000</width>
|
|
<height id="height">900</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">24</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="social-container">
|
|
<div class="profileimage">
|
|
<img src="{{userProfileImage}}"/>
|
|
</div>
|
|
<div class="message-container">
|
|
<div class="message">
|
|
<div class="user"><span>{{user}}</span></div>
|
|
<div class="date"><span>{{date}}</span></div>
|
|
<div class="social"><span>{{text}}</span></div>
|
|
<div class="photo">
|
|
<img src="{{photo}}"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.item {
|
|
float: left;
|
|
}
|
|
|
|
.social {
|
|
padding: 10px;
|
|
}
|
|
|
|
.main-container {
|
|
width: 1000px !important;
|
|
height: 900px !important;
|
|
display: inline-block;
|
|
font-size: 25px;
|
|
line-height: 1.3;
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: lucida sans unicode, lucida grande, sans-serif;
|
|
{% endif %}
|
|
}
|
|
|
|
.social-container {
|
|
position: relative;
|
|
top: 8px;
|
|
left: 8px;
|
|
width: calc(100% - 16px);
|
|
height: calc(100% - 16px);
|
|
}
|
|
|
|
div.profileimage {
|
|
width: 110px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
div.profileimage img {
|
|
width: 100px;
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
-ms-border-radius: 50%;
|
|
-o-border-radius: 50%;
|
|
border-radius: 50%;
|
|
border: 5px solid {{profileBorderColor}};
|
|
position: relative;
|
|
}
|
|
|
|
div.message-container {
|
|
width: 800px;
|
|
height: inherit;
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 20px;
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
color: {{postTextColor}};
|
|
}
|
|
|
|
.message-container .user {
|
|
height: 30px;
|
|
font-weight: 700;
|
|
display: inline-block;
|
|
margin-bottom: .2em;
|
|
color: {{postHeaderTextColor}};
|
|
padding: 10px;
|
|
}
|
|
|
|
.message-container .date {
|
|
padding: 10px;
|
|
float: right;
|
|
height: 30px;
|
|
}
|
|
|
|
.message-container .photo {
|
|
text-align: center;
|
|
height: auto;
|
|
max-height: 640px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.message-container .photo img {
|
|
width: 100%;
|
|
height: auto !important;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.message {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: {{postBackground}};
|
|
position: relative;
|
|
-webkit-border-radius: 8px;
|
|
-moz-border-radius: 8px;
|
|
-ms-border-radius: 8px;
|
|
-o-border-radius: 8px;
|
|
border-radius: 8px;
|
|
text-align: left;
|
|
display: inline-block;
|
|
max-height: 880px;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
if (properties.dateFormat) {
|
|
$(target).find('.date > span').each((_idx, el)=> {
|
|
$(el).html(moment($(el).html()).format(properties.dateFormat));
|
|
});
|
|
}
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="fulltime" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/fulltime.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_3</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 3 - text</title>
|
|
<thumbnail>textonly</thumbnail>
|
|
<startWidth>400</startWidth>
|
|
<startHeight>500</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<default>1</default>
|
|
</property>
|
|
<property id="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#333</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">600</width>
|
|
<height id="height">150</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">12</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="social-container">
|
|
<p>
|
|
<span>{{text}}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.main-container {
|
|
width: 600px !important;
|
|
height: 150px !important;
|
|
display: inline-block;
|
|
color: {{postTextColor}};
|
|
}
|
|
|
|
.social-container {
|
|
font-size: 20px;
|
|
line-height: 1.2;
|
|
max-height: 150px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.social-container > p {
|
|
margin: 10px;
|
|
}
|
|
|
|
.social-container > p > span {
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: lucida sans unicode, lucida grande, sans-serif;
|
|
{% endif %}
|
|
}
|
|
|
|
.item {
|
|
float: left;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="textonly" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/textonly.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_4</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 4 - text, profile image</title>
|
|
<thumbnail>profileleft</thumbnail>
|
|
<startWidth>400</startWidth>
|
|
<startHeight>500</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<default>1</default>
|
|
</property>
|
|
<property id="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#333</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">800</width>
|
|
<height id="height">100</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">12</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="social-container">
|
|
<div class="profilepic vcenter"><img src="{{userProfileImageBigger}}"/></div>
|
|
<div class="text vcenter">{{text}}</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.main-container {
|
|
width: 800px !important;
|
|
height: 100px !important;
|
|
display: inline-block;
|
|
color: {{postTextColor}};
|
|
}
|
|
|
|
.social-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 19px;
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: lucida sans unicode, lucida grande, sans-serif;
|
|
{% endif %}
|
|
line-height: 1.1;
|
|
display: table;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.item {
|
|
float: left;
|
|
}
|
|
|
|
.profilepic {
|
|
width: 10%;
|
|
}
|
|
|
|
.social {
|
|
width: 90%;
|
|
}
|
|
|
|
.vcenter {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
float: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vcenter > img {
|
|
width: calc(100% - 16px);
|
|
padding: 8px;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="profileleft" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/profileleft.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_5</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 5 - text, profile image</title>
|
|
<thumbnail>profileright</thumbnail>
|
|
<startWidth>400</startWidth>
|
|
<startHeight>500</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<default>1</default>
|
|
</property>
|
|
<property id="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#333</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">800</width>
|
|
<height id="height">100</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">12</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="social-container">
|
|
<div class="text vcenter">{{text}}</div>
|
|
<div class="profilepic vcenter"><img src="{{userProfileImage}}"/></div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.main-container {
|
|
width: 800px !important;
|
|
height: 100px !important;
|
|
display: inline-block;
|
|
color: {{postTextColor}};
|
|
}
|
|
|
|
.social-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 19px;
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: lucida sans unicode, lucida grande, sans-serif;
|
|
{% endif %}
|
|
line-height: 1.1;
|
|
display: table;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.item {
|
|
float: left;
|
|
}
|
|
|
|
.profilepic {
|
|
width: 10%;
|
|
}
|
|
|
|
.social {
|
|
width: 90%;
|
|
}
|
|
|
|
.vcenter {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
float: none;
|
|
overflow: hidden;
|
|
text-align: right;
|
|
}
|
|
|
|
.vcenter > img {
|
|
width: calc(100% - 16px);
|
|
padding: 8px;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="profileright" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/profileright.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_6</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 6 - text, profile image</title>
|
|
<thumbnail>twitter1</thumbnail>
|
|
<startWidth>300</startWidth>
|
|
<startHeight>550</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<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="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postBackground" type="color">
|
|
<title>Post Background Colour</title>
|
|
<helpText>The colour of the post background</helpText>
|
|
<default>rgba(255, 255, 255, 0.6)</default>
|
|
</property>
|
|
<property id="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#434343</default>
|
|
</property>
|
|
<property id="dateTextColor" type="color">
|
|
<title>Date Text Colour</title>
|
|
<helpText>The colour of the date text</helpText>
|
|
<default>#6e6e6e</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">960</width>
|
|
<height id="height">350</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">24</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="social-container">
|
|
<div class="social-col col-left">
|
|
<div class="pic-container center-block">
|
|
<img src="{{userProfileImage}}"/>
|
|
</div>
|
|
</div>
|
|
<div class="social-col col-right">
|
|
<div class="social-col main-text">{{text}}</div>
|
|
<div class="social-col social-date">{{date}}</div>
|
|
<div class="social-col social-location">{{location}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.item {
|
|
float: left;
|
|
}
|
|
|
|
body {
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
{% endif %}
|
|
line-height: 1;
|
|
}
|
|
|
|
body {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.pic-container {
|
|
width: 270px;
|
|
height: 270px;
|
|
overflow: hidden;
|
|
padding: 32px;
|
|
}
|
|
|
|
.pic-container img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
#content {
|
|
font-size: 0;
|
|
}
|
|
|
|
.container {
|
|
width: 960px !important;
|
|
height: 350px !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.social-container {
|
|
border: 1px solid #eee;
|
|
background-color: {{postBackground}};
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.main-text {
|
|
font-size: 28px;
|
|
padding: 42px 16px 8px 0px;
|
|
line-height: 120%;
|
|
color: {{postTextColor}};
|
|
overflow: hidden;
|
|
max-height: 220px;
|
|
width: 100%;
|
|
}
|
|
|
|
.social-date, .social-location {
|
|
margin-top: 20px;
|
|
margin-right: 8px;
|
|
font-size: 17px;
|
|
color: {{postTextColor}};
|
|
font-weight: bold;
|
|
}
|
|
|
|
.social-date {
|
|
color: {{dateTextColor}};
|
|
}
|
|
|
|
.col-left {
|
|
width: 334px;
|
|
}
|
|
|
|
.col-right {
|
|
width: calc(100% - 334px);
|
|
}
|
|
|
|
.social-col {
|
|
float: left;
|
|
position: relative;
|
|
min-height: 1px;
|
|
}
|
|
|
|
.social-col.user {
|
|
width: fit-content;
|
|
overflow-y: hidden;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
if (properties.dateFormat) {
|
|
$(target).find('.social-date').each((_idx, el)=> {
|
|
$(el).html(moment($(el).html()).format(properties.dateFormat));
|
|
});
|
|
}
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="twitter1" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/twitter1.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_7</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 7 - text, profile image</title>
|
|
<thumbnail>twitter2</thumbnail>
|
|
<startWidth>200</startWidth>
|
|
<startHeight>700</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<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="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postBackground" type="color">
|
|
<title>Post Background Colour</title>
|
|
<helpText>The colour of the post background</helpText>
|
|
<default>rgba(255, 255, 255, 0.6)</default>
|
|
</property>
|
|
<property id="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#434343</default>
|
|
</property>
|
|
<property id="usernameTextColor" type="color">
|
|
<title>User Name Text Colour</title>
|
|
<helpText>The colour of the username text</helpText>
|
|
<default>#434343</default>
|
|
</property>
|
|
<property id="dateTextColor" type="color">
|
|
<title>Date Text Colour</title>
|
|
<helpText>The colour of the date text</helpText>
|
|
<default>#434343</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">600</width>
|
|
<height id="height">460</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">16</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="social-container">
|
|
<div class="social-col col-12">
|
|
<div class="social-col col-2 img-container">
|
|
<img src="{{userProfileImage}}"/>
|
|
</div>
|
|
<div class="social-col col-10">
|
|
<div class="name">{{user}}</div>
|
|
<div class="username">{{screenName}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="social-col col-12 ">
|
|
<div class="main-text">{{text}}</div>
|
|
<div class="social-col social-date">{{date}}</div>
|
|
<div class="social-col social-location text-right ">{{location}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.item {
|
|
float: left;
|
|
}
|
|
|
|
body {
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
{% endif %}
|
|
line-height: 1;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.main-container {
|
|
width: 600px !important;
|
|
height: 460px !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.social-container {
|
|
padding: 18px;
|
|
background-color: {{postBackground}};
|
|
background: {{postBackground}};
|
|
display: inline-block;
|
|
}
|
|
|
|
.img-container img {
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 3px solid #fff;
|
|
}
|
|
|
|
.main-text {
|
|
font-size: 26px;
|
|
padding-top: 12px;
|
|
overflow: hidden;
|
|
line-height: 130%;
|
|
color: {{postTextColor}};
|
|
height: 270px;
|
|
}
|
|
|
|
.social-date, .social-location {
|
|
margin-top: 30px;
|
|
font-size: 17px;
|
|
color: {{dateTextColor}};
|
|
font-weight: bold;
|
|
width: 50%;
|
|
}
|
|
|
|
.social-location {
|
|
text-align: right;
|
|
}
|
|
|
|
.name {
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
color: {{usernameTextColor}};
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.username {
|
|
margin-top: 5px;
|
|
color: {{usernameTextColor}};
|
|
}
|
|
|
|
.avatar {
|
|
border: 3px solid #fff;
|
|
}
|
|
|
|
.col-2 {
|
|
width: 16.66666667%;
|
|
}
|
|
|
|
.col-10 {
|
|
width: 83.33333333%;
|
|
}
|
|
|
|
.col-12 {
|
|
width: 100%;
|
|
}
|
|
|
|
.social-col {
|
|
float: left;
|
|
position: relative;
|
|
min-height: 1px;
|
|
}
|
|
|
|
.social-col.user {
|
|
width: fit-content;
|
|
overflow-y: hidden;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
if (properties.dateFormat) {
|
|
$(target).find('.social-date').each((_idx, el)=> {
|
|
$(el).html(moment($(el).html()).format(properties.dateFormat));
|
|
});
|
|
}
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="twitter2" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/twitter2.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_8</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 8 - text, profile image</title>
|
|
<thumbnail>twitter4</thumbnail>
|
|
<startWidth>250</startWidth>
|
|
<startHeight>750</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<default>1</default>
|
|
</property>
|
|
<property id="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postBackground" type="color">
|
|
<title>Post Background Colour</title>
|
|
<helpText>The colour of the post background</helpText>
|
|
<default>rgba(255, 255, 255, 0.6)</default>
|
|
</property>
|
|
<property id="postInnerBackground" type="color">
|
|
<title>Inner Post Background Colour</title>
|
|
<helpText>The colour of the inner post background</helpText>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property id="postInnerBorder" type="color">
|
|
<title>Inner Post Border Colour</title>
|
|
<helpText>The colour of the inner post border</helpText>
|
|
<default>#eee</default>
|
|
</property>
|
|
<property id="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#434343</default>
|
|
</property>
|
|
<property id="usernameTextColor" type="color">
|
|
<title>User Name Text Colour</title>
|
|
<helpText>The colour of the username text</helpText>
|
|
<default>#434343</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">340</width>
|
|
<height id="height">200</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">0</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="social-container">
|
|
<div class="mini-widget">
|
|
<div class="social-col col-2 img-container">
|
|
<img src="{{userProfileImage}}"/>
|
|
</div>
|
|
<div class="social-col col-10">
|
|
<div class="name">{{user}}</div>
|
|
<div class="username">{{screenName}}</div>
|
|
</div>
|
|
|
|
<div class="social-col col-12">
|
|
<div class="main-text">{{text}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.item {
|
|
float: left;
|
|
}
|
|
|
|
body {
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
{% endif %}
|
|
line-height: 1;
|
|
background-image: url('../clouds.jpg');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.img-container {
|
|
height: 50px;
|
|
}
|
|
|
|
.img-container img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.main-container {
|
|
width: 340px !important;
|
|
height: 200px !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.social-container {
|
|
padding: 10px;
|
|
background-color: {{postBackground}};
|
|
background: {{postBackground}};
|
|
}
|
|
|
|
.main-text {
|
|
font-size: 14px;
|
|
padding: 8px 0px;
|
|
line-height: 120%;
|
|
color: {{postTextColor}};
|
|
}
|
|
|
|
.mini-widget {
|
|
height: 162px;
|
|
padding: 8px;
|
|
border: 1px solid {{postInnerBorder}};
|
|
background-color: {{postInnerBackground}};
|
|
overflow: hidden;
|
|
}
|
|
|
|
.social-date, .social-location {
|
|
margin-top: 30px;
|
|
font-size: 17px;
|
|
color: {{postTextColor}};
|
|
font-weight: bold;
|
|
}
|
|
|
|
.name {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: {{usernameTextColor}};
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.username {
|
|
margin-top: 4px;
|
|
color: {{usernameTextColor}};
|
|
}
|
|
|
|
.avatar {
|
|
border: 3px solid #fff;
|
|
}
|
|
|
|
.col-2 {
|
|
width: 20%;
|
|
}
|
|
|
|
.col-10 {
|
|
width: 80%;
|
|
}
|
|
|
|
|
|
.col-12 {
|
|
width: 100%;
|
|
}
|
|
|
|
.social-col {
|
|
float: left;
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 1px;
|
|
}
|
|
|
|
.social-col.user {
|
|
width: fit-content;
|
|
overflow-y: hidden;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="twitter4" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/twitter4.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_9</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 9 - text, logo</title>
|
|
<thumbnail>twitter6np</thumbnail>
|
|
<startWidth>400</startWidth>
|
|
<startHeight>800</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<default>1</default>
|
|
</property>
|
|
<property id="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#434343</default>
|
|
</property>
|
|
<property id="postBackground" type="color">
|
|
<title>Post Background Colour</title>
|
|
<helpText>The colour of the post background</helpText>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property id="footerTextColor" type="color">
|
|
<title>Footer Text Colour</title>
|
|
<helpText>The colour of the footer text</helpText>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property id="footerBackground" type="color">
|
|
<title>Footer Background Colour</title>
|
|
<helpText>The colour of the footer background</helpText>
|
|
<default>#1da1f2</default>
|
|
</property>
|
|
<property id="borderColor" type="color">
|
|
<title>Border Colour</title>
|
|
<helpText>The colour of the border</helpText>
|
|
<default>#ddd</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">400</width>
|
|
<height id="height">160</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">8</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="post">
|
|
<div class="main-text">
|
|
<div>
|
|
{{text}}
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="social-col col-2 img-container">
|
|
<img class="center-block img-responsive" src="[[assetAlias=providerLogoWhite]]" />
|
|
</div>
|
|
<div class="social-col col-10 user">{{screenName}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.item {
|
|
float: left;
|
|
}
|
|
|
|
body {
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
{% endif %}
|
|
line-height: 1;
|
|
}
|
|
|
|
.main-container {
|
|
height: 160px !important;
|
|
width: 400px !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.post {
|
|
border: 1px solid {{borderColor}};
|
|
background: {{postBackground}};
|
|
width: 100%;
|
|
}
|
|
|
|
.main-text {
|
|
font-size: 14px;
|
|
padding: 10px 15px;
|
|
line-height: 130%;
|
|
color: {{postTextColor}};
|
|
height: 100px;
|
|
text-align: justify;
|
|
}
|
|
|
|
.main-text > div {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.footer {
|
|
background: {{footerBackground}};
|
|
width: 100%;
|
|
height: 38px;
|
|
}
|
|
|
|
.user {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: {{footerTextColor}};
|
|
margin-top: 9px;
|
|
letter-spacing: 1px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
|
|
.row {
|
|
margin-right: -15px;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
.col-2 {
|
|
width: 20%;
|
|
}
|
|
|
|
.col-10 {
|
|
width: 80%;
|
|
}
|
|
|
|
.col-12 {
|
|
width: 100%;
|
|
}
|
|
|
|
.img-responsive {
|
|
width: 100%;
|
|
height: 34px;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.social-col {
|
|
float: left;
|
|
min-height: 1px;
|
|
margin-left: 8px;
|
|
width: 38px;
|
|
}
|
|
|
|
.social-col.user {
|
|
width: fit-content;
|
|
overflow-y: hidden;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="twitter6np" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/twitter6np.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_10</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 10 - text, photo, logo</title>
|
|
<thumbnail>twitter6pl</thumbnail>
|
|
<startWidth>1100</startWidth>
|
|
<startHeight>250</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<default>2</default>
|
|
</property>
|
|
<property id="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#434343</default>
|
|
</property>
|
|
<property id="postBackground" type="color">
|
|
<title>Post Background Colour</title>
|
|
<helpText>The colour of the post background</helpText>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property id="footerTextColor" type="color">
|
|
<title>Footer Text Colour</title>
|
|
<helpText>The colour of the footer text</helpText>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property id="footerBackground" type="color">
|
|
<title>Footer Background Colour</title>
|
|
<helpText>The colour of the footer background</helpText>
|
|
<default>#1da1f2</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">400</width>
|
|
<height id="height">450</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">8</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="post">
|
|
<div class="mainpic">
|
|
<img src="{{photo}}"/>
|
|
</div>
|
|
<div class="main-text">{{text}}</div>
|
|
<div class="footer">
|
|
<div class="social-col col-2 center-block">
|
|
<img class="center-block img-responsive" src="[[assetAlias=providerLogoWhite]]" />
|
|
</div>
|
|
<div class="social-col col-10 user">{{screenName}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.item {
|
|
float: left;
|
|
}
|
|
|
|
body {
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
{% endif %}
|
|
line-height: 1;
|
|
}
|
|
|
|
.main-container {
|
|
width: 400px !important;
|
|
height: 450px !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.post {
|
|
width: 398px !important;
|
|
height: 448px !important;
|
|
border: 1px solid #ddd;
|
|
background: {{postBackground}};
|
|
}
|
|
|
|
.main-text {
|
|
font-size: 14px;
|
|
padding: 12px 14px;
|
|
line-height: 130%;
|
|
color: {{postTextColor}};
|
|
height: 88px;
|
|
text-align: justify;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mainpic {
|
|
height: 300px;
|
|
width: 400px;
|
|
}
|
|
|
|
.mainpic img {
|
|
display: block;
|
|
width: 400px;
|
|
clip: rect(0px, 398px, 299px, 0px);
|
|
position: absolute;
|
|
}
|
|
|
|
.footer {
|
|
background: {{footerBackground}};
|
|
width: 100%;
|
|
height: 37px;
|
|
}
|
|
|
|
.user {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: {{footerTextColor}};
|
|
margin-top: 9px;
|
|
letter-spacing: 1px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
|
|
.row {
|
|
margin-right: -15px;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
.col-2 {
|
|
width: 16.66666667%;
|
|
}
|
|
|
|
.col-10 {
|
|
width: 83.33333333%;
|
|
}
|
|
|
|
|
|
.col-12 {
|
|
width: 100%;
|
|
}
|
|
|
|
.social-col {
|
|
float: left;
|
|
position: relative;
|
|
min-height: 1px;
|
|
margin-left: 12px;
|
|
width: 38px;
|
|
}
|
|
|
|
.social-col.user {
|
|
width: fit-content;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.img-responsive {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="twitter6pl" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/twitter6pl.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_11</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 11 - text, logo</title>
|
|
<thumbnail>twitter7</thumbnail>
|
|
<startWidth>400</startWidth>
|
|
<startHeight>800</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<default>1</default>
|
|
</property>
|
|
<property id="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#434343</default>
|
|
</property>
|
|
<property id="postBackground" type="color">
|
|
<title>Post Background Colour</title>
|
|
<helpText>The colour of the post background</helpText>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property id="headerTextColor" type="color">
|
|
<title>Header Text Colour</title>
|
|
<helpText>The colour of the header text</helpText>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property id="headerBackground" type="color">
|
|
<title>Header Background Colour</title>
|
|
<helpText>The colour of the header background</helpText>
|
|
<default>#1da1f2</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">400</width>
|
|
<height id="height">160</height>
|
|
<gapBetweenHbs id="gapBetweenHbs">8</gapBetweenHbs>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="post">
|
|
<div class="header">
|
|
<div class="social-col user">{{user}}</div>
|
|
<div class="social-col pull-right icon">
|
|
<img class="img-responsive" src="[[assetAlias=providerLogoWhite]]" />
|
|
</div>
|
|
</div>
|
|
<div class="arrow_box"> </div>
|
|
<div class="main-text ">
|
|
<div class="text">{{text}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
.item {
|
|
float: left;
|
|
}
|
|
|
|
body {
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
{% endif %}
|
|
line-height: 1;
|
|
}
|
|
|
|
.main-container {
|
|
height: 160px !important;
|
|
width: 400px !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.post {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
float: left;
|
|
border: 1px solid #ddd;
|
|
background: {{postBackground}};
|
|
width: 100%;
|
|
}
|
|
|
|
.main-text {
|
|
font-size: 14px;
|
|
padding: 20px 10px 8px 10px;
|
|
line-height: 120%;
|
|
color: {{postTextColor}};
|
|
height: 88px;
|
|
}
|
|
|
|
.main-text .text {
|
|
overflow: hidden;
|
|
text-align: justify;
|
|
}
|
|
|
|
.header {
|
|
background: {{headerBackground}};
|
|
width: 100%;
|
|
height: 40px;
|
|
}
|
|
|
|
.user {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: {{headerTextColor}};
|
|
margin-top: 12px;
|
|
letter-spacing: 1px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.arrow_box {
|
|
height: 6px;
|
|
position: relative;
|
|
background: {{headerBackground}};
|
|
}
|
|
|
|
.arrow_box:after, .arrow_box:before {
|
|
top: 96%;
|
|
left: 50%;
|
|
border: solid;
|
|
content: " ";
|
|
height: 0;
|
|
width: 0;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.arrow_box:after {
|
|
border-color: rgba(136, 183, 213, 0);
|
|
border-top-color: {{headerBackground}};
|
|
border-width: 16px;
|
|
margin-left: -16px;
|
|
}
|
|
|
|
.arrow_box:before {
|
|
border-color: rgba(0, 0, 0, 0);
|
|
border-top-color: {{headerBackground}};
|
|
border-width: 16px;
|
|
margin-left: -16px;
|
|
}
|
|
|
|
.social-col {
|
|
float: left;
|
|
position: relative;
|
|
min-height: 1px;
|
|
height: 34px;
|
|
width: 320px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.social-col.icon {
|
|
text-align: right;
|
|
height: 38px;
|
|
width: 50px;
|
|
padding: 4px 0;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.img-responsive {
|
|
max-width: 100%;
|
|
height: 100%;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="twitter7" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/twitter7.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>social_media_static_12</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Template 12 - text, profile image, logo</title>
|
|
<thumbnail>twitter8</thumbnail>
|
|
<startWidth>1000</startWidth>
|
|
<startHeight>400</startHeight>
|
|
<properties>
|
|
<property id="resultContent" type="hidden">
|
|
<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="itemsPerPage" type="number">
|
|
<title>Items Per Page</title>
|
|
<helpText>The number of items to show per page (default = 5).</helpText>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="displayDirection" type="dropdown" mode="single">
|
|
<title>Items direction</title>
|
|
<helpText>The display order if there's more than one item.</helpText>
|
|
<default>0</default>
|
|
<options>
|
|
<option name="0"></option>
|
|
<option name="1">Horizontal</option>
|
|
<option name="2">Vertical</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="itemsPerPage" type="gt">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</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="postTextColor" type="color">
|
|
<title>Post Text Colour</title>
|
|
<helpText>The colour of the post text</helpText>
|
|
<default>#4d4d4d</default>
|
|
</property>
|
|
<property id="dateTextColor" type="color">
|
|
<title>Date Text Colour</title>
|
|
<helpText>The colour of the date text</helpText>
|
|
<default>#4d4d4d</default>
|
|
</property>
|
|
<property id="postBackground" type="color">
|
|
<title>Post Background Colour</title>
|
|
<helpText>The colour of the post background</helpText>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property id="headerTextColor" type="color">
|
|
<title>Header Text Colour</title>
|
|
<helpText>The colour of the header text</helpText>
|
|
<default>#fff</default>
|
|
</property>
|
|
<property id="headerBackground" type="color">
|
|
<title>Header Background Colour</title>
|
|
<helpText>The colour of the header background</helpText>
|
|
<default>#1da1f2</default>
|
|
</property>
|
|
<property id="profileBorderColor" type="color">
|
|
<title>Profile Border Colour</title>
|
|
<helpText>The colour of the profile border</helpText>
|
|
<default>#fff</default>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<width id="width">350</width>
|
|
<height id="height">650</height>
|
|
<hbs><![CDATA[
|
|
<div class="container main-container">
|
|
<div class="social">
|
|
<div class="header">
|
|
<div class="social-col image-div">
|
|
<img src="{{userProfileImage}}"/>
|
|
</div>
|
|
<div class="social-col user">{{user}}</div>
|
|
</div>
|
|
<div class="body">
|
|
<div class="main-text">{{text}}</div>
|
|
<div class="social-col date">{{date}}</div>
|
|
<div class="social-col logo"><img class="img-responsive" src="[[assetAlias=providerLogo]]" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
body {
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
{% endif %}
|
|
line-height: 1;
|
|
}
|
|
|
|
#content {
|
|
font-size: 0;
|
|
}
|
|
|
|
.container {
|
|
width: 350px !important;
|
|
height: 650px !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
.social-col {
|
|
float: left;
|
|
position: relative;
|
|
min-height: 1px;
|
|
}
|
|
|
|
.social {
|
|
overflow: hidden;
|
|
border: 1px solid #ddd;
|
|
width: 340px;
|
|
height: 640px;
|
|
margin: 5px;
|
|
}
|
|
|
|
.header {
|
|
font-size: 1rem;
|
|
background: {{headerBackground}};
|
|
width: 100%;
|
|
height: 110px;
|
|
}
|
|
|
|
.image-div {
|
|
overflow: hidden;
|
|
height: 100%;
|
|
width: 30%;
|
|
}
|
|
|
|
.user {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: {{headerTextColor}};
|
|
margin-top: 35px;
|
|
letter-spacing: 1px;
|
|
width: 64%;
|
|
padding: 3%;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.image-div img {
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
width: 70px;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
-webkit-transform: translate(-50%, -50%);
|
|
border: 3px solid {{profileBorderColor}};
|
|
}
|
|
|
|
.body {
|
|
background: {{postBackground}};
|
|
height: 530px;
|
|
position: relative;
|
|
}
|
|
|
|
.main-text {
|
|
font-size: 24px;
|
|
padding: 24px 16px;
|
|
line-height: 150%;
|
|
color: {{postTextColor}};
|
|
height: 450px;
|
|
}
|
|
|
|
.date {
|
|
width: 240px;
|
|
padding: 0 16px;
|
|
font-size: 14px;
|
|
color: {{dateTextColor}}
|
|
}
|
|
|
|
.logo {
|
|
width: 65px;
|
|
height: 65px;
|
|
text-align: center;
|
|
position: absolute;
|
|
bottom: 4px;
|
|
right: 4px;
|
|
}
|
|
|
|
.logo img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
if (properties.dateFormat) {
|
|
$(target).find('.date').each((_idx, el)=> {
|
|
$(el).html(moment($(el).html()).format(properties.dateFormat));
|
|
});
|
|
}
|
|
|
|
$(target).xiboLayoutScaler(properties);
|
|
$(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="twitter8" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/social-media/twitter8.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>metro_social</id>
|
|
<type>static</type>
|
|
<dataType>social-media</dataType>
|
|
<title>Metro Social</title>
|
|
<thumbnail>colors1</thumbnail>
|
|
<startWidth>1150</startWidth>
|
|
<startHeight>650</startHeight>
|
|
<propertyGroups>
|
|
<propertyGroup id="colors" expanded="true">
|
|
<title>Colors</title>
|
|
<helpText>Select colors to be randomly applied to the metro cells</helpText>
|
|
</propertyGroup>
|
|
</propertyGroups>
|
|
<properties>
|
|
<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="fontFamily" type="fontSelector">
|
|
<title>Font</title>
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
|
</property>
|
|
<property id="colorTemplateId" type="dropdown" mode="single">
|
|
<title>Colours Template</title>
|
|
<helpText>Select the template colours you would like to apply values to the colours below.</helpText>
|
|
<default>custom</default>
|
|
<options>
|
|
<option name="custom">Custom</option>
|
|
<option name="default" image="colors1" set="#99b433,#00a300,#ff0097,#9f00a7,#00aba9,#2b5797,#da532c,#b91d47">Colours 1 - Default</option>
|
|
<option name="full" image="colors2" set="#2364aa,#3da5d9,#73bfb8,#fec601,#ea7317,,,">Colours 2 - Full</option>
|
|
<option name="gray" image="colors3" set="#757575,#989898,#666666,#404040,,,,">Colours 3 - Gray Scale</option>
|
|
<option name="light" image="colors4" set="#fffd98,#bde4a7,#b3d2b2,#9fbbcc,#7a9cc6,,,">Colours 4 - Light</option>
|
|
<option name="soft" image="colors5" set="#aa7e7e,#94c88d,#a9a7d7,#dee29c,#e4c4df,,,">Colours 5 - Soft</option>
|
|
<option name="vivid" image="colors6" set="#fa7921,#fe9920,#b9a44c,#566e3d,#0c4767,,,">Colours 6 - Vivid</option>
|
|
</options>
|
|
</property>
|
|
<property id="color1" name="color" type="color" propertyGroupId="colors">
|
|
<title>Colour 1</title>
|
|
<dependsOn>colorTemplateId[0]</dependsOn>
|
|
</property>
|
|
<property id="color2" name="color" type="color" propertyGroupId="colors">
|
|
<title>Colour 2</title>
|
|
<dependsOn>colorTemplateId[1]</dependsOn>
|
|
</property>
|
|
<property id="color3" name="color" type="color" propertyGroupId="colors">
|
|
<title>Colour 3</title>
|
|
<dependsOn>colorTemplateId[2]</dependsOn>
|
|
</property>
|
|
<property id="color4" name="color" type="color" propertyGroupId="colors">
|
|
<title>Colour 4</title>
|
|
<dependsOn>colorTemplateId[3]</dependsOn>
|
|
</property>
|
|
<property id="color5" name="color" type="color" propertyGroupId="colors">
|
|
<title>Colour 5</title>
|
|
<dependsOn>colorTemplateId[4]</dependsOn>
|
|
</property>
|
|
<property id="color6" name="color" type="color" propertyGroupId="colors">
|
|
<title>Colour 6</title>
|
|
<dependsOn>colorTemplateId[5]</dependsOn>
|
|
</property>
|
|
<property id="color7" name="color" type="color" propertyGroupId="colors">
|
|
<title>Colour 7</title>
|
|
<dependsOn>colorTemplateId[6]</dependsOn>
|
|
</property>
|
|
<property id="color8" name="color" type="color" propertyGroupId="colors">
|
|
<title>Colour 8</title>
|
|
<dependsOn>colorTemplateId[7]</dependsOn>
|
|
</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) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="effect" type="neq">none</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="alignmentH" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this widget be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignmentV" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this widget be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="metro-cell-template" style="display: none;">
|
|
<div class="cell-[itemType] {{#if photo}}shadow darken-container{{/if}} cell" id="item-[itemId]" {{#if photo}}style="background-image: url({{photo}});"{{/if}}>
|
|
<div class="item-container {{#if photo}}shadow darken-container{{/if}}" {{#unless photo}}style="background-color: [Color];"{{/unless}}>
|
|
<div class="item-text">{{text}}</div>
|
|
<div class="userData">
|
|
<div class="post-profilePic">
|
|
<img class="img-responsive" src="{{userProfileImage}}" />
|
|
</div>
|
|
<div class="post-userData">
|
|
<div class="user">{{user}}</div>
|
|
<small>{{date}}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<twig><![CDATA[
|
|
<div class="metro-render-container"></div>
|
|
]]></twig>
|
|
<style><![CDATA[
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
{% if fontFamily %}
|
|
font-family: {{fontFamily}};
|
|
{% else %}
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
{% endif %}
|
|
line-height: 1;
|
|
margin: 0;
|
|
}
|
|
|
|
.metro-render-container {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.metro-render-container.orientation-landscape {
|
|
width: 1920px !important;
|
|
height: 1080px !important;
|
|
}
|
|
|
|
.metro-render-container.orientation-portrait {
|
|
width: 1080px !important;
|
|
height: 1920px !important;
|
|
}
|
|
|
|
.metro-render-container.orientation-landscape .row-1 {
|
|
height: 360px;
|
|
}
|
|
|
|
.metro-render-container.orientation-portrait .row-1 {
|
|
height: 320px;
|
|
}
|
|
|
|
.page {
|
|
float: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.metro-render-container.orientation-landscape .cell-1 {
|
|
width: 310px;
|
|
}
|
|
|
|
.metro-render-container.orientation-landscape .cell-2 {
|
|
width: 630px;
|
|
}
|
|
|
|
.metro-render-container.orientation-landscape .cell-3 {
|
|
width: 950px;
|
|
}
|
|
|
|
.metro-render-container.orientation-portrait .cell-1 {
|
|
width: 350px;
|
|
}
|
|
|
|
.metro-render-container.orientation-portrait .cell-2 {
|
|
width: 710px;
|
|
}
|
|
|
|
.metro-render-container.orientation-portrait .cell-3 {
|
|
width: 1070px;
|
|
}
|
|
|
|
.cell-1, .cell-2, .cell-3 {
|
|
height: inherit;
|
|
margin: 5px;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position-x: 50%;
|
|
background-position-y: 50%;
|
|
}
|
|
|
|
.item-container {
|
|
padding: 10px;
|
|
color: #fff;
|
|
}
|
|
|
|
.metro-render-container.orientation-landscape .item-container {
|
|
height: 350px;
|
|
}
|
|
|
|
.metro-render-container.orientation-portrait .item-container {
|
|
height: 310px;
|
|
}
|
|
|
|
.userData {
|
|
height: 50px;
|
|
}
|
|
|
|
.darken-container {
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.post-profilePic {
|
|
width: 20%;
|
|
float: left;
|
|
}
|
|
|
|
.post-profilePic img {
|
|
width: 48px;
|
|
}
|
|
|
|
.post-userData {
|
|
width: 80%;
|
|
float: left;
|
|
text-align: right;
|
|
}
|
|
|
|
.item-text {
|
|
padding: 8px 6px 12px 6px;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cell-1 .item-text {
|
|
line-height: 30px;
|
|
font-size: 25px;
|
|
}
|
|
|
|
.metro-render-container.orientation-landscape .cell-1 .item-text {
|
|
height: 280px;
|
|
}
|
|
|
|
.metro-render-container.orientation-portrait .cell-1 .item-text {
|
|
height: 240px;
|
|
}
|
|
|
|
.cell-2 .item-text {
|
|
line-height: 34px;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.metro-render-container.orientation-landscape .cell-2 .item-text {
|
|
height: 280px;
|
|
}
|
|
|
|
.metro-render-container.orientation-portrait .cell-2 .item-text {
|
|
height: 240px;
|
|
}
|
|
|
|
.cell-3 .item-text {
|
|
line-height: 38px;
|
|
font-size: 36px;
|
|
height: 280px;
|
|
}
|
|
|
|
.metro-render-container.orientation-landscape .cell-3 .item-text {
|
|
height: 280px;
|
|
}
|
|
|
|
.metro-render-container.orientation-portrait .cell-3 .item-text {
|
|
height: 240px;
|
|
}
|
|
|
|
.user {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.shadow {
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 3, 1);
|
|
}
|
|
|
|
.no-shadow {
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
small {
|
|
font-size: 70%;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Set widget design width and height based on the window orientation
|
|
var orientation = 'landscape';
|
|
if($(window).width() >= $(window).height()) {
|
|
properties.widgetDesignWidth = 1920;
|
|
properties.widgetDesignHeight = 1080;
|
|
} else {
|
|
properties.widgetDesignWidth = 1080;
|
|
properties.widgetDesignHeight = 1920;
|
|
orientation = 'portrait';
|
|
}
|
|
|
|
// Scale the layout
|
|
$(target).xiboLayoutScaler(properties);
|
|
|
|
// Get an array of items from the templates generated
|
|
var itemsHTML = $(target).find('.metro-cell-template').map(function(_k, el) {
|
|
if (properties.dateFormat) {
|
|
var date = $(el).find('.post-userData > small').html();
|
|
$(el).find('.post-userData > small').html(moment(date).format(properties.dateFormat));
|
|
}
|
|
|
|
return $(el).html();
|
|
});
|
|
|
|
// Get metro render container
|
|
var $metroRenderContainer = $(target).find('.metro-render-container');
|
|
|
|
// Mark container as landscape or portrait
|
|
$metroRenderContainer.removeClass('orientation-landscape orientation-portrait').
|
|
addClass('orientation-' + orientation);
|
|
|
|
// Get colours array
|
|
var colors = [];
|
|
|
|
for (var i = 1; i <= 8; i++) {
|
|
if (properties['color' + i] !== '') {
|
|
colors.push(properties['color' + i]);
|
|
}
|
|
}
|
|
|
|
// Render the items with metro render
|
|
$metroRenderContainer.xiboMetroRender(properties, itemsHTML, colors);
|
|
|
|
// Render the images
|
|
$metroRenderContainer.find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<onTemplateVisible><![CDATA[
|
|
// Start effects for this template
|
|
$(target).xiboLayoutAnimate(properties);
|
|
]]></onTemplateVisible>
|
|
<assets>
|
|
<asset id="colors1" type="path" mime="image/png" path="/modules/assets/metro-colors/colors1.png" cmsOnly="true"></asset>
|
|
<asset id="colors2" type="path" mime="image/png" path="/modules/assets/metro-colors/colors2.png" cmsOnly="true"></asset>
|
|
<asset id="colors3" type="path" mime="image/png" path="/modules/assets/metro-colors/colors3.png" cmsOnly="true"></asset>
|
|
<asset id="colors4" type="path" mime="image/png" path="/modules/assets/metro-colors/colors4.png" cmsOnly="true"></asset>
|
|
<asset id="colors5" type="path" mime="image/png" path="/modules/assets/metro-colors/colors5.png" cmsOnly="true"></asset>
|
|
<asset id="colors6" type="path" mime="image/png" path="/modules/assets/metro-colors/colors6.png" cmsOnly="true"></asset>
|
|
</assets>
|
|
</template>
|
|
</templates>
|