javascript 定时CTA / Modal

Posted 2021-05-03

var pathArray = window.location.pathname.split( '/' ),
            blogSegment = 'blog',
            currentTimestamp = Date.now(),
            modalOmissionDuration = 172800000, // 2 weeks
            modalTimestamp = Number(localStorage.getItem("time-modal-last-shown")),
            ctaTimestamp = Number(localStorage.getItem("time-cta-last-shown")),
            ctaScrollPoint = getMax() * .25,
            slideCTA = $(".slide-in-cta"),
            slideCTAClose = $(".slide-in-cta .close");

        /*
            Slide in CTA
            Show at 25% progress on blog post
            Using 25% of reading progress to start
        */
        if ( $('body').hasClass('layout-blog') && $('body').hasClass('single-post') ) {
            if ((currentTimestamp - ctaTimestamp) >= modalOmissionDuration) {
                $(window).scroll(function() {
                    if( ($(window).scrollTop() > (ctaScrollPoint) ) ) {
                        slideCTA.fadeIn();
                    }
                    else{
                        slideCTA.fadeOut();
                    }
                });
            }
        }

        // close slide modal and set timestamp for 'time-cta-last-shown'
        slideCTAClose.on('click', function (e) {
            slideCTA.css('visibility', 'hidden');
            slideCTA.find('.hs-cta-node').css('visibility', 'hidden');

             
            /*
                Set visibility hidden because the timestamp check only works on page load
                This prevents the cta from showing after it's closed (and re-showing on scroll) 
                The local storage timestamp check will then prevent the cta from showing on subsequent pages.
            */
            localStorage.setItem("time-cta-last-shown", currentTimestamp);
        });


        /*

            Timed modal that loads the blog subscription form if a localStorage
            operation passes.

            Note: this modal is also loaded via data attributes (and clicking) in three
            other places on the site. Click-loading the modal has no bearing on this
            timed load.
        */
            /*
            function which checks the timestamp and localStorage parameters and if the operation passes,
            adds the timed-modal class to the body, sets localStorage and displays the modal.
            */

            
            function nl_signup_modal() {
                if ((currentTimestamp - modalTimestamp) >= modalOmissionDuration) {
                    setTimeout(function() {
                        $('body').addClass('timed-modal');
                        localStorage.setItem("time-modal-last-shown", currentTimestamp);
                        $("#subscribeModal").modal("show");
                    }, 6000);
                }
            }
            

        /*
        If the url segment includes /blog/ at all, run the function
        */
       
        if (jQuery.inArray(blogSegment, pathArray) != '-1') {
            nl_signup_modal();
        }
        

        /*
            Use the .timed-modal class to namespace the hide.bs.modal event
            which is fired immediately when the hide instance method has been called. This will prevent the 
            function from taking any action when the modal is opened by click.
        */

        $('.timed-modal #subscribeModal').on('hidden.bs.modal', function (e) {
          $('body').removeClass('timed-modal');
          localStorage.setItem("time-modal-last-shown", currentTimestamp);
        });