<!--
  ~ 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-worldclock-analogue</id>
    <name>World Clock - Analogue</name>
    <author>Core</author>
    <description>Analogue World Clock</description>
    <icon>fa fa-globe</icon>
    <class></class>
    <compatibilityClass>\Xibo\Widget\Compatibility\WorldClockWidgetCompatibility</compatibilityClass>
    <type>worldclock-analogue</type>
    <group id="worldclock" icon="fa fa-globe">World Clock</group>
    <legacyType condition="clockType==2">worldclock</legacyType>
    <dataType></dataType>
    <schemaVersion>2</schemaVersion>
    <assignable>1</assignable>
    <regionSpecific>1</regionSpecific>
    <renderAs>html</renderAs>
    <defaultDuration>10</defaultDuration>
    <thumbnail>worldclock-analogue-thumb</thumbnail>
    <settings></settings>
    <properties>
        <property type="header">
            <title>Clocks</title>
        </property>
        <property id="worldClocks" type="worldClock"></property>
        <property id="numCols" type="number">
            <title>Clock Columns</title>
            <helpText>Number of columns to display</helpText>
            <default>1</default>
            <rule>
                <test type="and">
                    <condition type="required"></condition>
                    <condition type="gte">0</condition>
                </test>
            </rule>
        </property>
        <property id="numRows" type="number">
            <title>Clock Rows</title>
            <helpText>Number of rows to display</helpText>
            <default>1</default>
            <rule>
                <test type="and">
                    <condition type="required"></condition>
                    <condition type="gte">0</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 type="header">
            <title>Analogue Clock Settings</title>
        </property>
        <property id="bgColor" type="color">
            <title>Background colour</title>
            <helpText>Use the colour picker to select the background colour</helpText>
            <default></default>
        </property>
        <property id="faceColor" type="color">
            <title>Face colour</title>
            <helpText>Use the colour picker to select the face colour</helpText>
            <default>#f9f9f9</default>
        </property>
        <property id="caseColor" type="color">
            <title>Case colour</title>
            <helpText>Use the colour picker to select the case colour</helpText>
            <default>#222</default>
        </property>
        <property id="hourHandColor" type="color">
            <title>Hour hand colour</title>
            <helpText>Use the colour picker to select the hour hand colour</helpText>
            <default>#333</default>
        </property>
        <property id="minuteHandColor" type="color">
            <title>Minute hand colour</title>
            <helpText>Use the colour picker to select the minute hand colour</helpText>
            <default>#333</default>
        </property>
        <property id="showSecondsHand" type="checkbox">
            <title>Show seconds hand?</title>
            <helpText>Tick if you would like to show the seconds hand</helpText>
            <default>1</default>
        </property>
        <property id="seconds-fields-1" type="divider">
            <visibility>
                <test>
                    <condition field="showSecondsHand" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="secondsHandColor" type="color">
            <title>Seconds hand colour</title>
            <helpText>Use the colour picker to select the seconds hand colour</helpText>
            <default>#aa0202</default>
            <visibility>
                <test>
                    <condition field="showSecondsHand" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="seconds-fields-2" type="divider">
            <visibility>
                <test>
                    <condition field="showSecondsHand" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="dialColor" type="color">
            <title>Dial centre colour</title>
            <helpText>Use the colour picker to select the dial centre colour</helpText>
            <default>#222</default>
        </property>
        <property id="showSteps" type="checkbox">
            <title>Show steps?</title>
            <helpText>Tick if you would like to show the clock steps</helpText>
            <default>1</default>
        </property>
        <property id="steps-fields-1" type="divider">
            <visibility>
                <test>
                    <condition field="showSteps" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="stepsColor" type="color">
            <title>Steps colour</title>
            <helpText>Use the colour picker to select the steps colour</helpText>
            <default>#333</default>
            <visibility>
                <test>
                    <condition field="showSteps" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="secondaryStepsColor" type="color">
            <title>Secondary steps colour</title>
            <helpText>Use the colour picker to select the secondary steps colour</helpText>
            <default>#333</default>
            <visibility>
                <test>
                    <condition field="showSteps" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="steps-fields-2" type="divider">
            <visibility>
                <test>
                    <condition field="showSteps" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="showDetailed" type="checkbox">
            <title>Detailed look?</title>
            <helpText>Tick if you would like to show a more detailed look for the clock ( using shadows and 3D effects )</helpText>
            <default>1</default>
        </property>
        <property id="showMiniDigitalClock" type="checkbox">
            <title>Show inner digital clock?</title>
            <helpText>Tick if you would like to show a small inner digital clock</helpText>
            <default>1</default>
        </property>
        <property id="inner-digital-fields-1" type="divider">
            <visibility>
                <test>
                    <condition field="showMiniDigitalClock" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="digitalClockTextColor" type="color">
            <title>Digital clock text colour</title>
            <helpText>Use the colour picker to select the digital clock text colour</helpText>
            <default>#3b3b3b</default>
            <visibility>
                <test>
                    <condition field="showMiniDigitalClock" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="digitalClockBgColor" type="color">
            <title>Digital clock background colour</title>
            <helpText>Use the colour picker to select the digital clock background colour</helpText>
            <default>#e6e6e6</default>
            <visibility>
                <test>
                    <condition field="showMiniDigitalClock" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="inner-digital-fields-2" type="divider">
            <visibility>
                <test>
                    <condition field="showMiniDigitalClock" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="showLabel" type="checkbox">
            <title>Show label?</title>
            <helpText>Tick if you would like to show the timezone label</helpText>
            <default>1</default>
        </property>
        <property id="label-fields-1" type="divider">
            <visibility>
                <test>
                    <condition field="showLabel" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="labelTextColor" type="color">
            <title>Label text colour</title>
            <helpText>Use the colour picker to select the label text colour</helpText>
            <default>#f9f9f9</default>
            <visibility>
                <test>
                    <condition field="showLabel" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="labelBgColor" type="color">
            <title>Label background colour</title>
            <helpText>Use the colour picker to select the label background colour</helpText>
            <default>#222</default>
            <visibility>
                <test>
                    <condition field="showLabel" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="label-fields-2" type="divider">
            <visibility>
                <test>
                    <condition field="showLabel" type="eq">1</condition>
                </test>
            </visibility>
        </property>
    </properties>
    <preview></preview>
    <stencil>
        <width id="width">250</width>
        <height id="height">250</height>
        <hbs><![CDATA[
<div class="analogue-clock-template" style="display: none;">
    <div class="analogue-clock">
        {{#eq showMiniDigitalClock 1}}
            <div class="analogue-mini-digital">
                [HH:mm:ss]
            </div>
        {{/eq}}
        <div class="analogue-clock-hour"></div>
        <div class="analogue-clock-minute"></div>
        {{#eq showSecondsHand 1}}
            <div class="analogue-clock-second"></div>
        {{/eq}}
        <div class="analogue-center"></div>
        {{#eq showDetailed 1}}
            <div class="analogue-overlay"></div>
        {{/eq}}
        {{#eq showSteps 1}}
            <div class="analogue-steps">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        {{/eq}}
    </div>

    {{#eq showLabel 1}}
        <div class="analogue-clock-label">[label]</div>
    {{/eq}}
</div>
        ]]></hbs>
        <style><![CDATA[
body {
    {% if bgColor %}
        background: {{bgColor}} !important;
    {% endif %}
}

.analogue-clock {
    {% if faceColor %}
        background: {{faceColor}};
    {% endif %}
    position: relative;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    left: 35px;
    top: 20px;
}

.analogue-center {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    {% if dialColor %}
        background: {{dialColor}};
    {% endif %}
}

.analogue-clock-hour {
    {% if hourHandColor %}
        background: {{hourHandColor}};
    {% endif %}
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -3px 0 -4px -25%;
    padding: 3px 0 4px 25%;
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    border-radius: 3px;
}

.analogue-clock-minute {
    {% if minuteHandColor %}
        background: {{minuteHandColor}};
    {% endif %}
    width:0;
    height:0;
    position:absolute;
    top:50%;
    left:50%;
    margin:-40% -2px 0;
    padding:40% 2px 0;
    -webkit-transform-origin:50% 100%;
    -ms-transform-origin:50% 100%;
    transform-origin:50% 100%;
    border-radius: 2px;
}

/* Highlighted */
.highlighted .analogue-clock-label {
    font-weight: bold;
    font-size: 20px;
}

{% if showLabel == 1 %}
    .analogue-clock-label {
        {% if labelBgColor %}
            background: {{labelBgColor}};
        {% endif %}
        {% if labelTextColor %}
            color: {{labelTextColor}};
        {% endif %}
        bottom: -30px;
        position: relative;
        font-size: 18px;
        width: 80%;
        left: 10%;
        text-align: center;
        line-height: 28px;
    }
{% else %}
    .analogue-clock {
        top: 35px;
    }
{% endif %}

/* Mini digital clock */
{% if showMiniDigitalClock == 1 %}
    .analogue-mini-digital {
        {% if digitalClockBgColor %}
            background: {{digitalClockBgColor}};
        {% endif %}
        {% if digitalClockTextColor %}
            color: {{digitalClockTextColor}};
        {% endif %}
        top: 120px;
        position: relative;
        left: 50%;
        width: 70px;
        font-size: 16px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        line-height: 22px;
    }
{% endif %}

/* Seconds hand */
{% if showSecondsHand == 1 %}
    .analogue-clock-second {
        width:0;
        height:0;
        {% if secondsHandColor %}
            background: {{secondsHandColor}};
        {% endif %}
        position:absolute;
        top:45%;
        left:50%;
        margin:-40% -1px 0;
        padding:45% 1px 0;
        -webkit-transform-origin:45% 100%;
        -ms-transform-origin:45% 100%;
        transform-origin:45% 100%;
        border-radius: 1px;
    }
{% endif %}

/* Detailed version CSS ( shadows and 3D effects ) */
{% if showDetailed == 1 %}
    .analogue-overlay {
        width: 100%;
        height: 100%;
        background: linear-gradient(330deg, rgb(176, 176, 176) 68%, rgb(255, 255, 255) 76%);
        position: absolute;
        top: 0;
        border-radius: 50%;
        opacity: 0.1;
    }
    .analogue-clock {
        -moz-box-shadow: inset 1px 1px 4px -1px #222, 1px 1px 2px 0px #575757;
        -webkit-box-shadow: inset 1px 1px 4px -1px #222, 1px 1px 2px 0px #575757;
        box-shadow: inset 1px 1px 4px -1px #222, 1px 1px 2px 0px #575757;
    }
    
    .analogue-mini-digital {
        -moz-box-shadow: inset 1px 1px 3px -2px #222;
        -webkit-box-shadow: inset 1px 1px 3px -2px #222;
        box-shadow: inset 1px 1px 3px -2px #222;
    }
    
    .analogue-clock-hour,  .analogue-clock-minute, .analogue-clock-second, .analogue-center {
        -moz-box-shadow: inset 0px 0px 3px -1px #222;
        -webkit-box-shadow: inset 0px 0px 3px -1px #222;
        box-shadow: inset 0px 0px 3px -1px #222;
    }

    /* If there's label background, show shadows/effects */
    {% if labelBgColor %}
        .analogue-clock-label {
            -moz-box-shadow: inset 1px 1px 4px -2px #222, 1px 1px 2px 0px #575757;
            -webkit-box-shadow: inset 1px 1px 4px -2px #222, 1px 1px 2px 0px #575757;
            box-shadow: inset 1px 1px 4px -2px #222, 1px 1px 2px 0px #575757;
        }
    {% endif %}
{% endif %}

/* Dial steps */
{% if showSteps == 1 %}
    .analogue-steps > div {
        {% if secondaryStepsColor %}
            background: {{secondaryStepsColor}};
        {% endif %}
        width: 4px;
        height: 10px;
        position: absolute;
        top: 6px;
        left: 88px;
        -webkit-transform-origin: 2px 84px;
        -ms-transform-origin: 2px 84px;
        transform-origin: 2px 84px;
    }
    
    .analogue-steps > div:nth-child(3n+1) {
        {% if stepsColor %}
            background: {{stepsColor}};
        {% endif %}
        height: 14px;
    }

    .analogue-steps > div:nth-child(2) { transform: rotate(30deg); -webkit-transform: rotate(30deg); }
    .analogue-steps > div:nth-child(3) { transform: rotate(60deg); -webkit-transform: rotate(60deg); }
    .analogue-steps > div:nth-child(4) { transform: rotate(90deg); -webkit-transform: rotate(90deg); }
    .analogue-steps > div:nth-child(5) { transform: rotate(120deg); -webkit-transform: rotate(120deg); }
    .analogue-steps > div:nth-child(6) { transform: rotate(150deg); -webkit-transform: rotate(150deg); }
    .analogue-steps > div:nth-child(7) { transform: rotate(180deg); -webkit-transform: rotate(180deg); }
    .analogue-steps > div:nth-child(8) { transform: rotate(210deg); -webkit-transform: rotate(210deg); }
    .analogue-steps > div:nth-child(9) { transform: rotate(240deg); -webkit-transform: rotate(240deg); }
    .analogue-steps > div:nth-child(10) { transform: rotate(270deg); -webkit-transform: rotate(270deg); }
    .analogue-steps > div:nth-child(11) { transform: rotate(300deg); -webkit-transform: rotate(300deg); }
    .analogue-steps > div:nth-child(12) { transform: rotate(330deg); -webkit-transform: rotate(330deg); }
{% endif %}

/* If there's a case colour, show the clock border and adjust the steps' positions */
{% if caseColor != '' %}
    .analogue-clock {
        border: 6px solid {{caseColor}};
    }
    
    .analogue-steps > div {
        top: 0px;
        left: 82px;
    }
{% endif %}
        ]]></style>
    </stencil>
    <onInitialize><![CDATA[
// Set moment locale
moment.locale(globalOptions.locale);

Handlebars.registerHelper('eq', function (v1, v2, opts) {
  if (v1 == v2) {
    return opts.fn(this);
  } else {
    return opts.inverse(this);
  }
});
    ]]></onInitialize>
    <onRender><![CDATA[
// Render world clock only once
if (typeof $(target).data('analogueClockRendered') === 'undefined') {
    $(target).data('analogueClockRendered', true);
    $(target).xiboWorldClockRender(properties, $(target).find('.analogue-clock-template'));
}

// Scale the element every time
$(target).xiboLayoutScaler(properties);
    ]]></onRender>
    <assets>
        <asset id="worldclock-analogue-thumb" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/worldclock/worldclock-analogue-thumb.png" />
    </assets>
</module>