DS-GVO external image consent

script.js

/**
 * Small vanilla js script which adds user consent for external images. Requires external image html tags to reference palceholder image, real url as extsrc arg and onclick call to loadImage(event) e.g.
 * <img src="path/to/placeholder/img.png extsrc="external.com/path/to/external/image.jpg" onclick="loadImage(event);" />
 * Have a nice day.
 * Nils Lind aka Slind
 *
 * @license MIT
 * @version 1.1
 * @author  Nils Lind aka Slind
 * @updated 2018-05-20
 * @link    http://assertcom.de
*/

var openModal = true;

function loadImage(e) {
	if (!openModal) return;
	e.preventDefault();

	var ele = e.target;
	var imgUrl = ele.getAttribute("extsrc") || ele.getAttribute("src");
	var imgHost = getHost(imgUrl);
	var allowedImgSources = JSON.parse(localStorage.getItem("allowedImgSources") || "[]");
	var answer = null;

    var modal = new tingle.modal({
        closeMethods: ['overlay', 'escape'],
        footer: true,
        stickyFooter: true
    });

    modal.addFooterBtn('Nein, Danke.', 'tingle-btn tingle-btn--danger tingle-btn--pull-left', function(){
        modal.close();
    });
	if (allowedImgSources.indexOf(imgHost) === -1) {
		modal.setContent("<p style='font-size: 20px'>M&ouml;chtest du externe Bilder von <code style='background-color: rgba(50,50,50,0.2); padding: 4px;'>" + imgHost + "</code> laden?</p><br><p style='font-size: 16px'>Aufgrund der neuen Datenschutz-Grundverordnung ben&ouml;tigen wir deine Zustimmung zum Laden externer Bilder da diese externen Quellen personenbezogene Daten von dir erfassen, speichern, verarbeiten, weitergeben... k&ouml;nnen.</p>");
	    modal.addFooterBtn('Ja und Auswahl merken.', 'tingle-btn tingle-btn--primary tingle-btn--pull-right', function(){
			loadImages(imgHost);
			allowedImgSources.push(imgHost);
			localStorage.setItem("allowedImgSources", JSON.stringify(allowedImgSources));
	        modal.close();
	    });
	    modal.addFooterBtn('Ja, bitte laden.', 'tingle-btn tingle-btn--default tingle-btn--pull-right', function(){
			loadImages(imgHost);
	        modal.close();
	    });
	} else {
	    modal.setContent("<p style='font-size: 16px'>M&ouml;chtest du <code style='background-color: rgba(50,50,50,0.2); padding: 4px;'>" + imgHost + "</code> von deiner erlaubte Bilderquellenliste entfernen?</p>");
	    modal.addFooterBtn('Ja, bitte entfernen.', 'tingle-btn tingle-btn--primary tingle-btn--pull-right', function(){
			var index = allowedImgSources.indexOf(imgHost);
			if (index !== -1) allowedImgSources.splice(index, 1);
			localStorage.setItem("allowedImgSources", JSON.stringify(allowedImgSources));
	        modal.close();
	    });
	}
	if (ele.parentNode.tagName === 'A') {
	    modal.addFooterBtn('Link folgen.', 'tingle-btn tingle-btn-- tingle-btn--pull-right', function(){
	        modal.close();
	        openModal = false;
	        ele.click();
	        openModal = true;
	    });
    }
	modal.open();
}

function loadImages(host) {
	host = host || false
	try {
		var allowedImgSources = host ? null : JSON.parse(localStorage.getItem("allowedImgSources") || "[]");
		if (allowedImgSources) allowedImgSources.push(window.location.hostname);
		var extImages = document.querySelectorAll("[extsrc]");
		for (var i = 0; i < extImages.length; i++) {
				var img = extImages[i];
				var extsrc = img.getAttribute("extsrc");
			try {
				if (extsrc) {
					if (host) {
						if (extsrc.indexOf(host) > -1) {
							img.src = extsrc;
							img.removeAttribute("extsrc");
						}
					} else {
						for (var ii = 0; ii < allowedImgSources.length; ii++) {
							if (extsrc.indexOf(allowedImgSources[ii]) > -1) {
								img.src = extsrc;
								img.removeAttribute("extsrc");
							}
						}
					}
				}
			} catch (e) {
				console.log('Failed to load image', extsrc, e);
			}
		}
	} catch (e) {
		console.log('Failed to load external images', e);
	}
}

