MediaWiki:Common.js

// https://github.com/sfreytag/bootstrap-cookie-consent
// Creare's 'Implied Consent' EU Cookie Law Banner v:2.4
// Conceived by Robert Kent, James Bavington & Tom Foyster
// Modified by Simon Freytag for syntax, namespace, jQuery and Bootstrap
    var _paq = _paq || [];
    var pageId = "7";
    var piwikUrl = "//lifs-tools.org/matomo/";
    C = {

        // Number of days before the cookie expires, and the banner reappears
        cookieDuration: 30,

        // Name of our cookie
        cookieName: 'lifs-cookies-accepted',

        // Value of cookie
        cookieValue: 'on',

        // Message banner title
        bannerTitle: "Cookies:",

        bannerTitleDnt: "Do not track:",

        // Message banner message
        bannerMessage: "This website uses first-party cookies for anonymized tracking with Matomo to collect anonymized usage statistics. By clicking on 'Accept', you are agreeing to the use of our site cookies and anonymized tracking with Matomo. By clicking on 'Deny', you are disabling tracking cookies. To find out more, please consult our ",

        // Message banner do not track message
        bannerMessageDnt: "Your browser uses the 'do not track' setting. We value your privacy and will not track you.",

        // Message banner accept button
        bannerAcceptButton: "Accept",
        // Message banner deny button
        bannerDenyButton: "Deny",

        // Link to your cookie policy.
        bannerLinkURL: "https://lifs-tools.org/further-information.html",

        // Link text
        bannerLinkText: "privacy policy",

        // Text alignment
        alertAlign: "center",

        // Link text
        buttonClass: "btn-success btn-xs",

        checkDnt: function () {
            // Get first defined value, starting with official property
            var dnt = (typeof navigator.doNotTrack !== 'undefined') ? navigator.doNotTrack
                    : (typeof window.doNotTrack !== 'undefined') ? window.doNotTrack
                    : (typeof navigator.msDoNotTrack !== 'undefined') ? navigator.msDoNotTrack
                    : null;

// https://www.w3.org/TR/tracking-dnt/#js-dom
// The specification allows for strings BEGINNING with "0" or "1",
// possibly followed by DNT-extension characters, e.g. "1xyz"
// We can handle these strings, as well as integer 0/1's, using parseInt()
// We then just need to check for a 'yes' or 'no' from some older browsers

            if (0 === parseInt(dnt) || 'no' === dnt) {
                // The user prefers to ALLOW TRACKING on this request
                // This is equivalent to the DNT: 0 request header
                return "TRACK";
            } else if (1 === parseInt(dnt) || 'yes' === dnt) {
                // The user prefers NOT TO BE TRACKED on this request
                // This is equivalent to the DNT: 1 request header
                return "NOTRACK";
            } else {
                // The user has NOT SPECIFIED a tracking preference on this request
                // This is equivalent to *NO* DNT request header
                return "NOTSPEC";
            }
        },

        createDiv: function () {
            var banner = '';
            var dnt = this.checkDnt();
            console.log(dnt);
            if (dnt === "TRACK" || dnt === "NOTSPEC") {
                banner = '<div id="matomo-optIn" class="alert alert-success alert-dismissible text-' +
                        this.alertAlign + ' fade in show" ' +
                        'role="alert" style="left: 0px; top: 0px; bottom: 0px; right: 0px; border-radius: 0px; border-left: none; border-right: none; margin-bottom: 0px; text-align: center; color: #155724; background-color: #d4edda; border-color: #c3e6cb; padding-right: 4rem; position: relative; padding: .75rem 1.25rem; border: 1px solid; transition: opacity .15s linear; box-sizing: border-box; z-index: 50;"><strong>' + this.bannerTitle + '</strong> ' +
                        this.bannerMessage + ' <a href="' + this.bannerLinkURL + '" target="_blank">' +
                        this.bannerLinkText + '.</a>&nbsp;<button type="button" class="btn ' +
                        this.buttonClass + '" onclick="C.createCookie(C.cookieName, C.cookieValue' +
                        ', C.cookieDuration)" data-dismiss="alert" aria-label="Close">' +
                        this.bannerAcceptButton + '</button><button type="button" class="btn btn-danger btn-xs" data-dismiss="alert" aria-label="Dismiss">' + this.bannerDenyButton + '</button></div>';
            } else if (dnt === "NOTRACK") {
                banner = '<div id="matomo-optIn" class="alert alert-success alert-dismissible text-' +
                        this.alertAlign + ' fade in show" ' +
                        'role="alert" style="left: 0px; top: 0px; bottom: 0px; right: 0px; border-radius: 0px; border-left: none; border-right: none; margin-bottom: 0px; text-align: center; color: #155724; background-color: #d4edda; border-color: #c3e6cb; padding-right: 4rem; position: relative; padding: .75rem 1.25rem; border: 1px solid; transition: opacity .15s linear; box-sizing: border-box; z-index: 50;"><strong>' + this.bannerTitleDnt + '</strong> ' +
                        this.bannerMessageDnt + ' Please consult our <a href="' + this.bannerLinkURL + '" target="_blank">' +
                        this.bannerLinkText + '</a> for more details. <button type="button" class="close" data-dismiss="alert" aria-label="Dismiss"><span aria-hidden="true">&times;</span></button></div>';
            }
            var bodyChild = document.getElementsByTagName("body")[0].firstChild;
            var bannerNode = document.createElement("div");
            bannerNode.innerHTML = banner;
            document.body.insertBefore(bannerNode, bodyChild);
        },

        createCookie: function (name, value, days) {
            //console.log("Create cookie")
            var expires = "";
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toGMTString();
            }
            document.cookie = name + "=" + value + expires + "; path=/; " + "SameSite=Lax";
            window.location.reload(true);
        },

        checkCookie: function (name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) === ' ') {
                    c = c.substring(1, c.length);
                }
                if (c.indexOf(nameEQ) === 0) {
                    return c.substring(nameEQ.length, c.length);
                }
            }
            return null;
        },

        loadPiwik: function (u, siteId) {
            _paq.push(['requireConsent']);
            _paq.push(['trackPageView']);
            _paq.push(['enableLinkTracking']);
            _paq.push(['setTrackerUrl', u + 'matomo.php']);
            _paq.push(['setSiteId', siteId]);
            (function () {
                var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
                g.type = 'text/javascript';
                g.async = true;
                g.defer = true;
                g.src = u + 'matomo.js';
                d.head.appendChild(g);
                s.parentNode.insertBefore(g, s);
            })();
            /* tracker methods like "setCustomDimension" should be called before "trackPageView" */

        },

        init: function () {
            if (this.checkCookie(this.cookieName) !== this.cookieValue) {
                this.createDiv();
                var optInElement = document.getElementById("matomo-optIn");
                console.log(optInElement); 
                if(optInElement) {
                    optInElement.style.display = "block";
                    optInElement.style.visibility = "visible";
                }
            } else {
                this.loadPiwik(piwikUrl, pageId);
                _paq.push(['setConsentGiven']);
            }
        }
    };
    jQuery(document).ready( function ($) {
//                        if(C) {
        C.init();
//                        }
    });