# Web Cookie Notice

<div style="text-align: center;">

<!-- Link for icons : https://github.com/Ileriayo/markdown-badges -->

![Laravel](https://img.shields.io/badge/laravel-%23FF2D20.svg?style=for-the-badge&logo=laravel&logoColor=white)
![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white)
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)

![WordPress](https://img.shields.io/badge/WordPress-%23117AC9.svg?style=for-the-badge&logo=WordPress&logoColor=white)
![PHP](https://img.shields.io/badge/php-%23777BB4.svg?style=for-the-badge&logo=php&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

</div>

## Exemples :
Voir dans le dossier `examples` pour **Laravel** et **Wordpress**.

## Étape 1 : implémentation

### Ajouter le package avec npm
- https://lab.s-web.fr/ldc-web/projets/laravel-base-project/-/snippets/8
- `npm i @ldc-web/cookie-notice --save-dev`

    [Lien doc Gitlab](https://docs.gitlab.com/ee/user/packages/npm_registry/)

## Browser
- Pour inclure directement dans le navigateur, les fichiers compilés sont dans `dist/browser`.

### Laravel
- Ajouter dans le projet, les fichiers au bon endroit :
  - [`cn-cookies.blade.php`](./examples/laravel/cn-cookies.blade.php) dans le dossier `resources/view/vendor/`
  - [`standard.blade.php`](./examples/laravel/templates/standard.blade.php) dans le dossier `resources/view/vendor/cookie-notice-templates`
- Inclure dans le layout général `@include('vendor.cn-cookies')`.
  **Cela doit être avant le stack('scripts')**
- **!! Ne pas oublier de modifier les configurations dans le blade `vendor.cn-cookies`**.

- Ensuite inclure les éléments **style** et **script**
  - **SCSS**

        @import "~@ldc-web/cookie-notice";
        // ou
        @import "~@ldc-web/cookie-notice/dist/css/cookie-notice-standard.css";
        // ou
        @import "~@ldc-web/cookie-notice/src/scss/themes/standard";
  - **TS/JS**

        // Dans fo.ts
        import type CookieNotice from "@ldc-web/cookie-notice";
        window.CookieNotice = CookieNotice;

        // Dans index.d.ts
        ...
        import CookieNotice from "@ldc-web/cookie-notice";

        declare global {
            ...

            interface Window {
                CookieNotice: typeof CookieNotice;
                ...
            }
        }

### Wordpress
- Ajouter dans le projet, les fichiers au bon endroit :
  - [`cn-cookies.php`](./examples/wordpress/cn-cookies.php) dans le dossier `resources/view/vendor/`
  - [`standard.php`](./examples/wordpress/templates/standard.php) dans le dossier `resources/view/vendor/cookie-notice-templates`
  - Inclure dans le footer général `<?php include('resources/views/vendor/cn-cookies.php'); ?>`.
- **!! Ne pas oublier de modifier les configurations dans le fichier `resources/views/vendor/cn-cookies`**.

- Ensuite inclure les éléments **style** et **script**
  - **SCSS**
  
        @import '../../node_modules/@ldc-web/cookie-notice';

    ## OU ##

  - **CSS**

    inclure directement le fichier compilé `cookie-cn.css` présent dans `dist/browser` dans le fichier css du projet

  - **JS**

    ajouter directement le fichier compilé `cookie-cn.js` présent dans `dist/browser` dans le fichier js du projet

## Étape 2 : customisation
- Couleurs : Pour l'instant les variables **SASS** sont personalisables. Elle se trouvent ici [`node_modules/@ldc-web/cookie-notice/src/scss/variables.scss`](./src/scss/variables.scss)

## Étape 3 : finalisation
- Ajouter un bouton `Gestion des cookies` dans le footer et lui attribuer la classe `cn-cookie-link`.
- Si des vidéos sont présentes, attribuer aux `<div>` la classe `cn-youtube` pour Youtube, et/ou `cn-vimeo` pour Viméo.