Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/greatwizard/ember-tarteaucitron

Ember integration of tarteaucitron.js, a RGPD friendly cookie manager.
https://github.com/greatwizard/ember-tarteaucitron

cookie ember-addon gdpr law rgpd tarteaucitron tarteaucitronjs

Last synced: 4 days ago
JSON representation

Ember integration of tarteaucitron.js, a RGPD friendly cookie manager.

Awesome Lists containing this project

README

        

# ember-tarteaucitron

[![CI](https://github.com/GreatWizard/ember-tarteaucitron/actions/workflows/ci.yml/badge.svg)](https://github.com/GreatWizard/ember-tarteaucitron/actions/workflows/ci.yml)
[![Ember Observer Score](https://emberobserver.com/badges/ember-tarteaucitron.svg)](https://emberobserver.com/addons/ember-tarteaucitron)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Liberapay](https://img.shields.io/liberapay/patrons/GreatWizard.svg?logo=liberapay)](https://liberapay.com/GreatWizard/)

Ember integration of [tarteaucitron.js](https://github.com/AmauriC/tarteaucitron.js), a RGPD friendly cookie manager.

## Compatibility

- Ember.js v3.24 or above
- Ember CLI v3.24 or above
- Node.js v12 or above

## Installation

```
ember install ember-tarteaucitron
```

## Usage

All your tarteaucitron configuration is stored inside your `config/environement.js` as follow:

```js
module.exports = function (environment) {
let ENV = {

[...]

tarteaucitron: {
customServices: [], // You can define your own services directly here, see https://github.com/AmauriC/tarteaucitron.js#create-custom-service
preInit: { // Change some settings before the initialization of tarteaucitron.js
tarteaucitronForceCDN: "https://...", // Define where the tarteaucitron assets are available, default to /assets/tarteaucitron/
tarteaucitronForceLanguage: 'en', // Force the display language (default to the current browser language)
tarteaucitronForceExpire: 365 * 10, // Force the expire cookie time (default to 365)
tarteaucitronCustomText: { // Change a translation, see https://github.com/AmauriC/tarteaucitron.js#customize-text
'support': {
'title': 'Support client',
},
'close': 'Enregistrer et fermer',
'engage-twitter': 'Suivez-nous sur Twitter !',
},
},
config: {}, // tarteaucitron init configuration, see https://github.com/AmauriC/tarteaucitron.js#how-to-use
jobs: ['googlefonts'], // Services name to activate
user: { // Configuration used by services
googleFonts: ['Tangerine'], // Configuration for googlefonts
},
},
}

[...]

return ENV
}
```

If you need to deactivate `ember-tarteaucitron`, you can configure on your `ember-cli-build.js` file as follow:

```js
const EmberAddon = require('ember-cli/lib/broccoli/ember-addon')

module.exports = function (defaults) {
let app = new EmberAddon(defaults, {
'ember-tarteaucitron': {
enabled: false, // Enabled by default
},
})

[...]
}
```

### CDN

Here is the configuration if you want to use CDN for tarteaucitron assets:

```js
module.exports = function (environment) {
let ENV = {

[...]

tarteaucitron: {
preInit: {
tarteaucitronForceCDN: 'https://cdn.jsdelivr.net/npm/tarteaucitronjs@latest/',
},
[...]
},
}

[...]

return ENV
}
```

And you can avoid to import tarteaucitron assets:

```js
const EmberAddon = require('ember-cli/lib/broccoli/ember-addon')

module.exports = function (defaults) {
let app = new EmberAddon(defaults, {
'ember-tarteaucitron': {
importAssets: false,
},
})

[...]
}
```

### API

The `tarteaucitron` service exposes functions in order to add new jobs programmatically and listen to events.

#### Setup a new job

- `addJob(name, config)`: Add a new job with configuration

#### Service events

- `addServiceAddedListener(name, callback)`: listener called when a service is added
- `removeServiceAddedListener(name, callback)`: remove the listener when a service is added
- `addServiceLoadedListener(name, callback)`: listener called when a service is loaded
- `removeServiceLoadedListener(name, callback)`: remove the listener when a service is loaded

The service names are defined in `tarteaucitron`: https://github.com/AmauriC/tarteaucitron.js/blob/master/tarteaucitron.services.js

#### Tarteaucitron events

- `addTACListener(name, callback)`: listener when an event occurred
- `removeTACListener(name, callback)`: remove listener when an event occurred

The following events are available:

- **tac.root_available**: the root element with panel has been created, services will be loaded
- **tac.open_alert**: the alert is opened
- **tac.close_alert**: the alert is closed
- **tac.open_panel**: the panel is opened
- **tac.close_panel**: the panel is closed

##### Code example

```js
import Controller from '@ember/controller'
import { service } from '@ember/service'
import { tracked } from '@glimmer/tracking'

export default class ApplicationController extends Controller {
@service tarteaucitron

@tracked googlefontsLoaded = false
@tracked facebookpixelLoaded = false

constructor() {
super(...arguments)
this.tarteaucitron.addServiceLoadedListener('googlefonts', () => {
this.googlefontsLoaded = true
this.tarteaucitron.removeServiceLoadedListener('googlefonts')
})
this.tarteaucitron.addServiceLoadedListener('facebookpixel', () => {
this.facebookpixelLoaded = true
this.tarteaucitron.removeServiceLoadedListener('facebookpixel')
})
setTimeout(() => {
this.tarteaucitron.addJob('facebookpixel', { facebookpixelId: 'YOUR-ID' })
}, 5000)
}
}
```

## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.

## License

This project is licensed under the [MIT License](LICENSE.md).