<!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.

    This template demonstrates a use of a dropdown selector to pick an icon. The same approach
    can be used to drive other aspects of templates: colors, optional elements, animations, logos,
    host names, yes/no options etc...

    Need custom templates?
    Let me know 😀

-->


<head>
    <meta charset="utf-8" />
    <title>INFOLEFT</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" type="text/css" href="customize.css" />

    <script>

        function initValues(){
            gsap.set("#line1", { opacity: 0 });
        }


        function runAnimationIN(IsLoop) {
            let videoPath="";
            let dur = 0.8;
            initValues()
            let iconDIV = document.getElementById('icon');
            let iconVAL = document.getElementById('f1').innerText;
            videoPath = "img/" + iconVAL.trim() + ".webm";
            if (iconVAL=='0' || iconVAL=='')
                {
                    // no icon
                    iconDIV.style.display='none';
                }
            else
                {
                    // use icon
                    document.getElementById('f0').style.paddingLeft = '0.5rem'; // move text a bit closer to icon
                    // console.log('Setting icon video to ' + videoPath);
                    document.getElementById('loop').src = videoPath;
                    videoplayer  = document.getElementById('video');
                    setTimeout(function(){ videoplayer.load(); }, 10);
                    setTimeout(function(){ videoplayer.play(); }, 100);
                    iconDIV.style.display='inline-block';
                }


            gsap.set("#TG", { opacity: 1 });
            gsap.set("#line1", { opacity: 1 });
            gsap.fromTo(
                "#line1",
                dur,
                    {
                        // start value
                        width:0
                    },
                    {
                        width:function(i, target)
                            {
                            target.style.width = "auto"; 
                            var width = target.offsetWidth-3;
                            target.style.width = "0px";
                            return width;
                            },
                        ease: "back.out(2.0)"
                    }
                );
            
            gsap.fromTo("#f0", { opacity:  0 }, { delay: 0.1, duration: dur - 0.2, opacity  : 1, ease: "Power3.easeOut" });
            gsap.fromTo("#f0", { x:     -200 }, { delay: 0.1, duration: dur - 0.1, x        : 0, ease: "back.out(2.0)" });
            gsap.fromTo("#icon", { scale:  0 }, { delay: 0.0, duration: dur - 0.0, scale    : 1, 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.set("#line1", { delay: dur + 0.0, opacity: 0 });
            gsap.to("#line1",  { delay: 0.00, duration: dur + 0.00, width:    0, ease: "back.in(1.2)" });
            gsap.to("#f0",     { delay: 0.00, duration: dur + 0.00, x:     -200, ease: "back.in(1.2)" });
            gsap.set("#TG",    { delay: dur - 0.0, opacity: 0 });
            gsap.fromTo("#icon", { scale:  1 }, { delay: 0.0, duration: dur + 0.1, scale     : 0,   ease: "Power4.easeIn" });
        }
    </script>

    <style>

        .tgpos{
            position: absolute;
            transform-origin: top left;
            border-left: 1.4rem solid var(--spx-accent-color);
            display:inline-block;
            left: 3.2vw;
            top: 9%;
            z-index: 10;
            opacity:0;
        }

        .icon{
            position: relative;
            transform-origin: 25% 50%;
            height: 3.7rem;
            width: 3.8rem;
            background-color: var(--spx-bgcol1-color);
            padding:0px;
            margin:0px 0px;
        }

    </style>

    <script type="text/javascript">
        window.SPXGCTemplateDefinition = {
            "description": "Top left with icon",
            "playserver": "OVERLAY",
            "playchannel": "1",
            "playlayer": "7",
            "webplayout": "7",
            "out": "manual",
            "uicolor": "7",
            "DataFields": [
                {
                    "ftype" : "instruction",
                    "value" : "This template demonstrates a use of dropdowns. Animated icons are small webm-videos in img-subfolder."
                },
                {
                    "field" : "f0",
                    "ftype" : "textfield",
                    "title" : "Info text",
                    "value" : "Headquarters"
                },
                {
                    "field": "f1",
                    "ftype": "dropdown",
                    "title": "Icon",
                    "value": "live",
                    "items": [
                        {
                            "text": "No icon",
                            "value": "0"
                        },
                        {
                            "text": "Telephone",
                            "value": "phone"
                        },
                        {
                            "text": "Live",
                            "value": "live"
                        }
                    ]
                }
            ]
        };
    </script>

</head>

<body>
    <div class="SPXWindow SPX_AUTOSIZE" data-spx-remember="Use either SPX_AUTOSIZE or SPX_FIXSIZE">
        <div id="TG" class="tgpos region SKEW LEFTELEMENTS">
            <div id="icon" style="display: inline-block;" class="icon fleft">
                <video id="video" width="200" height="200" style="width:100%;height:100%;" autoplay loop>
                    <source id="loop" src="" type="video/webm">
                    Your browser does not support the video tag.
                </video>
            </div>
            <div id="line1" class="color1 accentRight region fleft">
                <div class="font7 nowrap ANTISKEW" id="f0"></div>
            </div>
        </div>
        <div style="display:none;"  id="f1"></div>
    </div data-info="SPXWindow ends">

</body>
</html>
