
<!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 template is reading it's content from a Google Spreadsheet, which in turn is getting it's content
    from BBC News Service. This has some glitches and would need more love to be production ready, but you
    get the point, I' sure.

    See the data source spreadsheet:
    https://docs.google.com/spreadsheets/d/1scpoPiIc7-Vi_BWW4KFndowM_4AD7isMZKIw1_fP7_0/edit#gid=889875008

    Please note, a script on this page requires API-KEY from Google. See the script below for details.

   	Need custom templates?
	Let me know 😀

-->

<head>
    <meta charset="utf-8" />
    <title>TICKER SCROLL</title>
    <script src="js/webcg-framework.umd.js"></script>
    <script src="js/gsap3.2.6.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/axios.min.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>
        start = new Date().getTime();

        function runAnimationIN(IsLoop) {
            let dur = 0.8;
            gsap.set("#line1", { opacity: 1 });
            gsap.set("#TICKER", {display:"block"});
            gsap.to("#TICKER",   0.5, {opacity: 1});
            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("#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: 1;
        }


        .ticker {
            z-index: 1;
            width: 100%;
            border: 0px solid rgb(21, 255, 0);
            border-left: 1.4rem;
            /* float: left; */
        }

        .spxTicker {
            color: var(--spx-txcol1-color);
            position: relative;
            bottom: 0.3rem;
            font-family: "UI-Regular", Arial, Helvetica, sans-serif;
            font-size: 1.6rem;
            padding: 0.9rem 1rem 0.1rem 1rem; 
            line-height: 2.5rem;
            text-transform: uppercase;
            left: 108%;
        }

        .LastItem{
            opacity: 0;
        }

        .tab{
            position: absolute;
            display: inline-block;
            z-index: 20;
            left: -10px;;
            background-color: rgb(61, 61, 61);
            height: 100%;
            margin: 0px;
            padding: 0.6rem 2rem 0.1rem 2rem;
            opacity: 0;  
            box-shadow: black 10px 0px 30px;
        }


        .SECTION_NEWS
            {
            background-color:   #941212;
            color:              rgb(255, 255, 255);
            }


        .SECTION_TECHNOLOGY
            {
            background-color:   #dd9701;
            color:              rgb(255, 255, 255);
            }

        .SECTION_BUSINESS
            {
            background-color:   #4c8814;
            color:              rgb(255, 255, 255);
            }


    </style>

    <script>
        window.SPXGCTemplateDefinition = {
            "description": "Google Sheet Ticker",
            "playserver": "OVERLAY",
            "playchannel": "1",
            "playlayer": "3",
            "webplayout": "3",
            "out": "manual",
            "uicolor": "7",
            "DataFields": [
                {
                    "field" : "f0",
                    "ftype" : "hidden",
                    "title" : "Google DocumentID and tab names",
                    "value" : "1scpoPiIc7-Vi_BWW4KFndowM_4AD7isMZKIw1_fP7_0, NEWS, TECHNOLOGY, BUSINESS"
                },
                {
                    "field" : "info",
                    "ftype" : "caption",
                    "title" : "",
                    "value" : "Ticker with Google Sheet as data source"
                }        
            ]
        };
    </script>
</head>

<body>
    <div class="SPXWindow SPX_AUTOSIZE" data-spx-remember="Use either SPX_AUTOSIZE or SPX_FIXSIZE">
        <div style="display: none; color:#FF0; font-size:3em;" id="f0"></div>
        <div class="tickerZone region">
            <div id="TICKER" class="tgpos region SKEW">
                <div id="line1" class="color1 region accentRight">
                    <div class="ticker" id="ticker" >
                        <div class="font3 tab ANTISKEW" id="SectionHeader"></div>
                        <div class="spxTicker ANTISKEW" id="spxTicker"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>

    
    
    let ScrollSpeed = 3.25; // Typical speed approx 1.5 - 2.0
    let TickerData=[];
    let TickerStarted=0;
    let SectionSelector = 0;
    let sh = "";
    let ConfigItems = "";

    // ====================================================================================================
    // ====================================================================================================
    // API key for Google Sheets. See https://developers.google.com/sheets/api/guides/authorizing#APIKey

    let APIKEY = "AIzaSyB9jTBHXWu5INdNgwyAAHZMPnuIqeXjks4"; 
    
    // Please note: this is API key is restricted to this one specific demo usage and if quota gets
    // high, this will be closed and the demo will seize to work. I RECOMMEND changing the api-key
    // to one of your own and also the spreadsheet itself 
    //
    // ====================================================================================================
    // ====================================================================================================

    async function StartTicker(CurrentSectionIndex){
        let sourceConfig=document.getElementById('f0').innerText;
        console.log("Data in field f0: " + sourceConfig);
        ConfigItems = sourceConfig.split(',')
        sh = ConfigItems[0].trim();
        let myGSheet = "https://docs.google.com/spreadsheets/d/" + sh;
        let CurrentSectionName = ConfigItems[CurrentSectionIndex+1].trim();
        TickerStarted = new Date().getTime();
        TickerData = await getSheetData(CurrentSectionName)
        await populateDom(TickerData,CurrentSectionIndex)
        console.log('String ticker ' + CurrentSectionName + ' after a short delay...');
        setTimeout(function(){ PlayTickerDOM() }, 1000);  // delayed start
        TickerReady = new Date().getTime();
        console.log('Ticker (' + CurrentSectionName +') generation time: ' + (TickerReady-TickerStarted) + 'ms');
    }; 



    
    function getSheetData(sectionName) 
      {
        return new Promise(resolve => {
            let SectionData = {};
            SectionData.section = sectionName;
            let GoogJSON = "https://sheets.googleapis.com/v4/spreadsheets/" + sh + "/values/" + sectionName + "!C2:C100?key=" + APIKEY;
            axios.get(GoogJSON)
            .then(function (response) {
                SectionData.items = response.data.values
                TickerData.push(SectionData);
                resolve(TickerData);
            })
                .catch(function (error) {
                console.log(error);
            });
            
          }
        )
      }

    function populateDom(TickerData,CurrentTickerSection) 
      {
        let spxTicker = document.getElementById('spxTicker');
        document.getElementById('spxTicker').innerHTML="";
        return new Promise(resolve => {
            let SectionName = TickerData[CurrentTickerSection].section;
            console.log('Section: ' + SectionName);
            document.getElementById('SectionHeader').innerText = SectionName;
            document.getElementById('SectionHeader').classList.forEach((item,index) => {
                if (item.indexOf("SECTION_")>-1){
                    document.getElementById('SectionHeader').classList.remove(item);
                }
                document.getElementById('SectionHeader').classList.add("SECTION_" + SectionName.toUpperCase())
            });
            spxTicker.innerHTML="";
            TickerData[CurrentTickerSection].items.forEach((item,index) => {
                if (index==0)
                {
                    spxTicker.innerHTML=item;
                }
                else
                {
                    spxTicker.innerHTML+='&nbsp;&nbsp;<span class="sheetTickerDelim" style="margin-left:0.5em;"></span>&nbsp;' + item;
                }
            });
            spxTicker.innerHTML+='<span class="LastItem" id="LastItem">LAST</span>'
            resolve();
          }
        )
      }

    function PlayTickerDOM()
        {
            gsap.fromTo("#SectionHeader",  { opacity:    0 }, { delay: 2.0, duration: 0.1, opacity: 1,   ease: "none" }); 
            gsap.fromTo("#SectionHeader",  { y:       -100 }, { delay: 2.0, duration: 0.7, y:       0,   ease: "back.out(1.5)" }); 
            gsap.ticker.add(scrollToLeft);
        }

    function scrollToLeft() {
            let spxTicker = document.getElementById('spxTicker');
            let spxTiZone = document.getElementById('TICKER');
            let LEFT = spxTicker.offsetLeft;
            let LAST = document.getElementById('LastItem');
            spxTicker.style.left = (LEFT-ScrollSpeed) + 'px';

            var zoneRect = spxTiZone.getBoundingClientRect(),
            elemRect = LAST.getBoundingClientRect(),
            offset   = elemRect.left - zoneRect.left;
            if ( offset < 200 ) {
                gsap.ticker.remove(scrollToLeft);
                gsap.fromTo("#SectionHeader",  { y:        0 }, { delay: 0.0, duration: 0.6, y:     100,   ease: "back.in(1.5)" }); 
                gsap.fromTo("#SectionHeader",  { opacity:  1 }, { delay: 0.5, duration: 0.1, opacity: 0,   ease: "none" }); 
                spxTicker.style.left = '100%';
                if (SectionSelector>=ConfigItems.length-2) // minus 2 because first index is DocID...
                    {
                        SectionSelector=0
                    }
                else
                    {
                        SectionSelector+=1
                        // console.log('SectionSelector incremented to ' + SectionSelector);
                    }
                setTimeout(function(){ StartTicker(SectionSelector) }, 300);  // delayed start
                
            }
            else
            {
                // console.log('LAST distance from TickerZone start ' + offset);
            }
    }


    setTimeout(function () {
        StartTicker(SectionSelector) // the index number of sections in sourceConfig
     },
     50);





    function stop() {
        runAnimationOUT()
    } // stop ed

    function play() {
        runAnimationIN()
    } // stop ed
     
    $(document).ready(function() {
        ready = new Date().getTime();
        console.log('Template Load Time: ' + (ready-start) + 'ms');
    });
</script>


</body>
</html>



