Last active
December 21, 2017 13:02
-
-
Save jkereako/b8b0c183756bc8f19b33 to your computer and use it in GitHub Desktop.
A Doubleclick for Publishers creative template which changes the background image and color of the <body> and allows for the background to be a clickable link. Only compatiable with non-responsive, desktop layouts that have a center column width of 970 pixels.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Ensures that the object window has not been reassigned a new value. | |
| * @param Object window | |
| */ | |
| (function(window) { | |
| /** | |
| * An array of valid CSS rules. This is the only part of the code that | |
| * ought to be edited. | |
| * | |
| * The tokens in the string below are variables that must be defined. | |
| * The variable [%BackgroundColor%] is a text field, and [%BackgroundImage%] | |
| * is a file-upload field. | |
| * | |
| * @type Array | |
| */ | |
| var styles = [ | |
| "body {background:[%BackgroundColor%] url(\"[%BackgroundImage%]\") 50% 0 no-repeat fixed;}" | |
| ]; | |
| /** | |
| * A pseudo-constant to normalize the prefix for element IDs | |
| * @type String | |
| */ | |
| var NESN_PREFIX = "nesn-gpt"; | |
| var doc, win = null; | |
| if (window.location !== window.top.location && "undefined" !== typeof inDapIF) { | |
| var fif = window.frameElement; | |
| doc = fif.ownerDocument; | |
| win = doc.defaultView || doc.parentWindow; | |
| } | |
| else { | |
| doc = window.document; | |
| win = window; | |
| } | |
| try{ | |
| var head = doc.head || doc.getElementsByTagName("head")[0]; | |
| var style = doc.createElement("style"); | |
| style.type = "text/css"; | |
| style.media = "screen"; | |
| style.id = NESN_PREFIX + "-style-v" + (Math.round(Math.random()*100) + 1).toString(); | |
| for (var i = styles.length - 1; i >= 0; i--) { | |
| style.appendChild(doc.createTextNode(styles[i])); | |
| styles[i] | |
| }; | |
| head.appendChild(style); | |
| // This logic avoids the use of the method trim(), which is not | |
| // universally supported. | |
| if ("[%BackgroundImageLink%]".length > "http://".length) { | |
| /** | |
| * Allows for the background to be clickable. Readjusts the | |
| * clickable area when the window is resized. | |
| */ | |
| var makeClickable = function(){ | |
| // This object represents the left and right sides of the | |
| // clickable background | |
| var wings = { | |
| "left": null, | |
| "right": null | |
| }; | |
| var dimensions = { | |
| "center": { | |
| "width": function(){ var c = doc.getElementById("container"); return (c) ? c.offsetWidth : 970;}, | |
| }, | |
| "wings": { | |
| "width": function(){ return ((doc.body.offsetWidth - dimensions.center.width()) / 2).toString() + "px";}, | |
| "height": function(){ return doc.body.offsetHeight.toString() + "px"; } | |
| } | |
| } | |
| var elementId = ''; | |
| for (var key in wings) { | |
| if (!wings.hasOwnProperty(key)) { | |
| continue; | |
| } | |
| elementId = NESN_PREFIX + "-background-" + key + "-wing"; | |
| // Update the dimensions if the element already exists in | |
| // the DOM. | |
| if (doc.getElementById(elementId)) { | |
| var el = doc.getElementById(elementId); | |
| el.style.height = dimensions.wings.height(); | |
| el.style.width = dimensions.wings.width(); | |
| continue; | |
| } | |
| //-- Element initialization | |
| wings[key] = doc.createElement('a'); | |
| wings[key].id = elementId; | |
| wings[key].setAttribute("href", "[%BackgroundImageLink%]"); | |
| wings[key].setAttribute("target", "_blank"); | |
| //-- Display | |
| wings[key].style.display = "block"; | |
| //-- Dimensions | |
| wings[key].style.height = dimensions.wings.height(); | |
| wings[key].style.width = dimensions.wings.width(); | |
| //--Positioning | |
| wings[key].style.position = "absolute"; | |
| wings[key].style[key] = wings[key].style.top = 0; | |
| //-- Style reset | |
| wings[key].style.border = "none"; | |
| wings[key].style.padding = wings[key].style.margin = 0; | |
| doc.body.appendChild(wings[key]); | |
| } | |
| }; | |
| // The document has been parsed. | |
| if (doc.readyState == "complete" || | |
| doc.readyState == "loaded" || | |
| doc.readyState == "interactive") { | |
| makeClickable(); | |
| } | |
| else { | |
| // Decent browsers | |
| if (doc.addEventListener) { | |
| doc.addEventListener("DOMContentLoaded", makeClickable, false); | |
| } | |
| // Internet Explorer | |
| else if (doc.attachEvent) { | |
| doc.attachEvent("onreadystatechange", makeClickable); | |
| } | |
| } | |
| // Decent browsers | |
| if (win.addEventListener) { | |
| win.addEventListener("resize", makeClickable, false); | |
| } | |
| // Internet Explorer | |
| else if (win.attachEvent) { | |
| win.attachEvent("onresize", makeClickable); | |
| } | |
| } | |
| } | |
| catch(e) { | |
| if ("undefined" !== typeof console ) { | |
| console.log(e); | |
| } | |
| } | |
| })(this); | |
| /** | |
| * The commented line below is a directive for Google Chrome to assign the name | |
| * nesn-gpt-desktop-background.js to this JavaScript file so that breakpoints | |
| * can be set. | |
| * | |
| * Look under Sources > (no domain) > [assigned script name] | |
| * @see: https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-dynamic-javascript | |
| */ | |
| //# sourceURL=nesn-gpt-desktop-background.js |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment