368 lines
13 KiB
XML
368 lines
13 KiB
XML
|
<!--
|
||
|
|
~ Copyright (C) 2025 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/>.
|
||
|
|
-->
|
||
|
|
<module>
|
||
|
|
<id>core-interactive-button</id>
|
||
|
|
<name>Button</name>
|
||
|
|
<author>Core</author>
|
||
|
|
<description>A module for a button to be used as Trigger for Interactive</description>
|
||
|
|
<icon>fa fa-hourglass-o</icon>
|
||
|
|
<class></class>
|
||
|
|
<type>interactive-button</type>
|
||
|
|
<group id="interactive" icon="fa fa-paper-plane">Interactive</group>
|
||
|
|
<dataType></dataType>
|
||
|
|
<schemaVersion>2</schemaVersion>
|
||
|
|
<assignable>1</assignable>
|
||
|
|
<regionSpecific>1</regionSpecific>
|
||
|
|
<renderAs>html</renderAs>
|
||
|
|
<defaultDuration>60</defaultDuration>
|
||
|
|
<thumbnail>interactive-button-thumb</thumbnail>
|
||
|
|
<startWidth>142</startWidth>
|
||
|
|
<startHeight>63</startHeight>
|
||
|
|
<settings></settings>
|
||
|
|
<properties>
|
||
|
|
<property id="text" type="textArea">
|
||
|
|
<title>Text</title>
|
||
|
|
<default>Button</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="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="fontSize" type="number">
|
||
|
|
<title>Font Size</title>
|
||
|
|
<default>40</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="fitToArea" type="neq">1</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="padding" type="number">
|
||
|
|
<title>Padding</title>
|
||
|
|
<default>8</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="fitToArea" type="eq">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>0</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="fitToArea" type="neq">1</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="fontColor" type="color">
|
||
|
|
<title>Font Colour</title>
|
||
|
|
<default>#fff</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="useGradient" type="eq">0</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</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>Font Gradient</title>
|
||
|
|
<default></default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="useGradient" type="eq">1</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="backgroundColor" type="color">
|
||
|
|
<title>Background Colour</title>
|
||
|
|
<default>#1775F6</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="useBgGradient" type="eq">0</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="useBgGradient" type="checkbox">
|
||
|
|
<title>Use gradient as background?</title>
|
||
|
|
<default>0</default>
|
||
|
|
</property>
|
||
|
|
<property id="bgGradient" type="colorGradient">
|
||
|
|
<title>Gradient</title>
|
||
|
|
<default></default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="useBgGradient" type="eq">1</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="bgShadow" type="checkbox">
|
||
|
|
<title>Use Shadow?</title>
|
||
|
|
<default>0</default>
|
||
|
|
<helpText>Should the background have a shadow?</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="bgShadowColor" type="color">
|
||
|
|
<title>Shadow Colour</title>
|
||
|
|
<default>rgba(0, 0, 0, 0.40)</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="bgShadow" type="eq">1</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="shadowX" type="number">
|
||
|
|
<title>Shadow X Offset</title>
|
||
|
|
<default>1</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="bgShadow" type="eq">1</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="shadowY" type="number">
|
||
|
|
<title>Shadow Y Offset</title>
|
||
|
|
<default>1</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="bgShadow" type="eq">1</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="shadowBlur" type="number">
|
||
|
|
<title>Shadow Blur</title>
|
||
|
|
<default>2</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="bgShadow" type="eq">1</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="roundBorder" type="checkbox">
|
||
|
|
<title>Round Border</title>
|
||
|
|
<default>1</default>
|
||
|
|
<helpText>Should the rectangle have rounded corners?</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="borderRadius" type="number">
|
||
|
|
<title>Border Radius</title>
|
||
|
|
<default>6</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="roundBorder" type="eq">1</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="outline" type="checkbox">
|
||
|
|
<title>Show Outline</title>
|
||
|
|
<default>0</default>
|
||
|
|
<helpText>Should the rectangle have an outline?</helpText>
|
||
|
|
</property>
|
||
|
|
<property id="outlineColor" type="color">
|
||
|
|
<title>Outline Colour</title>
|
||
|
|
<default>#0f59bd</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>
|
||
|
|
<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>
|
||
|
|
<preview></preview>
|
||
|
|
<stencil>
|
||
|
|
<width id="width">300</width>
|
||
|
|
<height id="height">180</height>
|
||
|
|
<hbs><![CDATA[
|
||
|
|
<div class="interactive-button-container" style="
|
||
|
|
display: -webkit-flex;
|
||
|
|
display: flex;
|
||
|
|
{{#if verticalAlign}}align-items: {{verticalAlign}};{{/if}}
|
||
|
|
{{#if fitToArea}}
|
||
|
|
white-space: nowrap;
|
||
|
|
{{#if padding}}padding: {{padding}}px;{{/if}}
|
||
|
|
{{else}}
|
||
|
|
{{#if fontSize}}font-size: {{fontSize}}px;{{/if}}
|
||
|
|
{{#if showOverflow}}overflow: visible;{{else}}overflow: hidden;{{/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 useBgGradient}}
|
||
|
|
{{parseJSON "gbb" bgGradient}}
|
||
|
|
{{#eq gbb.type 'linear'}}
|
||
|
|
background: linear-gradient({{gbb.angle}}deg, {{gbb.color1}}, {{gbb.color2}});
|
||
|
|
{{else}}
|
||
|
|
background: radial-gradient(circle, {{gbb.color1}}, {{gbb.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;
|
||
|
|
{{#if bgShadow}}
|
||
|
|
width: calc(100% - {{shadowX}}px - {{shadowBlur}}px);
|
||
|
|
height: calc(100% - {{shadowY}}px - {{shadowBlur}}px);
|
||
|
|
box-shadow: {{shadowX}}px {{shadowY}}px {{shadowBlur}}px {{bgShadowColor}};
|
||
|
|
{{/if}}
|
||
|
|
">
|
||
|
|
<div class="interactive-button" 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}}
|
||
|
|
{{#if lineHeight}}line-height: {{lineHeight}};{{/if}}
|
||
|
|
{{#if textWrap}}
|
||
|
|
white-space: normal;
|
||
|
|
{{else}}
|
||
|
|
white-space: nowrap;
|
||
|
|
{{/if}}
|
||
|
|
">
|
||
|
|
{{text}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
]]></hbs>
|
||
|
|
<style><![CDATA[
|
||
|
|
html, body, #content, .interactive-button-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<onRender><![CDATA[
|
||
|
|
// Scale text to container
|
||
|
|
properties.widgetDesignWidth = 0;
|
||
|
|
properties.widgetDesignHeight = 0;
|
||
|
|
$(target).xiboLayoutScaler(properties);
|
||
|
|
|
||
|
|
if(properties.fitToArea) {
|
||
|
|
// Set target for the text
|
||
|
|
properties.fitTarget = 'div';
|
||
|
|
|
||
|
|
var $selector = $(target).is('.interactive-button-container') ?
|
||
|
|
$(target) : $(target).find('.interactive-button-container');
|
||
|
|
|
||
|
|
// Scale text to container
|
||
|
|
$selector.xiboTextScaler(properties);
|
||
|
|
}
|
||
|
|
]]></onRender>
|
||
|
|
<assets>
|
||
|
|
<asset id="interactive-button-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/interactive/button-thumb.png" />
|
||
|
|
</assets>
|
||
|
|
</module>
|