Skip to content

Instantly share code, notes, and snippets.

@tankchintan
Created May 8, 2015 15:43
Show Gist options
  • Save tankchintan/50279bbbba3c179fd919 to your computer and use it in GitHub Desktop.
Save tankchintan/50279bbbba3c179fd919 to your computer and use it in GitHub Desktop.
dfp > prestitial oop solution > prestitial javascript
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);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment