Alternative ads

_includes/head.html

@@ -23,6 +23,9 @@
     <script src="{{ '/js/vendor/jquery-3.1.1.min.js' | prepend: site.baseurl }}"></script>
     <script src="{{ '/js/vendor/jquery.slides.min.js' | prepend: site.baseurl }}"></script>
 
+    <script src="{{ '/js/vendor/blockadblock.js' | prepend: site.baseurl }}"></script>
+    <script src="{{ '/js/main.js' | prepend: site.baseurl }}"></script>
+	
     <link rel="canonical" href="{{ site.url }}{{ page.url | replace:'index.html','' }}">
     
     <script type="text/javascript">

_includes/header.html

@@ -6,7 +6,7 @@
 				</div>
 				
 				<nav>
-					<div class="ad-leaderboard">
+					<div class="ga-ldrbrd">
 					<div style="text-align:right;color:#d3d3d3;font-size:10px;">ADVERTISEMENT <a href="/2013/05/30/why-a-free-web-needs-advertising/" style="color:#d3d3d3;font-size:10px;border:0 !important;margin:0;	"><i class="fa fa-info-circle"></i></a></div>
 		
 						<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

_layouts/default.html

@@ -17,10 +17,10 @@
 					{{ content }}
 				</div>
 				
-				<div class="ad-skyscraper">
+				<div class="ga-skscrpr">
 					<!--<div style="position:absolute;left:1000px;background-color:#fff;border:1px solid black;">-->
-					<div class="ad-skyscraper-text">ADVERTISEMENT <a href="/2013/05/30/why-a-free-web-needs-advertising/"><i class="fa fa-info-circle"></i></a></div>
+					<div class="ga-skscrpr-text">ADVERTISEMENT <a href="/2013/05/30/why-a-free-web-needs-advertising/"><i class="fa fa-info-circle"></i></a></div>
-					<div class="ad-skyscraper-wrapper" style="background-color:#fff;border:10px solid #3d3d3d;">
+					<div class="ga-skscrpr-wrapper" style="background-color:#fff;border:10px solid #3d3d3d;">
 						
 						<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 						<!-- Skyscraper Responsive -->

css/main.css

@@ -243,31 +243,31 @@
 			/* ADS */
 			/**********************************************/
 
