{"id":23628251,"url":"https://github.com/friendsofecmascript/bengorcookies","last_synced_at":"2025-12-12T03:52:44.498Z","repository":{"id":58237171,"uuid":"61750891","full_name":"FriendsOfECMAScript/BenGorCookies","owner":"FriendsOfECMAScript","description":"Cookie warning banner that requests user consent, European law compilant. Zero dependencies, fully customizable JavaScript library for IE9+","archived":false,"fork":false,"pushed_at":"2018-05-23T15:40:00.000Z","size":203,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-28T00:32:17.329Z","etag":null,"topics":["cookie","cookie-warning-banner","cookies-component","gtm","javascript","library"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FriendsOfECMAScript.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-22T20:54:38.000Z","updated_at":"2022-01-29T13:24:58.000Z","dependencies_parsed_at":"2022-08-31T03:01:52.446Z","dependency_job_id":null,"html_url":"https://github.com/FriendsOfECMAScript/BenGorCookies","commit_stats":null,"previous_names":["bengorjs/cookies"],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfECMAScript%2FBenGorCookies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfECMAScript%2FBenGorCookies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfECMAScript%2FBenGorCookies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfECMAScript%2FBenGorCookies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FriendsOfECMAScript","download_url":"https://codeload.github.com/FriendsOfECMAScript/BenGorCookies/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231573588,"owners_count":18394547,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cookie","cookie-warning-banner","cookies-component","gtm","javascript","library"],"created_at":"2024-12-28T00:32:28.731Z","updated_at":"2025-12-12T03:52:44.447Z","avatar_url":"https://github.com/FriendsOfECMAScript.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BenGorCookies\n\u003e Cookie warning banner that request user consent, European law compilant.\nZero dependencies, fully customizable JavaScript library for [IE9+](#browser-support).\n\n[![npm version](https://img.shields.io/npm/v/bengor-cookies.svg?style=flat-square)](https://www.npmjs.com/package/bengor-cookies)\n[![Build Status](http://img.shields.io/travis/FriendsOfECMAScript/BenGorCookies/master.svg?style=flat-square)](https://travis-ci.org/FriendsOfECMAScript/BenGorCookies)\n[![NPM Status](http://img.shields.io/npm/dm/bengor-cookies.svg?style=flat-square)](https://www.npmjs.org/package/bengor-cookies)\n[![devDependency Status](https://img.shields.io/david/FriendsOfECMAScript/BenGorCookies.svg?style=flat-square)](https://david-dm.org/FriendsOfECMAScript/BenGorCookies#info=dependencies)\n\n![Snapshot](https://raw.githubusercontent.com/FriendsOfECMAScript/BenGorCookies/master/snapshot.png)\n\n![Snapshot2](https://raw.githubusercontent.com/FriendsOfECMAScript/BenGorCookies/master/snapshot2.png)\n\u003e Check the following [section](#modern-theme) that explains the implementation process related to this banner.\n\nEverybody needs the cookies component in his website. Style this element is not very complex but the task is quite\nrepetitive so, keeping in mind this use case BenGorCookies provides a robust and lightweight solution to build\ncookies component.\n\n## Installation\nThe recommended and the most suitable way to install is through *Yarn*.\n```shell\n$ yarn add bengor-cookies\n```\nOr alternatively, through *NPM*.\n```shell\n$ npm install --save bengor-cookies\n```\n\nAfter installation process, you have to include the js and css files in your html.\n```html\n\u003clink href=\"/your/path/bengor-cookies/dist/bengor-cookies.css\" type=\"text/css\" rel=\"stylesheet\"\u003e\n\n\u003cscript src=\"/your/path/bengor-cookies/dist/bengor-cookies.umd.js\"\u003e\u003c/script\u003e\n```\n\u003e This library provides a fully usable **scss** file that is very interesting to include cookies component styles inside\nyour website Sass workflow.\n\nAlso, it supports ES2015 modules so, you can easily import the library in your js instead loading the UMD version in the DOM.\n```js\nimport {BenGorCookies, BenGorCookiesPlugins, BenGorCookiesTemplates} from 'bengor-cookies';\n\n(...your bengor-cookies initialization);\n```\n\nThe following code is a fully initialization example code:\n```js\nnew BenGorCookies({\n  triggers: 'html',\n  maxPageYOffset: false,\n  plugins: [\n    new BenGorCookiesPlugins.GoogleTagManager('GTM-XXXXX')\n  ],\n  template: BenGorCookiesTemplates.Default({\n    link: '/cookies',\n    linkText: 'Cookies policy',\n    text: 'We use bengor-cookies to provide a better browsing experience and a more ' +\n    'personalized service. If you continue browsing, we consider accepting its use. ' +\n    'You can change the settings or get more information by consulting our',\n    acceptText: 'Accept'\n  }),\n  onAcceptCallback: function() {\n    console.log('Cookies are now accepted!')\n  }\n});\n```\n\n## Configuration options\nTo load the library check the following code. The example provides default values of `BenGorCookies` configuration\noptions.\n* **triggers**: string that contains all the selectors and tags that interacts with cookies accepting them.\n* **maxPageYOffset**: by default scroll interaction is disabled. If this value is an integer value, and the window\nscroll-top is higher the cookies will be accepted.\n* **plugins**: array of plugins that adds some concrete logic. For now, the following plugins are available:\n    * *GoogleTagManager*: when the cookies are accepted the GTM snippets will be added after body tag. This plugin\n    needs a GTM id passed as argument.\n* **template**: string that contains HTML code printing your cookies component. We provide some predefined templates:\n    * *Default*: default HTML template\n* **onAcceptCallback**: function reference that will be called once Cookies are accepted.\n\n\u003e Also, you can add your cookies component HTML code manually, it only has a requirement:\u003cbr\u003e\n\u003e it must have a `js-bengor-cookies` class.\n\n## Extension points\nObviously each web needs its theme, so, this library provides some extension points if we are injecting the Sass file\nin the project stylesheets workflow. The following Sass variables are self-explanatory:\n```scss\n$bengor-cookies-background-color: #999 !default;\n\n$bengor-cookies-border-color: #999 !default;\n\n$bengor-cookies-color: #fff !default;\n\n$bengor-cookies-link-color: $bengor-cookies-color !default;\n\n$bengor-cookies-link-hover-color: darken($bengor-cookies-link-color, 20%) !default;\n\n$bengor-cookies-button-background-color: darken($bengor-cookies-background-color, 20%) !default;\n\n$bengor-cookies-button-hover-background-color: darken($bengor-cookies-button-background-color, 20%) !default;\n\n$bengor-cookies-button-color: $bengor-cookies-color !default;\n\n$bengor-cookies-content-max-width: 850px !default;\n\n$bengor-cookies-transition-duration: .4s !default;\n\n$bengor-cookies-transition: transform $bengor-cookies-transition-duration cubic-bezier(.94, .06, .32, .95) 0s !default;\n\n$bengor-cookies-z-index: 1000 !default;\n\n@import 'your/node_modules/root/path/bengor-cookies/src/scss/bengor-cookies';\n```\n\n## Modern theme\nAt the beginning of the document, two images are shown. If we like to implement the second one we need to include the\nfollowing CSS import:\n```html\n\u003clink href=\"/your/path/bengor-cookies/dist/bengor-cookies.modern.css\" type=\"text/css\" rel=\"stylesheet\"\u003e\n```\n\nOr you can use the Sass imports:\n```scss\n@import 'your/node_modules/root/path/bengor-cookies/src/scss/bengor-cookies-modern';\n```\n\nHowever, with only this step you can't obtain the same result of the image so, if you have a really special interest\nin getting the same banner you have to the following.\n\n```html\n\u003c!-- ... --\u003e\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css?family=Open+Sans\" /\u003e\n    \u003clink rel=\"stylesheet\" href=\"node_modules/bengor-cookies/dist/bengor-cookies.modern.css\" /\u003e\n    \u003cstyle\u003e\n        .bengor-cookies {\n            background-color: #f7f7f7;\n            border-bottom: 1px solid #dadada;\n            color: #999;\n            font-family: Open Sans, sans-serif;\n        }\n\n        .bengor-cookies__link {\n            color: #444;\n        }\n\n        .bengor-cookies__svg {\n            fill: #999;\n        }\n    \u003c/style\u003e\n\n\u003c!-- ... --\u003e\n    template: BenGorCookiesTemplates.Default({\n      link: '/cookies',\n      linkText: 'cookies policy',\n      text: 'We use bengor-cookies to provide a better browsing experience and a more ' +\n      'personalized service. If you continue browsing, we consider accepting its use. ' +\n      'You can get more information by consulting our',\n      acceptText: (`\n\u003cspan\u003e\n    \u003csvg class=\"bengor-cookies__svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 16.264 16.264\"\u003e\n        \u003cpolygon fill-rule=\"evenodd\" clip-rule=\"evenodd\" points=\"16.264,2.122 14.142,0 8.132,6.01 2.121,0 0,2.121\n        6.01,8.132 0,14.142 2.122,16.264 8.132,10.253 14.142,16.264 16.264,14.142 10.253,8.132 \"\u003e\u003c/polygon\u003e\n    \u003c/svg\u003e\n\u003c/span\u003e\n      `),\n\u003c!-- ... --\u003e\n``` \nObviously all the code related to CSS it can be easily override if you are using Sass with its variables.\n\n## Browser Support\n**BenGorCookies supports all modern browsers and IE9+.**\n\nThe library uses the last CSS features like **flexbox** to build the component in an easy and clean way.\nHowever, sometimes our project must run in legacy browsers so, keeping this limitation in mind,\nthe package provides an alternative of `BenGorCookiesTemplates.Default` and its corresponding *scss* file.\n\nTo make work you only have to pass the `BenGorCookiesTemplates.Ie9` instance inside `template` option\ninstead of the default.\n```js\nnew BenGorCookies({\n  (...)\n\n  template: BenGorCookiesTemplates.Ie9({\n    link: '/cookies',\n    linkText: 'Cookies policy',\n    text: 'We use bengor-cookies to provide a better browsing experience and a more ' +\n    'personalized service. If you continue browsing, we consider accepting its use. ' +\n    'You can change the settings or get more information by consulting our',\n    acceptText: 'Accept'\n  })\n});\n```\nAnd you have to updated the inclusion of the CSS:\n```html\n\u003clink href=\"/your/path/bengor-cookies/dist/bengor-cookies.ie9.css\" type=\"text/css\" rel=\"stylesheet\"\u003e\n```\nor in case you are using the Scss file:\n```scss\n@import 'your/node_modules/root/path/bengor-cookies/src/scss/bengor-cookies-ie9';\n```\n\n# Tests\nApart of the obvious set of tests, this library provides a simple node application to demonstrate the different\nusages about resultant JavaScript.\n```bash\n$ yarn test             # or npm test\n```\n\nTo run the demo application you have to type the following:\n```bash\n$ cd test/app\n$ node_modules/light-server/bin/light-server -s . -p 7000\n$ open 127.0.0.1:7000/babel.html\n$ open 127.0.0.1:7000/module.html\n$ open 127.0.0.1:7000/umd.html\n```\n\n## Contributing\nThis library follows the modern JavaScript coding standards, so pull requests need to pass the [Stylelint][1],\n[ESLint][2] and [Prettier][3]. This task can be very boring but, in the `package.json` there are some useful\nnpm-scripts that becomes this process simpler and faster.\n```bash\n$ yarn eslint           # or npm run eslint\n$ yarn prettier         # or npm run prettier\n$ yarn stylelint        # or npm run stylelint\n```\nThere is also a policy for contributing to this library. Pull requests must be explained step by step to make the\nreview process easy in order to accept and merge them. New methods or code improvements must come paired with\ntests. We are using [Jest][4] test framework for that purpose.\n\n## Thanks\nWe need to thank [Mikel Tuesta](https://github.com/mktoast) for his great job **optimizing and\nadvising the JavaScript** code with the best practices, and also to thank\n[Aritz Olabarrieta](https://github.com/aritzolaba) for his master class about legacy styling\nthat he **makes BenGorCookies compatible with IE9+** browsers.\n\nSincerely, thank you guys! ;)\n\n## Credits\nThis library is created by:\n\u003e\n**@benatespina** - [benatespina@gmail.com](mailto:benatespina@gmail.com)\u003cbr\u003e\n**@gorkalaucirica** - [gorka.lauzirika@gmail.com](mailto:gorka.lauzirika@gmail.com)\n\n## Licensing Options\n[![License](https://img.shields.io/badge/License-MIT-yellowgreen.svg?style=flat-square)](https://github.com/FriendsOfECMAScript/BenGorCookies/blob/master/LICENSE)\n\n[1]: http://stylelint.io/\n[2]: http://eslint.org/\n[3]: https://prettier.io/ \n[4]: https://facebook.github.io/jest/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofecmascript%2Fbengorcookies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffriendsofecmascript%2Fbengorcookies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofecmascript%2Fbengorcookies/lists"}