ContestWinnersExample

ContestWinnersExample.js

class DailyContestWinners {

    constructor(){
        this.data           = '';
        this.globalID       = '';
        this.date           = '';
        this.scrollPos      = 0;
        this.totalItems     = 0;
        this.list           = document.querySelector('.cta-message ul');
        this.el             = document.getElementById('action');
        this.docEl          = document.getElementsByTagName('HTML');
        this.scrollInit     = false;
        this.now            = Date.now();
    }

    init(url, bool) {
        this.url = `${url}?v=${this.now}`;
        this.bool = bool;

        console.log(this.url);

        let that = this;
        console.log(`Fetching {{ DATA }} .... | Endpoint => ${this.url} | scrollPos => ${this.scrollPos} `);

        fetch(this.url)
        .then((resp) => resp.json()) // Transform the data into json
        .then((data) => {
            // Create and append the li's to the ul
            // console.log(data);

            that.data                  = data;
            // console.log(that.data);

            if(this.bool){
                that.items             = that.data.Winners;

                // console.log(that.items);

                this.totalItems        = that.items.length;

                // console.log("ABOUT TO LOOP");

                for(let i = 0; i < this.totalItems; i++){

                    // console.log(that.items[i]);

                    let listNode       = document.createElement("LI");

                    // console.log(this.list);

                    listNode.innerHTML = `<section class="img-sec"><img src="${this.items[i].imgSrc}"></section><section class="info-sec"><section class="info-top">${this.items[i].prizeDescription}</section><section class="info-bottom">${this.items[i].winnerName}</section></section>`;

                    this.list.appendChild(listNode);
                }

                let x = this;

                window.requestAnimationFrame(this.scroller.bind(this));
            }

            // console.log(that.data.NextDrawingTime);

            DailyContestWinners.millionDollarCountdown(that.data.NextDrawingTime);

        });

    };

    scroller() {

        // Start Scrolling by adding one to last known scroll position
        this.scrollPos                 = this.scrollPos+1;

        // Next we add that updated scroll position to the scrollTop JS method
        // This should move the view...
        this.el.scrollTop              = this.scrollPos;

        this.globalID                  = requestAnimationFrame(this.scroller.bind(this));

        this.listen();
    }

    listen(){
        // console.log("LISTENER CALLED");
        // Now we listen for a scroll
            // if it is greater than 1px form the top we know we have movement
            if (!this.scrollInit) {

                // console.log(`SCROLL POSITION SHOULD BE ZERO / BUT IS === > ${this.scrollPos} && SCROLL TOP => ${this.el.scrollTop}`);
                // Change the overflow styling

                let h = document.getElementsByTagName('html')[0];
                let b = document.body;

                if(this.el.scrollTop  === 0){
                    // window.scrollTop = 0;
                    this.scrollInit  = true;
                    b.style.overflow = 'visible';
                    h.style.overflow = 'visible';
                }else if(this.el.scrollTop > 0){
                    this.scrollInit  = true;
                    b.style.overflow = 'scroll';
                    h.style.overflow = 'scroll';
                }

            }
    }

    static millionDollarCountdown(date) { // START millionDollarCountdown()
        // Comment out after testing and uncomment next line
        // this.date                       = new Date("June 15, 2019 15:37:25").getTime();

        // Uncomment for live feed
        this.date = new Date(date).getTime();

        let that                        = this;

        // Call Once for initial time display on load...
        go(this);

        // Update the count down every 1 second
        let x = setInterval( ()         =>  {
            // console.log("Ticking");

            go(that);

        }, 1000);

        function go(that) {
            let now                     = new Date().getTime();

            // Find the distance between now and the count down date
            let distance                = that.date - now;

            // If the count down is finished, write some text and terminate operation....
            if (distance < 0) {

                clearInterval(x);

                return document.getElementById("timer").innerHTML = "EXPIRED";

            }

            let oneDay                  = 1000 * 60 * 60 * 24;

            // let normal_days = Math.floor(distance / (1000 * 60 * 60 * 24));

            // The following is days calculated in hours, normal days as whole numbers are listed above
            // comment out next line to replace with normal whole number days and adjust HTML DOM injection below.
            let days_as_hours           = Math.floor(distance / (oneDay)) * 24;
            let hours                   = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            let total_DayHours          = days_as_hours + hours;
            let minutes                 = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            let seconds                 = Math.floor((distance % (1000 * 60)) / 1000);

            // Normal print out if we ever need to reconvert to a standard display with Days as whole numbers not ours...

            // DOM INJECTIONS....

            // document.getElementById("timer").innerHTML = let normal_days + "d " + hours + "h "
            //     + minutes + "m " + seconds + "s ";

            // Print out where days are in hours....
            document.getElementById("timer").innerHTML = total_DayHours + ":" + minutes + ":" + seconds;

        }
    }

}