Created
September 25, 2017 22:35
-
-
Save letanure/d3b07ab8a0131ffcb232421122a31953 to your computer and use it in GitHub Desktop.
ribbon via gtm
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
var docCookies = { | |
getItem: function (sKey) { | |
if (!sKey) { return null; } | |
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null; | |
}, | |
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) { | |
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; } | |
var sExpires = ""; | |
if (vEnd) { | |
switch (vEnd.constructor) { | |
case Number: | |
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd; | |
break; | |
case String: | |
sExpires = "; expires=" + vEnd; | |
break; | |
case Date: | |
sExpires = "; expires=" + vEnd.toUTCString(); | |
break; | |
} | |
} | |
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); | |
return true; | |
}, | |
removeItem: function (sKey, sPath, sDomain) { | |
if (!this.hasItem(sKey)) { return false; } | |
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : ""); | |
return true; | |
}, | |
hasItem: function (sKey) { | |
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; } | |
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); | |
}, | |
keys: function () { | |
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/); | |
for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); } | |
return aKeys; | |
} | |
}; | |
var ribbonModule = { | |
style: "<style>.ribbonModule {width: 100vw; background-color: #fff; display: none; background-repeat: no-repeat; background-position: center; background-size: cover; } .ribbonModule a{display:block: text-decoration: none;} .ribbonModule__container { height: 100%; max-width: 960px; margin: 0 auto; padding: 10px 0; position: relative; } .ribbonModule__close {position: absolute; top: 10px; background: gray; right: 0; color: #fff; text-align: center; padding: 4px; font-size: 12px; cursor: pointer; opacity: 1;width: 20px; height: 20px; line-height: 12px; font-size: 15px; border-radius: 3px; } .ribbonModule__close:hover {opacity: .5 } .ribbonModule__text {height: 100%; color: #817c7b; font-size: 16px; } </style>", | |
template: '<div id="<%this.ribbonName%>" class="ribbonModule" style="height: <%this.ribbonHeight%>px; background-color: <%this.backgroundColor%>; background-image: url(<%this.backgroundImage%>);"> <div class="ribbonModule__container"> <a href="<%this.linkUrl%>" style="color: <%this.fontColor%>"><div class="ribbonModule__text" style="color: <%this.fontColor%>; text-align: <%this.ribbonTextAlign%>; font-size:<%this.fontSize%>px;"><%this.ribbonText%></div></a> <div class="ribbonModule__close" style="background-color: <%this.ribbonCloseBackgroundColor%>; color: <%this.ribbonCloseTextColor%>">☓</div> </div> </div>', | |
data: { | |
backgroundImage: '', | |
backgroundColor: '#f1f1f0', | |
fontColor: '#000', | |
fontSize: 16, | |
ribbonHeight: 50, | |
ribbonText: 'Message', | |
ribbonTextAlign: 'center', | |
ribbonCloseBackgroundColor: 'gray', | |
ribbonCloseTextColor: '#fff', | |
keepclosed: true, | |
ribbonName: 'ribbon_default', | |
linkUrl: '#', | |
}, | |
templateEngine: function(html, options) { | |
var re = /<%(.+?)%>/g, | |
reExp = /(^( )?(var|if|for|else|switch|case|break|{|}|;))(.*)?/g, | |
code = 'with(obj) { var r=[];\n', | |
cursor = 0, | |
result, | |
match; | |
var add = function(line, js) { | |
js? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') : | |
(code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : ''); | |
return add; | |
} | |
while(match = re.exec(html)) { | |
add(html.slice(cursor, match.index))(match[1], true); | |
cursor = match.index + match[0].length; | |
} | |
add(html.substr(cursor, html.length - cursor)); | |
code = (code + 'return r.join(""); }').replace(/[\r\t\n]/g, ' '); | |
try { result = new Function('obj', code).apply(options, [options]); } | |
catch(err) { console.error("'" + err.message + "'", " in \n\nCode:\n", code, "\n"); } | |
return result; | |
}, | |
renderTemplate: function () { | |
var template = this.template; | |
var data = this.data; | |
var renderedTemplate = this.templateEngine(template, data); | |
return renderedTemplate | |
}, | |
appendRibbon: function () { | |
var html = this.renderTemplate() | |
$('body').prepend(html); | |
setTimeout(function () { | |
$('.ribbonModule').slideDown() | |
}, 100); | |
}, | |
addStyle: function () { | |
var style = this.style; | |
$('body').prepend(style); | |
}, | |
closeRibbon: function () { | |
var id = this.data.ribbonName | |
$('#' + id).slideUp() | |
}, | |
bindEvents: function () { | |
var _this = this; | |
$('.ribbonModule__close').on('click', function () { | |
_this.closeRibbon(); | |
_this.setCookie('closed'); | |
}) | |
}, | |
setCookie: function (cookieValue) { | |
var ribbonName = this.data.ribbonName | |
docCookies.setItem('urb_ribbon--' + ribbonName, cookieValue) | |
}, | |
getCookie: function () { | |
var ribbonName = this.data.ribbonName | |
return docCookies.getItem('urb_ribbon--' + ribbonName) | |
}, | |
addRibbon: function () { | |
this.appendRibbon(); | |
this.addStyle(); | |
this.bindEvents(); | |
}, | |
cleanUp: function (st) { | |
return st. | |
replace(/[^a-z0-9]+/gi, '-'). | |
replace(/^-+/, ''). | |
replace(/-+$/, ''); | |
}, | |
init: function (config) { | |
this.data = config; | |
this.data.ribbonName = this.cleanUp(config.ribbonName) | |
var _this = this; | |
var cookieValue = this.getCookie() | |
if (this.data.keepclosed === false) { | |
this.addRibbon(); | |
} else { | |
if (cookieValue === null) { | |
this.addRibbon(); | |
this.setCookie('view'); | |
} | |
} | |
}, | |
} | |
ribbonModule.init({ | |
backgroundImage: 'http://www.urbanara.de/upload/20170925_HPBoxes_05.jpg', | |
backgroundColor: 'red', | |
fontColor: 'blue', | |
fontSize: '12px', | |
ribbonHeight: '50px', | |
ribbonText: 'Message', | |
ribbonTextAlign: 'center', | |
ribbonCloseBackgroundColor: 'gray', | |
ribbonCloseTextColor: 'orange', | |
ribbonName: 'test2', | |
keepclosed: true, | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment