troogs/material-cookiebar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
TroogS
2019-05-29 13:34:30 +02:00
committed by GitHub
parent 041075d1db
commit 5f27cec937
5 changed files with 221 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

49
material-cookiebar.css Normal file
View File

@@ -0,0 +1,49 @@
.material-cookiebar {
display: block;
bottom: 15px;
box-shadow: rgb(102, 102, 102) 1px 1px 8px;
z-index: 999;
right: 15px;
width: 500px;
max-width: 100%;
background-color: #F4F4F4;
min-height: 100px;
position: fixed;
padding: 0;
}
.material-cookiebar > .material-cookiebar-header {
font-size: 1.1em;
color: #FFF;
background-color: #2b73aa;
padding: 10px 5px;
}
.material-cookiebar > .material-cookiebar-body {
margin: 0 5px 0 5px;
padding: 10px !important;
}
.material-cookiebar > .material-cookiebar-button {
padding: 0 10px 10px 0;
text-align: right;
}
.material-cookiebar > .material-cookiebar-button > a {
text-decoration: none;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
border-radius: 0 !important;
background-color: #2b73aa;
color: #fff !important;
font-weight: normal;
border: 1px solid transparent;
}
.material-cookiebar > .material-cookiebar-button > a:hover,
.material-cookiebar > .material-cookiebar-button > a:focus,
.material-cookiebar > .material-cookiebar-button > a:active {
background-color: #245f8c;
border-color: #1d4666;
}

56
material-cookiebar.js Normal file
View File

@@ -0,0 +1,56 @@
var MaterialCookieBar = (function () {
function MaterialCookieBar() {
}
MaterialCookieBar.build = function (options) {
if (this.checkConsent()) {
return;
}
var elementId = Math.random().toString(36).slice(2);
var mainElement = (document.createElement('div'));
mainElement.classList.add("material-cookiebar");
mainElement.id = elementId;
var headerElement = (document.createElement('div'));
headerElement.innerHTML = options.header;
headerElement.classList.add("material-cookiebar-header");
var bodyElement = (document.createElement('div'));
bodyElement.innerHTML = options.message;
bodyElement.classList.add("material-cookiebar-body");
var buttonElement = this.createButtonDiv(options.buttonText, elementId);
headerElement.classList.add("material-cookiebar-header");
mainElement.append(headerElement);
mainElement.append(bodyElement);
mainElement.append(buttonElement);
window.document.body.append(mainElement);
};
MaterialCookieBar.giveConsent = function () {
var date = new Date();
date.setTime(date.getTime() + (5 * 365 * 24 * 60 * 60 * 1000));
document.cookie = this.cookieKey + "=True; expires=" + date.toUTCString() + "; path=/";
};
MaterialCookieBar.checkConsent = function () {
var _this = this;
var cookieArray = document.cookie.split(';').map(function (c) { return c.trim(); });
var result = cookieArray.filter(function (c) { return c.substring(0, _this.cookieKey.length) === _this.cookieKey; }).map(function (c) { return c.substring(_this.cookieKey.length + 1); });
return (result.length > 0);
};
MaterialCookieBar.createButtonDiv = function (buttonText, mainElementId) {
var _this = this;
var buttonElement = (document.createElement('div'));
buttonElement.classList.add("material-cookiebar-button");
var buttonLink = (document.createElement('a'));
buttonLink.dataset.id = mainElementId;
buttonLink.href = "#";
buttonLink.onclick = function (ev) {
_this.giveConsent();
var srcElement = ev.srcElement;
var mainElement = window.document.getElementById(srcElement.dataset.id);
mainElement.remove();
};
buttonLink.innerHTML = buttonText;
buttonElement.append(buttonLink);
return buttonElement;
};
MaterialCookieBar.cookieKey = "MaterialCookieConsent";
return MaterialCookieBar;
}());
//# sourceMappingURL=eas-cookiebar.js.map

