cookie-consent

├── demo ├── eu.json └── index.html ├── polymer.json ├── .gitignore ├── index.html ├── bower.json ├── LICENSE ├── .travis.yml ├── test └── test.html ├── README.md └── cookie-consent.html /demo/eu.json: -------------------------------------------------------------------------------- 1 | "IT" -------------------------------------------------------------------------------- /polymer.json: -------------------------------------------------------------------------------- 1 | { 2 | "lint": { 3 | "rules": [ 4 | "polymer-2-hybrid" 5 | ] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # IntelliJ IDEA configuration 2 | .idea/ 3 | # bower_components directory 4 | bower_components/ 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | cookie-consent 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cookie-consent", 3 | "version": "1.0.1", 4 | "description": "A material design cookie consent.", 5 | "main": "cookie-consent.html", 6 | "dependencies": { 7 | "polymer": "Polymer/polymer#^1.4.0", 8 | "iron-ajax": "^1.4.4", 9 | "paper-toast": "^1.3.1", 10 | "paper-button": "^1.0.15", 11 | "iron-flex-layout": "^1.3.7" 12 | }, 13 | "devDependencies": { 14 | "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", 15 | "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", 16 | "web-component-tester": "^6.0.0-prerelease.5", 17 | "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: stable 3 | sudo: required 4 | dist: trusty 5 | before_script: 6 | - npm install -g polymer-cli 7 | - polymer install --variants 8 | env: 9 | global: 10 | - secure: "CLwwxZxD/hrpGsSebO1Gd5i+fXwGvHFRPUkhCdKj8Y1VzCqNOdjOI0r1lFcIrzxD6+pCgfiUoJH+AtNaqBURsOmA7Ii+Nr7BNmtpfwNlhEqqxQPfcjJShFqn87u3HSU+NmGu3fgjpuO2Rvej8Iu2JEYFOy8EwkfvxXzNjBe5awOVqZi1X4izBEK7Ylom6MsGzG0V+4RXJAIv+1rHRRj+Q1Y/R9cRSiVmUaGDVmq6+lfjpDs3WtjpI88OiDspRbDMj2MHICbhqRruMVQccMJEylLSRJ0vCCTe9lRJMT4YXoaf/v3Nw1JTsq7PXqXnwZpMvGpOMvnJQLwBYzWRwbqRWNBM9eg4KzeBXDx1rg+8o1ECyWIMp2AdKYXQwSmalda0XNUWK3dVGjGJLvKq60958WsEBQKfYWvwF3Y9yKx8BiuF/hfDjPllorso+TqKxZnWNvEM+7ArL1skz2Tba0ZUzrlWNddBYSnvu3qbpHRhVXpSJDISOyp5kYCYr/8hnJnWTfV+/DOjObNopl7ZlfrbkxC38dw1nMg8XnSFqL28rZ/FoSlYEvir6A9NNw7e9qOBbHYUluJ+M3YxsItNpGAQrfoEXSU864bTdrwm9c843Q1t+GkAtGeCqeLlJ2u3oVw3ZudzEEZCT13SqJiYJdSunKrpUIlR1GkPMPHRS1T97IA=" 11 | - secure: "KKA0zECOY+AQLDONfcYp3JJFLzHssnR4pc4vcaLBJ+GzE5HgqBZu2u7D8I659mFqnj9tiC2vF6MjrqTwP8QFqf8Nw+/AE7K/dUi9GNnvUhxpiAFgu48uArVAKhmKgs23PA2GxE0kZuhA3E81ivgn91oyN/3k3fAXc053mL0HJlnDj9H6RHoa2UgIC6JHRTjiJ/H1N1alTCVETutPTpgMCC3auWgGtlWDUN36GCqsu1QbmKMAJcB9L7TvsB+TGpsvNA2QY0o/xJMs/+Y/KT5m0Znngd6fD/8mydZaNEsLF4KyPy9MaHYd9K7n083PrI+v0aKGLHXi5CiIQmVWpIlSQAHM485ClO4mUqMNHpv3fzZ51svHiUu2wpENL2FOw4BifpIVzh4l/tbfto6T1lOsVMkNiBmIlj4VNp0ZPGIhXovmAXx6i7gJO4vZ/TvHpbRa2PfWM2NwXpTpeuX9ak2eweQ0Ujp0bR2qHhxf9cNTfec63+6YyxwAOo8fV/CwLWvjlCq0mkwbTwQEsl1cUl2TTZGHGTkJ5C3aDeV/ax4br7EvcEj6prDoSgpuwlC8JjoSFvKlS45Ut81c5mLkYqN87tqgJL7QFuPk+R+iqQK2tZsyRMUJ+bdIVQ3j2L5Wq1Se+DtmhduMPoFLW9O+RSbQnDQINJDagd7KtdBT+OpJVhM=" 12 | addons: 13 | firefox: latest 14 | apt: 15 | sources: 16 | - google-chrome 17 | packages: 18 | - google-chrome-stable 19 | script: 20 | - xvfb-run polymer test 21 | - >- 22 | if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default'; 23 | fi 24 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | cookie-consent demo 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 22 | 23 |

24 |

Fully working example with rejection

25 |

In this example, your real position will be mocked so that you can 26 | see the toast even if you are outside of the EU.

27 |

We are also using the use-session-storage option so that 28 | you can just close the page and re-open it to test the consent again.

29 | 30 | 56 | 57 |

58 | 59 | 60 | -------------------------------------------------------------------------------- /test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | cookie-consent test 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 19 | 20 | 21 | 24 | 25 | 26 | 29 | 30 | 31 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # \ 2 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Dabolus/cookie-consent) 3 | [![Travis build](https://img.shields.io/travis/Dabolus/cookie-consent.svg)](https://travis-ci.org/Dabolus/cookie-consent) 4 | [![GitHub release](https://img.shields.io/github/release/Dabolus/cookie-consent/all.svg)](https://github.com/Dabolus/cookie-consent) 5 | 6 | _[Demo and API docs](https://www.webcomponents.org/element/Dabolus/cookie-consent)_ 7 | 8 | A great, simple and fully customizable material design cookie consent that automatically 9 | shows up only to the users subject to the cookie law (EU users). 10 | 11 | ## Features 12 | - Ready out of the box. Just include it and insert a `` 13 | in your web app and you are ready to go! 14 | - Fully customizable. It can be completely styled and it supports a lot of properties that 15 | allows you to easily change its default behavior. 16 | - Easily detect what the user does. The readonly `cookies-status` property can be binded to 17 | detect whether the user consent is `pending`, `accepted` or `rejected`. It also fires a 18 | `cookies-status-changed` event when the user responds, so you can wait for the user to 19 | accept or reject the cookies before doing something with their data. 20 | - Tested using the [web-component-tester](https://github.com/Polymer/web-component-tester) 21 | 22 | ## Installation 23 | ``` 24 | bower install --save cookie-consent 25 | ``` 26 | 27 | ## Usage 28 | #### Basic usage 29 | ```html 30 | 31 | ``` 32 | #### Custom text, policy link and consent rejection 33 | ```html 34 | 38 | 39 | ``` 40 | 41 | #### Full customization 42 | You can even set an empty text and then use a span with the class `.text` to insert anything 43 | you want (icons, etc.). The same can be done with the policy link. Just use the `.policy-link` 44 | class in an anchor tag inside the `cookie-consent`. 45 | ```html 46 | 47 | 48 | This website uses cookies 49 | 50 | 51 | Yay! 52 | 53 | ``` 54 | 55 | _**Note:** the user response is saved by default in a permanent cookie. 56 | You can change this behavior by adding the `use-local-storage` 57 | or the `use-session-storage` properties._ 58 | 59 | ## Styling 60 | 61 | The following custom properties and mixins are available for styling: 62 | 63 | | Custom property | Description | Default | 64 | | ------------------------------------ | ---------------------------------------------------------------- | ----------------------- | 65 | | `--cookie-consent-background-color` | The background color of the cookie consent | `#323232` | 66 | | `--cookie-consent-text-color` | The color of text in the cookie consent | `#f1f1f1` | 67 | | `--cookie-consent-policy-link-color` | The color of the link to the cookie policy | `--light-accent-color` | 68 | | `--cookie-consent-reject-text-color` | The main color of the button to reject the cookie policy | `--disabled-text-color` | 69 | | `--cookie-consent-reject-background` | The background of the button to reject the cookie policy | `transparent` | 70 | | `--cookie-consent-reject-ink-color` | The color of the ink displayed when the reject button is pressed | `--disabled-text-color` | 71 | | `--cookie-consent-accept-text-color` | The main color of the button to accept the cookie policy | `--accent-color` | 72 | | `--cookie-consent-accept-background` | The background of the button to accept the cookie policy | `transparent` | 73 | | `--cookie-consent-accept-ink-color` | The color of the ink displayed when the accept button is pressed | `--accent-color` | 74 | | `--cookie-consent-accept-button` | Mixin applied to the accept button | `{}` | 75 | | `--cookie-consent-reject-button` | Mixin applied to the reject button | `{}` | 76 | | `--cookie-consent-buttons` | Mixin applied to both the accept and reject buttons | `{}` | 77 | | `--cookie-consent-policy-link` | Mixin applied to the policy link | `{}` | 78 | | `--cookie-consent-text` | Mixin applied to the cookie consent text | `{}` | 79 | | `--cookie-consent-toast` | Mixin applied to the cookie consent toast | `{}` | 80 | | `--cookie-consent` | Mixin applied to the cookie consent | `{}` | 81 | 82 | This element uses `paper-toast` to display the consent. `paper-toast` applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`. 83 | In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`. 84 | -------------------------------------------------------------------------------- /cookie-consent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 17 | 18 | 348 | --------------------------------------------------------------------------------