function getHost(url) {
  var    a      = document.createElement("a");
         a.href = url;
  return a.hostname;
}

loadImages();


//tingle (modal) from Robin Parisi - https://github.com/robinparisi/tingle - MIT
!function(t,o){"object"==typeof exports?module.exports=o():t.tingle=o()}(this,function(){var t=function(){var t,o=document.createElement("tingle-test-transition"),e={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(t in e)if(void 0!==o.style[t])return e[t]}();function o(t){this.opts=function(){for(var t=1;t<arguments.length;t++)for(var o in arguments[t])arguments[t].hasOwnProperty(o)&&(arguments[0][o]=arguments[t][o]);return arguments[0]}({},{onClose:null,onOpen:null,beforeOpen:null,beforeClose:null,stickyFooter:!1,footer:!1,cssClass:[],closeLabel:"Close",closeMethods:["overlay","button","escape"]},t),this.init()}function e(){this.modalBoxFooter&&(this.modalBoxFooter.style.width=this.modalBox.clientWidth+"px",this.modalBoxFooter.style.left=this.modalBox.offsetLeft+"px")}return o.prototype.init=function(){this.modal||(function(){this.modal=document.createElement("div"),this.modal.classList.add("tingle-modal"),(0===this.opts.closeMethods.length||-1===this.opts.closeMethods.indexOf("overlay"))&&this.modal.classList.add("tingle-modal--noOverlayClose");this.modal.style.display="none",this.opts.cssClass.forEach(function(t){"string"==typeof t&&this.modal.classList.add(t)},this),-1!==this.opts.closeMethods.indexOf("button")&&(this.modalCloseBtn=document.createElement("button"),this.modalCloseBtn.classList.add("tingle-modal__close"),this.modalCloseBtnIcon=document.createElement("span"),this.modalCloseBtnIcon.classList.add("tingle-modal__closeIcon"),this.modalCloseBtnIcon.innerHTML="×",this.modalCloseBtnLabel=document.createElement("span"),this.modalCloseBtnLabel.classList.add("tingle-modal__closeLabel"),this.modalCloseBtnLabel.innerHTML=this.opts.closeLabel,this.modalCloseBtn.appendChild(this.modalCloseBtnIcon),this.modalCloseBtn.appendChild(this.modalCloseBtnLabel));this.modalBox=document.createElement("div"),this.modalBox.classList.add("tingle-modal-box"),this.modalBoxContent=document.createElement("div"),this.modalBoxContent.classList.add("tingle-modal-box__content"),this.modalBox.appendChild(this.modalBoxContent),-1!==this.opts.closeMethods.indexOf("button")&&this.modal.appendChild(this.modalCloseBtn);this.modal.appendChild(this.modalBox)}.call(this),function(){this._events={clickCloseBtn:this.close.bind(this),clickOverlay:function(t){-1!==this.opts.closeMethods.indexOf("overlay")&&!function(t,o){for(;(t=t.parentElement)&&!t.classList.contains(o););return t}(t.target,"tingle-modal")&&t.clientX<this.modal.clientWidth&&this.close()}.bind(this),resize:this.checkOverflow.bind(this),keyboardNav:function(t){-1!==this.opts.closeMethods.indexOf("escape")&&27===t.which&&this.isOpen()&&this.close()}.bind(this)},-1!==this.opts.closeMethods.indexOf("button")&&this.modalCloseBtn.addEventListener("click",this._events.clickCloseBtn);this.modal.addEventListener("mousedown",this._events.clickOverlay),window.addEventListener("resize",this._events.resize),document.addEventListener("keydown",this._events.keyboardNav)}.call(this),document.body.insertBefore(this.modal,document.body.firstChild),this.opts.footer&&this.addFooter())},o.prototype.destroy=function(){null!==this.modal&&(function(){-1!==this.opts.closeMethods.indexOf("button")&&this.modalCloseBtn.removeEventListener("click",this._events.clickCloseBtn);this.modal.removeEventListener("mousedown",this._events.clickOverlay),window.removeEventListener("resize",this._events.resize),document.removeEventListener("keydown",this._events.keyboardNav)}.call(this),this.modal.parentNode.removeChild(this.modal),this.modal=null)},o.prototype.open=function(){var o=this;"function"==typeof o.opts.beforeOpen&&o.opts.beforeOpen(),this.modal.style.removeProperty?this.modal.style.removeProperty("display"):this.modal.style.removeAttribute("display"),this._scrollPosition=window.pageYOffset,document.body.classList.add("tingle-enabled"),document.body.style.top=-this._scrollPosition+"px",this.setStickyFooter(this.opts.stickyFooter),this.modal.classList.add("tingle-modal--visible"),t?this.modal.addEventListener(t,function e(){"function"==typeof o.opts.onOpen&&o.opts.onOpen.call(o),o.modal.removeEventListener(t,e,!1)},!1):"function"==typeof o.opts.onOpen&&o.opts.onOpen.call(o),this.checkOverflow()},o.prototype.isOpen=function(){return!!this.modal.classList.contains("tingle-modal--visible")},o.prototype.close=function(){if("function"==typeof this.opts.beforeClose&&!this.opts.beforeClose.call(this))return;document.body.classList.remove("tingle-enabled"),window.scrollTo(0,this._scrollPosition),document.body.style.top=null,this.modal.classList.remove("tingle-modal--visible");var o=this;t?this.modal.addEventListener(t,function e(){o.modal.removeEventListener(t,e,!1),o.modal.style.display="none","function"==typeof o.opts.onClose&&o.opts.onClose.call(this)},!1):(o.modal.style.display="none","function"==typeof o.opts.onClose&&o.opts.onClose.call(this))},o.prototype.setContent=function(t){"string"==typeof t?this.modalBoxContent.innerHTML=t:(this.modalBoxContent.innerHTML="",this.modalBoxContent.appendChild(t)),this.isOpen()&&this.checkOverflow()},o.prototype.getContent=function(){return this.modalBoxContent},o.prototype.addFooter=function(){(function(){this.modalBoxFooter=document.createElement("div"),this.modalBoxFooter.classList.add("tingle-modal-box__footer"),this.modalBox.appendChild(this.modalBoxFooter)}).call(this)},o.prototype.setFooterContent=function(t){this.modalBoxFooter.innerHTML=t},o.prototype.getFooterContent=function(){return this.modalBoxFooter},o.prototype.setStickyFooter=function(t){this.isOverflow()||(t=!1),t?this.modalBox.contains(this.modalBoxFooter)&&(this.modalBox.removeChild(this.modalBoxFooter),this.modal.appendChild(this.modalBoxFooter),this.modalBoxFooter.classList.add("tingle-modal-box__footer--sticky"),e.call(this),this.modalBoxContent.style["padding-bottom"]=this.modalBoxFooter.clientHeight+20+"px"):this.modalBoxFooter&&(this.modalBox.contains(this.modalBoxFooter)||(this.modal.removeChild(this.modalBoxFooter),this.modalBox.appendChild(this.modalBoxFooter),this.modalBoxFooter.style.width="auto",this.modalBoxFooter.style.left="",this.modalBoxContent.style["padding-bottom"]="",this.modalBoxFooter.classList.remove("tingle-modal-box__footer--sticky")))},o.prototype.addFooterBtn=function(t,o,e){var s=document.createElement("button");return s.innerHTML=t,s.addEventListener("click",e),"string"==typeof o&&o.length&&o.split(" ").forEach(function(t){s.classList.add(t)}),this.modalBoxFooter.appendChild(s),s},o.prototype.resize=function(){console.warn("Resize is deprecated and will be removed in version 1.0")},o.prototype.isOverflow=function(){var t=window.innerHeight;return this.modalBox.clientHeight>=t},o.prototype.checkOverflow=function(){this.modal.classList.contains("tingle-modal--visible")&&(this.isOverflow()?this.modal.classList.add("tingle-modal--overflow"):this.modal.classList.remove("tingle-modal--overflow"),!this.isOverflow()&&this.opts.stickyFooter?this.setStickyFooter(!1):this.isOverflow()&&this.opts.stickyFooter&&(e.call(this),this.setStickyFooter(!0)))},{modal:o}});
var link = document.createElement( "link" );
link.href = "//mt09.de/dsgvo/tingle.css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "head" )[0].appendChild( link );