Giter Club home page Giter Club logo

mibreit-cookie-consent's Introduction

mibreitCookieConsent

Simple Cookie Selection Widget that can be used to store consent for different cookies. The consent is stored inside a consent cookie with 30 days expiration time.

Usage

You will find an example under /demo/consent.html.

mibreitCookieConsent.createCookieConsent(
  parent,            // Parent HTMLElement
  [{label: "Basic Cookies", cookieName: "basic", info: "Basic Cookies Info"}, 
   {label: "Optional Cookies", cookieName: "optional", active: false, info: "Optional Cookies Info"}],
  callback,          // (cookie) => void -> callback function that is called when cookie is saved
  german,            // boolean, which you can set to true for german cookie consent -> default false for english
  "customCookieName" // custom name for storing the consent
);

Consent Cookie

The content of the consent cookie is configured by passing an Array of configurations to the CookieConsent as second argument.

Each config within the Array is used to create a ConsentSetting inside the CookieConsent:

  • label - The displayed name of the consent setting
  • cookieName - The name of the cookie which is used twhen storing consent
  • active - The initial setting for the consent setting - true or false. Default is true
  • info - Optional string containing additional information about the consent setting

The consent is stored as a Cookie with the name consentCookie if not defined otherwise.

Styling

You can use the following classes to adjust the look of this widget:

  • mibreit_CookieConsent - The complete widget
  • mibreit_CookieConsent_Selector - A cookie selector, with a Label, a ToggleButton and an optional Info
  • mibreit_CookieConsent_Label - Label text for a cookie selector
  • mibreit_CookieConselt_Info - Optional Info text for a cookie selector
  • mibreit_CookieConsent_ToggleButton - Toggle Button for a cookie selector
  • mibreit_CookieConsent_Button - accept, submit, configure button

Building

Minified Version

Build: npm run build

Intended to be directly loaded into an HTML page using the script tag. The minifiedLibraryName you specify in projectInfo.js will be the variable name by which you can use the library in the homepage. The minifiedLibraryFileName will be the name you use as the src in the script tag.

For the minified version, terser is used to minify the code. If you prepend all private properties and methods with an underscore, terser will minimize those names. Console logs are also removed. For debugging, build the Developement Version, which will still include the console logs.

Development Version

Build: npm run build:dev

It will also build a lib that can be integrated directly into a homepage - same as the minified version - but it will include source maps for debugging.

mibreit-cookie-consent's People

Contributors

michaelbreitung avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.