Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Initial commit

  • Loading branch information...
commit 51b0d590e2b3a0ce059362c566ca060382e47fa0 0 parents
@tony4d authored
Showing with 294 additions and 0 deletions.
  1. +42 −0 README
  2. +15 −0 sugarads.css
  3. +209 −0 sugarads.js
  4. +28 −0 sugarfif.html
42 README
@@ -0,0 +1,42 @@
+# Sugar is ad delivery that doesn't suck
+
+## Enabling sugar in your web pages
+
+Include the js library
+
+```html
+<script src="sugarads.js"></script>
+```
+
+Define your js ad urls
+
+```html
+<script>
+SugarAds.adJsUrls['728x90'] = ""http:\/\/example.com\/ad.js?size=728x90&var1=val1&var2=val2";
+SugarAds.adJsUrls['300x250'] = "http:\/\/example.com\/ad.js?size=300x250&var1=val1&var2=val2";
+<script>
+```
+
+Place ad div in your page where the ads should render
+
+```html
+<div id="sugarad-728x90" class="sugarad" data-sugar-ad_width="728" data-sugar-ad_height="90"></div>
+<div id="sugarad-300x250" class="sugarad" data-sugar-ad_width="300" data-sugar-ad_height="250"></div>
+```
+Now you can render and refresh the ads at anytime
+
+```html
+<script>
+<!-- Render both ads -->
+SugarAds.renderAds(["728x90","300x250"]);
+<!-- Or, pass nothing and all ads will render -->
+SugarAds.renderAds();
+
+<!-- Render just one -->
+SugarAds.renderAds(["728x90"]);
+<!-- Fir just one ad a string is ok too -->
+SugarAds.renderAds("728x90");
+
+<!-- Render all ads at the domcontentready event (using jquery here) -->
+jQuery(document).ready(function(){SugarAds.renderAds();});
+</script>
15 sugarads.css
@@ -0,0 +1,15 @@
+/*layout*/
+#sugarad-stitial-overlay {z-index:10000;position:fixed;top:0px;left:0px;width:100%;height:100%;color:#fff;text-align:center;vertical-align:middle;}
+#sugarad-stitial-container {background-color:#1a1a1a;border-width:10px 0 0 0;border-style:solid;border-color:#5b5b5c;color:#fff;height:100%;text-align:center;}
+#sugarad-stitial-header {margin:0 auto 12px auto;border-width:2px 0 0 0;border-style:solid;border-color:#121212;}
+#sugarad-stitial-header-logo {float:left; margin:-2px 0 0 32px; width:118px; border:0px;}
+#sugarad-stitial-header-text {padding:6px 150px 0 0; /*this mirrors the margin/width of the logo so text can center*/}
+#sugarad-stitial-creative, #sugarad-stitial-disable {clear:both;margin:0 auto 12px auto;}
+/*this style is applied to the doc's html element only when the stitial is active so flash doesn't shine through overlay, stupid flash*/
+html.sugarad-stitial-open object, html.sugarad-stitial-open embed {visibility: hidden;}
+/*typography*/
+#sugarad-stitial-container {font-family: Helvetica, Arial; font-size: 16px;}
+#sugarad-stitial-container a:link, #sugarad-stitial-container a:visited {color:#fff;text-decoration:none;}
+#sugarad-stitial-container a:hover, #sugarad-stitial-container a:active {text-decoration:underline;}
+#sugarad-stitial-disable a {color:#ccc;}
+.sugarad {display:none; margin:0 auto 12px auto; font-size:0;}
209 sugarads.js
@@ -0,0 +1,209 @@
+SugarAds = {
+
+ adDivCssClassName: 'sugarad',
+ adDivIdPrefix: 'sugarad-',
+ adDivWidthAttrib: 'data-sugar-ad_width',
+ adDivHeightAttrib: 'data-sugar-ad_height',
+ analytics: true,
+ fifurl: '/sugarfif.html?1',
+ stitialTimeout: 10000,
+ randNum: 0,
+ randLength: 12,
+ ads: {},
+ adJsUrls: {},
+
+ renderAds: function (adTypes) {
+ var adsToRender = [];
+ // Do some input validation first
+ switch (this._typeOf(adTypes)) {
+ case 'undefined':
+ // render all ads defined in adJsUrls
+ for (adType in this.adJsUrls) {
+ adsToRender.push(adType);
+ }
+ break;
+ case 'string':
+ // turn this into an array and we'll process it like that
+ adTypes = new Array(adTypes);
+ case 'array':
+ // only dealing with the array of types we were passed
+ for (var i = 0, len = adTypes.length; i < len; i++) {
+ adsToRender.push(adTypes[i]);
+ }
+ break;
+ default:
+ console.warn('renderAds() expects no argument (refresh all ad types), a string (a single ad type), or an array (one or more ad types)');
+ }
+ this._flushAndPlaceAds(adsToRender);
+ },
+
+ initializePrestitial: function (continueLinkId, overlayId) {
+ // First set a style on the page's html element so we have some style control for the overlay
+ // This allows you to do things like hide flash objects so they don't screw your zindex
+ document.getElementsByTagName('html')[0].className = 'sugarad-stitial-open';
+
+ // Set the timeout for the prestitial
+ this.prestitialTimer = setTimeout(
+ function() { SugarAds.hidePrestitial(overlayId); },
+ this.stitialTimeout
+ );
+ },
+
+ hidePrestitial: function (overlayId) {
+ // Clear the timer in case the overlay was manually closed
+ clearTimeout(this.prestitialTimer);
+
+ // Remove special style for the page
+ document.getElementsByTagName('html')[0].className = '';
+
+ // Hide the prestitial overlay
+ document.getElementById(overlayId).style.display = 'none';
+
+ // Fire page ads now
+ this.renderAdsDelayedByStitial();
+ },
+
+ renderAdsDelayedByStitial: function () {
+ // this is a callback function to be defined by stitial code. Only it knows which ads to render
+ },
+
+ setFifDim: function (frameElement,w,h) {
+ frameElement.fifwidth=w;
+ frameElement.fifheight=h;
+ },
+
+ fifOnload: function (frameWindow) {
+ var timerStop = new Date().getTime();
+ if (this.analytics) {
+ _gaq.push([
+ '_trackEvent',
+ 'Sugar Ads',
+ frameWindow.frameElement.adtype,
+ frameWindow.frameElement.adjsurl,
+ timerStop - frameWindow.sugarTimerStart
+ ]);
+ }
+ // track event call
+ this.stylizeAdContainer(frameWindow);
+ },
+
+ stylizeAdContainer: function (frameWindow) {
+ var frameElement = frameWindow.frameElement;
+ frameElement.width = frameElement.fifwidth;
+ frameElement.height = frameElement.fifheight;
+
+ // Setting dimensions on the sugar div will make certain the size stays static
+ // for client-side refreshes while the iframe is destroyed and replaced, avoiding page bounce
+ frameElement.parentNode.style.width = ''+frameElement.fifwidth+'px';
+ frameElement.parentNode.style.height = ''+frameElement.fifheight+'px';
+
+ // if there is no content make sure we don't show it at all
+ // This helps avoid weird vertical padding issues like margin on the sugar div
+ if (frameElement.fifwidth == 0 && frameElement.fifheight == 0) {
+ frameElement.parentNode.style.display = 'none';
+ } else {
+ frameElement.parentNode.style.display = 'block';
+ }
+ },
+
+ _flushAndPlaceAds: function (adTypes) {
+ this._randomizeAdJsUrls();
+ var iframeSrcUrl = (this.fifurl != undefined && this.fifurl != '') ? this.fifurl : '/sugarfif.html';
+
+ for (var i = 0, len = adTypes.length; i < len; i++) {
+ var adType = adTypes[i];
+ if (!this.adJsUrls.hasOwnProperty(adType)) {
+ console.warn('Failed to render sugar ad. No ad js url has been defined for ad type "'+adType+'".');
+ continue;
+ }
+ // fire away
+ this._createAndAppendFriendlyIframe(
+ adType,
+ iframeSrcUrl,
+ this.adJsUrls[adType]
+ );
+ }
+ },
+
+ // Create an iframe in the given element with the specified values
+ _createAndAppendFriendlyIframe: function (adType, iframeSrcUrl, adJsUrl) {
+ var adDivDomId = this.adDivIdPrefix+adType;
+ var adContainer = document.getElementById(adDivDomId);
+ if (this._typeOf(adContainer) == 'null') {
+ console.warn('Failed to render sugar ad. No dom element with id "'+adDivDomId+'" exists.');
+ return false;
+ }
+
+ // Clear the ad container element contents
+ adContainer.innerHTML = '';
+
+ // create iframe
+ var adIframeId = adDivDomId+'-iframe';
+ var iframe = document.createElement('iframe');
+ iframe.id = adIframeId;
+ iframe.name = adIframeId;
+ iframe.src = iframeSrcUrl;
+ iframe.style.border = '0px';
+ iframe.width = 0;
+ iframe.height = 0;
+ iframe.scrolling = 'no';
+ iframe.seamless = 'seamless'; // this is forward looking html5
+ iframe.fifwidth = adContainer.getAttribute(this.adDivWidthAttrib);
+ iframe.fifheight = adContainer.getAttribute(this.adDivHeightAttrib);
+ iframe.adtype = adType;
+ iframe.adjsurl = adJsUrl;
+ // of course IE needs non-standard styling
+ if (navigator.userAgent.indexOf("MSIE") == -1) {
+ iframe.frameBorder = '0';
+ iframe.allowtransparency = 'true';
+ }
+ // Append the iframe into ad container div
+ adContainer.appendChild(iframe);
+ },
+
+ _randomizeAdJsUrls: function () {
+ if (this.randNum == 0) {
+ this.randNum = Math.floor(Math.random()*Math.pow(10, this.randLength));
+ } else {
+ this.randNum++;
+ }
+ var randQsKey = 'sugar-rand';
+ var newQsKeyValue = randQsKey + '=' + this.randNum;
+ var searchRegexp = new RegExp(randQsKey + '=\\d{' + this.randLength + '}', 'g');
+
+ for (adType in this.adJsUrls) {
+ var adJsUrl = this.adJsUrls[adType];
+ var randQsKeyValue = adJsUrl.match(searchRegexp)
+ // Do we already have a sugar-rand in the query string?
+ if (randQsKeyValue != null) {
+ this.adJsUrls[adType] = adJsUrl.replace(randQsKeyValue[0], newQsKeyValue); // simple, replace it
+ } else {
+ // nope, we need to put the sugar-rand in this url
+ var questionPos = adJsUrl.search(/\?/);
+ // if we already have a query string just throw it at the beginning of it
+ if (questionPos != -1) {
+ this.adJsUrls[adType] = adJsUrl.replace('?', '?' + newQsKeyValue + '&');
+ } else {
+ this.adJsUrls[adType] = adJsUrl.replace(/&*$/, '&' + newQsKeyValue); // otherwise tack it on the end
+ }
+ }
+ }
+ },
+
+ // Enhanced typeof that deals with null and arrays, even in different frames. Always returns string value
+ _typeOf: function (value) {
+ var s = typeof value;
+ if (s === 'object') {
+ if (value) {
+ if (typeof value.length === 'number' &&
+ !(value.propertyIsEnumerable('length')) &&
+ typeof value.splice === 'function') {
+ s = 'array';
+ }
+ } else {
+ s = 'null';
+ }
+ }
+ return s;
+ }
+}
28 sugarfif.html
@@ -0,0 +1,28 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <base target="_blank" />
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title></title>
+ <style type="text/css">body{margin:0 auto;text-align:center}</style>
+ <script>
+ var inDapIF=true, inFIF=true, fif=window.frameElement, sugar=window.parent.SugarAds;
+ function setFifDim(w,h) {
+ sugar.setFifDim(fif, w, h);
+ }
+ window.onload=function() {
+ if (sugar) {
+ setTimeout(function() { sugar.fifOnload(window); }, 10);
+ }
+ }
+ </script>
+</head>
+<body>
+ <script>
+ window.sugarTimerStart = new Date().getTime();
+ if (fif && fif.adjsurl) {
+ document.write('<script src="'+fif.adjsurl+'"></script'+'>');
+ }
+ </script>
+</body>
+</html>
Please sign in to comment.
Something went wrong with that request. Please try again.