README

CookieConsent是一个微包（css，js，php），用于轻松管理网站在cookie级别的用户同意。

如何配置弹出窗口

{ 
    "settings": 
    { 
        "lang": "EN",
        "name": "cookieconsent",
        "accept": "ALL",
        "decline": "NONE",
        "accept_duration": 365,
        "decline_duration": 365,
        "configure_duration": 365
    },
    "popup":
    {
        "title": "Configure cookies",
        "description": "Hello! This is an example of text description in cookie popup.",
        "btn_decline": "Decline",
        "btn_configure": "Configure",
        "btn_accept": "Accept"
    },
    "configure":
    {
        "title": "Configure each cookie",
        "description": "",
        "btn_back": "Back",
        "btn_save": "Save selection",
        "options":
        {
            "SYSTEM":
            {
                "id": "SYSTEM",
                "disabled": true,
                "title": "System cookies",
                "description": "System cookies essential for the proper functioning of the site."
            },
            "GOOGLE_ANALYTICS":
            {
                "id": "GOOGLE_ANALYTICS",
                "disabled": false,
                "checked": true,
                "title": "Google Analytics",
                "description": "Example of description text."
            },
            "FACEBOOK":
            {
                "id": "FACEBOOK",
                "disabled": false,
                "checked": false,
                "title": "Facebook",
                "description": "Example of description text."
            },
            "YOUTUBE":
            {
                "id": "YOUTUBE",
                "disabled": false,
                "checked": false,
                "title": "YouTube",
                "description": "Example of description text."
            }
        }
    }
}

设置

• settings.lang：网站的当前语言（用于自定义CSS）
• settings.name：配置cookie的名称
• settings.accept：“全部接受”的值
• settings.decline：“全部拒绝”的值
• settings..._duration：为每个选择设置的cookie的不同持续时间

等等...

JS需求

示例JS文件需要一些外部脚本

• JavaScript Cookie v2.2.1 https://github.com/js-cookie/js-cookie
• jQuery v2.1.4 https://github.com/jquery/jquery

开始JS（基本示例）

require('./plugin/CookieConsent');

new CookieConsent(json_data).load();

再次请求同意

cookie级别的新的同意请求示例，例如，如果某些内容因某些原因不可访问，并希望用户重新考虑他的选择。

var $reConsentPopup = $('.cookieconsent-reload-popup');
if($reConsentPopup.length) {
    $reConsentPopup.click(function (event) {
        event.preventDefault();
        event.stopPropagation();
        new CookieConsent(json_data, {reload: true}).start();
    })
}

配置CSS

您可以复制并部分重写CSS文件，或者只需声明一些变量。

// Color of accept button
$cookieconsent-color-btn-accept: 'red';

// Color for switch checkbox (checked)
$switcheckbox-color-checked: 'red';

// Font title
%cookieconsent-font-title {
    font-family: something;
    // you can add extra styles
}
// Font text
%cookieconsent-font-text {
    font-family: something;
    // you can add extra styles
}
// Font button
%cookieconsent-font-btn {
    font-family: something;
    // you can add extra styles
}

为主容器自定义当前语言的CSS。

#CookieConsentPopup[data-lang="FR"] { /* do something */ }

为每个弹出窗口自定义CSS。（主要或配置）。

.ccard[data-service="cookies"] {}
.ccard[data-service="cookies-configure"] {}

当弹出窗口打开时添加背景布局。

body {
    &.CookieConsentPopupOpened {
        overflow: hidden;
        &:before {
            content: '';
            position: fixed;
            display: block;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, .75);
            z-index: 100;
        }
    }
}

图片

在/dist/img/cookie.png中给出的cookie图片可免费使用。