2029 lines
79 KiB
XML
2029 lines
79 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>text</id>
|
|
<title>Text</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<canRotate>true</canRotate>
|
|
<thumbnail>text-thumb</thumbnail>
|
|
<startWidth>200</startWidth>
|
|
<startHeight>100</startHeight>
|
|
<properties>
|
|
<property id="text" type="textArea">
|
|
<title>Text</title>
|
|
<default>Text</default>
|
|
</property>
|
|
<property id="fontFamily" type="fontSelector">
|
|
<title>Font Family</title>
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
|
</property>
|
|
<property id="fontColor" type="color">
|
|
<title>Font Colour</title>
|
|
<default>%THEME_COLOR%</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="fitToArea" type="checkbox">
|
|
<title>Fit to selection</title>
|
|
<playerCompatibility tizen=""></playerCompatibility>
|
|
<helpText>Fit to selected area instead of using the font size?</helpText>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="useGradient" type="checkbox">
|
|
<title>Use gradient for the text?</title>
|
|
<helpText>Gradients work well with most fonts. If you use a custom font please ensure you test the Layout on your player.</helpText>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="gradient" type="colorGradient">
|
|
<title>Gradient</title>
|
|
<default></default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="fontSize" type="number">
|
|
<title>Font Size</title>
|
|
<default>40</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="lineHeight" type="number">
|
|
<title>Line Height</title>
|
|
<default>1.2</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="bold" type="checkbox">
|
|
<title>Bold</title>
|
|
<helpText>Should the text be bold?</helpText>
|
|
<default>0</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="italics" type="checkbox">
|
|
<title>Italics</title>
|
|
<helpText>Should the text be italicised?</helpText>
|
|
<default>0</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="underline" type="checkbox">
|
|
<title>Underline</title>
|
|
<helpText>Should the text be underlined?</helpText>
|
|
<default>0</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="textWrap" type="checkbox">
|
|
<title>Text Wrap</title>
|
|
<helpText>Should the text wrap to the next line?</helpText>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="justify" type="checkbox">
|
|
<title>Justify</title>
|
|
<helpText>Should the text be justified?</helpText>
|
|
<default>0</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="textWrap" type="eq">1</condition>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="showOverflow" type="checkbox">
|
|
<title>Show Overflow</title>
|
|
<helpText>Should the widget overflow the region?</helpText>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="textShadow" type="checkbox">
|
|
<title>Text Shadow</title>
|
|
<default>0</default>
|
|
<helpText>Should the text have a shadow?</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="textShadowColor" type="color">
|
|
<title>Text Shadow Colour</title>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowX" type="number">
|
|
<title>Shadow X Offset</title>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowY" type="number">
|
|
<title>Shadow Y Offset</title>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowBlur" type="number">
|
|
<title>Shadow Blur</title>
|
|
<default>2</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="horizontalAlign" type="dropdown">
|
|
<title>Horizontal Align</title>
|
|
<default>center</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
<options>
|
|
<option name="flex-start">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="flex-end">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="verticalAlign" type="dropdown">
|
|
<title>Vertical Align</title>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="flex-start">Top</option>
|
|
<option name="center">Middle</option>
|
|
<option name="flex-end">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-text"
|
|
style="
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-box-align: start;
|
|
-webkit-align-items: {{#if verticalAlign}}{{verticalAlign}}{{else}}flex-start{{/if}};
|
|
align-items: {{#if verticalAlign}}{{verticalAlign}}{{else}}flex-start{{/if}};
|
|
{{#if fitToArea}}
|
|
white-space: nowrap;
|
|
{{else}}
|
|
{{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
|
|
{{#if showOverflow}}overflow: visible;{{else}}overflow: hidden;{{/if}}
|
|
{{#if horizontalAlign}}
|
|
justify-content: {{horizontalAlign}};
|
|
{{/if}}
|
|
{{#if justify}}
|
|
text-align: justify;
|
|
{{#eq horizontalAlign "flex-start"}}text-align-last: left;{{/eq}}
|
|
{{#eq horizontalAlign "center"}}text-align-last: center;{{/eq}}
|
|
{{#eq horizontalAlign "flex-end"}}text-align-last: right;{{/eq}}
|
|
{{else}}
|
|
{{#eq horizontalAlign "flex-start"}}text-align: left;{{/eq}}
|
|
{{#eq horizontalAlign "center"}}text-align: center;{{/eq}}
|
|
{{#eq horizontalAlign "flex-end"}}text-align: right;{{/eq}}
|
|
{{/if}}
|
|
{{/if}}
|
|
width: 100%; height: 100%;"
|
|
>
|
|
<div style="
|
|
width: 100%;
|
|
{{#if fontFamily}}font-family: {{fontFamily}};{{/if}}
|
|
{{#if useGradient}}
|
|
{{parseJSON "gb" gradient}}
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent !important;
|
|
color: transparent;
|
|
{{#eq gb.type 'linear'}}
|
|
background-image: linear-gradient({{gb.angle}}deg, {{gb.color1}}, {{gb.color2}});
|
|
{{else}}
|
|
background-image: radial-gradient(circle, {{gb.color1}}, {{gb.color2}});
|
|
{{/eq}}
|
|
{{else}}
|
|
{{#if bold}}font-weight: bold;{{/if}}
|
|
{{#if italics}}font-style: italic;{{/if}}
|
|
{{#if underline}}text-decoration: underline;{{/if}}
|
|
{{#if fontColor}}color: {{fontColor}};{{/if}}
|
|
{{#if textShadow}}text-shadow: {{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{textShadowColor}};{{/if}}
|
|
{{/if}}
|
|
{{#if lineHeight}}line-height: {{lineHeight}};{{/if}}
|
|
{{#if textWrap}}
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
{{#if justify}}
|
|
text-align: justify;
|
|
{{/if}}
|
|
{{else}}
|
|
white-space: nowrap;
|
|
{{/if}}
|
|
">{{#unless escapeHtml}}{{{text}}}{{else}}{{text}}{{/unless}}</div>
|
|
</div>
|
|
|
|
]]></hbs>
|
|
<onTemplateRender><![CDATA[
|
|
if(properties.fitToArea) {
|
|
// Set target for the text
|
|
properties.fitTarget = 'div';
|
|
|
|
var $selector = $(target).is('.global-elements-text') ?
|
|
$(target) : $(target).find('.global-elements-text');
|
|
|
|
// Scale text to container
|
|
$selector.xiboTextScaler(properties);
|
|
}
|
|
]]></onTemplateRender>
|
|
</stencil>
|
|
<assets>
|
|
<asset id="text-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/text.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>date</id>
|
|
<title>Date</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<showIn>none</showIn>
|
|
<canRotate>true</canRotate>
|
|
<thumbnail>date-thumb</thumbnail>
|
|
<startWidth>300</startWidth>
|
|
<startHeight>80</startHeight>
|
|
<properties>
|
|
<property id="date" type="date" format="d/m/Y H:i:s" variant="dateTime">
|
|
<title>Date</title>
|
|
<default></default>
|
|
</property>
|
|
<property id="dateFormat" type="text" variant="dateFormat">
|
|
<title>Date Format</title>
|
|
<default>d/m/Y H:i:s</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="fontFamily" type="fontSelector">
|
|
<title>Font Family</title>
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
|
</property>
|
|
<property id="fontColor" type="color">
|
|
<title>Font Colour</title>
|
|
<default>%THEME_COLOR%</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="fitToArea" type="checkbox">
|
|
<title>Fit to selection</title>
|
|
<playerCompatibility tizen=""></playerCompatibility>
|
|
<helpText>Fit to selected area instead of using the font size?</helpText>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="useGradient" type="checkbox">
|
|
<title>Use gradient for the text?</title>
|
|
<helpText>Gradients work well with most fonts. If you use a custom font please ensure you test the Layout on your player.</helpText>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="gradient" type="colorGradient">
|
|
<title>Gradient</title>
|
|
<default></default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="fontSize" type="number">
|
|
<title>Font Size</title>
|
|
<default>40</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="lineHeight" type="number">
|
|
<title>Line Height</title>
|
|
<default>1.2</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="bold" type="checkbox">
|
|
<title>Bold</title>
|
|
<helpText>Should the text be bold?</helpText>
|
|
<default>0</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="italics" type="checkbox">
|
|
<title>Italics</title>
|
|
<helpText>Should the text be italicised?</helpText>
|
|
<default>0</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="underline" type="checkbox">
|
|
<title>Underline</title>
|
|
<helpText>Should the text be underlined?</helpText>
|
|
<default>0</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="textWrap" type="checkbox">
|
|
<title>Text Wrap</title>
|
|
<helpText>Should the text wrap to the next line?</helpText>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="showOverflow" type="checkbox">
|
|
<title>Show Overflow</title>
|
|
<helpText>Should the widget overflow the region?</helpText>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="textShadow" type="checkbox">
|
|
<title>Text Shadow</title>
|
|
<default>0</default>
|
|
<helpText>Should the text have a shadow?</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="textShadowColor" type="color">
|
|
<title>Text Shadow Colour</title>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowX" type="number">
|
|
<title>Shadow X Offset</title>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowY" type="number">
|
|
<title>Shadow Y Offset</title>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowBlur" type="number">
|
|
<title>Shadow Blur</title>
|
|
<default>2</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="horizontalAlign" type="dropdown">
|
|
<title>Horizontal Align</title>
|
|
<default>center</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
<options>
|
|
<option name="flex-start">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="flex-end">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="verticalAlign" type="dropdown">
|
|
<title>Vertical Align</title>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="flex-start">Top</option>
|
|
<option name="center">Middle</option>
|
|
<option name="flex-end">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-date"
|
|
style="
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
{{#if verticalAlign}}align-items: {{verticalAlign}};{{/if}}
|
|
{{#if fitToArea}}
|
|
white-space: nowrap;
|
|
{{else}}
|
|
{{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
|
|
{{#if showOverflow}}overflow: visible;{{else}}overflow: hidden;{{/if}}
|
|
{{#if lineHeight}}line-height: {{lineHeight}};{{/if}}
|
|
{{#if horizontalAlign}}justify-content: {{horizontalAlign}};{{/if}} {{#if horizontalAlign}}
|
|
justify-content: {{horizontalAlign}};
|
|
{{/if}}
|
|
{{#eq horizontalAlign "flex-start"}}text-align: left;{{/eq}}
|
|
{{#eq horizontalAlign "center"}}text-align: center;{{/eq}}
|
|
{{#eq horizontalAlign "flex-end"}}text-align: right;{{/eq}}
|
|
{{/if}}
|
|
width: 100%; height: 100%;"
|
|
>
|
|
<div class="date" data-date="{{date}}"
|
|
style="
|
|
{{#if fontFamily}}font-family: {{fontFamily}};{{/if}}
|
|
{{#if useGradient}}
|
|
{{parseJSON "gb" gradient}}
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent !important;
|
|
color: transparent;
|
|
{{#eq gb.type 'linear'}}
|
|
background-image: linear-gradient({{gb.angle}}deg, {{gb.color1}}, {{gb.color2}});
|
|
{{else}}
|
|
background-image: radial-gradient(circle, {{gb.color1}}, {{gb.color2}});
|
|
{{/eq}}
|
|
{{else}}
|
|
{{#if bold}}font-weight: bold;{{/if}}
|
|
{{#if italics}}font-style: italic;{{/if}}
|
|
{{#if underline}}text-decoration: underline;{{/if}}
|
|
{{#if fontColor}}color: {{fontColor}};{{/if}}
|
|
{{#if textShadow}}text-shadow: {{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{textShadowColor}};{{/if}}
|
|
{{/if}}
|
|
{{#if textWrap}}white-space: pre-wrap;{{else}}white-space: nowrap;{{/if}}
|
|
">{{date}}</div>
|
|
</div>
|
|
]]></hbs>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Match all affected elements and get date div value
|
|
$(target).find('.date').each(function(_idx, dateEl){
|
|
var dateValue = $(dateEl).data('date');
|
|
|
|
if (String(dateValue).length === 0 || !dateValue) {
|
|
$(dateEl).html('');
|
|
return;
|
|
}
|
|
|
|
var globalDate = moment(dateValue);
|
|
|
|
// Check for lang config
|
|
if (properties.lang !== null && String(properties.lang).length > 0) {
|
|
globalDate.locale(properties.lang);
|
|
}
|
|
|
|
// Format the date with the dateFormat property
|
|
var formattedDate = globalDate.format(properties.dateFormat);
|
|
|
|
// Set the date div value to the formatted date
|
|
$(dateEl).html(formattedDate);
|
|
|
|
|
|
if (properties.fitToArea) {
|
|
// Set target for the text
|
|
properties.fitTarget = '.date';
|
|
|
|
var $selector = $(target).is('.global-elements-date') ?
|
|
$(target) : $(target).find('.global-elements-date');
|
|
|
|
// Scale text to container
|
|
$selector.xiboTextScaler(properties);
|
|
}
|
|
});
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="date-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/date.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>date_advanced</id>
|
|
<title>Date / Time</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<canRotate>true</canRotate>
|
|
<thumbnail>date-thumb</thumbnail>
|
|
<startWidth>380</startWidth>
|
|
<startHeight>80</startHeight>
|
|
<properties>
|
|
<property id="currentDate" type="checkbox">
|
|
<title>Current date?</title>
|
|
<helpText>Use the current date to be displayed.</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="offset" type="number">
|
|
<title>Offset</title>
|
|
<helpText>The offset in minutes that should be applied to the current date.</helpText>
|
|
<default></default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="currentDate" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="date" type="date" format="DD/MM/Y HH:mm:ss" variant="dateTime">
|
|
<title>Custom Date</title>
|
|
<helpText>Insert date to be displayed.</helpText>
|
|
<default></default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="currentDate" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="dateFormat" type="text" variant="dateFormat">
|
|
<title>Date Format</title>
|
|
<default>d/m/Y H:i:s</default>
|
|
</property>
|
|
<property id="lang" type="languageSelector" variant="momentLocales">
|
|
<title>Language</title>
|
|
<helpText>Select the language you would like to use.</helpText>
|
|
</property>
|
|
<property id="fontFamily" type="fontSelector">
|
|
<title>Font Family</title>
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
|
</property>
|
|
<property id="fontColor" type="color">
|
|
<title>Font Colour</title>
|
|
<default>%THEME_COLOR%</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="fitToArea" type="checkbox">
|
|
<title>Fit to selection</title>
|
|
<playerCompatibility tizen=""></playerCompatibility>
|
|
<helpText>Fit to selected area instead of using the font size?</helpText>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="useGradient" type="checkbox">
|
|
<title>Use gradient for the text?</title>
|
|
<helpText>Gradients work well with most fonts. If you use a custom font please ensure you test the Layout on your player.</helpText>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="gradient" type="colorGradient">
|
|
<title>Gradient</title>
|
|
<default></default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="fontSize" type="number">
|
|
<title>Font Size</title>
|
|
<default>40</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="lineHeight" type="number">
|
|
<title>Line Height</title>
|
|
<default>1.2</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="bold" type="checkbox">
|
|
<title>Bold</title>
|
|
<helpText>Should the text be bold?</helpText>
|
|
<default>0</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="italics" type="checkbox">
|
|
<title>Italics</title>
|
|
<helpText>Should the text be italicised?</helpText>
|
|
<default>0</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="underline" type="checkbox">
|
|
<title>Underline</title>
|
|
<helpText>Should the text be underlined?</helpText>
|
|
<default>0</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="textWrap" type="checkbox">
|
|
<title>Text Wrap</title>
|
|
<helpText>Should the text wrap to the next line?</helpText>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="showOverflow" type="checkbox">
|
|
<title>Show Overflow</title>
|
|
<helpText>Should the widget overflow the region?</helpText>
|
|
<default>1</default>
|
|
</property>
|
|
<property id="textShadow" type="checkbox">
|
|
<title>Text Shadow</title>
|
|
<default>0</default>
|
|
<helpText>Should the text have a shadow?</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="textShadowColor" type="color">
|
|
<title>Text Shadow Colour</title>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowX" type="number">
|
|
<title>Shadow X Offset</title>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowY" type="number">
|
|
<title>Shadow Y Offset</title>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowBlur" type="number">
|
|
<title>Shadow Blur</title>
|
|
<default>2</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
<condition field="textShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="horizontalAlign" type="dropdown">
|
|
<title>Horizontal Align</title>
|
|
<default>center</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="fitToArea" type="neq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
<options>
|
|
<option name="flex-start">Left</option>
|
|
<option name="center">Center</option>
|
|
<option name="flex-end">Right</option>
|
|
</options>
|
|
</property>
|
|
<property id="verticalAlign" type="dropdown">
|
|
<title>Vertical Align</title>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="flex-start">Top</option>
|
|
<option name="center">Middle</option>
|
|
<option name="flex-end">Bottom</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-date-advanced"
|
|
style="
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
{{#if fitToArea}}
|
|
white-space: nowrap;
|
|
{{else}}
|
|
{{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
|
|
{{#if showOverflow}}overflow: visible;{{else}}overflow: hidden;{{/if}}
|
|
{{#if horizontalAlign}}justify-content: {{horizontalAlign}};{{/if}} {{#if horizontalAlign}}
|
|
justify-content: {{horizontalAlign}};
|
|
{{/if}}
|
|
{{#eq horizontalAlign "flex-start"}}text-align: left;{{/eq}}
|
|
{{#eq horizontalAlign "center"}}text-align: center;{{/eq}}
|
|
{{#eq horizontalAlign "flex-end"}}text-align: right;{{/eq}}
|
|
{{/if}}
|
|
{{#if verticalAlign}}align-items: {{verticalAlign}};{{/if}}
|
|
width: 100%; height: 100%;"
|
|
>
|
|
<div class="date-advanced"
|
|
style="
|
|
{{#if fontFamily}}font-family: {{fontFamily}};{{/if}}
|
|
{{#if useGradient}}
|
|
{{parseJSON "gb" gradient}}
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent !important;
|
|
color: transparent;
|
|
{{#eq gb.type 'linear'}}
|
|
background-image: linear-gradient({{gb.angle}}deg, {{gb.color1}}, {{gb.color2}});
|
|
{{else}}
|
|
background-image: radial-gradient(circle, {{gb.color1}}, {{gb.color2}});
|
|
{{/eq}}
|
|
{{else}}
|
|
{{#if bold}}font-weight: bold;{{/if}}
|
|
{{#if italics}}font-style: italic;{{/if}}
|
|
{{#if underline}}text-decoration: underline;{{/if}}
|
|
{{#if fontColor}}color: {{fontColor}};{{/if}}
|
|
{{#if textShadow}}text-shadow: {{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{textShadowColor}};{{/if}}
|
|
{{/if}}
|
|
{{#if lineHeight}}line-height: {{lineHeight}};{{/if}}
|
|
{{#if textWrap}}white-space: pre-wrap;{{else}}white-space: nowrap;{{/if}}
|
|
"></div>
|
|
</div>
|
|
]]></hbs>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
var $dateEl = $(target).find('.date-advanced');
|
|
var useCurrentDate = (properties.currentDate == 1);
|
|
|
|
if (useCurrentDate) {
|
|
// Use current date
|
|
|
|
let firstRun = true;
|
|
|
|
var offset = properties.offset || 0;
|
|
// Clear previous interval if exists
|
|
if (window['updateInterval_' + id]) {
|
|
clearInterval(window['updateInterval_' + id]);
|
|
}
|
|
|
|
// Update every second
|
|
window['updateInterval_' + id] = setInterval(function() {
|
|
// If element was removed, clear interval
|
|
if(!$dateEl.is(':visible')) {
|
|
clearInterval(window['updateInterval_' + id]);
|
|
return;
|
|
}
|
|
|
|
// Update date value
|
|
var currentDate = moment().add(offset, "m");
|
|
|
|
// Check for lang config
|
|
if (properties.lang !== null && String(properties.lang).length > 0) {
|
|
currentDate.locale(properties.lang);
|
|
}
|
|
|
|
$dateEl.html(currentDate.format(properties.dateFormat));
|
|
|
|
if (firstRun && properties.fitToArea) {
|
|
// Set target for the text
|
|
properties.fitTarget = '.date-advanced';
|
|
|
|
var $selector = $(target).is('.global-elements-date-advanced') ?
|
|
$(target) : $(target).find('.global-elements-date-advanced');
|
|
|
|
// Scale text to container
|
|
$(target).find('.global-elements-date-advanced').xiboTextScaler(properties);
|
|
|
|
firstRun = false;
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
// Use custom date
|
|
|
|
// If date is not defined, don't render
|
|
if (String(properties.date).length === 0) {
|
|
$dateEl.html('');
|
|
return;
|
|
}
|
|
|
|
var customDate = moment(properties.date);
|
|
|
|
// Check for lang config
|
|
if (properties.lang !== null && String(properties.lang).length > 0) {
|
|
customDate.locale(properties.lang);
|
|
}
|
|
|
|
// Format the date with the dateFormat property
|
|
var formattedDate = customDate.format(properties.dateFormat);
|
|
|
|
// Set the date div value to the formatted date
|
|
$dateEl.html(formattedDate);
|
|
|
|
if (properties.fitToArea) {
|
|
// Set target for the text
|
|
properties.fitTarget = '.date-advanced';
|
|
|
|
var $selector = $(target).is('.global-elements-date-advanced') ?
|
|
$(target) : $(target).find('.global-elements-date-advanced');
|
|
|
|
// Scale text to container
|
|
$selector.xiboTextScaler(properties);
|
|
}
|
|
}
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="date-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/date.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>global_image</id>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<title>Image</title>
|
|
<thumbnail>image</thumbnail>
|
|
<showIn>none</showIn>
|
|
<startWidth>100</startWidth>
|
|
<startHeight>100</startHeight>
|
|
<properties>
|
|
<property id="url" type="text">
|
|
<title>Image URL</title>
|
|
<helpText>Enter the URL of the image you want to use.</helpText>
|
|
</property>
|
|
<property id="opacity" type="number">
|
|
<title>Opacity</title>
|
|
<helpText>Should the image have some transparency? Choose from 0 to 100.</helpText>
|
|
<default>100</default>
|
|
</property>
|
|
<property id="objectFit" type="dropdown" mode="single">
|
|
<title>Scale type</title>
|
|
<helpText>How should this image be scaled?</helpText>
|
|
<default>contain</default>
|
|
<options>
|
|
<option name="fill">Fill</option>
|
|
<option name="contain">Contain</option>
|
|
<option name="cover">Cover</option>
|
|
</options>
|
|
</property>
|
|
<property id="alignId" type="dropdown" mode="single">
|
|
<title>Horizontal Align</title>
|
|
<helpText>How should this image be aligned?</helpText>
|
|
<default>center</default>
|
|
<options>
|
|
<option name="left">Left</option>
|
|
<option name="center">Centre</option>
|
|
<option name="right">Right</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="objectFit" type="eq">contain</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="valignId" type="dropdown" mode="single">
|
|
<title>Vertical Align</title>
|
|
<helpText>How should this image be vertically aligned?</helpText>
|
|
<default>middle</default>
|
|
<options>
|
|
<option name="top">Top</option>
|
|
<option name="middle">Middle</option>
|
|
<option name="bottom">Bottom</option>
|
|
</options>
|
|
<visibility>
|
|
<test>
|
|
<condition field="objectFit" type="eq">contain</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="roundBorder" type="checkbox">
|
|
<title>Round Border</title>
|
|
<default>0</default>
|
|
<helpText>Should the image have rounded corners?</helpText>
|
|
<visibility>
|
|
<test>
|
|
<condition field="objectFit" type="neq">contain</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="borderRadius" type="number">
|
|
<title>Border Radius</title>
|
|
<default>20</default>
|
|
<visibility>
|
|
<test type="and">
|
|
<condition field="roundBorder" type="eq">1</condition>
|
|
<condition field="objectFit" type="neq">contain</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="imageShadow" type="checkbox">
|
|
<title>Image Shadow</title>
|
|
<default>0</default>
|
|
<helpText>Should the image have a shadow?</helpText>
|
|
</property>
|
|
<property id="imageShadowColor" type="color">
|
|
<title>Image Shadow Colour</title>
|
|
<visibility>
|
|
<test>
|
|
<condition field="imageShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowX" type="number">
|
|
<title>Shadow X Offset</title>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="imageShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowY" type="number">
|
|
<title>Shadow Y Offset</title>
|
|
<default>1</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="imageShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="shadowBlur" type="number">
|
|
<title>Shadow Blur</title>
|
|
<default>2</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="imageShadow" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="assetId" type="hidden"></property>
|
|
</properties>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-image img-container"
|
|
style="width:100%; height: 100%; overflow: hidden; position: relative;
|
|
{{#if roundBorder}}border-radius: {{borderRadius}}px;{{/if}}">
|
|
<img src="{{#if assetId}}[[assetId={{assetId}}]]{{else}}{{{url}}}{{/if}}" style="
|
|
width:100%; height: 100%;
|
|
object-fit: {{objectFit}};
|
|
object-position: {{alignId}} {{valignId}};
|
|
opacity: {{opacity}}%;
|
|
{{#if imageShadow}}
|
|
filter: drop-shadow({{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{imageShadowColor}});
|
|
{{/if}}
|
|
position: absolute; top: 0; left: 0;"
|
|
/>
|
|
</div>
|
|
]]></hbs>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="image" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/image.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>global_library_image</id>
|
|
<extends override="url" with="mediaId">global_image</extends>
|
|
<type>element</type>
|
|
<title>Library Image</title>
|
|
<dataType>global</dataType>
|
|
<showIn>none</showIn>
|
|
<canRotate>true</canRotate>
|
|
<startWidth>250</startWidth>
|
|
<startHeight>250</startHeight>
|
|
<properties>
|
|
<property id="imageReplace" type="imageReplaceControl">
|
|
<title>Replace Image</title>
|
|
<helpText>Select an image from the Toolbox and drop here to replace this element.</helpText>
|
|
</property>
|
|
</properties>
|
|
</template>
|
|
<template>
|
|
<id>line</id>
|
|
<title>Line</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<canRotate>true</canRotate>
|
|
<thumbnail>line-thumb</thumbnail>
|
|
<startWidth>250</startWidth>
|
|
<startHeight>250</startHeight>
|
|
<properties>
|
|
<property id="lineWidth" type="number">
|
|
<title>Width</title>
|
|
<default>5</default>
|
|
</property>
|
|
<property id="lineColor" type="color">
|
|
<title>Colour</title>
|
|
<default>%THEME_COLOR%</default>
|
|
</property>
|
|
<property id="lineStyle" type="dropdown" mode="single">
|
|
<title>Style</title>
|
|
<default>solid</default>
|
|
<options>
|
|
<option name="solid">Solid</option>
|
|
<option name="dotted">Dotted</option>
|
|
<option name="dashed">Dashed</option>
|
|
<option name="double">Double</option>
|
|
</options>
|
|
</property>
|
|
<property id="tip1Type" type="dropdown" mode="single">
|
|
<title>Tip1 Type</title>
|
|
<default>squared</default>
|
|
<playerCompatibility tizen="" webos=""></playerCompatibility>
|
|
<options>
|
|
<option name="squared">Squared</option>
|
|
<option name="diamond">Diamond</option>
|
|
<option name="line-arrow">Line Arrow</option>
|
|
<option name="solid-arrow">Solid Arrow</option>
|
|
<option name="circle">Circle</option>
|
|
</options>
|
|
</property>
|
|
<property id="tip2Type" type="dropdown" mode="single">
|
|
<title>Tip2 Type</title>
|
|
<default>squared</default>
|
|
<playerCompatibility tizen="" webos=""></playerCompatibility>
|
|
<options>
|
|
<option name="squared">Squared</option>
|
|
<option name="diamond">Diamond</option>
|
|
<option name="line-arrow">Line Arrow</option>
|
|
<option name="solid-arrow">Solid Arrow</option>
|
|
<option name="circle">Circle</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<preview></preview>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-line" style="position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;"
|
|
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
{{#eq tip1Type "diamond"}}
|
|
<g fill="{{lineColor}}" style="
|
|
transform:
|
|
translate(0, calc(50% - calc({{lineWidth}}px * 1.5 * 1.214)))
|
|
scale(calc({{lineWidth}} * 0.75));
|
|
">
|
|
<polygon points="0 2.5,2.5 5,5 2.5,2.5 0"></polygon>
|
|
</g>
|
|
{{/eq}}
|
|
{{#eq tip2Type "diamond"}}
|
|
<g fill="{{lineColor}}" style="
|
|
transform:
|
|
translate(calc(100% - calc({{lineWidth}}px * 3.75)), calc(50% - calc({{lineWidth}}px * 1.5 * 1.214)))
|
|
scale(calc({{lineWidth}} * 0.75));
|
|
">
|
|
<polygon points="0 2.5,2.5 5,5 2.5,2.5 0"></polygon>
|
|
</g>
|
|
{{/eq}}
|
|
{{#*inline "lineArrow"}}
|
|
<g fill="{{fillColor}}" style="
|
|
transform:
|
|
{{#eq tip "start"}}
|
|
translate(3px, calc(50% - calc({{strokeWidth}}px * 3)))
|
|
{{/eq}}
|
|
{{#eq tip "end"}}
|
|
translate(calc(100% - calc({{strokeWidth}}px * 4)), calc(50% - calc({{strokeWidth}}px * 3)))
|
|
{{/eq}}
|
|
scale(calc({{strokeWidth}} * 0.75))
|
|
">
|
|
<polygon points="{{points}}"></polygon>
|
|
</g>
|
|
{{/inline}}
|
|
{{#eq tip1Type "line-arrow"}}
|
|
{{> lineArrow fillColor=lineColor strokeWidth=lineWidth points="0,4 4,0 5,1 2,4 5,7 4,8" tip="start" }}
|
|
{{/eq}}
|
|
{{#eq tip2Type "line-arrow"}}
|
|
{{> lineArrow fillColor=lineColor strokeWidth=lineWidth points="0,1 1,0 5,4 1,8 0,7 3,4" tip="end" }}
|
|
{{/eq}}
|
|
{{#*inline "solidArrow"}}
|
|
<g fill="{{fillColor}}"
|
|
style="
|
|
transform:
|
|
{{#eq tip "start"}}
|
|
translate(0, calc(50% - calc(calc(calc({{strokeWidth}}px * 0.75) * 8) / 2)))
|
|
{{/eq}}
|
|
{{#eq tip "end"}}
|
|
translate(
|
|
calc(100% - calc(calc({{strokeWidth}}px * 0.75) * 5)),
|
|
calc(50% - calc(calc(calc({{strokeWidth}}px * 0.75) * 8) / 2))
|
|
)
|
|
{{/eq}}
|
|
scale(calc({{strokeWidth}} * 0.75));
|
|
">
|
|
<polygon points="{{points}}" />
|
|
</g>
|
|
{{/inline}}
|
|
{{#eq tip1Type "solid-arrow"}}
|
|
{{> solidArrow fillColor=lineColor strokeWidth=lineWidth points="0,4 5,1 5,7" tip="start" }}
|
|
{{/eq}}
|
|
{{#eq tip2Type "solid-arrow"}}
|
|
{{> solidArrow fillColor=lineColor strokeWidth=lineWidth points="0,1 0,7 5,4" tip="end" }}
|
|
{{/eq}}
|
|
{{#eq tip1Type "circle"}}
|
|
<g fill="{{lineColor}}" style="
|
|
transform:
|
|
translate(calc({{lineWidth}}px * 1.5), 50%)
|
|
scale(1.5);
|
|
">
|
|
<circle r="{{lineWidth}}"></circle>
|
|
</g>
|
|
{{/eq}}
|
|
{{#eq tip2Type "circle"}}
|
|
<g fill="{{lineColor}}" style="
|
|
transform:
|
|
translate(calc(100% - calc({{lineWidth}}px * 1.5)), 50%)
|
|
scale(1.5);
|
|
">
|
|
<circle r="{{lineWidth}}"></circle>
|
|
</g>
|
|
{{/eq}}
|
|
</svg><div class="line"
|
|
style="border-color: {{lineColor}};
|
|
position: absolute;
|
|
{{#if lineStyle }}border-style: {{lineStyle}};{{/if}}
|
|
height: {{lineWidth}}px;
|
|
border-width: {{lineWidth}}px 0 0 0;
|
|
top: calc(50% - calc({{lineWidth}}px / 2));
|
|
left: 0;
|
|
width: 100%;
|
|
{{#eq tip1Type "squared"}}
|
|
{{#eq tip2Type "squared"}}{{else}}
|
|
width: calc(100% - {{lineWidth}}px);
|
|
left: 0;
|
|
{{#eq tip2Type "line-arrow"}}
|
|
width: calc(100% - {{lineWidth}}px);
|
|
{{/eq}}
|
|
{{/eq}}
|
|
{{else}}
|
|
{{#eq tip2Type "squared"}}
|
|
width: calc(100% - {{lineWidth}}px);
|
|
left: {{lineWidth}}px;
|
|
{{else}}
|
|
width: calc(100% - calc({{lineWidth}}px * 2));
|
|
left: {{lineWidth}}px;
|
|
{{/eq}}
|
|
{{/eq}}"
|
|
></div></div>
|
|
]]></hbs>
|
|
</stencil>
|
|
<assets>
|
|
<asset id="line-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/line.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>rectangle</id>
|
|
<title>Rectangle</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<canRotate>true</canRotate>
|
|
<thumbnail>square-thumb</thumbnail>
|
|
<startWidth>250</startWidth>
|
|
<startHeight>250</startHeight>
|
|
<properties>
|
|
<property id="backgroundColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#1775F6</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="useGradient" type="checkbox">
|
|
<title>Use gradient as background?</title>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="gradient" type="colorGradient">
|
|
<title>Gradient</title>
|
|
<default></default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="roundBorder" type="checkbox">
|
|
<title>Round Border</title>
|
|
<default>0</default>
|
|
<helpText>Should the rectangle have rounded corners?</helpText>
|
|
</property>
|
|
<property id="borderRadius" type="number">
|
|
<title>Border Radius</title>
|
|
<default>20</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="roundBorder" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="outline" type="checkbox">
|
|
<title>Show Outline</title>
|
|
<default>1</default>
|
|
<helpText>Should the rectangle have an outline?</helpText>
|
|
</property>
|
|
<property id="outlineColor" type="color">
|
|
<title>Outline Colour</title>
|
|
<default>%THEME_COLOR%</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="outlineWidth" type="number">
|
|
<title>Outline Width</title>
|
|
<default>8</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="rectangle-container"
|
|
style="
|
|
{{#if useGradient}}
|
|
{{parseJSON "gb" gradient}}
|
|
{{#eq gb.type 'linear'}}
|
|
background: linear-gradient({{gb.angle}}deg, {{gb.color1}}, {{gb.color2}});
|
|
{{else}}
|
|
background: radial-gradient(circle, {{gb.color1}}, {{gb.color2}});
|
|
{{/eq}}
|
|
{{else}}
|
|
background-color: {{backgroundColor}};
|
|
{{/if}}
|
|
{{#if outline}}border: {{outlineWidth}}px solid {{outlineColor}};{{/if}}
|
|
{{#if roundBorder}}border-radius: {{borderRadius}}px;{{/if}}
|
|
width: 100%; height: 100%; box-sizing: border-box;"
|
|
>
|
|
</div>
|
|
]]></hbs>
|
|
</stencil>
|
|
<assets>
|
|
<asset id="square-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/square.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>circle</id>
|
|
<title>Circle</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<thumbnail>circle-thumb</thumbnail>
|
|
<startWidth>250</startWidth>
|
|
<startHeight>250</startHeight>
|
|
<properties>
|
|
<property id="backgroundColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#1775F6</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="useGradient" type="checkbox">
|
|
<title>Use gradient as background?</title>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="gradient" type="colorGradient">
|
|
<title>Gradient</title>
|
|
<default></default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="fit" type="checkbox">
|
|
<title>Fit to area</title>
|
|
<default>0</default>
|
|
<helpText>Should the shape scale to fit the element area?</helpText>
|
|
</property>
|
|
<property id="outline" type="checkbox">
|
|
<title>Show Outline</title>
|
|
<default>1</default>
|
|
<helpText>Should the circle have an outline?</helpText>
|
|
</property>
|
|
<property id="outlineColor" type="color">
|
|
<title>Outline Colour</title>
|
|
<default>%THEME_COLOR%</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="outlineWidth" type="number">
|
|
<title>Outline Width</title>
|
|
<default>8</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
</properties>
|
|
<preview></preview>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-circle" style="position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;"
|
|
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
{{{createGradientInSVG gradient uniqueID}}}
|
|
|
|
<symbol id="circle_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="{{# if fit }}none{{else}}xMidYMid meet{{/if}}">
|
|
<circle
|
|
{{# if useGradient }}
|
|
{{parseJSON "gb" gradient}}
|
|
{{# eq gb.type 'linear'}}
|
|
fill="url(#gradLinear_{{uniqueID}})"
|
|
{{else}}
|
|
fill="url(#gradRadial_{{uniqueID}})"
|
|
{{/eq}}
|
|
{{else if backgroundColor }}
|
|
fill="{{backgroundColor}}"
|
|
{{else}}
|
|
fill="none"
|
|
{{/if}}
|
|
{{# if outline }}
|
|
{{#if outlineColor }}stroke="{{outlineColor}}"{{/if}}
|
|
{{#if outlineWidth }}stroke-width="{{outlineWidth}}"{{/if}}
|
|
vector-effect="non-scaling-stroke"
|
|
{{/if}}
|
|
cx="50%"
|
|
cy="50%"
|
|
></circle>
|
|
</symbol>
|
|
</defs>
|
|
<use xlink:href="#circle_{{uniqueID}}" width="100%" height="100%" />
|
|
</svg></div>
|
|
]]></hbs>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Calculate circle radius based on outlineWidth
|
|
var circleRadius = properties.outline == 1 ?
|
|
50 - (properties.outlineWidth / 4) : 50;
|
|
var selector = $(target).is('.global-elements-circle') ? '' : '.global-elements-circle ';
|
|
$(target).find(selector + 'svg symbol circle').attr('r', circleRadius);
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="circle-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/circle.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>ellipse</id>
|
|
<title>Ellipse</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<thumbnail>ellipse-thumb</thumbnail>
|
|
<canRotate>true</canRotate>
|
|
<startWidth>300</startWidth>
|
|
<startHeight>200</startHeight>
|
|
<properties>
|
|
<property id="backgroundColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#1775F6</default>
|
|
</property>
|
|
<property id="outline" type="checkbox">
|
|
<title>Show Outline</title>
|
|
<default>1</default>
|
|
<helpText>Should the circle have an outline?</helpText>
|
|
</property>
|
|
<property id="outlineColor" type="color">
|
|
<title>Outline Colour</title>
|
|
<default>%THEME_COLOR%</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="outlineWidth" type="number">
|
|
<title>Outline Width</title>
|
|
<default>4</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
</properties>
|
|
<preview></preview>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-ellipse" style="position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;"
|
|
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<symbol id="ellipse_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="none">
|
|
<ellipse
|
|
{{# if backgroundColor }}
|
|
fill="{{backgroundColor}}"
|
|
{{else}}
|
|
fill="none"
|
|
{{/if}}
|
|
{{# if outline }}
|
|
{{#if outlineColor }}stroke="{{outlineColor}}"{{/if}}
|
|
{{#if outlineWidth }}stroke-width="{{outlineWidth}}"{{/if}}
|
|
vector-effect="non-scaling-stroke"
|
|
rx="49"
|
|
ry="49"
|
|
{{else}}
|
|
rx="50"
|
|
ry="50"
|
|
{{/if}}
|
|
cx="50"
|
|
cy="50"
|
|
></ellipse>
|
|
</symbol>
|
|
</defs>
|
|
<use xlink:href="#ellipse_{{uniqueID}}" width="100%" height="100%" />
|
|
</svg></div>
|
|
]]></hbs>
|
|
</stencil>
|
|
<assets>
|
|
<asset id="ellipse-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/ellipse.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>triangle</id>
|
|
<title>Triangle</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<canRotate>true</canRotate>
|
|
<thumbnail>triangle-thumb</thumbnail>
|
|
<startWidth>250</startWidth>
|
|
<startHeight>250</startHeight>
|
|
<properties>
|
|
<property id="backgroundColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#1775F6</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="useGradient" type="checkbox">
|
|
<title>Use gradient as background?</title>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="gradient" type="colorGradient">
|
|
<title>Gradient</title>
|
|
<default></default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="fit" type="checkbox">
|
|
<title>Fit to area</title>
|
|
<default>0</default>
|
|
<helpText>Should the shape scale to fit the element area?</helpText>
|
|
</property>
|
|
<property id="outline" type="checkbox">
|
|
<title>Show Outline</title>
|
|
<default>1</default>
|
|
<helpText>Should the triangle have an outline?</helpText>
|
|
</property>
|
|
<property id="outlineColor" type="color">
|
|
<title>Outline Colour</title>
|
|
<default>%THEME_COLOR%</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="outlineWidth" type="number">
|
|
<title>Outline Width</title>
|
|
<default>8</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
</properties>
|
|
<preview></preview>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-triangle" style="position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;"
|
|
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
{{{createGradientInSVG gradient uniqueID}}}
|
|
|
|
<symbol id="triangle_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="{{# if fit }}none{{else}}xMidYMid meet{{/if}}">
|
|
<polygon points="0,100 50,0 100,100"
|
|
{{# if useGradient }}
|
|
{{parseJSON "gb" gradient}}
|
|
{{# eq gb.type 'linear'}}
|
|
fill="url(#gradLinear_{{uniqueID}})"
|
|
{{else}}
|
|
fill="url(#gradRadial_{{uniqueID}})"
|
|
{{/eq}}
|
|
{{else if backgroundColor }}
|
|
fill="{{backgroundColor}}"
|
|
{{else}}
|
|
fill="none"
|
|
{{/if}}
|
|
{{#if outline }}
|
|
{{#if outlineColor}}stroke="{{outlineColor}}"{{/if}}
|
|
{{#if outlineWidth}}stroke-width="{{outlineWidth}}"{{/if}}
|
|
vector-effect="non-scaling-stroke"
|
|
{{/if}}
|
|
class="triangle"
|
|
></polygon>
|
|
</symbol>
|
|
</defs>
|
|
<use xlink:href="#triangle_{{uniqueID}}" width="100%" height="100%" />
|
|
</svg></div>
|
|
]]></hbs>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Calculate points based on outlineWidth
|
|
if(properties.outline == 1) {
|
|
var outlineDeltaX = properties.outlineWidth / 4;
|
|
var outlineDeltaY = properties.outlineWidth / 3;
|
|
|
|
var calcPoints = outlineDeltaX + ',' + (100 - outlineDeltaY) + ' ' +
|
|
'50,' + outlineDeltaY + ' ' +
|
|
(100 - outlineDeltaX) + ',' + (100-outlineDeltaY);
|
|
$(target).find('.global-elements-triangle svg symbol polygon').attr('points', calcPoints);
|
|
}
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="triangle-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/triangle.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>pentagon</id>
|
|
<title>Pentagon</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<canRotate>true</canRotate>
|
|
<thumbnail>pentagon-thumb</thumbnail>
|
|
<startWidth>250</startWidth>
|
|
<startHeight>250</startHeight>
|
|
<properties>
|
|
<property id="backgroundColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#1775F6</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="useGradient" type="checkbox">
|
|
<title>Use gradient as background?</title>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="gradient" type="colorGradient">
|
|
<title>Gradient</title>
|
|
<default></default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="fit" type="checkbox">
|
|
<title>Fit to area</title>
|
|
<default>0</default>
|
|
<helpText>Should the shape scale to fit the element area?</helpText>
|
|
</property>
|
|
<property id="outline" type="checkbox">
|
|
<title>Show Outline</title>
|
|
<default>1</default>
|
|
<helpText>Should the pentagon have an outline?</helpText>
|
|
</property>
|
|
<property id="outlineColor" type="color">
|
|
<title>Outline Colour</title>
|
|
<default>%THEME_COLOR%</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="outlineWidth" type="number">
|
|
<title>Outline Width</title>
|
|
<default>8</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
</properties>
|
|
<preview></preview>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-pentagon" style="position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;"
|
|
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
{{{createGradientInSVG gradient uniqueID}}}
|
|
|
|
<symbol id="pentagon_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="{{# if fit }}none{{else}}xMidYMid meet{{/if}}">
|
|
<polygon points="50,0 100,36 83.33,100 16.67,100 0,36"
|
|
{{# if useGradient }}
|
|
{{parseJSON "gb" gradient}}
|
|
{{# eq gb.type 'linear'}}
|
|
fill="url(#gradLinear_{{uniqueID}})"
|
|
{{else}}
|
|
fill="url(#gradRadial_{{uniqueID}})"
|
|
{{/eq}}
|
|
{{else if backgroundColor }}
|
|
fill="{{backgroundColor}}"
|
|
{{else}}
|
|
fill="none"
|
|
{{/if}}
|
|
{{#if outline }}
|
|
{{#if outlineColor }}stroke="{{outlineColor}}"{{/if}}
|
|
{{#if outlineWidth }}stroke-width="{{outlineWidth}}"{{/if}}
|
|
vector-effect="non-scaling-stroke"
|
|
{{/if}}
|
|
/>
|
|
</symbol>
|
|
</defs>
|
|
<use xlink:href="#pentagon_{{uniqueID}}" width="100%" height="100%"></use>
|
|
</svg></div>
|
|
]]></hbs>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Calculate points based on outlineWidth
|
|
if(properties.outline == 1) {
|
|
var outlineDelta = properties.outlineWidth / 4;
|
|
var calcPoints = '50,' + outlineDelta + ' ' +
|
|
(100 - outlineDelta) + ',36 ' +
|
|
'83.33,' + (100 - outlineDelta) + ' ' +
|
|
'16.67,' + (100 - outlineDelta) + ' ' +
|
|
outlineDelta + ',36';
|
|
$(target).find('.global-elements-pentagon svg symbol polygon').attr('points', calcPoints);
|
|
}
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="pentagon-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/pentagon.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>hexagon</id>
|
|
<title>Hexagon</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<canRotate>true</canRotate>
|
|
<thumbnail>hexagon-thumb</thumbnail>
|
|
<startWidth>250</startWidth>
|
|
<startHeight>250</startHeight>
|
|
<properties>
|
|
<property id="backgroundColor" type="color">
|
|
<title>Background Colour</title>
|
|
<default>#1775F6</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">0</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="useGradient" type="checkbox">
|
|
<title>Use gradient as background?</title>
|
|
<default>0</default>
|
|
</property>
|
|
<property id="gradient" type="colorGradient">
|
|
<title>Gradient</title>
|
|
<default></default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="useGradient" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="fit" type="checkbox">
|
|
<title>Fit to area</title>
|
|
<default>0</default>
|
|
<helpText>Should the shape scale to fit the element area?</helpText>
|
|
</property>
|
|
<property id="outline" type="checkbox">
|
|
<title>Show Outline</title>
|
|
<default>1</default>
|
|
<helpText>Should the hexagon have an outline?</helpText>
|
|
</property>
|
|
<property id="outlineColor" type="color">
|
|
<title>Outline Colour</title>
|
|
<default>%THEME_COLOR%</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
<property id="outlineWidth" type="number">
|
|
<title>Outline Width</title>
|
|
<default>8</default>
|
|
<visibility>
|
|
<test>
|
|
<condition field="outline" type="eq">1</condition>
|
|
</test>
|
|
</visibility>
|
|
</property>
|
|
</properties>
|
|
<preview></preview>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-hexagon" style="position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;"
|
|
><svg version="1.1" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
{{{createGradientInSVG gradient uniqueID}}}
|
|
|
|
<symbol id="hexagon_{{uniqueID}}" viewBox="0 0 100 100" preserveAspectRatio="{{# if fit }}none{{else}}xMidYMid meet{{/if}}">
|
|
<polygon points="50,0 100,24.5 100,73.5 50,100 0,73.5 0,24.5"
|
|
{{# if useGradient }}
|
|
{{parseJSON "gb" gradient}}
|
|
{{# eq gb.type 'linear'}}
|
|
fill="url(#gradLinear_{{uniqueID}})"
|
|
{{else}}
|
|
fill="url(#gradRadial_{{uniqueID}})"
|
|
{{/eq}}
|
|
{{else if backgroundColor }}
|
|
fill="{{backgroundColor}}"
|
|
{{else}}
|
|
fill="none"
|
|
{{/if}}
|
|
{{#if outline }}
|
|
{{#if outlineColor }}stroke="{{outlineColor}}"{{/if}}
|
|
{{#if outlineWidth }}stroke-width="{{outlineWidth}}"{{/if}}
|
|
vector-effect="non-scaling-stroke"
|
|
{{/if}}
|
|
/>
|
|
</symbol>
|
|
</defs>
|
|
<use xlink:href="#hexagon_{{uniqueID}}" width="100%" height="100%"></use>
|
|
</svg></div>
|
|
]]></hbs>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
// Calculate points based on outlineWidth
|
|
if(properties.outline == 1) {
|
|
var outlineDelta = properties.outlineWidth / 4;
|
|
var calcPoints = '50,' + outlineDelta + ' ' +
|
|
(100 - outlineDelta) + ',24.5 ' +
|
|
(100 - outlineDelta) + ',73.5 ' +
|
|
'50,' + (100 - outlineDelta) + ' ' +
|
|
outlineDelta + ',73.5' + ' ' +
|
|
outlineDelta + ',24.5';
|
|
$(target).find('.global-elements-hexagon svg symbol polygon').attr('points', calcPoints);
|
|
}
|
|
]]></onTemplateRender>
|
|
<assets>
|
|
<asset id="hexagon-thumb" type="path" mimeType="image/png" path="/modules/assets/template-thumbnails/global/hexagon.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>placeholder</id>
|
|
<title>Placeholder</title>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<showIn>none</showIn>
|
|
<isVisible>false</isVisible>
|
|
<thumbnail>placeholder-thumb</thumbnail>
|
|
<startWidth>200</startWidth>
|
|
<startHeight>100</startHeight>
|
|
<properties>
|
|
<property id="placeholderType" type="dropdown" mode="single">
|
|
<title>Placeholder type</title>
|
|
<helpText>Please select the type of placeholder to use as target.</helpText>
|
|
<default>all</default>
|
|
<options>
|
|
<option name="all">All</option>
|
|
<option name="image">Image</option>
|
|
<option name="global">Global</option>
|
|
</options>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div data-placeholder-type="{{placeholderType}}">
|
|
<span>Placeholder: {{placeholderType}}</span>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
div[data-placeholder-type] {
|
|
color: grey;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<assets>
|
|
<asset id="placeholder-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/placeholder.png" />
|
|
</assets>
|
|
</template>
|
|
<template>
|
|
<id>image_placeholder</id>
|
|
<title>Image Placeholder</title>
|
|
<canRotate>true</canRotate>
|
|
<extends override="url">global_image</extends>
|
|
<type>element</type>
|
|
<dataType>global</dataType>
|
|
<showIn>none</showIn>
|
|
<isVisible>false</isVisible>
|
|
<startWidth>200</startWidth>
|
|
<startHeight>100</startHeight>
|
|
<propertyGroups>
|
|
<propertyGroup id="placeholderOptions" expanded="true">
|
|
<title>Placeholder options</title>
|
|
<helpText></helpText>
|
|
</propertyGroup>
|
|
</propertyGroups>
|
|
<properties>
|
|
<property id="placeholderMessage" type="text" propertyGroupId="placeholderOptions">
|
|
<title>Placeholder message</title>
|
|
<helpText></helpText>
|
|
<default>Image Placeholder</default>
|
|
</property>
|
|
<property id="placeholderMessageColor" type="color" propertyGroupId="placeholderOptions">
|
|
<title>Placeholder message colour</title>
|
|
<helpText></helpText>
|
|
<default>#333</default>
|
|
</property>
|
|
<property id="fontFamily" type="fontSelector" propertyGroupId="placeholderOptions">
|
|
<title>Font Family</title>
|
|
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
|
</property>
|
|
<property id="fontSize" type="number" propertyGroupId="placeholderOptions">
|
|
<title>Font Size</title>
|
|
<default>22</default>
|
|
</property>
|
|
<property id="placeholderBackgroundColor" type="color" propertyGroupId="placeholderOptions">
|
|
<title>Placeholder background colour</title>
|
|
<helpText></helpText>
|
|
<default>#f9f9f9</default>
|
|
</property>
|
|
</properties>
|
|
<stencil>
|
|
<hbs><![CDATA[
|
|
<div class="global-elements-image img-container" style="width:100%; height: 100%; position: relative;">
|
|
<img src="" style="
|
|
width:100%; height: 100%;
|
|
object-fit: {{objectFit}};
|
|
object-position: {{alignId}} {{valignId}};
|
|
opacity: {{opacity}}%;
|
|
position: absolute; top: 0; left: 0;
|
|
{{#if imageShadow}}
|
|
filter: drop-shadow({{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{imageShadowColor}});
|
|
{{/if}}
|
|
{{#if roundBorder}}border-radius: {{borderRadius}}px;{{/if}}
|
|
background-color: {{placeholderBackgroundColor}};
|
|
"
|
|
/>
|
|
<div data-placeholder-type="image">
|
|
<span style="color: {{placeholderMessageColor}};
|
|
{{#if fontFamily}}font-family: {{fontFamily}};{{/if}}
|
|
{{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
|
|
">
|
|
{{placeholderMessage}}</span>
|
|
</div>
|
|
</div>
|
|
]]></hbs>
|
|
<style><![CDATA[
|
|
div[data-placeholder-type] {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
z-index: 2;
|
|
}
|
|
]]></style>
|
|
</stencil>
|
|
<onTemplateRender><![CDATA[
|
|
$(target).find('img').xiboImageRender(properties);
|
|
]]></onTemplateRender>
|
|
</template>
|
|
</templates>
|