diff --git a/example.png b/example.png new file mode 100644 index 0000000..320c6f2 Binary files /dev/null and b/example.png differ diff --git a/material-cookiebar.css b/material-cookiebar.css new file mode 100644 index 0000000..d7bb9c5 --- /dev/null +++ b/material-cookiebar.css @@ -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; + } diff --git a/material-cookiebar.js b/material-cookiebar.js new file mode 100644 index 0000000..79ff380 --- /dev/null +++ b/material-cookiebar.js @@ -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 \ No newline at end of file diff --git a/material-cookiebar.js.map b/material-cookiebar.js.map new file mode 100644 index 0000000..e917a43 --- /dev/null +++ b/material-cookiebar.js.map @@ -0,0 +1 @@ +{"version":3,"file":"material-cookiebar.js","sourceRoot":"","sources":["material-cookiebar.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/material-cookiebar.ts b/material-cookiebar.ts new file mode 100644 index 0000000..7a0a801 --- /dev/null +++ b/material-cookiebar.ts @@ -0,0 +1,115 @@ +interface IMaterialCookieBarOptions { + header: string; + message: string; + buttonText: string; +} + +class MaterialCookieBar { + + public static cookieKey: string = "MaterialCookieConsent"; + + // #region build + + //////////////////////////////////////////////////////////////////////////////////////////////////// + /// Cookiepopup erstellen + /// A Beging, 29.05.2019. + /// Options for controlling the operation. + //////////////////////////////////////////////////////////////////////////////////////////////////// + public static build(options: IMaterialCookieBarOptions): void { + if (this.checkConsent()) { + return; + } + + let elementId = Math.random().toString(36).slice(2); + + let mainElement = (document.createElement('div')); + mainElement.classList.add("material-cookiebar"); + mainElement.id = elementId; + + let headerElement = (document.createElement('div')); + headerElement.innerHTML = options.header; + headerElement.classList.add("material-cookiebar-header"); + + let bodyElement = (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 + + //////////////////////////////////////////////////////////////////////////////////////////////////// + /// Zustimmung zu Cookies geben + /// A Beging, 29.05.2019. + //////////////////////////////////////////////////////////////////////////////////////////////////// + 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 + + //////////////////////////////////////////////////////////////////////////////////////////////////// + /// Prüfen, ob die Zustimmung bereits erteilt wurde + /// A Beging, 29.05.2019. + /// True if it succeeds, false if it fails. + //////////////////////////////////////////////////////////////////////////////////////////////////// + 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 + + //////////////////////////////////////////////////////////////////////////////////////////////////// + /// Erstellen des OK Buttons + /// A Beging, 29.05.2019. + /// The button text. + /// The new button div. + //////////////////////////////////////////////////////////////////////////////////////////////////// + private static createButtonDiv(buttonText: string, mainElementId: string) { + let buttonElement = (document.createElement('div')); + buttonElement.classList.add("material-cookiebar-button"); + + let buttonLink = (document.createElement('a')); + buttonLink.dataset.id = mainElementId; + buttonLink.href = "#"; + buttonLink.onclick = ev => { + this.giveConsent(); + + let srcElement = ev.srcElement; + let mainElement = window.document.getElementById(srcElement.dataset.id); + mainElement.remove(); + }; + buttonLink.innerHTML = buttonText; + + buttonElement.append(buttonLink); + return buttonElement; + } + + // #endregion + + +} \ No newline at end of file