jquery.ihavecookies.js 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  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. | Cookie Message
  14. |--------------------------------------------------------------------------
  15. |
  16. | Displays the cookie message on first visit or 30 days after their
  17. | last visit.
  18. |
  19. | @param event - 'reinit' to reopen the cookie message
  20. |
  21. */
  22. $.fn.ihavecookies = function(options, event) {
  23. var $element = $(this);
  24. // Set defaults
  25. var settings = $.extend({
  26. cookieTypes: [
  27. {
  28. type: 'Site Preferences',
  29. value: 'preferences',
  30. description: 'These are cookies that are related to your site preferences, e.g. remembering your username, site colours, etc.'
  31. },
  32. {
  33. type: 'Analytics',
  34. value: 'analytics',
  35. description: 'Cookies related to site visits, browser types, etc.'
  36. },
  37. {
  38. type: 'Marketing',
  39. value: 'marketing',
  40. description: 'Cookies related to marketing, e.g. newsletters, social media, etc'
  41. }
  42. ],
  43. title: 'Cookies & Privacy',
  44. 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.',
  45. link: '/privacy-policy',
  46. delay: 2000,
  47. expires: 30,
  48. moreInfoLabel: '',
  49. acceptBtnLabel: 'Accept Cookies',
  50. advancedBtnLabel: 'Customise Cookies',
  51. cookieTypesTitle: 'Select cookies to accept',
  52. fixedCookieTypeLabel:'Necessary',
  53. fixedCookieTypeDesc: 'These are cookies that are essential for the website to work correctly.',
  54. onAccept: function(){},
  55. uncheckBoxes: false
  56. }, options);
  57. var myCookie = getCookie('cookieControl');
  58. var myCookiePrefs = getCookie('cookieControlPrefs');
  59. if (!myCookie || !myCookiePrefs || event == 'reinit') {
  60. // Remove all instances of the cookie message so it's not duplicated
  61. $('#gdpr-cookie-message').remove();
  62. // Set the 'necessary' cookie type checkbox which can not be unchecked
  63. var cookieTypes = '<li><input type="checkbox" name="gdpr[]" value="necessary" checked="checked" disabled="disabled"> <label title="' + settings.fixedCookieTypeDesc + '">' + settings.fixedCookieTypeLabel + '</label></li>';
  64. // Generate list of cookie type checkboxes
  65. preferences = JSON.parse(myCookiePrefs);
  66. $.each(settings.cookieTypes, function(index, field) {
  67. if (field.type !== '' && field.value !== '') {
  68. var cookieTypeDescription = '';
  69. if (field.description !== false) {
  70. cookieTypeDescription = ' title="' + field.description + '"';
  71. }
  72. 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>';
  73. }
  74. });
  75. // Display cookie message on page
  76. var cookieMessage = '<div id="gdpr-cookie-message" class="d-flex align-items-center justify-content-center"><div><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></div><p><button id="gdpr-cookie-accept" type="button" class="btn btn-danger nowrap">' + settings.acceptBtnLabel + '</button></p></div>';
  77. setTimeout(function(){
  78. $($element).append(cookieMessage);
  79. $('#gdpr-cookie-message').hide().fadeIn('slow', function(){
  80. // If reinit'ing, open the advanced section of message
  81. // and re-check all previously selected options.
  82. if (event == 'reinit') {
  83. $('#gdpr-cookie-advanced').trigger('click');
  84. $.each(preferences, function(index, field) {
  85. $('input#gdpr-cookietype-' + field).prop('checked', true);
  86. });
  87. }
  88. });
  89. }, settings.delay);
  90. // When accept button is clicked drop cookie
  91. $('body').on('click','#gdpr-cookie-accept', function(){
  92. // Set cookie
  93. dropCookie(true, settings.expires);
  94. // If 'data-auto' is set to ON, tick all checkboxes because
  95. // the user hasn't clicked the customise cookies button
  96. $('input[name="gdpr[]"][data-auto="on"]').prop('checked', true);
  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. // Run callback function
  104. settings.onAccept.call(this);
  105. });
  106. // Toggle advanced cookie options
  107. $('body').on('click', '#gdpr-cookie-advanced', function(){
  108. // Uncheck all checkboxes except for the disabled 'necessary'
  109. // one and set 'data-auto' to OFF for all. The user can now
  110. // select the cookies they want to accept.
  111. $('input[name="gdpr[]"]:not(:disabled)').attr('data-auto', 'off').prop('checked', false);
  112. $('#gdpr-cookie-types').slideDown('fast', function(){
  113. $('#gdpr-cookie-advanced').prop('disabled', true);
  114. });
  115. });
  116. } else {
  117. var cookieVal = true;
  118. if (myCookie == 'false') {
  119. cookieVal = false;
  120. }
  121. dropCookie(cookieVal, settings.expires);
  122. }
  123. // Uncheck any checkboxes on page load
  124. if (settings.uncheckBoxes === true) {
  125. $('input[type="checkbox"].ihavecookies').prop('checked', false);
  126. }
  127. };
  128. // Method to get cookie value
  129. $.fn.ihavecookies.cookie = function() {
  130. var preferences = getCookie('cookieControlPrefs');
  131. return JSON.parse(preferences);
  132. };
  133. // Method to check if user cookie preference exists
  134. $.fn.ihavecookies.preference = function(cookieTypeValue) {
  135. var control = getCookie('cookieControl');
  136. var preferences = getCookie('cookieControlPrefs');
  137. preferences = JSON.parse(preferences);
  138. if (control === false) {
  139. return false;
  140. }
  141. if (preferences === false || preferences.indexOf(cookieTypeValue) === -1) {
  142. return false;
  143. }
  144. return true;
  145. };
  146. /*
  147. |--------------------------------------------------------------------------
  148. | Drop Cookie
  149. |--------------------------------------------------------------------------
  150. |
  151. | Function to drop the cookie with a boolean value of true.
  152. |
  153. */
  154. var dropCookie = function(value, expiryDays) {
  155. setCookie('cookieControl', value, expiryDays);
  156. $('#gdpr-cookie-message').fadeOut('fast', function() {
  157. $(this).remove();
  158. });
  159. };
  160. /*
  161. |--------------------------------------------------------------------------
  162. | Set Cookie
  163. |--------------------------------------------------------------------------
  164. |
  165. | Sets cookie with 'name' and value of 'value' for 'expiry_days'.
  166. |
  167. */
  168. var setCookie = function(name, value, expiry_days) {
  169. var d = new Date();
  170. d.setTime(d.getTime() + (expiry_days*24*60*60*1000));
  171. var expires = "expires=" + d.toUTCString();
  172. document.cookie = name + "=" + value + ";" + expires + ";path=/";
  173. return getCookie(name);
  174. };
  175. /*
  176. |--------------------------------------------------------------------------
  177. | Get Cookie
  178. |--------------------------------------------------------------------------
  179. |
  180. | Gets cookie called 'name'.
  181. |
  182. */
  183. var getCookie = function(name) {
  184. var cookie_name = name + "=";
  185. var decodedCookie = decodeURIComponent(document.cookie);
  186. var ca = decodedCookie.split(';');
  187. for (var i = 0; i < ca.length; i++) {
  188. var c = ca[i];
  189. while (c.charAt(0) == ' ') {
  190. c = c.substring(1);
  191. }
  192. if (c.indexOf(cookie_name) === 0) {
  193. return c.substring(cookie_name.length, c.length);
  194. }
  195. }
  196. return false;
  197. };
  198. }(jQuery));