Cookie Consent für Philipp

cookie-consent.css

.cookie-consent {            
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;

    background-color: #222;
    padding: 1em 1.5em;
    
    font-family: 'Open Sans', Verdana, Tahoma, sans-serif;
    font-size: .9em;
    line-height: 1.5em;
    color: #f1f1f1;
}

.cookie-consent a {
    color: #f1f1f1;
}

.cookie-consent-btn-group {
    flex: 0 0 auto;
    display: block;
    margin: 1em auto 0;
    text-align: center;
}

.cookie-consent-btn {
    display: inline-block;            
    margin: 0 0 0 .5em;
    padding: .7em 2.25em;
    background-color: transparent;
    border: none;
    border-radius: .1em;

    font-size: 1em;            
    font-weight: 600;
    color: white;
    cursor: pointer;
}

.cookie-consent-btn--accept {
    background-color: #52B3D9;
    transition: background-color .4s;
}

.cookie-consent-btn--accept:hover {
    background-color: #22A7F0;
}

.cookie-consent-btn--deny {
    border: none;
}

.cookie-consent-btn--deny:hover {
    text-decoration: underline;
}

@media (min-width: 800px) {
    .cookie-consent {  
        display: flex;
        align-items: center;
    }

    .cookie-consent-text {
        flex: 1 0;
    }

    .cookie-consent-btn-group {
        display: inline-block;
        margin: 0 0 0 2em;
    }
}

dsgvo.js

/* Cookie Helper class */
var Cookie = {
    set: function(name, value, expires, path) {
        cookieStr = name + "=" + escape(value) + "; ";
        
        if (expires) {
            var today = new Date();
            var expr = new Date(today.getTime() + expires * 24 * 60 * 60 * 1000);
            expires = expr.toGMTString();
            cookieStr += "expires=" + expires + "; ";
        }

        if (path) {
            cookieStr += "path=" + path + "; ";
        }
        
        document.cookie = cookieStr;
    },

    isSet: function(name) {
        return document.cookie.indexOf(name + '=') > -1;
    },

    hasValue: function(name, value) {
        return document.cookie.indexOf(name + '=' + value) > -1;
    }
}



/**
 * Cookie Consent helper class
 * Show Consent banner and save settings.
 * Provides Hooks for loading scripts after consent
 */
var CookieConsent = {
    
    cookieName: 'cookie-consent',
    defaults: {
        text: 'Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.',
        acceptText: 'Akzeptieren',
        denyText: 'Ablehnen',
        onFirstTime: function() {},
        onConsent: function() {},
        onDeny: function() {}
    },

    init: function (config) { 
        this.config = [];
        for (var key in this.defaults) {
            if (key in config) {
                this.config[key] = config[key];
            } else {
                this.config[key] = this.defaults[key];
            }
        }
        
        
        if (Cookie.isSet(this.cookieName)) {
            // Cookie set            
            this.checkConsent();
                 
        } else {
            // First time
            this.config.onFirstTime();
            
            var that = this;
            window.addEventListener('DOMContentLoaded', function() {
                console.log('Show Consent Message');
                that.show();
            })
        }
    },

    show: function () {
        this.popup = document.createElement('div');
        this.popup.className = 'cookie-consent';
    
        var text = document.createElement('div');
        text.className = 'cookie-consent-text';
        text.innerHTML = this.config.text;
    
        var acceptBtn =  document.createElement('button');
        acceptBtn.className = 'cookie-consent-btn cookie-consent-btn--accept';
        acceptBtn.innerText = this.config.acceptText;
        acceptBtn.addEventListener('click', this.accept.bind(this));

        var denyBtn =  document.createElement('button');
        denyBtn.className = 'cookie-consent-btn cookie-consent-btn--deny';
        denyBtn.innerText = this.config.denyText;
        denyBtn.addEventListener('click', this.decline.bind(this));
        
        
        
        var btnGroup = document.createElement('div');
        btnGroup.className = 'cookie-consent-btn-group';
        
        if (this.config.denyText) {
            btnGroup.appendChild(denyBtn);
        }
        
        btnGroup.appendChild(acceptBtn);
        
    
        this.popup.appendChild(text);

        this.popup.appendChild(btnGroup);
        document.body.appendChild(this.popup);
    },

    hide: function () {
        document.body.removeChild(this.popup);
    },

    checkConsent: function () {
        if (Cookie.hasValue(this.cookieName, true)) {
            this.config.onConsent();
        } else {
            this.config.onDeny();
        }
    },

    decline: function () {
        Cookie.set(this.cookieName, false, 365, '/');
        this.hide();
        this.checkConsent();
    },

    accept: function () {    
        Cookie.set(this.cookieName, true, 365, '/');
        this.hide();
        this.checkConsent();
    },

    reset: function() {
        console.info('Consent cookies was reset');
        Cookie.set(this.cookieName, true, -1, '/');
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DSGVO</title>

    <link rel="stylesheet" href="./cookie-consent.css">
</head>
<body>    
    <script src="./dsgvo.js"></script>
    <script>
        CookieConsent.init({
            text: 'Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, \
                    verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung \
                    von Cookies zu. \
                    Weitere Informationen zu Cookies erhalten Sie in unserer <strong>Datenschutzerklärung</strong>.',
            acceptText: 'Okay',
            denyText: false
        });
        
    </script>
</body>
</html>