Web Toolkit

image/svg+xml GitHub

Cookiebar 

<div id="cookie-bar" class="CookieBar js-CookieBar u-background-95 u-padding-r-all" aria-hidden="true">
    <p class="u-color-white u-text-r-xs u-lineHeight-m u-padding-r-bottom">Questo sito utilizza cookie tecnici, analytics e di terze parti.
        <br>Proseguendo nella navigazione accetti l’utilizzo dei cookie.<br>
    </p>
    <p>
        <button class="Button Button--default u-text-r-xxs js-cookieBarAccept u-inlineBlock u-margin-r-all">Accetto</button>
        <a href="" class="u-text-r-xs u-color-teal-50">Privacy policy</a>
    </p>
</div>
  • Content: 
    import $ from 'jquery'

$.fn.cookieBar = function(options) {
  const settings = $.extend({
    'acceptButton': '.js-cookieBarAccept',
    'secure': false,
    'path': '/',
    'domain': '',
    'threshold': 500
  }, options)

  const _hide = ($cookiebar) => {
    $cookiebar
      .attr('aria-hidden', 'true')
      .attr('aria-live', 'off')
      .hide()
  }

  const _show = ($cookiebar) => {
    $cookiebar
      .attr('aria-hidden', 'false')
      .attr('aria-live', 'polite')
      .show()
  }

  const _accept = function($cookiebar) {
    $.cookie('cookiebar', 'hide', {
      path: settings.path,
      secure: settings.secure,
      domain: settings.domain,
      expires: 30
    })
    $(document).trigger('accept.cookiebar', [$cookiebar])
  }

  $(document).on('accept.cookiebar', (e, $cookiebar) => {
    _hide($cookiebar)
  })

  $.cookieBar = $.cookieBar || {}

  $.cookieBar.isAccepted = function() {
    return $.cookie('cookiebar') === 'hide'
  }

  return this.each(function() {
    var $cookiebar = $(this)

    if (!$.cookieBar.isAccepted()) {
      if (settings.threshold > 0) {
        $(window).on('scroll.cookiebar', (function() {
          if ($(window).scrollTop() > settings.threshold) {
            $(window).unbind('scroll.cookiebar')
            _accept($cookiebar)
          }
        }))
      }
      _show($cookiebar)
    }

    $cookiebar
      .find(settings.acceptButton)
      .click(function() {
        _accept($cookiebar)
        return false
      })

  })

}
  • URL: /components/raw/cookiebar/cookiebar.js
  • Filesystem Path: src/components/cookiebar/cookiebar.js
  • Size: 1.5 KB
  • Content: 
    /** @define CookieBar */

.CookieBar {
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 1200;
}
  • URL: /components/raw/cookiebar/index.css
  • Filesystem Path: src/components/cookiebar/index.css
  • Size: 133 Bytes
  • Content: 
    import $ from 'jquery'

/* eslint-disable no-unused-vars */

import cookie from 'jquery.cookie'
import cookieBar from './cookiebar'

/* eslint-enable no-unused-vars */

const opts = {
  'acceptButton': '.js-cookieBarAccept',
  'secure': false,
  'path': '/',
  'domain': ''
}

$(document).ready(function() {
  $('.js-CookieBar').cookieBar(opts)
})

export default {
  opts
}
  • URL: /components/raw/cookiebar/index.js
  • Filesystem Path: src/components/cookiebar/index.js
  • Size: 375 Bytes

There are no notes for this item.