Initial Upload
This commit is contained in:
Matt Batchelder
320
modules/countdown-clock.xml
Executable file
320
modules/countdown-clock.xml
Executable file
@@ -0,0 +1,320 @@
|
||||
<!--
|
||||
~ 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/>.
|
||||
-->
|
||||
<module>
|
||||
<id>core-countdown-clock</id>
|
||||
<name>Countdown - Clock</name>
|
||||
<author>Core</author>
|
||||
<description>A module for displaying a Countdown timer as a clock</description>
|
||||
<icon>fa fa-hourglass-o</icon>
|
||||
<class></class>
|
||||
<compatibilityClass>\Xibo\Widget\Compatibility\CountDownWidgetCompatibility</compatibilityClass>
|
||||
<type>countdown-clock</type>
|
||||
<group id="countdown" icon="fa fa-hourglass-o">Countdown</group>
|
||||
<legacyType condition="templateId==countdown2">countdown</legacyType>
|
||||
<dataType></dataType>
|
||||
<schemaVersion>2</schemaVersion>
|
||||
<assignable>1</assignable>
|
||||
<regionSpecific>1</regionSpecific>
|
||||
<renderAs>html</renderAs>
|
||||
<defaultDuration>60</defaultDuration>
|
||||
<thumbnail>countdown-clock-thumb</thumbnail>
|
||||
<startWidth>300</startWidth>
|
||||
<startHeight>180</startHeight>
|
||||
<settings></settings>
|
||||
<properties>
|
||||
<property id="countdownType" type="dropdown" mode="single">
|
||||
<title>Countdown Type</title>
|
||||
<helpText>Please select the type of countdown.</helpText>
|
||||
<default>1</default>
|
||||
<options>
|
||||
<option name="1">Widget Duration</option>
|
||||
<option name="2">Custom Duration</option>
|
||||
<option name="3">Use Date</option>
|
||||
</options>
|
||||
</property>
|
||||
<property id="countdownDuration" type="number">
|
||||
<title>Countdown Duration</title>
|
||||
<helpText>The duration in seconds.</helpText>
|
||||
<default></default>
|
||||
<visibility>
|
||||
<test type="or">
|
||||
<condition field="countdownType" type="eq">2</condition>
|
||||
</test>
|
||||
</visibility>
|
||||
<rule>
|
||||
<test type="or" message="Please enter a positive countdown duration">
|
||||
<condition type="gt">0</condition>
|
||||
<condition field="countdownType" type="neq">2</condition>
|
||||
</test>
|
||||
</rule>
|
||||
</property>
|
||||
<property id="countdownDate" type="date" format="DD/MM/YYYY HH:mm:ss" variant="dateTime">
|
||||
<title>Countdown Date</title>
|
||||
<helpText>Select the target date and time.</helpText>
|
||||
<default>10/10/2010 10:10:10</default>
|
||||
<visibility>
|
||||
<test type="or">
|
||||
<condition field="countdownType" type="eq">3</condition>
|
||||
</test>
|
||||
</visibility>
|
||||
</property>
|
||||
<property id="countdownWarningDuration" type="number">
|
||||
<title>Warning Duration</title>
|
||||
<helpText>The countdown will show in a warning mode from the end duration entered.</helpText>
|
||||
<default></default>
|
||||
<visibility>
|
||||
<test type="or">
|
||||
<condition field="countdownType" type="eq">1</condition>
|
||||
<condition field="countdownType" type="eq">2</condition>
|
||||
</test>
|
||||
</visibility>
|
||||
<rule onStatus="false">
|
||||
<test type="or" message="Warning duration needs to be lower than the countdown main duration.">
|
||||
<condition type="eq"></condition>
|
||||
<condition field="countdownType" type="neq">2</condition>
|
||||
<condition field="countdownDuration" type="lt"></condition>
|
||||
</test>
|
||||
<test type="or" message="Warning duration needs to be lower than the widget duration.">
|
||||
<condition field="countdownType" type="neq">1</condition>
|
||||
<condition field="duration" type="lt"></condition>
|
||||
<condition type="eq"></condition>
|
||||
</test>
|
||||
<test type="or" message="Please enter a positive warning duration">
|
||||
<condition type="gt">0</condition>
|
||||
<condition type="eq"></condition>
|
||||
</test>
|
||||
</rule>
|
||||
</property>
|
||||
<property id="countdownWarningDate" type="date" format="DD/MM/YYYY HH:mm:ss" variant="dateTime">
|
||||
<title>Warning Date</title>
|
||||
<helpText>The countdown will show in a warning mode from the warning date entered.</helpText>
|
||||
<default></default>
|
||||
<visibility>
|
||||
<test type="or">
|
||||
<condition field="countdownType" type="eq">3</condition>
|
||||
</test>
|
||||
</visibility>
|
||||
<rule>
|
||||
<test type="or" message="Warning date needs to be before countdown date.">
|
||||
<condition field="countdownType" type="neq">3</condition>
|
||||
<condition field="countdownDate" type="lt"></condition>
|
||||
<condition type="eq"></condition>
|
||||
</test>
|
||||
</rule>
|
||||
</property>
|
||||
<property id="alignmentH" type="dropdown" mode="single">
|
||||
<title>Horizontal Align</title>
|
||||
<helpText>How should this widget be horizontally aligned?</helpText>
|
||||
<default>center</default>
|
||||
<options>
|
||||
<option name="left">Left</option>
|
||||
<option name="center">Centre</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>
|
||||
<property id="innerBackgroundColor" type="color">
|
||||
<title>Inner Background Colour</title>
|
||||
<default>#00816A</default>
|
||||
</property>
|
||||
<property id="innerFontFamily" type="fontSelector">
|
||||
<title>Inner Text Font</title>
|
||||
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||||
</property>
|
||||
<property id="innerTextColor" type="color">
|
||||
<title>Inner Text Colour</title>
|
||||
<default>#fff</default>
|
||||
</property>
|
||||
<property id="outerBackgroundColor" type="color">
|
||||
<title>Outer Background Colour</title>
|
||||
<default>#00BF96</default>
|
||||
</property>
|
||||
<property id="labelFontFamily" type="fontSelector">
|
||||
<title>Label Text Font</title>
|
||||
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||||
</property>
|
||||
<property id="labelTextColor" type="color">
|
||||
<title>Label Text Colour</title>
|
||||
<default>#fff</default>
|
||||
</property>
|
||||
<property id="warningBackgroundColor1" type="color">
|
||||
<title>Warning Background Colour 1</title>
|
||||
<default>darkorange</default>
|
||||
</property>
|
||||
<property id="warningBackgroundColor2" type="color">
|
||||
<title>Warning Background Colour 2</title>
|
||||
<default>orange</default>
|
||||
</property>
|
||||
<property id="finishedBackgroundColor1" type="color">
|
||||
<title>Finished Background Colour 1</title>
|
||||
<default>darkred</default>
|
||||
</property>
|
||||
<property id="finishedBackgroundColor2" type="color">
|
||||
<title>Finished Background Colour 2</title>
|
||||
<default>red</default>
|
||||
</property>
|
||||
</properties>
|
||||
<preview></preview>
|
||||
<stencil>
|
||||
<width id="width">640</width>
|
||||
<height id="height">360</height>
|
||||
<hbs><![CDATA[
|
||||
<div class="countdown-container">
|
||||
<div id="clockdiv">
|
||||
<div>[mm]
|
||||
<div class="smalltext">||Minutes||</div>
|
||||
</div>
|
||||
<div>[ss]
|
||||
<div class="smalltext">||Seconds||</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
]]></hbs>
|
||||
<style><![CDATA[
|
||||
body {
|
||||
width: 640px !important;
|
||||
height: 360px !important;
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
#clockdiv {
|
||||
font-family: sans-serif;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
font-size: 178px;
|
||||
}
|
||||
|
||||
#clockdiv>div {
|
||||
padding: 10px 15px;
|
||||
border-radius: 4px;
|
||||
background: #00BF96;
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#clockdiv div>span {
|
||||
text-align: center;
|
||||
padding: 15px 0;
|
||||
width: 240px;
|
||||
border-radius: 4px;
|
||||
background: #00816A;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.smalltext {
|
||||
padding-top: 5px;
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
{% if innerFontFamily %}#clockdiv > div > span { font-family: {{innerFontFamily}}; }{% endif %}
|
||||
{% if innerBackgroundColor %}#clockdiv > div > span { background: {{innerBackgroundColor}}; }{% endif %}
|
||||
{% if innerTextColor %}#clockdiv > div > span { color: {{innerTextColor}}; }{% endif %}
|
||||
{% if outerBackgroundColor %}#clockdiv > div { background: {{outerBackgroundColor}}; }{% endif %}
|
||||
{% if labelFontFamily %}#clockdiv .smalltext { font-family: {{labelFontFamily}}; }{% endif %}
|
||||
{% if labelTextColor %}#clockdiv > div { color: {{labelTextColor}}; }{% endif %}
|
||||
{% if warningBackgroundColor1 %}.warning #clockdiv > div {background: {{warningBackgroundColor1}};}{% endif %}
|
||||
{% if warningBackgroundColor2 %}.warning #clockdiv > div > span {background: {{warningBackgroundColor2}};}{% endif %}
|
||||
{% if finishedBackgroundColor1 %}.finished #clockdiv > div {background: {{finishedBackgroundColor1}};}{% endif %}
|
||||
{% if finishedBackgroundColor1 %}.finished #clockdiv > div > span {background: {{finishedBackgroundColor2}};}{% endif %}
|
||||
]]></style>
|
||||
</stencil>
|
||||
<onRender><![CDATA[
|
||||
// Make replacements on render for all templates
|
||||
var $countdownContainer = $('.countdown-container', target);
|
||||
|
||||
// Get countdown container html
|
||||
var countdownHTML = $countdownContainer.html();
|
||||
|
||||
// Make replacements
|
||||
var text = countdownHTML;
|
||||
var regex = /\[.*?\]/g;
|
||||
countdownHTML = text.replace(regex, function (match) {
|
||||
var replacement = '';
|
||||
var matchParsed = match.replace('[', '').replace(']', '');
|
||||
|
||||
// Replace tags
|
||||
switch (matchParsed) {
|
||||
case 'ss':
|
||||
replacement = '<span class="seconds"></span>';
|
||||
break;
|
||||
case 'ssa':
|
||||
replacement = '<span class="secondsAll"></span>';
|
||||
break;
|
||||
case 'mm':
|
||||
replacement = '<span class="minutes"></span>';
|
||||
break;
|
||||
case 'mma':
|
||||
replacement = '<span class="minutesAll"></span>';
|
||||
break;
|
||||
case 'hh':
|
||||
replacement = '<span class="hours"></span>';
|
||||
break;
|
||||
case 'hha':
|
||||
replacement = '<span class="hoursAll"></span>';
|
||||
break;
|
||||
case 'DD':
|
||||
replacement = '<span class="days"></span>';
|
||||
break;
|
||||
case 'WW':
|
||||
replacement = '<span class="weeks"></span>';
|
||||
break;
|
||||
case 'MM':
|
||||
replacement = '<span class="months"></span>';
|
||||
break;
|
||||
case 'YY':
|
||||
replacement = '<span class="years"></span>';
|
||||
break;
|
||||
default:
|
||||
replacement = 'NULL';
|
||||
break;
|
||||
}
|
||||
|
||||
return replacement;
|
||||
});
|
||||
|
||||
// Attach html back to container
|
||||
$countdownContainer.html(countdownHTML);
|
||||
|
||||
// Scale the layout
|
||||
$(target).xiboLayoutScaler(properties);
|
||||
|
||||
// Render the countdown
|
||||
var $contentContainer = $(target).find('#content');
|
||||
$contentContainer.xiboCountdownRender(properties,$contentContainer.html());
|
||||
]]></onRender>
|
||||
<assets>
|
||||
<asset id="countdown-clock-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/countdown/countdown-clock-thumb.png" />
|
||||
</assets>
|
||||
</module>
|
||||
Reference in New Issue
Block a user