Introduction

Freeman.GDPR.CookieBannerSettings is a lightweight jQuery plugin, to display a simple Cookie Banner which informs users that the website uses cookies. This plugin also has a Manage Settings option which allows the User to control the right to opt-in for browser cookies set by the application.

Getting Started

1.Installation process
    NPM:
        npm install freeman.gdpr.cookiebannersettings --save-dev
2.Software dependencies
    jQuery 3.x:
        Via NPM:   npm install jQuery@latest --save-dev

                    OR

        Via CDN -  Uncompressed: <script
                        src="https://code.jquery.com/jquery-3.3.1.js"
                        integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
                        crossorigin="anonymous"></script>
                    OR

        Via CDN -  Minified: <script
                    src="https://code.jquery.com/jquery-3.3.1.min.js"
                    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                    crossorigin="anonymous"></script>

    Bootstrap 4.x :
        Via NPM -  npm install bootstrap@latest --save-dev

                    OR

        Via CDN -  <script
                src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
                integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
                crossorigin="anonymous"></script>

    popper.js 1.x:
        Via NPM -  npm install [email protected] --save-dev

                    OR

        Via CDN -  <script
                src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
                integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
                crossorigin="anonymous"></script>

3.Latest releases
    Current Release: 1.0.3

How to use this plugin:

Step 1: Go to https://freemanco.visualstudio.com/Freeman/_packaging?feed=Freeman.GDPR.Packages&_a=feed
Step 2: Click on Connect to feed. A pop-up is displayed.
Step 3: Choose npm from the list (on the left). Scroll down and click on Generate npm credentials.
Step 4: Copy and paste the token in .npmrc (Windows - C://Users//<username>) on your local machine. Generate 1 token per team
Step 5: Install the plugin and the necessary software dependencies in your application
Step 6: In the entry component,
    import '~/node_modules/freeman.gdpr.cookiebanner/js/jquery.cookiebanner.js';
    declare let $: any;  //If using TypeScript; else use 'var' instead of 'let'

    In the OnInit() method,
        $('selectorName').showCookieBanner(days?);  // days - optional. 
                - By default, the 'cookieAcknowledge' Cookie is stored for an indefinite amount of time. 
                - You can use "days" parameter to specify the duration  (in days) for the cookie to be stored.      

Default CSS Classes:
    // For the banner        
    .cookieBanner {
        position: fixed;
        display: none;
        margin: 0px;
        width: 100%;
        background-color: #343a40;
    }
    // For links
    .cookieAnchor {
        color: orange;
        cursor: pointer;
    }
    // For Text
    .cookieText {
        color: white;
        font-size: 1.2rem;
    }
    // For display dimensions
    .cookieRow {
        width: 100%;
    }
    // For the acknowledge button
    .cookieButton {
        background-color: lightskyblue;
        font-size: 1.2rem;
    }
    

 To change the default styles: Go to the global stylesheet in the application and reference the element using class names or Id.
    For example: 
        #cookieBar.cookieBanner {
            background-color: white;
        }
        Will change the background color of the banner to white.

 To Change Expiration on the Cookie:
    jQuery('selectorName').showCookieBanner() : Will set the cookie for indefinite duration
    jQuery('selectorName').showCookieBanner(30) : Will set the cookie for 30 days
    jQuery('selectorName').showCookieBanner(0) : Will set a session cookie that gets clear when the user closes the browser

Purpose of cookieBanner Plugin:

A banner is displayed which informs the Users that the website uses cookies. When the user clicks the button on the banner, a cookie is created which captures the Acknowledgement from the User. The cookie will be persisted for an indefinite amount of time by default. If the user clears browser cookies, the cookie banner will reappear.