-			.ad-skyscraper {
+			.ga-skscrpr {
 				display: inline-block;
 				float: right;
 			}
 			
-			.ad-skyscraper .ad-skyscraper-wrapper {
+			.ga-skscrpr .ga-skscrpr-wrapper {
 				width: 160px;
 				height: 600px;
 				display: inline-block;
 			}
 			
-			.ad-skyscraper .ad-skyscraper-text {
+			.ga-skscrpr .ga-skscrpr-text {
 				text-align: right;
 				color: #3d3d3d;
 				font-size: 10px;
 			}
 			
-			.ad-leaderboard {
+			.ga-ldrbrd {
 				display: inline-block;
 				margin-bottom: 3em;
 				width: 100%;
 				max-width: 728px;
 			}
 			
-			.ad-leaderboard img {
+			.ga-ldrbrd img {
 				 width: 728px;
 				 height: 90px;
 			}

js/main.js

@@ -1 +1,17 @@
 
+// Function called if AdBlock is detected
+function adBlockDetected() {
+    $('.ga-ldrbrd').append('<a href="/support-us/"><img src="/assets/bab-banner.png"></a>');
+    $('.ga-skscrpr').append('<a href="/support-us/"><img src="/assets/bab-skyscraper.png"></a>');
+    $('.ga-skscrpr-wrapper').hide();
+}
+
+// Recommended audit because AdBlock lock the file 'blockadblock.js' 
+// If the file is not called, the variable does not exist 'blockAdBlock'
+// This means that AdBlock is present
+if(typeof blockAdBlock === 'undefined') {
+    adBlockDetected();
+} else {
+    blockAdBlock.onDetected(adBlockDetected);
+    blockAdBlock.onNotDetected(adBlockNotDetected);
+}	

js/vendor/blockadblock.js

@@ -0,0 +1,250 @@
+/*
+ * BlockAdBlock 3.2.1
+ * Copyright (c) 2015 Valentin Allaire <valentin.allaire@sitexw.fr>
+ * Released under the MIT license
+ * https://github.com/sitexw/BlockAdBlock
+ */
+
+(function(window) {
+	var BlockAdBlock = function(options) {
+		this._options = {
+			checkOnLoad:		false,
+			resetOnEnd:			false,
+			loopCheckTime:		50,
+			loopMaxNumber:		5,
+			baitClass:			'pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links',
+			baitStyle:			'width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;',
+			debug:				false
+		};
+		this._var = {
+			version:			'3.2.1',
+			bait:				null,
+			checking:			false,
+			loop:				null,
+			loopNumber:			0,
+			event:				{ detected: [], notDetected: [] }
+		};
+		if(options !== undefined) {
+			this.setOption(options);
+		}
+		var self = this;
+		var eventCallback = function() {
+			setTimeout(function() {
+				if(self._options.checkOnLoad === true) {
+					if(self._options.debug === true) {
+						self._log('onload->eventCallback', 'A check loading is launched');
+					}
+					if(self._var.bait === null) {
+						self._creatBait();
+					}
+					setTimeout(function() {
+						self.check();
+					}, 1);
+				}
+			}, 1);
+		};
+		if(window.addEventListener !== undefined) {
+			window.addEventListener('load', eventCallback, false);
+		} else {
+			window.attachEvent('onload', eventCallback);
+		}
+	};
+	BlockAdBlock.prototype._options = null;
+	BlockAdBlock.prototype._var = null;
+	BlockAdBlock.prototype._bait = null;
+	
+	BlockAdBlock.prototype._log = function(method, message) {
+		console.log('[BlockAdBlock]['+method+'] '+message);
+	};
+	
+	BlockAdBlock.prototype.setOption = function(options, value) {
+		if(value !== undefined) {
+			var key = options;
+			options = {};
+			options[key] = value;
+		}
+		for(var option in options) {
+			this._options[option] = options[option];
+			if(this._options.debug === true) {
+				this._log('setOption', 'The option "'+option+'" he was assigned to "'+options[option]+'"');
+			}
+		}
+		return this;
+	};
+	
+	BlockAdBlock.prototype._creatBait = function() {
+		var bait = document.createElement('div');
+			bait.setAttribute('class', this._options.baitClass);
+			bait.setAttribute('style', this._options.baitStyle);
+		this._var.bait = window.document.body.appendChild(bait);
+		
+		this._var.bait.offsetParent;
+		this._var.bait.offsetHeight;
+		this._var.bait.offsetLeft;
+		this._var.bait.offsetTop;
+		this._var.bait.offsetWidth;
+		this._var.bait.clientHeight;
+		this._var.bait.clientWidth;
+		
+		if(this._options.debug === true) {
+			this._log('_creatBait', 'Bait has been created');
+		}
+	};
+	BlockAdBlock.prototype._destroyBait = function() {
+		window.document.body.removeChild(this._var.bait);
+		this._var.bait = null;
+		
+		if(this._options.debug === true) {
+			this._log('_destroyBait', 'Bait has been removed');
+		}
+	};
+	
+	BlockAdBlock.prototype.check = function(loop) {
+		if(loop === undefined) {
+			loop = true;
+		}
+		
+		if(this._options.debug === true) {
+			this._log('check', 'An audit was requested '+(loop===true?'with a':'without')+' loop');
+		}
+		
+		if(this._var.checking === true) {
+			if(this._options.debug === true) {
+				this._log('check', 'A check was canceled because there is already an ongoing');
+			}
+			return false;
+		}
+		this._var.checking = true;
+		
+		if(this._var.bait === null) {
+			this._creatBait();
+		}
+		
+		var self = this;
+		this._var.loopNumber = 0;
+		if(loop === true) {
+			this._var.loop = setInterval(function() {
+				self._checkBait(loop);
+			}, this._options.loopCheckTime);
+		}
+		setTimeout(function() {
+			self._checkBait(loop);
+		}, 1);
+		if(this._options.debug === true) {
+			this._log('check', 'A check is in progress ...');
+		}
+		
+		return true;
+	};
+	BlockAdBlock.prototype._checkBait = function(loop) {
+		var detected = false;
+		
+		if(this._var.bait === null) {
+			this._creatBait();
+		}
+		
+		if(window.document.body.getAttribute('abp') !== null
+		|| this._var.bait.offsetParent === null
+		|| this._var.bait.offsetHeight == 0
+		|| this._var.bait.offsetLeft == 0
+		|| this._var.bait.offsetTop == 0
+		|| this._var.bait.offsetWidth == 0
+		|| this._var.bait.clientHeight == 0
+		|| this._var.bait.clientWidth == 0) {
+			detected = true;
+		}
+		if(window.getComputedStyle !== undefined) {
+			var baitTemp = window.getComputedStyle(this._var.bait, null);
+			if(baitTemp && (baitTemp.getPropertyValue('display') == 'none' || baitTemp.getPropertyValue('visibility') == 'hidden')) {
+				detected = true;
+			}
+		}
+		
+		if(this._options.debug === true) {
+			this._log('_checkBait', 'A check ('+(this._var.loopNumber+1)+'/'+this._options.loopMaxNumber+' ~'+(1+this._var.loopNumber*this._options.loopCheckTime)+'ms) was conducted and detection is '+(detected===true?'positive':'negative'));
+		}
+		
+		if(loop === true) {
+			this._var.loopNumber++;
+			if(this._var.loopNumber >= this._options.loopMaxNumber) {
+				this._stopLoop();
+			}
+		}
+		
+		if(detected === true) {
+			this._stopLoop();
+			this._destroyBait();
+			this.emitEvent(true);
+			if(loop === true) {
+				this._var.checking = false;
+			}
+		} else if(this._var.loop === null || loop === false) {
+			this._destroyBait();
+			this.emitEvent(false);
+			if(loop === true) {
+				this._var.checking = false;
+			}
+		}
+	};
+	BlockAdBlock.prototype._stopLoop = function(detected) {
+		clearInterval(this._var.loop);
+		this._var.loop = null;
+		this._var.loopNumber = 0;
+		
+		if(this._options.debug === true) {
+			this._log('_stopLoop', 'A loop has been stopped');
+		}
+	};
+	
+	BlockAdBlock.prototype.emitEvent = function(detected) {
+		if(this._options.debug === true) {
+			this._log('emitEvent', 'An event with a '+(detected===true?'positive':'negative')+' detection was called');
+		}
+		
+		var fns = this._var.event[(detected===true?'detected':'notDetected')];
+		for(var i in fns) {
+			if(this._options.debug === true) {
+				this._log('emitEvent', 'Call function '+(parseInt(i)+1)+'/'+fns.length);
+			}
+			if(fns.hasOwnProperty(i)) {
+				fns[i]();
+			}
+		}
+		if(this._options.resetOnEnd === true) {
+			this.clearEvent();
+		}
+		return this;
+	};
+	BlockAdBlock.prototype.clearEvent = function() {
+		this._var.event.detected = [];
+		this._var.event.notDetected = [];
+		
+		if(this._options.debug === true) {
+			this._log('clearEvent', 'The event list has been cleared');
+		}
+	};
+	
+	BlockAdBlock.prototype.on = function(detected, fn) {
+		this._var.event[(detected===true?'detected':'notDetected')].push(fn);
+		if(this._options.debug === true) {
+			this._log('on', 'A type of event "'+(detected===true?'detected':'notDetected')+'" was added');
+		}
+		
+		return this;
+	};
+	BlockAdBlock.prototype.onDetected = function(fn) {
+		return this.on(true, fn);
+	};
+	BlockAdBlock.prototype.onNotDetected = function(fn) {
+		return this.on(false, fn);
+	};
+	
+	window.BlockAdBlock = BlockAdBlock;
+	
+	if(window.blockAdBlock === undefined) {
+		window.blockAdBlock = new BlockAdBlock({
+			checkOnLoad: true,
+			resetOnEnd: true
+		});
+	}
+})(window);