inclure le script du popup a partir du CDN
latest<script src="https://privacy.codems.com/dist/cdm-acceptation@latest/cdm-acceptation.js"></script><script src="https://privacy.codems.com/dist/[email protected]/cdm-acceptation.js"></script>Ensuite, dans le javascript, initialiser le module.
Le plugin prend en compte d'attendre que le DOM soit prêt, pas besoins de gérer ça.
CdmAcceptation.init({});La méthode init() prend en argument un objet représentant la configuration du plugin.
Toute les valeurs ont une valeur par défaut.
| Variable | type | Valeur par défaut | Description |
|---|---|---|---|
| acceptButtonText | string | this.defaultTexts.acceptButtonText[this.lang]; | Bouton sur le bouton d'acceptation. |
| alignment | string | 'center' | L'alignement du popup. Accepte les valeur flex ( 'flex-start','center','flex-end' )S'applique seulement si themeWide est à false. |
| borderRadius | string | '10px' | l'arrodissement du popup. |
| boxShadow | string | 0px 2px 10px #0001 | Applique une ombre au popup |
| contentFontSize | string | 14px | Font size du popup |
| contentPadding | string | 30px 30px | Padding du contenu du popup. |
| cssVarBuilder | function | (val) => val | Permet d'ajouter ou de modifier des variables css. (Appelé au build) |
| dimmerClickThrough | bool | false | Si true, les clics de souris passeront au travers du div d'assombrissement. |
| dimmerColor | bool | true | Si true, le fond de la page sera assombris. |
| fontColor | string | '#000' | La couleur de la police du message. |
| fontFamily | string | 'Arial' | La police utilisée dans le popup. |
| isDimmed | bool | ||
| lang | string | 'fr' | Vaut 'fr' ou 'en'. S'applique seulement si les messages par défauts sont utilisés. |
| maxWidth | string | '1000px' | La largeur maximal du popup. S'applique seulement si themeWide est à false. |
| message | string | this.defaultTexts.message[this.lang] | Le message affiché dans le popup. |
| modalBgColor | string | '#fff' | La couleur d'arrière plan du modal. |
| modalBorderSpacing | object | { bottom: '30px', left: '30px', right: '30px' } | L'espacement du bord de page du popup. |
| modalBorderSpacingMobile | object | { bottom: '30px', left: '30px', right: '30px' } | L'espacement du bord de page du popup. |
| policyLink | string | '' | Liens vers la politique de confidentialitée. |
| policyLinkText | string | this.defaultTexts.policyLinkText[this.lang] | Liens vers la politique de confidentialitée. |
| primaryColor | string | '#202b38' | La couleur primaire du plugin. |
| templateCSS | string | * | Le css de base injecté. (déconseillé de modifier). |
| templateHTML | string | * | Le html de base du modal. Contient des slots qui sont string replace au build. (déconseillé de modifier). |
| templateReplace | function | (key, val) => val | Permet d'influencer les variable remplacée dans le template. (Appelé au build) |
| themeWide | bool | false | Si true, le popup sera aligné au bas et prendera toute la largeur de l'écran. |
| title | string | this.defaultTexts.title[this.lang] | Le titre affiché dans le popup. |
| titleFontSize | string | 18px | Font size du titre |
Le JS du plugin est compilé avec rollup.
npm run devLe SCSS du plugin est compilé avec le plugin vscode liveSassCompiler ( id : glenn2223.live-sass )
Le dossier dist, avec le temps, augmentera de numéro de version. Veuillez a garder les dossiers de versions précédentes afin de permettre a un site d'utiliser une plus vielle version.
Le compilateur rollup est configurer pour compiler dans un dossier du numéro de version, et d'écraser le latest.
A chaque changement que vous ferez, augmentez le numéro de version dans le package.json.