dfp > prestitial oop solution > prestitial javascript

prestitial.js

var DfpOutOfPageAdGenerator = DfpOutOfPageAdGenerator || {};
        
DfpOutOfPageAdGenerator.Prestitial = Class.extend({
    
    properties: {
        isAdSkippedManually: false,
        dfpCreativeMarkup: undefined,
        dfpCreativeParameters: undefined
    },
    
    constants: {
    	tabletMaxWidth: 768
    },
    
    init: function(params) {
        var self = this;
        
        $.extend(true, self, params);
        
        self._initDOM();
        
        self._bindGUIEvents();
    },
    
    _initDOM: function() {
        var self = this;
        
        self.dom = {
        		
            adSection: $("#prestitial-ad-section"),
        		
            outerContainer: $("#prestitial-ad-outer-container"),
            
            overlay: $("#prestitial-ad-overlay"),
            container: $("#prestitial-ad-container"),
            
            logo: $("#prestitial-ad-logo"),
            
            thirdPartyContentContainer: $("#prestitial-ad-inject-container"),
            thirdPartyContentViewTrackerContainer: $("#prestitial-ad-third-party-content-view-tracker"),
            
            skipAd: {
                button: $("#prestitial-ad-close"),
                
                durationCounter: $("#prestitial-ad-duration-counter")
            }
        };
        
        self.dom.thirdPartyContentContainer.addClass("hide");
    },
    
    _bindGUIEvents: function() {
        var self = this;
        
        self.dom.skipAd.button.on("click", function() {
        	self.properties.isAdSkippedManually = true;
            self._destroy();
        });
        
        $(window).on("message", function(wrappedEvent) {
            var event = wrappedEvent.originalEvent;
            
            if (event.data) {
                
            	var markupMessagePattern = "Dfp:PrestialAd:Markup";
                var parametersMessagePattern = "Dfp:PrestialAd:Parameters";

                /*
                Only process the message event, if it is for dfp > prestital ad > markup
                */
                if (event.data.substring(0, markupMessagePattern.length) 
                		=== markupMessagePattern) {
                    self.properties.dfpCreativeMarkup = 
                        event.data.substring(markupMessagePattern.length) || "<!-- NOOP -->";
                    
                    self._run();
                } else if (event.data.substring(0, parametersMessagePattern.length) 
                		=== parametersMessagePattern) {
                	/*
                    Only process the message event, if it is for dfp > prestital ad > parameters
                    */
                    var serializedParameters = event.data.substring(parametersMessagePattern.length);
                    
                    self.properties.dfpCreativeParameters = $.parseJSON(serializedParameters);
                    
                    self._run();
                }
            }
        });
        
        $(window).on("resize", function() {
        	self._refreshContainerPosition();	
        });
        
    },
    
    _destroy: function() {
        var self = this;
        $("body").removeClass("no-scroll prestitial-ad-running");
        $("body").trigger("prestitial-ad:stopped");
        self.dom.adSection.remove();
    },
    
    _startCountdown: function() {
        var self = this;
        
        var timeLeft = self.properties.dfpCreativeParameters.duration;
        var countdownInterval = window.setInterval(function() {
            
            //If user has clicked on skip ad button, just clear interval & return
            if (self.properties.isAdSkippedManually) {
                window.clearInterval(countdownInterval);
                return;
            }
            
            //If the auto-close has time left then update counter text
            if (timeLeft) {
                self.dom.skipAd.durationCounter.html("Closing in " + timeLeft 
                                            + " sec" + (timeLeft > 1 ? "s" : ""));
            } else {
                window.clearInterval(countdownInterval);
                self._destroy();
                return;
            }
            
            timeLeft--; 
        }, 1000);
    },
    
    _refreshContainerPosition: function() {
        var self = this;
        
        if (!self.properties.dfpCreativeParameters) {
        	return;
        }
        
        var documentWidth = 0;
        var documentHeight = 0;
        
        //Compute document width
        //IE
        if (!window.innerWidth) {
            if (!(document.documentElement.clientWidth === 0)) {
                documentWidth = document.documentElement.clientWidth; //strict mode
            } else {
                documentWidth = document.body.clientWidth; //quirks mode
            }
                
        } else {
            documentWidth = window.innerWidth; //w3c
        }
        
        var adContainerLeftPosition = (documentWidth - self.properties.dfpCreativeParameters.width) / 2;
        
        //Compute document height
        //IE
        if (!window.innerHeight) {
            if (!(document.documentElement.clientHeight === 0)) {
                documentHeight = document.documentElement.clientHeight; //strict mode
            } else {
                documentHeight = document.body.clientHeight; //quirks mode
            }
                
        } else {
            documentHeight = window.innerHeight; //w3c
        }
        
        var adContainerTopPosition = (documentHeight - self.properties.dfpCreativeParameters.height) / 2;
        
        self.dom.overlay.css("background-color", self.properties.dfpCreativeParameters.overlayBackgroundColor);
        
        var containerToBePositioned = self.dom.container;
        
        if (self.properties.dfpCreativeParameters.isThirdPartyContent) {
        	containerToBePositioned = self.dom.thirdPartyContentContainer;
        } 
        
        if (documentWidth < self.constants.tabletMaxWidth) {

        	self.dom.logo.offset({
        		left: (documentWidth - self.dom.logo.innerWidth()) / 2
        	});
        	
        	self.dom.skipAd.button.css({
        		"right": adContainerLeftPosition + "px"
        	});
        	
        	adContainerTopPosition = self.dom.logo.innerHeight() + self.dom.skipAd.button.innerHeight() + 30;
        }
        
        containerToBePositioned.width(self.properties.dfpCreativeParameters.width);
        containerToBePositioned.offset({
            top: adContainerTopPosition,
            left: adContainerLeftPosition
        });
    },
    
    _run: function() {
        var self = this;
        
        /*
        Don't do anything if one of/both the markup & the parametes are absent.
        */
        if (!self.properties.dfpCreativeMarkup 
                || !self.properties.dfpCreativeParameters) {
            return;
        }
        
        window.scrollTo(0, 0);
        $("body").addClass("no-scroll prestitial-ad-running");
        self.dom.adSection.removeClass("hide");
        
        if (self.properties.dfpCreativeParameters.isThirdPartyContent) {
        	
        	var thirdPartyContainerIframe = self.dom.thirdPartyContentContainer
        			.find("iframe");
        	
        	thirdPartyContainerIframe
        			.width(self.properties.dfpCreativeParameters.width)
					.height(self.properties.dfpCreativeParameters.height);
        	
        	self.dom.thirdPartyContentViewTrackerContainer.html("<img src='" 
        			+ self.properties.dfpCreativeParameters.viewURLPrefix + window.location.origin + "/sprites/transparent-1x1.png"
        			+ "' />");
        	
        	self.dom.thirdPartyContentContainer.removeClass("hide");
        }
        
        self.dom.container.html(self.properties.dfpCreativeMarkup);
        
        self._refreshContainerPosition();
        self._startCountdown();
        
        window.setTimeout(function() {
        	self.dom.adSection.addClass("shown");
        }, 400);
    }
});