<!DOCTYPE html>
<html lang="en">

<!--

    (C) 2020 tuomo@smartpx.fi (MIT License)
    Demo template for SPX-GC. See SPXGCTemplateDefinition -object below for data field descriptions.

    This demo template does not have linked properties so all layers remain in their positions and
    do not "make space" for others.

    Need custom templates?
	Let me know 😀

-->

<head>
    <meta charset="utf-8" />
    <title>TICKER</title>
    <script type="text/javascript" src="js/gsap3.2.6.min.js"></script>
    <script type="text/javascript" src="js/webcg-framework.umd.js"></script>
    <script type="text/javascript" src="js/spx_cmdhandler.1.2.js"></script>
    <link rel="stylesheet" type="text/css" href="css/spx_layout.css" />
    <link rel="stylesheet" type="text/css" href="css/spx_fonts.css" />
    <link rel="stylesheet" href="customize.css" />


    <script>
        function initValues(){
            // not much here
        }

        function runAnimationIN(IsLoop) {
            let dur = 0.8;
            initValues()
            gsap.set("#line1", { opacity: 1 });
            gsap.set("#TICKER", { opacity: 1 });
            gsap.set("#TICKER", {display:"block"});
            gsap.fromTo(
                "#TICKER",
                dur,
                    {
                        x:function(i, target)
                            {
                            var x = target.offsetWidth-3;
                            target.style.left = x;
                            return x;
                            },
                    },
                    {
                        x:0,
                        ease: "power3.out"
                    }
                );
            gsap.fromTo(
                "#line1",
                dur+0.2,
                    {
                        width:0
                    },
                    {
                        delay: 0.7,
                        width:function(i, target)
                            {
                            target.style.width = "auto"; 
                            var width = target.offsetWidth-3;
                            target.style.width = "0px";
                            return width;
                            },
                        onComplete:function() { gsap.set("#line1", {width:"auto"});  },
                        ease: "power3.inOut"
                    }
                );
            gsap.fromTo("#f0",    { x:             -1000 }, { delay: 0.5, duration: dur + 0.8, x     : 0,          ease: "Power3.easeOut" });
            gsap.fromTo("#f1",    { x:              -800 }, { delay: 0.6, duration: dur + 0.8, x     : 0,          ease: "Power3.easeOut" });
            gsap.fromTo("#line1", { borderRightWidth: 10 }, { delay: 1.4, duration: 0.1, borderRightWidth:  0,   ease: "Power3.easeOut" });

            if (IsLoop){
                console.log('%c SPX LOOP MODE! Parameter loop=true. Animation will forcefully AUTO-LOOP. ', 'background: #222; color: #bada55');
                setTimeout(function(){ runAnimationOUT(); }, 3000);
                setTimeout(function(){ runAnimationIN(true); }, 5000);
            }
        }

        function runAnimationOUT() {
            let dur = 0.7;
            gsap.to("#line1",     { duration: dur + 0.00, width:    0, ease: "back.in(1.2)" });
            gsap.set("#TICKER",   { delay:    dur, display: "none"});
        }
    </script>


    <style>
        .tickerZone{
            position: absolute;
            border: 0px solid yellow;
            left: 3.2vw;
            right: 3.2vw;
            top: 85.5%;
            z-index: 10;
            padding: 0;
        }

        .tgpos{
            position: relative;
            transform-origin: top left;
            border-left: 1.4rem solid var(--spx-accent-color);
            display:block;
            opacity: 0;
        }

    </style>

    <script type="text/javascript">
        window.SPXGCTemplateDefinition = {
            "description": "Ticker",
            "playserver": "OVERLAY",
            "playchannel": "1",
            "playlayer": "3",
            "webplayout": "3",
            "out": "manual",
            "uicolor": "7",
            "DataFields": [
                {
                    "ftype" : "instruction",
                    "value" : "This is an example from the default template pack. For more templates see ▶ spxgc.com/store"
                },
                {
                    "field" : "f0",
                    "ftype" : "textfield",
                    "title" : "Headline",
                    "value" : "LATER IN THE SHOW"
                },
                {
                    "field" : "f1",
                    "ftype" : "textfield",
                    "title" : "Content",
                    "value" : "We will figure out how to update this manual ticker text"
                }
            ]
        };
    </script>

</head>

<body>
    <div class="SPXWindow SPX_AUTOSIZE" data-spx-remember="Use either SPX_AUTOSIZE or SPX_FIXSIZE">
        <div class="tickerZone region">
            <div id="TICKER" class="tgpos region SKEW">
                <div id="line1" class="color1 region accentRight">
                    <div class="font3 fleft ANTISKEW" id="f0"></div>
                    <div class="font4 boxBefore ANTISKEW" id="f1"></div>
                </div>
            </div>
        </div>
    </div data-info="SPXWindow ends">
</body>
</html>
