/**
* @description The Namespace for all SDI classes
* @summary SDI Namespace
* @namespace SDI
* @author e.best
* @since 07.09.2017
* @version 0.0.1
* @name SDI
* @type {{}}
*/
var SDI = SDI || {};
/**
* @description The second Namespace to create the Library we will use as Basic of all our Banner Templates
* @summary Library Namespace
* @namespace SDI.LIBRARY
* @memberOf SDI
* @name LIBRARY
* @type {{}}
*/
SDI.LIBRARY = SDI.LIBRARY || {};
/**
* @namespace SDI.DEBUGLEVEL
*/
SDI.DEBUGLEVEL = SDI.DEBUGLEVEL || {};
/**
* @description write all errors to the js console
* @type {number}
*/
SDI.DEBUGLEVEL.CONSOLE = 1;
/**
* @description write all errors complete to the js console
* @type {number}
*/
SDI.DEBUGLEVEL.CONSOLESTACK = 2;
/**
* @description Write errors to a alert box
* @type {number}
*/
SDI.DEBUGLEVEL.ALERT = 4;
/**
* @description Write errors to an iFrame
* @type {number}
*/
SDI.DEBUGLEVEL.HTML = 8;
/**
* @description all together
* @type {number}
*/
SDI.DEBUGLEVEL.FULL = 15;
/**
* @description write to console and iFrame
* @type {number}
*/
SDI.DEBUGLEVEL.ALL = 10;
/**
* @description logger
* @type {string}
*/
SDI.DEBUG = '';
/**
* @description With this small Error class we can control the building of the Banner
* Each class or function in the project shut have a Debug message.
* If debugging is enable the function calls go to the js console in the Browser.
* @summary A little Error handler for faster debugging
* @author e.best
* @since 07.09.2017
* @version 0.0.1
* @class ErrorHandler
* @memberOf SDI.LIBRARY
* @param {function} functiontocall - Funktionsaufruf
* @param {boolean} rethrow - Rethrow
* @param {funktion} errorcallback - Funktion im Fehlerfall
* @returns {*}
* @example
* ERR = new SDI.LIBRARY.ErrorHandler(
* function(){
* //zu überwachender Code
* },
* false,
* function(){
* //zusätzliche Fehlerfunktion
* }
* );
* @constructor
* @name ErrorHandler
*/
SDI.LIBRARY.ErrorHandler = (function (functiontocall, rethrow, errorcallback) {
'use strict';
if(localStorage){
SDI.DEBUGLEVEL = localStorage.getItem('DEBUGLEVEL');
}
try {
functiontocall();
} catch (err) {
if ((SDI.DEBUGLEVEL & 1) !== 0) {
console.log(err.message);
if (!!rethrow) {
throw err;
}
if (!!errorcallback) {
return errorcallback(err);
}
}
if ((SDI.DEBUGLEVEL & 2) !== 0) {
console.log(err);
if (!!rethrow) {
throw err;
}
if (!!errorcallback) {
return errorcallback(err);
}
}
if ((SDI.DEBUGLEVEL & 4) !== 0) {
alert(err.message);
if (!!rethrow) {
throw err;
}
if (!!errorcallback) {
return errorcallback(err);
}
}
if ((SDI.DEBUGLEVEL & 8) !== 0) {
createIframe(err.stack);
if (!!rethrow) {
throw this.createIframe(err.stack);
}
if (!!errorcallback) {
return errorcallback(this.createIframe(err.stack));
}
}
}
if (SDI.DEBUGLEVEL >=1) {
console.log(SDI.DEBUG);
}
});
/**
* @description If tis iframe was created it is append to the body
* @summary Creates an Iframe when an error occurred
* @memberOf SDI.LIBRARY.ErrorHandler
* @function createIframe
* @param {string} inhalt - Der Inhalt des IFarmes
*/
SDI.LIBRARY.ErrorHandler.prototype.createIframe = function (inhalt) {
'use strict';
var ifra, content;
content = '<!DOCTYPE html>' +
'<head><title>' +
inhalt +
'</title>' +
'<body><div id="innerCtnr"></div>' +
'<pre>' +
inhalt +
'<\/pre>' +
'</body></html>';
ifra = document.createElement('iframe');
ifra.width = 400;
ifra.height = 200;
document.getElementsByTagName('body')[0].appendChild(ifra);
ifra.contentWindow.document.open('text/htmlreplace');
ifra.contentWindow.document.write(content);
ifra.contentWindow.document.close();
};
/**
* @description Alternative can you set the DEBUGLEVEL with the js console command
* localStorage.setItem('DEBUGLEVEL',1);
* for the correct values see DEBUGLEVEL
* @see SDI.DEBUGLEVEL
* @summary Sets the Debuglevel
* @memberOf SDI.LIBRARY.ErrorHandler
* @function setDebuglevel
* @param debuglevel
*/
SDI.LIBRARY.ErrorHandler.prototype.setDebuglevel = function(debuglevel){
if(localStorage){
localStorage.setItem('DEBUGLEVEL',debuglevel);
}
};
/**
* @description Remove the Debug Level from Local Storage
* @memberOf SDI.LIBRARY.ErrorHandler
* @function removeDebuglevel
*/
SDI.LIBRARY.ErrorHandler.prototype.removeDebuglevel = function(){
if(localStorage){
localStorage.removeItem('DEBUGLEVEL');
}
};
/**
* @description In This class are all the little and big functions for an easier Life.
* @summary All the other things
* @class Helper
* @memberOf SDI.LIBRARY
* @author e.best
* @version 0.0.1
* @since 07.09.2017
* @name Helper
*/
SDI.LIBRARY.Helper = (function () {
/**
*
* @constructor
*/
'use strict';
function Helper() {
SDI.DEBUG += ' Helper ';
}
});
/**
* @description wit this function you can simply check witch Browser is used
* @summary Easy Browser Detection
* @memberOf SDI.LIBRARY.Helper
* @function browserDetection
* @returns Array
* [Browser]
* [Version]
* @example
* helper = new SDI.LIBRARY.Helper;
* navigator.sayswho = helper.browserDetection;
* if((navigator.sayswho[0] === "Firefox")||((navigator.sayswho[0] === "Chrome")&&(parseInt(navigator.sayswho[1])>=44))||(navigator.sayswho[0] === "Safari")){
* console.log(navigator);
* }
*/
SDI.LIBRARY.Helper.prototype.browserDetection = function () {
'use strict';
var N = navigator.appName, ua = navigator.userAgent, tem, M;
tem = null;
// if IE11+
if (new RegExp('Trident/.*rv:([0-9]{1,}[\.0-9]{0,})').exec(ua) !== null) {
M = ['Internet Explorer'];
tem = ua.match(/rv:([0-9]{1,}[\.0-9]{0,})/);
if (tem !== null) {
M[2] = tem[1];
}
M = M ? [M[0], M[2]] : [N, navigator.appVersion, '-?'];
return M;
}
M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
tem = ua.match(/version\/([\.\d]+)/i);
if (tem !== null) {
M[2] = tem[1];
}
M = M ? [M[1], M[2]] : [N, navigator.appVersion, '-?'];
return M;
};
/**
* @description with this function we can simple set a clipping by the collapse height and width of an Element
* @summary Simple clipping
* @memberOf SDI.LIBRARY.Helper
* @function clippingRect
* @param {Number} bh - BannerHeight
* @param {Number} bw - BannerWidth
* @param {Number} ch - collapsed BannerHeight
* @param {Number} cw - collapsed BannerWidth
* @param {String} dir - Direction
* @returns {String} rect(top,left,bottom,right);
* @example
* helper = new SDI.LIBRARY.Helper;
* document.getElementById('banner').style.clip = (helper.clippingRect(180,728,90,728,'top'));
*/
SDI.LIBRARY.Helper.prototype.clippingRect = function (bh, bw, ch, cw, dir) {
'use strict';
var tp, lp;
tp = parseInt(bh - ch, 10);
lp = parseInt(bw - cw, 10);
switch (dir) {
case 'oben':
return 'rect(' + tp + 'px, ' + bw + 'px, ' + bh + 'px, 0px)';
case 'obenlinks':
return 'rect(' + tp + 'px, ' + bw + 'px, ' + bh + 'px, ' + lp + 'px)';
case 'obenrechts':
return 'rect(' + tp + 'px, ' + cw + 'px, ' + bh + 'px, 0px)';
case 'unten':
return 'rect(0px, ' + bw + 'px, ' + ch + 'px, 0px)';
case 'untenlinks':
return 'rect(0px, ' + bw + 'px, ' + ch + 'px, ' + lp + 'px)';
case 'untenrechts':
return 'rect(0px, ' + cw + 'px, ' + ch + 'px, 0px)';
case 'links':
return 'rect(0px, ' + bw + 'px, ' + bh + 'px, ' + lp + 'px)';
case 'rechts':
return 'rect(0px, ' + lp + 'px, ' + bh + 'px, 0px)';
default:
return 'rect(0px, ' + bw + 'px, ' + bh + 'px, 0px)';
}
};
/**
* @description Creates a Counter image in the used document object.
* @summary Create a Counter
* @memberOf SDI.LIBRARY.Helper
* @function createCounter
* @param SDGCounter
*/
SDI.LIBRARY.Helper.prototype.createCounter = function (SDGCounter) {
'use strict';
if ((SDGCounter !== '') && (SDGCounter !== null)) {
var skript, skriptvalidator, bild, bildvalidator, kontainer;
kontainer = document.createElement('div');
kontainer.style.display = 'none';
skriptvalidator = /\.js/;
bildvalidator = (/\.(gif|jpg|jpeg|tiff|png)$/i);
if (skriptvalidator.test(SDGCounter)) {
skript = document.createElement('script');
skript.src = SDGCounter;
kontainer.appendChild(skript);
document.body.appendChild(kontainer);
} else if (bildvalidator.test(SDGCounter)) {
bild = document.createElement('img');
bild.src = SDGCounter;
kontainer.appendChild(bild);
document.body.appendChild(kontainer);
} else {
bild = document.createElement('img');
bild.src = SDGCounter;
kontainer.appendChild(bild);
document.body.appendChild(kontainer);
}
}
};
/**
* @description Get the Name, Object and container of the parent Window
* @summary Get information of the parent window
* @memberOf SDI.LIBRARY.Helper
* @function getParent
* @returns {{WindowName: string, HolderId: string, IFrame: Window, Holder: HTMLElement}}
*/
SDI.LIBRARY.Helper.prototype.getParent = function () {
'use strict';
var ret = {WindowName: '', HolderId: '', IFrame: window, Holder: window.document.body};
if (window.top !== window.self) {
ret = {
WindowName: window.name,
HolderId: window.name + '__container__',
IFrame: window.parent.document.getElementById(window.name),
Holder: window.parent.document.getElementById(window.name + '__container__')
};
}
return ret;
};
/**
* @description Creates a style Block
* @summary Create a Style
* @memberOf SDI.LIBRARY.Helper
* @function setStyle
* @param style
* @returns {*}
*/
SDI.LIBRARY.Helper.prototype.setStyle = function (style) {
'use strict';
var ret = document.createElement('style');
ret.innerHTML = style;
return ret;
};
/**
* @description Get the absolute position of an Element
* @summary Get Element position
* @memberOf SDI.LIBRARY.Helper
* @function getPos
* @param el
*/
SDI.LIBRARY.Helper.prototype.getPos = function (el) {
'use strict';
var ret, lx, ly;
ret = {left: 0, top: 0};
lx = 0;
for (ly = 0; el !== null; el = el.offsetParent) {
lx += el.offsetLeft;
ly += el.offsetTop;
}
ret.left = parseInt(lx, 10);
ret.top = parseInt(ly, 10);
return ret;
};
/**
* @description Get the dimensions and absolute position aof an Element
* @summary Get dimension and position
* @memberOf SDI.LIBRARY.Helper
* @function getDimAndPos
* @param div
* @returns {array |*}
*/
SDI.LIBRARY.Helper.prototype.getDimAndPos = function (div) {
'use strict';
var DimAndPos, dasDiv, pos;
DimAndPos = [];
try {
if (div) {
dasDiv = div;
DimAndPos.width = parseInt(dasDiv.offsetWidth, 10);
DimAndPos.height = parseInt(dasDiv.offsetHeight, 10);
pos = this.getPos(dasDiv);
DimAndPos.left = pos.left;
DimAndPos.top = pos.top;
DimAndPos.right = parseInt(DimAndPos.left+DimAndPos.width,10);
DimAndPos.bottom = parseInt(DimAndPos.top+DimAndPos.height,10);
return DimAndPos;
}
} catch (err) {
console.log(err.message);
}
return DimAndPos;
};
/**
* @description with this function we can check if an object collide with an other
* @summary Collision recognizer
* @memberOf SDI.LIBRARY.Helper
* @function collision
* @param {object} div1 - ein Node Opject
* @param {object} div2 - ein Node Opject
* @returns {number}
* @example
* helper = new SDI.LIBRARY.Helper;
* if(helper.collision(div1,div2)){console.log('Collision');}
*/
SDI.LIBRARY.Helper.prototype.collision = function (div1, div2) {
'use strict';
var obj1,obj2,ret;
obj1 = this.getDimAndPos(div1);
obj2 = this.getDimAndPos(div2);
ret = 0;
ret = (obj1.right > obj2.left)?ret:ret+1; // links
ret = (obj1.left < obj2.right)?ret:ret+2; // rechts
ret = (obj1.bottom > obj2.top)?ret:ret+4; // oben
ret = (obj1.top < obj2.bottom)?ret:ret+8; // unten
return ret; //z.B. 10 wäre rechts unten oder 15 wäre innerhalb
};
/**
* @description Search a Container by his CSS class name
* @summary Search Div by classname
* @memberOf SDI.LIBRARY.Helper
* @function searchDivByClass
* @param classname
* @param tagname
* @returns {*}
*/
SDI.LIBRARY.Helper.prototype.searchDivByClass = function (classname, tagname) {
'use strict';
var divs, i;
try {
divs = document.getElementsByTagName(tagname);
for (i = 0; i < divs.length; i = i + 1) {
if (divs[i].className === classname) {
return divs[i];
}
}
} catch (err) {
console.log(err.message);
}
return null;
};
/**
* @description In this class should be all the functions we need to create an Banner. It is a Basic class of the Library.
* Please put all low level element functions in this class.
* @summary This class provide the needed Elements for creation
* @namespace SDI.LIBRARY
* @memberof SDI.LIBRARY
* @class SDI.LIBRARY.Element
* @name Element
* @author e.best
* @version 0.0.1
* @since 07.09.2017
*/
SDI.LIBRARY.Element = (function () {
/**
*
* @constructor
*/
'use strict';
function Element() {
SDI.DEBUG += ' Element ';
}
});
/**
* @description With this function we can simple create an HTML container. Since HTML5 you can also create specific HTML5 Container
* when needed.
* @summary Create a HTML container Element
* @memberOf SDI.LIBRARY.Element
* @function createDiv
* @param {String} sType
* @param {String} sId
* @param {String} sStyle
* @returns {HTMLElement}
*/
SDI.LIBRARY.Element.prototype.createDiv = function (sType, sId, sStyle) {
'use strict';
if ((document.getElementById(sId) !== 'undefined')&&(document.getElementById(sId) !== null)&&(document.getElementById(sId).nodeName === sType.toUpperCase())) {
var ret = document.getElementById(sId);
ret.setAttribute('style', sStyle);
return ret;
} else {
var div = document.createElement(sType);
div.setAttribute('id', sId + '_container');
div.setAttribute('style', sStyle);
return div;
}
};
/**
* @description In this function we create an Image that has an link. The Element is given back as an String for asn easier use in
* other functions
* @summary Create an Image with link
* @memberOf SDI.LIBRARY.Element
* @function imageObject
* @param {String} sImage - The Image
* @param {Number} iWidth - Width of the Image
* @param {Number} iHeight - Height of the Image
* @param {String} sLink - The target URL
* @param {String} sTarget - The target Window
* @returns {String} The image Tag whit an link
*/
SDI.LIBRARY.Element.prototype.imageObject = function (sImage, iWidth, iHeight, sLink, sTarget, sId) {
'use strict';
var ret;
if (sId > '') {
var mWidth = (iWidth==='inherit')?'100%':iWidth;
var mHeight = (iHeight==='inherit')?'100%':iHeight;
ret = '<a href="' + sLink + '" target="' + sTarget + '"><img src="' + sImage + '" width="' + mWidth + '" height="' + mHeight + '" border="0" id="' + sId + '_image" style="width: ' + iWidth + '; height: ' + iHeight + ';"></a>';
} else {
ret = '';
}
return ret;
};
/**
* @description Here we create a very simple iFrame and give it back as String.
* @summary Creates a simple iFrame
* @memberOf SDI.LIBRARY.Element
* @function iframeObject
* @param {String} sFrame - The Frame
* @param {Number} iWidth - Width of the Image
* @param {Number} iHeight - Height of the Image
* @param {String} sId - The id
* @returns {String} The iFrame as String
*/
SDI.LIBRARY.Element.prototype.iframeObject = function (sFrame, iWidth, iHeight, sId) {
'use strict';
var ret;
if (sId > '') {
var mWidth = (iWidth==='inherit')?'100%':iWidth;
var mHeight = (iHeight==='inherit')?'100%':iHeight;
ret = '<iframe src="' + sFrame + '" width="' + mWidth + '" height="' + mHeight + '" frameborder="0" frameborder="0" scrolling="no" id="' + sId + '_iframe" name="' + sId + '_iframe" style="width: ' + iWidth + ' ; height: ' + iHeight + ';"></iframe>';
} else {
ret = '';
}
return ret;
};
/**
* @description Here we return the given Script
* @summary Return the given Script
* @memberOf SDI.LIBRARY.Element
* @function scriptObject
* @param sScript
* @returns {String} The Script
*/
SDI.LIBRARY.Element.prototype.scriptObject = function(sScript){
return sScript;
};
/**
* @description this class is for an easier work with Strings and complexer script blocks
* @summary String processing
* @namespace SDI.LIBRARY
* @memberof SDI.LIBRARY
* @class SDI.LIBRARY.Strings
* @name Strings
* @author e.best
* @version 0.0.1
* @since 07.09.2017
*/
SDI.LIBRARY.Strings = (function () {
'use strict';
/**
*
* @constructor
*/
function Strings() {
SDI.DEBUG += ' Strings ';
}
});
/**
* @description with this function we solve the problem that a script Tag in an String is interpreted as code.
* When that happens, the Script breaks down and wont work.
* @summary Change the script tags to scri+pt
* @memberOf SDI.LIBRARY.Strings
* @function entscripter
* @param {String} sStr - String origin
* @return {String}
* @example
* sdi = new SDI.LIBRARY.String;
* strScript = sdi.entscripter(decodeURIComponent("<script>a=(a>b)?a:b;<\/script>"));
* console.log(strScript);
*/
SDI.LIBRARY.Strings.prototype.entscripter = function (sStr) {
'use strict';
var cleanscript = encodeURIComponent(sStr);
cleanscript = cleanscript.replace(/<script/ig, "<scr'+'ipt");
cleanscript = cleanscript.replace(/<\/script>/ig, "</scr'+'ipt>");
cleanscript = cleanscript.replace(/(\/\*)(.|\s)+?(\*\/)/gm, "");
cleanscript = cleanscript.replace(/<!--.*-->/gm, "");
cleanscript = cleanscript.replace(/(\/\/.*\n)|(\/.*\n)/gm, "");
return cleanscript;
};
/**
* @description With this function we can get the Source String from an Iframe or an Image
* @summary Get the src as String
* @memberOf SDI.LIBRARY.Strings
* @function srcgetter
* @example
* sdi = new SDI.LIBRARY.String;
* strScript = sdi.srcgetter(decodeURIComponent("<script src='http://example.com'><\/script>"));
* console.log(strScript);
* @param {String} sStr - Ursprünglicher String
* @returns {*}
*/
SDI.LIBRARY.Strings.prototype.srcgetter = function (sStr) {
'use strict';
var teststring, ret;
teststring = /\ssrc=(?:(?:'([^']*)')|(?:"([^"]*)")|([^\s]*))/i;
ret = sStr.match(teststring);
return ret[1] || ret[2] || ret[3];
};
/**
* @description With This Class we create a piece of an Banner for use in simple or more complex Banners.
* It use an simple Trick to select the right media. If in the Form an Image is present, it create an Image Banner if an
* IFrame present it create an IFrame Banner. If both, an Image Banner will be create.
* The position values are represent the absolute position to the parent(relative positioned) Element.
* @summary Create an Banner Based on an Image, or an IFrame
* @author e.best
* @since 08.09.2017
* @version 0.0.1
* @namespace SDI.LIBRARY
* @memberof SDI.LIBRARY
* @class SDI.LIBRARY.CreateBanner
* @name CreateBanner
* @param {Number} iTop - Top position
* @param {Number} iLeft - Left position
* @param {Number} iHeight - Height
* @param {Number} iWidth - Width
* @param {Number} iZIndex - zIndex
* @param {String} sLink - Target URL
* @param {String} sTarget - Target Window
* @param {String} sId - The Identifier
* @param {Object} oMedia - Object with type and source
* @returns {HTMLElement}
*/
SDI.LIBRARY.CreateBanner = (function CreateBanner(iTop, iLeft, iHeight, iWidth, iZIndex, sLink, sTarget, sId, oMedia) {
'use strict';
this.top = (iTop !== 0) ? iTop : 0;
this.left = (iLeft !== 0) ? iLeft : 0;
this.height = (iHeight !== 0) ? iHeight : 0;
this.width = (iWidth !== 0) ? iWidth : 0;
this.zIndex = (iZIndex !== 0) ? iZIndex : 1;
this.link = (sLink !== '') ? sLink : '';
this.target = (sTarget !== '') ? sTarget : '_blank';
this.id = (sId !== '') ? sId : '';
this.image = (oMedia.medium === 'Image') ? oMedia.quelle : '';
this.iframe = (oMedia.medium === 'Iframe') ? oMedia.quelle : '';
this.script = (oMedia.medium === 'Script') ? oMedia.quelle : '';
this.piece = "";
SDI.DEBUG += "create Banner";
return this.getDiv();
});
/**
* @description With tis function we get a Div container from the Element class, put it together with the media piece and give
* it back to the constructor.
* @see SDI.LIBRARY.Element
* @summary Get a Div container as Holder for the Image or iFrame Element.
* @memberOf SDI.LIBRARY.CreateBanner
* @function getDiv
* @returns {HTMLElement}
*/
SDI.LIBRARY.CreateBanner.prototype.getDiv = function () {
'use strict';
var di, elements, width, height, top ,left;
elements = new SDI.LIBRARY.Element();
width = (this.width>=0)?this.width+'px':'inherit';
height = (this.height>=0)?this.height+'px':'inherit';
top = (this.top>=0)?this.top+'px':'inherit';
left = (this.left>=0)?this.left+'px':'inherit';
this.piece = (this.image !== '') ? elements.imageObject(this.image, width, height, this.link, this.target, this.id) : (this.iframe !== '') ? elements.iframeObject(this.iframe, width, height, this.id) : (this.script !== '') ? elements.scriptObject(this.script) : '';
di = elements.createDiv('div', this.id, 'width:' + width +'; height:' +height +'; display:block; position:absolute; top:' + top +'; left:' + left +'; z-index:' + this.zIndex + ';');
di.innerHTML = this.piece;
return di;
};
/**
* @description An object for Images and CSS
* @summary Base64 Images
* @memberOf SDI.LIBRARY
* @type {{ANZEIGE: string, BLIND: string}}
* @name CSS
*/
SDI.LIBRARY.CSS = {
ANZEIGE: 'data:image/png;base64, R0lGODlhCAA8AIABAGZmZv///yH5BAEAAAEALAAAAAAIADwAAAI9jI+py+2vwJFG2hluBZzCZHGYlmGVuXkf0okri16ePLUvfG55SVJuubu1VMEikGW71X6kE7GZIiqn1CqiAAA7',
BLIND: 'data:image/png;base64, R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='
};