1
material-cookiebar.js.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"file":"material-cookiebar.js","sourceRoot":"","sources":["material-cookiebar.ts"],"names":[],"mappings":"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"}

115
material-cookiebar.ts Normal file
View File

@@ -0,0 +1,115 @@
interface IMaterialCookieBarOptions {
header: string;
message: string;
buttonText: string;
}
class MaterialCookieBar {
public static cookieKey: string = "MaterialCookieConsent";
// #region build
////////////////////////////////////////////////////////////////////////////////////////////////////
/// <summary> Cookiepopup erstellen </summary>
/// <remarks> A Beging, 29.05.2019. </remarks>
/// <param name="options"> Options for controlling the operation. </param>
////////////////////////////////////////////////////////////////////////////////////////////////////
public static build(options: IMaterialCookieBarOptions): void {
if (this.checkConsent()) {
return;
}
let elementId = Math.random().toString(36).slice(2);
let mainElement = <HTMLDivElement>(document.createElement('div'));
mainElement.classList.add("material-cookiebar");
mainElement.id = elementId;
let headerElement = <HTMLDivElement>(document.createElement('div'));
headerElement.innerHTML = options.header;
headerElement.classList.add("material-cookiebar-header");
let bodyElement = <HTMLDivElement>(document.createElement('div'));
bodyElement.innerHTML = options.message;
bodyElement.classList.add("material-cookiebar-body");
let buttonElement = this.createButtonDiv(options.buttonText, elementId);
headerElement.classList.add("material-cookiebar-header");
mainElement.append(headerElement);
mainElement.append(bodyElement);
mainElement.append(buttonElement);
window.document.body.append(mainElement);
}
// #endregion
// #region giveConsent
////////////////////////////////////////////////////////////////////////////////////////////////////
/// <summary> Zustimmung zu Cookies geben </summary>
/// <remarks> A Beging, 29.05.2019. </remarks>
////////////////////////////////////////////////////////////////////////////////////////////////////
public static giveConsent(): void {
const date = new Date();
// Set it expire in 5 years
date.setTime(date.getTime() + (5 * 365 * 24 * 60 * 60 * 1000));
// Set it
document.cookie = this.cookieKey + "=True; expires=" + date.toUTCString() + "; path=/";
}
// #endregion
// #region private checkConsent
////////////////////////////////////////////////////////////////////////////////////////////////////
/// <summary> Prüfen, ob die Zustimmung bereits erteilt wurde </summary>
/// <remarks> A Beging, 29.05.2019. </remarks>
/// <returns> True if it succeeds, false if it fails. </returns>
////////////////////////////////////////////////////////////////////////////////////////////////////
private static checkConsent(): boolean {
let cookieArray = document.cookie.split(';').map(c => c.trim());
let result = cookieArray.filter(c => { return c.substring(0, this.cookieKey.length) === this.cookieKey }).map(c => c.substring(this.cookieKey.length + 1));
return (result.length > 0);
}
// #endregion
// #region private createButtonDiv
////////////////////////////////////////////////////////////////////////////////////////////////////
/// <summary> Erstellen des OK Buttons </summary>
/// <remarks> A Beging, 29.05.2019. </remarks>
/// <param name="buttonText"> The button text. </param>
/// <returns> The new button div. </returns>
////////////////////////////////////////////////////////////////////////////////////////////////////
private static createButtonDiv(buttonText: string, mainElementId: string) {
let buttonElement = <HTMLDivElement>(document.createElement('div'));
buttonElement.classList.add("material-cookiebar-button");
let buttonLink = <HTMLAnchorElement>(document.createElement('a'));
buttonLink.dataset.id = mainElementId;
buttonLink.href = "#";
buttonLink.onclick = ev => {
this.giveConsent();
let srcElement = <HTMLElement>ev.srcElement;
let mainElement = window.document.getElementById(srcElement.dataset.id);
mainElement.remove();
};
buttonLink.innerHTML = buttonText;
buttonElement.append(buttonLink);
return buttonElement;
}
// #endregion
}