Initial Upload
This commit is contained in:
Matt Batchelder
236
modules/clock-flip.xml
Normal file
236
modules/clock-flip.xml
Normal file
@@ -0,0 +1,236 @@
|
||||
<!--
|
||||
~ 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>
|
||||
Reference in New Issue
Block a user