Initial commit

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;
+            }

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

material-cookiebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"material-cookiebar.js","sourceRoot":"","sources":["material-cookiebar.ts"],"names":[],"mappings":"AAMA;IAAA;IA4GA,CAAC;IAjGiB,uBAAK,GAAnB,UAAoB,OAAkC;QAClD,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;YACrB,OAAO;SACV;QAED,IAAI,SAAS,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAEpD,IAAI,WAAW,GAAmB,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;QAClE,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAChD,WAAW,CAAC,EAAE,GAAG,SAAS,CAAC;QAE3B,IAAI,aAAa,GAAmB,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;QACpE,aAAa,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC;QACzC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QAEzD,IAAI,WAAW,GAAmB,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;QAClE,WAAW,CAAC,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC;QACxC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,yBAAyB,CAAC,CAAC;QAErD,IAAI,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;QACxE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QAEzD,WAAW,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QAClC,WAAW,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAChC,WAAW,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;QAElC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IAC7C,CAAC;IAUa,6BAAW,GAAzB;QACI,IAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC;QAGxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;QAG/D,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,UAAU,CAAC;IAC3F,CAAC;IAWc,8BAAY,GAA3B;QAAA,iBAMC;QAJG,IAAI,WAAW,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,IAAI,EAAE,EAAR,CAAQ,CAAC,CAAC;QAChE,IAAI,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,UAAA,CAAC,IAAM,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,KAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,KAAI,CAAC,SAAS,CAAA,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,SAAS,CAAC,KAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,EAAtC,CAAsC,CAAC,CAAC;QAE3J,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC/B,CAAC;IAYc,iCAAe,GAA9B,UAA+B,UAAkB,EAAE,aAAqB;QAAxE,iBAkBC;QAjBG,IAAI,aAAa,GAAmB,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;QACpE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QAEzD,IAAI,UAAU,GAAsB,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;QAClE,UAAU,CAAC,OAAO,CAAC,EAAE,GAAG,aAAa,CAAC;QACtC,UAAU,CAAC,IAAI,GAAG,GAAG,CAAC;QACtB,UAAU,CAAC,OAAO,GAAG,UAAA,EAAE;YACnB,KAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,IAAI,UAAU,GAAgB,EAAE,CAAC,UAAU,CAAC;YAC5C,IAAI,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YACxE,WAAW,CAAC,MAAM,EAAE,CAAC;QACzB,CAAC,CAAC;QACF,UAAU,CAAC,SAAS,GAAG,UAAU,CAAC;QAElC,aAAa,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QACjC,OAAO,aAAa,CAAC;IACzB,CAAC;IArGa,2BAAS,GAAW,uBAAuB,CAAC;IA0G9D,wBAAC;CAAA,AA5GD,IA4GC"}

material-cookiebar.ts

@@ -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
+
+
+}