236 lines
8.4 KiB
XML
236 lines
8.4 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/>.
|
||
|
|
-->
|
||
|
|
<module>
|
||
|
|
<id>core-clock-flip</id>
|
||
|
|
<name>Clock - Flip</name>
|
||
|
|
<author>Core</author>
|
||
|
|
<description>Flip Clock</description>
|
||
|
|
<icon>fa fa-clock-o</icon>
|
||
|
|
<class></class>
|
||
|
|
<compatibilityClass>\Xibo\Widget\Compatibility\ClockWidgetCompatibility</compatibilityClass>
|
||
|
|
<type>clock-flip</type>
|
||
|
|
<group id="clock" icon="fa fa-clock">Clock</group>
|
||
|
|
<legacyType condition="clockTypeId==3">clock</legacyType>
|
||
|
|
<dataType></dataType>
|
||
|
|
<schemaVersion>2</schemaVersion>
|
||
|
|
<assignable>1</assignable>
|
||
|
|
<regionSpecific>1</regionSpecific>
|
||
|
|
<renderAs>html</renderAs>
|
||
|
|
<defaultDuration>10</defaultDuration>
|
||
|
|
<thumbnail>clock-flip-thumb</thumbnail>
|
||
|
|
<startWidth>300</startWidth>
|
||
|
|
<startHeight>150</startHeight>
|
||
|
|
<settings></settings>
|
||
|
|
<properties>
|
||
|
|
<property id="clockFace" type="dropdown" mode="single">
|
||
|
|
<title>Theme</title>
|
||
|
|
<helpText>Please select a clock face.</helpText>
|
||
|
|
<default>TwelveHourClock</default>
|
||
|
|
<options>
|
||
|
|
<option name="TwelveHourClock">12h Clock</option>
|
||
|
|
<option name="TwentyFourHourClock">24h Clock</option>
|
||
|
|
<option name="HourlyCounter">Hourly Counter</option>
|
||
|
|
<option name="MinuteCounter">Minute Counter</option>
|
||
|
|
<option name="DailyCounter">Daily Counter</option>
|
||
|
|
</options>
|
||
|
|
</property>
|
||
|
|
<property id="showSeconds" type="checkbox">
|
||
|
|
<title>Show Seconds?</title>
|
||
|
|
<helpText>Should the clock show seconds or not?</helpText>
|
||
|
|
<default></default>
|
||
|
|
<visibility>
|
||
|
|
<test type="or">
|
||
|
|
<condition field="clockFace" type="eq">TwelveHourClock</condition>
|
||
|
|
<condition field="clockFace" type="eq">TwentyFourHourClock</condition>
|
||
|
|
<condition field="clockFace" type="eq">DailyCounter</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
<property id="offset" type="text">
|
||
|
|
<title>Offset</title>
|
||
|
|
<helpText>The offset in minutes that should be applied to the current time, or if a counter then date/time to run from in the format Y-m-d H:i:s.</helpText>
|
||
|
|
<default></default>
|
||
|
|
</property>
|
||
|
|
<property id="backgroundColor" type="color">
|
||
|
|
<title>Background Colour</title>
|
||
|
|
</property>
|
||
|
|
<property id="flipCardTextColor" type="color">
|
||
|
|
<title>Flip Card Text Colour</title>
|
||
|
|
<default>#ccc</default>
|
||
|
|
</property>
|
||
|
|
<property id="flipCardBackgroundColor" type="color" format="hex">
|
||
|
|
<title>Flip Card Background Colour</title>
|
||
|
|
<default>#333</default>
|
||
|
|
</property>
|
||
|
|
<property id="dividerColor" type="color">
|
||
|
|
<title>Divider Colour</title>
|
||
|
|
<default>#323434</default>
|
||
|
|
</property>
|
||
|
|
<property id="ampmColor" type="color">
|
||
|
|
<title>AM/PM Colour</title>
|
||
|
|
<default>#313333</default>
|
||
|
|
<visibility>
|
||
|
|
<test>
|
||
|
|
<condition field="clockFace" type="eq">TwelveHourClock</condition>
|
||
|
|
</test>
|
||
|
|
</visibility>
|
||
|
|
</property>
|
||
|
|
</properties>
|
||
|
|
<preview></preview>
|
||
|
|
<stencil>
|
||
|
|
<hbs><![CDATA[
|
||
|
|
<div id="clock"></div>
|
||
|
|
]]></hbs>
|
||
|
|
<style><![CDATA[
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
|
||
|
|
}
|
||
|
|
|
||
|
|
h1, h2, h3, h4, p {
|
||
|
|
margin-top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flip-clock-wrapper {
|
||
|
|
text-align: center;
|
||
|
|
position: relative;
|
||
|
|
margin: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
{% if backgroundColor %}body { background: {{backgroundColor}} !important; }{% endif %}
|
||
|
|
{% if dividerColor %}.flip-clock-dot { background: {{dividerColor}} !important; }{% endif %}
|
||
|
|
{% if ampmColor %}.flip-clock-meridium a { color: {{ampmColor}} !important; }{% endif %}
|
||
|
|
|
||
|
|
{% if flipCardTextColor %}.flip-clock-wrapper ul li a div div.inn { color: {{flipCardTextColor}} !important; }{% endif %}
|
||
|
|
{% if flipCardBackgroundColor %}.flip-clock-wrapper ul li a div div.inn { background-color: {{flipCardBackgroundColor}} !important; }{% endif %}
|
||
|
|
]]></style>
|
||
|
|
</stencil>
|
||
|
|
<onInitialize><![CDATA[
|
||
|
|
// Set moment locale
|
||
|
|
moment.locale(globalOptions.locale);
|
||
|
|
|
||
|
|
// Save get time remaining function to xiboIC be able to use it in the template
|
||
|
|
xiboIC.set(id, 'getTimeRemaining', function getTimeRemaining(endtime) {
|
||
|
|
// for IE and Windows player
|
||
|
|
var endtimeFormatted = endtime.replace(/^(.*-[0-9][0-9])( )([0-9][0-9]:.*$)/, '$1T$3');
|
||
|
|
|
||
|
|
var t = Date.parse(endtimeFormatted) - Date.parse(new Date());
|
||
|
|
var seconds = Math.floor( (t/1000) % 60 );
|
||
|
|
var minutes = Math.floor( (t/1000/60) % 60 );
|
||
|
|
var hours = Math.floor( (t/(1000*60*60)) % 24 );
|
||
|
|
var days = Math.floor( t/(1000*60*60*24) );
|
||
|
|
return {
|
||
|
|
'total': t,
|
||
|
|
'days': days,
|
||
|
|
'hours': hours,
|
||
|
|
'minutes': minutes,
|
||
|
|
'seconds': seconds
|
||
|
|
};
|
||
|
|
});
|
||
|
|
]]></onInitialize>
|
||
|
|
<onRender><![CDATA[
|
||
|
|
var width = $(window).width();
|
||
|
|
var height = $(window).height();
|
||
|
|
|
||
|
|
var clock_width = 300;
|
||
|
|
var clock_seconds_width = 160;
|
||
|
|
|
||
|
|
switch(properties.clockFace) {
|
||
|
|
case "DailyCounter":
|
||
|
|
clock_width = 460;
|
||
|
|
break;
|
||
|
|
case "HourlyCounter":
|
||
|
|
clock_width = 460;
|
||
|
|
break;
|
||
|
|
case "MinuteCounter":
|
||
|
|
clock_width = 300;
|
||
|
|
break;
|
||
|
|
case "TwelveHourClock":
|
||
|
|
clock_width = 380;
|
||
|
|
break;
|
||
|
|
case "TwentyFourHourClock":
|
||
|
|
clock_width = 300;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
// If we show seconds, then we need to increase the width
|
||
|
|
if (parseInt(properties.showSeconds) === 1 && (properties.clockFace === "TwelveHourClock" || properties.clockFace === "TwentyFourHourClock" || properties.clockFace === "DailyCounter")) {
|
||
|
|
clock_width += clock_seconds_width;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Calculate the width ratio between the actual width and the clock_width
|
||
|
|
var ratio = width / clock_width;
|
||
|
|
|
||
|
|
// What IE are we?
|
||
|
|
if ($("body").hasClass('ie7') || $("body").hasClass('ie8')) {
|
||
|
|
$("#clock").css({
|
||
|
|
"width": clock_width + "px",
|
||
|
|
"filter": "progid:DXImageTransform.Microsoft.Matrix(M11=" + ratio + ", M12=0, M21=0, M22=" + ratio + ", SizingMethod='auto expand'"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
$("#clock").css({
|
||
|
|
"width": clock_width + "px",
|
||
|
|
"transform": "scale(" + ratio + ")",
|
||
|
|
"transform-origin": "0 0"
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize or restart the clock
|
||
|
|
var offset = properties.offset;
|
||
|
|
var getTimeRemaining = xiboIC.get(id, 'getTimeRemaining');
|
||
|
|
|
||
|
|
// If flip clock is already initialized, destroy it
|
||
|
|
if (window.flipClock) {
|
||
|
|
window.flipClock.stop();
|
||
|
|
}
|
||
|
|
|
||
|
|
if (properties.clockFace === "TwelveHourClock" || properties.clockFace === "TwentyFourHourClock") {
|
||
|
|
window.flipClock = $('#clock').FlipClock({
|
||
|
|
clockFace: properties.clockFace,
|
||
|
|
showSeconds: (parseInt(properties.showSeconds) === 1)
|
||
|
|
});
|
||
|
|
|
||
|
|
var date = new Date(window.flipClock.getTime().time);
|
||
|
|
|
||
|
|
window.flipClock.setTime(new Date(date.valueOf() + (properties.offset * 60 * 1000)));
|
||
|
|
} else {
|
||
|
|
var duration;
|
||
|
|
if (isNaN(properties.offset)) {
|
||
|
|
duration = getTimeRemaining(properties.offset).total / 1000;
|
||
|
|
} else {
|
||
|
|
duration = properties.duration;
|
||
|
|
}
|
||
|
|
|
||
|
|
window.flipClock = $('#clock').FlipClock(duration, {
|
||
|
|
clockFace: properties.clockFace,
|
||
|
|
showSeconds: (parseInt(properties.showSeconds) === 1),
|
||
|
|
countdown: true
|
||
|
|
});
|
||
|
|
}
|
||
|
|
]]></onRender>
|
||
|
|
<assets>
|
||
|
|
<asset id="flipclock.js" type="path" mimeType="text/javascript" path="/modules/assets/flipclock/flipclock.min.js"></asset>
|
||
|
|
<asset id="flipclock.css" type="path" mimeType="text/css" path="/modules/assets/flipclock/flipclock.css"></asset>
|
||
|
|
<asset id="clock-flip-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/clock/clock-flip-thumb.png" />
|
||
|
|
</assets>
|
||
|
|
</module>
|