Cloud-CMS/modules/text.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-text</id>
    <name>Rich Text</name>
    <author>Core</author>
    <description>Add Text directly to a Layout</description>
    <icon>fa fa-font</icon>
    <class></class>
    <showIn>playlist</showIn>
    <type>text</type>
    <dataType></dataType>
    <schemaVersion>1</schemaVersion>
    <assignable>1</assignable>
    <regionSpecific>1</regionSpecific>
    <renderAs>html</renderAs>
    <defaultDuration>10</defaultDuration>
    <startWidth>600</startWidth>
    <startHeight>400</startHeight>
    <settings></settings>
    <properties>
        <property id="text" type="richText" allowLibraryRefs="true">
            <title>Enter text or HTML in the box below.</title>
            <helpText>Enter the text to display. The red rectangle reflects the size of the region you are editing. Shift+Enter will drop a single line. Enter alone starts a new paragraph.</helpText>
        </property>
        <property id="mediaSnippets" type="snippet" mode="media" target="text">
            <title>Media</title>
            <helpText>Choose media</helpText>
        </property>
        <property id="backgroundColor" type="color">
            <title>Background Colour</title>
            <helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
        </property>
        <property id="effect" type="effectSelector" variant="all">
            <title>Effect</title>
            <helpText>Please select the effect that will be used to transition between items.</helpText>
            <default>none</default>
        </property>
        <property id="speed" type="number">
            <title>Speed</title>
            <helpText>The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1).</helpText>
            <visibility>
                <test>
                    <condition field="effect" type="neq">none</condition>
                </test>
            </visibility>
        </property>
        <property id="marqueeInlineSelector" type="text">
            <title>Marquee Selector</title>
            <default>p</default>
            <helpText>The selector to use for stacking marquee items in a line when scrolling Left/Right.</helpText>
            <visibility>
                <test>
                    <condition field="effect" type="neq">none</condition>
                </test>
            </visibility>
        </property>
                <property id="seeAdvancedFields" type="checkbox">
            <title>Show advanced controls?</title>
            <helpText>Show Javascript and CSS controls.</helpText>
            <default>0</default>
        </property>
        <property id="javaScript" type="code" variant="javascript">
            <title>Optional JavaScript</title>
            <helpText>Add JavaScript to be included immediately before the closing body tag. Do not use [] array notation as this is reserved for library references. Do not include script tags.</helpText>
            <visibility>
                <test>
                    <condition field="seeAdvancedFields" type="eq">1</condition>
                </test>
            </visibility>
        </property>
        <property id="styleSheet" type="code" allowLibraryRefs="true" variant="css">
            <title>Optional Stylesheet</title>
            <visibility>
                <test>
                    <condition field="seeAdvancedFields" type="eq">1</condition>
                </test>qa
            </visibility>
        </property>
    </properties>
    <preview></preview>
    <stencil>
        <twig><![CDATA[
<script type="text/javascript">
    {{javaScript|raw}}
</script>
        ]]></twig>
        <style><![CDATA[
{% if backgroundColor %}body { background-color: {{backgroundColor}} !important; }{% endif %}
{{styleSheet|raw}}
        ]]></style>
    </stencil>
    <onInitialize><![CDATA[
// id: The id of the widget
// target: The target element to render
// properties: The properties for the widget
// -------------------------------------------
var hasClock = false;

// Parse any Clock elements
if (properties.text && properties.text.indexOf('[Clock]') >= 0) {
    hasClock = true;
    properties.text = properties.text.replace('[Clock]', '[HH:mm]');
}

if (properties.text && properties.text.indexOf('[Clock|') >= 0) {
    hasClock = true;
    properties.text = properties.text.replace('[Clock|', '[');
}

if (properties.text && properties.text.indexOf('[Date]') >= 0) {
    hasClock = true;
    properties.text = properties.text.replace('[Date]', '[DD/MM/YYYY]');
}

if (properties.text && properties.text.indexOf('[Date|') >= 0) {
    hasClock = true;
    properties.text = properties.text.replace('[Date|', '[');
}

if (hasClock) {
    // Use regex to out the bit between the [] brackets and use that as the format mask for moment.
    var text = properties.text;
    var regex = /\[.*?\]/g;

    properties.text = text.replace(regex, function (match) {
        return '<span class="clock" format="' + match.replace('[', '').replace(']', '') + '"></span>';
    });

    // Set moment locale
    moment.locale(globalOptions.locale);
}

// Save hasClock as global variable
xiboIC.set(id, 'hasClock', hasClock);
    ]]></onInitialize>
    <onRender>
        <![CDATA[
// Module renderer options
// id: The id of the widget
// target: The target element to render
// properties: The properties for the widget

// Send property type  = text
properties.type = 'text';

// Replace content with the parsed text
$(target).find('#content').html(properties.text);

// Scale the layout
$('body').xiboLayoutScaler(properties);

$(target).xiboTextRender(Object.assign(properties, globalOptions), $(target).find('#content > *'));

// Image render
$(target).find('img').xiboImageRender(properties);
    ]]></onRender>
    <onVisible><![CDATA[
// If we have a clock, create method and start it
if (xiboIC.get(id, 'hasClock')) {
    function updateClock() {
        $(".clock").each(function() {
            $(this).html(moment().format($(this).attr("format")));
        });
    }

    // Start the first time
    updateClock();

    // Update every second
    setInterval(updateClock, 1000);
}

// Start effects for this widget
$(target).xiboLayoutAnimate(properties);
    ]]></onVisible>
</module>