https://fire-trol.com/scripts/jquery.ihavecookies.js

1/*!
2 * ihavecookies - jQuery plugin for displaying cookie/privacy message
3 * v0.3.2
4 *
5 * Copyright (c) 2018 Ketan Mistry (https://iamketan.com.au)
6 * Licensed under the MIT license:
7 * http://www.opensource.org/licenses/mit-license.php
8 *
9 */
10(function($) {
11
12    /*
13    |--------------------------------------------------------------------------
14    | Cookie Message
15    |--------------------------------------------------------------------------
16    |
17    | Displays the cookie message on first visit or 30 days after their
18    | last visit.
19    |
20    | @param event - 'reinit' to reopen the cookie message
21    |
22    */
23    $.fn.ihavecookies = function(options, event) {
24
25        var $element = $(this);
26
27        // Set defaults
28        var settings = $.extend({
29            cookieTypes: [
30                {
31                    type: 'Site Preferences',
32                    value: 'preferences',
33                    description: 'These are cookies that are related to your site preferences, e.g. remembering your username, site colours, etc.'
34                }
35            ],
36            title: 'Cookies & Privacy',
37            message: 'Cookies enable you to use shopping carts and to personalize your experience on our sites, tell us which parts of our websites people have visited, help us measure the effectiveness of ads and web searches, and give us insights into user behavior so we can improve our communications and products.',
38            link: '/privacy-policy',
39            delay: 2000,
40            expires: 30,
41            moreInfoLabel: 'More information',
42            acceptBtnLabel: 'Accept Cookies',
43            advancedBtnLabel: 'Customise',
44            cookieTypesTitle: 'Select cookies to accept',
45            fixedCookieTypeLabel:'Necessary',
46            fixedCookieTypeDesc: 'These are cookies that are essential for the website to work correctly.',
47            onAccept: function(){},
48            uncheckBoxes: false
49        }, options);
50
51        var myCookie = getCookie('cookieControl');
52        var myCookiePrefs = getCookie('cookieControlPrefs');
53        if (!myCookie || !myCookiePrefs || event == 'reinit') {
54            // Remove all instances of the cookie message so it's not duplicated
55            $('#gdpr-cookie-message').remove();
56
57            // Set the 'necessary' cookie type checkbox which can not be unchecked
58            var cookieTypes = '<li><input type="checkbox" name="gdpr[]" value="necessary" checked="checked" disabled="disabled"> <label title="' + settings.fixedCookieTypeDesc + '">' + settings.fixedCookieTypeLabel + '</label></li>';
59
60            // Generate list of cookie type checkboxes
61            preferences = JSON.parse(myCookiePrefs);
62            $.each(settings.cookieTypes, function(index, field) {
63                if (field.type !== '' && field.value !== '') {
64                    var cookieTypeDescription = '';
65                    if (field.description !== false) {
66                        cookieTypeDescription = ' title="' + field.description + '"';
67                    }
68                    cookieTypes += '<li><input type="checkbox" id="gdpr-cookietype-' + field.value + '" name="gdpr[]" value="' + field.value + '" data-auto="on"> <label for="gdpr-cookietype-' + field.value + '"' + cookieTypeDescription + '>' + field.type + '</label></li>';
69                }
70            });
71
72            // Display cookie message on page
73            var cookieMessage = '<div id="gdpr-cookie-message"><h4>' + settings.title + '</h4><p>' + settings.message + ' <a href="' + settings.link + '">' + settings.moreInfoLabel + '</a><div id="gdpr-cookie-types" style="display:none;"><h5>' + settings.cookieTypesTitle + '</h5><ul>' + cookieTypes + '</ul></div><button id="gdpr-cookie-accept" type="button" role="button">' + settings.acceptBtnLabel + '</button></div>';
74            setTimeout(function(){
75                $($element).append(cookieMessage);
76                $('#gdpr-cookie-message').hide().fadeIn('slow', function(){
77                    // If reinit'ing, open the advanced section of message
78                    // and re-check all previously selected options.
79                    if (event == 'reinit') {
80                        $('#gdpr-cookie-advanced').trigger('click');
81                        $.each(preferences, function(index, field) {
82                            $('input#gdpr-cookietype-' + field).prop('checked', true);
83                        });
84                    }
85                });
86            }, settings.delay);
87
88            // When accept button is clicked drop cookie
89            $('body').on('click','#gdpr-cookie-accept', function(){
90                // Set cookie
91                dropCookie(true, settings.expires);
92
93                // If 'data-auto' is set to ON, tick all checkboxes because
94                // the user hasn't clicked the customise cookies button
95                $('input[name="gdpr[]"][data-auto="on"]').prop('checked', true);
96
97                // Save users cookie preferences (in a cookie!)
98                var prefs = [];
99                $.each($('input[name="gdpr[]"]').serializeArray(), function(i, field){
100                    prefs.push(field.value);
101                });

102                setCookie('cookieControlPrefs', encodeURIComponent(JSON.stringify(prefs)), 365);
103
104                // Run callback function
105                settings.onAccept.call(this);
106            });
107
108            // Toggle advanced cookie options
109            $('body').on('click', '#gdpr-cookie-advanced', function(){
110                // Uncheck all checkboxes except for the disabled 'necessary'
111                // one and set 'data-auto' to OFF for all. The user can now
112                // select the cookies they want to accept.
113                $('input[name="gdpr[]"]:not(:disabled)').attr('data-auto', 'off').prop('checked', false);
114                $('#gdpr-cookie-types').slideDown('fast', function(){
115                    $('#gdpr-cookie-advanced').prop('disabled', true);
116                });
117            });
118
119        } else {
120            var cookieVal = true;
121            if (myCookie == 'false') {
122                cookieVal = false;
123            }
124            dropCookie(cookieVal, settings.expires);
125        }
126
127        // Uncheck any checkboxes on page load
128        if (settings.uncheckBoxes === true) {
129            $('input[type="checkbox"].ihavecookies').prop('checked', false);
130        }
131
132    };
133
134    // Method to get cookie value
135    $.fn.ihavecookies.cookie = function() {
136        var preferences = getCookie('cookieControlPrefs');
137        return JSON.parse(preferences);
138    };
139
140    // Method to check if user cookie preference exists
141    $.fn.ihavecookies.preference = function(cookieTypeValue) {
142        var control = getCookie('cookieControl');
143        var preferences = getCookie('cookieControlPrefs');
144        preferences = JSON.parse(preferences);
145        if (control === false) {
146            return false;
147        }
148        if (preferences === false || preferences.indexOf(cookieTypeValue) === -1) {
149            return false;
150        }
151        return true;
152    };
153
154    /*
155    |--------------------------------------------------------------------------
156    | Drop Cookie
157    |--------------------------------------------------------------------------
158    |
159    | Function to drop the cookie with a boolean value of true.
160    |
161    */
162    var dropCookie = function(value, expiryDays) {
163        setCookie('cookieControl', value, expiryDays);
164        $('#gdpr-cookie-message').fadeOut('fast', function() {
165            $(this).remove();
166        });
167    };
168
169    /*
170    |--------------------------------------------------------------------------
171    | Set Cookie
172    |--------------------------------------------------------------------------
173    |
174    | Sets cookie with 'name' and value of 'value' for 'expiry_days'.
175    |
176    */
177    var setCookie = function(name, value, expiry_days) {
178        var d = new Date();
179        d.setTime(d.getTime() + (expiry_days*24*60*60*1000));
180        var expires = "expires=" + d.toUTCString();
181        document.cookie = name + "=" + value + ";" + expires + ";path=/";
182        return getCookie(name);
183    };
184
185    /*
186    |--------------------------------------------------------------------------
187    | Get Cookie
188    |--------------------------------------------------------------------------
189    |
190    | Gets cookie called 'name'.
191    |
192    */
193    var getCookie = function(name) {
194        var cookie_name = name + "=";
195        var decodedCookie = decodeURIComponent(document.cookie);
196        var ca = decodedCookie.split(';');
197        for (var i = 0; i < ca.length; i++) {
198            var c = ca[i];
199            while (c.charAt(0) == ' ') {
200                c = c.substring(1);
201            }
202            if (c.indexOf(cookie_name) === 0) {
203                return c.substring(cookie_name.length, c.length);
204            }
205        }
206        return false;
207    };
208
209}(jQuery));