https://www.comune.cagliari.it/portale/resources/static/js/jquery.bs.gdpr.cookies.js

1/*!
2 * Name: Bootstrap GDPR Cookies
3 * Description: jQuery based plugin that shows bootstrap modal with cookie info
4 * Version: v1.0
5 *
6 * Copyright (c) 2018 Aleksander Woźnica
7 * Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
8 * Inspired by: https://github.com/ketanmistry/ihavecookies
9 * Cookies Create/Read/Delete from https://www.quirksmode.org/js/cookies.html
10 */
11
12(function($) {
13
14    $.fn.bsgdprcookies = function(options, event) {
15
16        var $element = $(this);
17        var cookieShow = ReadCookie('CookieShow');
18        var cookiePreferences = ReadCookie('CookiePreferences');
19
20        // Set default settings
21        var settings = $.extend({
22            id: 'bs-gdpr-cookies-modal',
23            class: '',
24            title: 'Cookies & Privacy Policy',
25            backdrop: 'static',
26            message: 'Your cookie message...',
27            messageScrollBar: false,
28            messageMaxHeightPercent: 25,
29            delay: 1500,
30            expireDays: 30,
31            moreLinkActive: true,
32            moreLinkLabel: 'More informations..',
33            moreLinkNewTab: true,
34            moreLink: 'privacy-policy.php',
35            acceptButtonLabel: 'Accept',
36            declineButtonLabel: 'Decline',
37            allowAdvancedOptions: false,
38            advancedTitle: 'Select which cookies you want to accept',
39            advancedAutoOpenDelay: 1000,
40            advancedButtonLabel: 'Customize',
41            advancedCookiesToSelect: [
42                {
43                    name: 'necessary',
44                    title: 'Necessary',
45                    description: 'Required for the site to work properly',
46                    list: '',
47                    isFixed: true,
48                    active: true
49                },
50                {
51                    name: 'preferences',
52                    title: 'Site Preferences',
53                    description: 'Required for saving your site preferences, e.g. remembering your username etc.',
54                    list: '',
55                    isFixed: false,
56                    active: false
57                },
58                {
59                    name: 'analytics',
60                    title: 'Analytics',
61                    description: 'Required to collect site visits, browser types, etc.',
62                    list: '',
63                    isFixed: false,
64                    active: false
65                },
66                {
67                    name: 'marketing',
68                    title: 'Marketing',
69                    description: 'Required to marketing, e.g. newsletters, social media, etc',
70                    list: '',
71                    isFixed: false
72                }
73            ],
74            OnAccept: function() {},
75            OnDecline: function() {}
76        }, options);
77
78        if (!cookieShow || !cookiePreferences || event == 'reinit') {
79
80            // Make sure that other instances are gone
81            DisposeModal(settings.id);
82
83            var modalBody = '';
84            var modalButtons = '';
85            var modalBodyStyle = '';
86            var moreLink = '';
87
88            // Generate more link
89            if (settings.moreLinkActive == true) {
90                if(settings.moreLinkNewTab == true) {
91                    moreLink = '<a href="' + settings.moreLink + '" target="_blank" rel="noopener noreferrer" id="' + settings.id + '-more-link">' + settings.moreLinkLabel + '</a>';
92                }
93                else {
94                    moreLink = '<a href="' + settings.moreLink + '" id="' + settings.id + '-more-link">' + settings.moreLinkLabel + '</a>';
95                }
96            }
97
98
99            if (settings.allowAdvancedOptions === true) {
100                modalButtons = '<button id="' + settings.id + '-advanced-btn" type="button" class="btn btn-secondary">' + settings.advancedButtonLabel + '</button><button id="' + settings.id + '-accept-btn" type="button" class="btn btn-primary" data-dismiss="modal">' + settings.acceptButtonLabel + '</button><button id="' + settings.id + '-decline-btn" type="button" class="btn btn-primary" data-dismiss="modal">' + settings.declineButtonLabel + '</button>';
101
102                // Generate list of available advanced settings
103                var advancedCookiesToSelectList = '';
104
105                preferences = JSON.parse(cookiePreferences);
106                $.each(settings.advancedCookiesToSelect, function(index, field) {
107                    if (field.name !== '' && field.title !== '') {
108
109                        var cookieDisabledText = '';
110                        if(field.isFixed == true) {
111                            cookieDisabledText = ' checked="checked" disabled="disabled"';
112                        } else if(field.active == true && !cookieShow) {
113                            cookieDisabledText = ' checked="checked"';
114                        }
115
116                        var cookieDescription = '';
117                        if (field.description !== false) {
118                            cookieDescription = ' <p>' + field.description + '</p>';
119                        }
120                        
121                        if (field.list !== false) {
122                            cookieDescription += '<br /><p>' + field.list + '</p>';
123                        }
124
125                        var fieldID = settings.id + '-option-' + field.name;
126
127                        advancedCookiesToSelectList += '<input type="checkbox" id="' + fieldID + '" name="bsgdpr[]" value="' + field.name + '" data-auto="on" ' + cookieDisabledText + '> <label name="bsgdpr[]" for="' + fieldID + '">' + field.title + '</label>' + cookieDescription + ' <br />';
128                    }
129                });
130
131                modalBody = '<div id="' + settings.id + '-message">' + settings.message + moreLink + '</div>' + '<div id="' + settings.id + '-advanced-types" style="display:none;"><h5 id="' + settings.id + '-advanced-title">' + settings.advancedTitle + '</h5>' + advancedCookiesToSelectList + '</div>';
132            }
133            else {
134                modalButtons = '<button id="' + settings.id + '-accept-btn" type="button" class="btn btn-primary" data-dismiss="modal">' + settings.acceptButtonLabel + '</button><button id="' + settings.id + '-decline-btn" type="button" class="btn btn-primary" data-dismiss="modal">' + settings.declineButtonLabel + '</button>';
135
136                modalBody ='<div id="' + settings.id + '-message">' + settings.message + moreLink + '</div>';
137            }
138            
139            if (settings.messageScrollBar == true) {

140                modalBodyStyle = 'style="overflow-y: scroll; max-height: ' + settings.messageMaxHeightPercent + '%"';
141            }
142
143            var modal = '<div class="modal fade ' + settings.class + '" id="' + settings.id + '" tabindex="-1" role="dialog" aria-labelledby="' + settings.id + '-title" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="' + settings.id + '-title">' + settings.title + '</h4></div><div id="' + settings.id + '-body" class="modal-body" ' + modalBodyStyle + '>' + modalBody + '</div><div class="modal-footer">' + modalButtons + '</div></div></div></div>';
144
145            // Show Modal
146            setTimeout(function() {
147                $($element).append(modal);
148
149                $('#' + settings.id).modal({keyboard: false, backdrop: settings.backdrop});
150
151                if (event === 'reinit' && settings.allowAdvancedOptions === true) {
152
153                    setTimeout(function(){
154                        $('#' + settings.id + '-advanced-btn').trigger('click');
155                        $.each(preferences, function(index, field) {
156                            $('#' + settings.id + '-option-' + field).prop('checked', true);
157                        });
158                    }, settings.advancedAutoOpenDelay)
159                }
160            }, settings.delay);
161
162            // When user clicks accept set cookie and close modal
163            $('body').on('click','#' + settings.id + '-accept-btn', function(){
164
165                // Set show cookie
166                CreateCookie('CookieShow', true, settings.expireDays);
167                DisposeModal(settings.id);
168
169                // If 'data-auto' is set to ON, tick all checkboxes because the user has not chosen any option
170                //$('input[name="bsgdpr[]"][data-auto="on"]').prop('checked', true);
171
172                // Clear user preferences cookie
173                DeleteCookie('CookiePreferences');
174
175                // Set user preferences cookie
176                var preferences = [];
177                $.each($('input[name="bsgdpr[]"]').serializeArray(), function(i, field){
178                    preferences.push(field.value);
179                });
180                CreateCookie('CookiePreferences', JSON.stringify(preferences), 365);
181
182                // Run callback function
183                settings.OnAccept.call(this);
184            });
185            
186            // When user clicks decline set cookie and close modal
187            $('body').on('click','#' + settings.id + '-decline-btn', function(){
188
189                // Set show cookie
190                CreateCookie('CookieShow', true, settings.expireDays);
191                DisposeModal(settings.id);
192
193                // Clear user preferences cookie
194                DeleteCookie('CookiePreferences');
195
196                // Set user preferences cookie
197                var preferences = [];
198                CreateCookie('CookiePreferences', JSON.stringify(preferences), 365);
199
200                // Run callback function
201                settings.OnDecline.call(this);
202            });
203
204            // Show advanced options
205            $('body').on('click', '#' + settings.id + '-advanced-btn', function(){
206                // Uncheck all checkboxes except for the disabled ones
207                //$('input[name="bsgdpr[]"]:not(:disabled)').attr('data-auto', 'off').prop('checked', false);
208                
209                $('label[name="bsgdpr[]"]').tooltip({offset: '0, 10'});
210
211                // Show advanced checkboxes
212                $('#' + settings.id + '-advanced-types').slideDown('fast', function(){
213                    $('#' + settings.id + '-advanced-btn').prop('disabled', true);
214                });
215
216                // Scroll content to bottom if scrollbar option is active
217                if(settings.messageScrollBar == true) {
218                    setTimeout(function() {
219                        bodyID = settings.id + '-body';
220                        var div = document.getElementById(bodyID);
221                        $('#' + bodyID).animate({
222                            scrollTop: div.scrollHeight - div.clientHeight
223                        }, 800);
224                    }, 500);
225                }
226            });
227        }
228        else {
229            var cookieValue = true;
230            if (cookieShow == 'false') {
231                cookieValue = false;

232            }
233            CreateCookie('CookieShow', cookieValue, settings.expireDays);
234            DisposeModal(settings.id);
235        }
236    }
237
238    /**
239     * Returns user preferences saved in cookie
240     */
241    $.fn.bsgdprcookies.GetUserPreferences = function() {
242        var preferences = ReadCookie('CookiePreferences');
243        return JSON.parse(preferences);
244    };
245    
246    /**
247     * Returns default preferences saved in json settings
248     */
249    $.fn.bsgdprcookies.GetDefaultPreferences = function() {
250        var defaultPreferences = [];
251        $.each(settings.advancedCookiesToSelect, function(index, field) {
252            if (field.name !== '' && field.title !== '' && field.active) {
253                defaultPreferences.push(field.name);
254            }
255        });
256        return defaultPreferences;
257    };
258
259    /**
260     * Check if user preference exists in cookie
261     * 
262     * @param {string} pref Preference to check
263     */
264    $.fn.bsgdprcookies.PreferenceExists = function(pref) {
265        var preferences = $.fn.bsgdprcookies.GetUserPreferences();
266
267        if (ReadCookie('CookieShow') === false) {
268            return false;
269        }
270        if (ReadCookie('CookieShow') != null && preferences != null) {
271            return true;
272        }
273        if (preferences === null || preferences === false || preferences.indexOf(pref) === -1) {
274            return false;
275        }
276
277        return true;
278    };
279
280
281    /**
282     * Hide then delete bs modal
283     * 
284     * @param {string} id Modal ID without '#'
285     */
286    function DisposeModal(id) {
287        id = '#' + id;
288        $(id).modal('hide');
289        $(id).on('hidden.bs.modal', function (e) {
290            //$(this).modal('dispose'); commentato pet Bootstrap 3.3.7
291            $(this).modal('hide');
292            $(id).remove();
293        });
294    }
295
296    /**
297     * Sets Cookie
298     * 
299     * @param {string} name Name of the cookie which you want to create
300     * @param {boolean} value Value for the created cookie
301     * @param {number} days Expire days
302     */
303    function CreateCookie(name, value, days) {
304        if (days) {
305            var date = new Date();
306            date.setTime(date.getTime() + (days*24*60*60*1000));
307            var expires = "; expires=" + date.toGMTString();
308        }
309        else var expires = "";        
310        document.cookie = name + "=" + value + expires + "; path=/";
311        
312        //ID RANDOM AND DATE
313        var IDnumber = Math.floor(Math.random() * 10000000);
314        var uniqueDate = Date.now();
315        var consentId = IDnumber + '/' + uniqueDate;
316        console.log('ID univoco: '+ consentId);
317        document.cookie = "CookieDate=" + uniqueDate + ";expires=" + expires + ";";
318        document.cookie = "CookieID=" + consentId + ";expires=" + expires + ";";
319    }
320    
321
322    /**
323     * Gets Cookie called 'name'
324     * 
325     * @param {string} name Name of the cookie to read
326     */
327    function ReadCookie(name) {
328        var nameEQ = name + "=";
329        var ca = document.cookie.split(';');
330        for(var i=0; i < ca.length; i++) {
331            var c = ca[i];
332            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
333            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
334        }
335        return null;
336    }
337    
338    /**
339     * Deletes Cookie called 'name;
340     * 
341     * @param {string} name Name of the cookie which you want to delete
342     */
343    function DeleteCookie(name) {
344        CreateCookie(name, "", -1);
345    }    
346
347}(jQuery));