✨ add listenable events

README.md

@@ -125,6 +125,31 @@ And after a `JSON.parse()`:
 
 Basically, it's the `baseData` values, if there is any, and for each `permissions.slug`, a **boolean**.
 
+## 🎫 Events
+
+Here is a list of events you can **listen**:
+
+```js
+// To listen to the permissions / cookie's updates
+document.addEventListener('leckerli:permissions-updated');
+
+// To listen the modal states
+document.addEventListener('leckerli:modal-closed');
+document.addEventListener('leckerli:modal-opened');
+```
+
+Here is a list of events you can **dispatch**:
+
+```js
+// To manage the banner, even after the user's choice
+document.dispatchEvent(new CustomEvent('leckerli:open-banner'));
+document.dispatchEvent(new CustomEvent('leckerli:close-banner'));
+
+// To manage the settings modal
+document.dispatchEvent(new CustomEvent('leckerli:open-modal'));
+document.dispatchEvent(new CustomEvent('leckerli:close-modal'));
+```
+
 ## 🎨 Theming
 
 You can theme Leckerli with the following CSS custom properties (variables):

index.html

@@ -39,7 +39,11 @@ <h1>Your website here 🤗</h1>
           }
         ],
       }
-     */
+      */
+
+      document.addEventListener('leckerli:modal-closed', () => console.log('modal closed'))
+      document.addEventListener('leckerli:modal-opened', () => console.log('modal opened'))
+      document.addEventListener('leckerli:permissions-updated', () => console.log('permissions updated'))
     </script>
 
     <style>

src/hooks/useSettings.ts

@@ -65,6 +65,7 @@ const useSettings = create<SettingsStore>((set, getState) => ({
 
   // Manage modal display
   setModal: (value: boolean) => set(state => {
+    document.dispatchEvent(new CustomEvent(`leckerli:modal-${value ? 'opened' : 'closed'}`));
     return { ...state, settingsOpen: value };
   }),
 
@@ -84,6 +85,8 @@ const useSettings = create<SettingsStore>((set, getState) => ({
 
       cookies.set(state.name, JSON.stringify(newCookie));
 
+      document.dispatchEvent(new CustomEvent('leckerli:permissions-updated'));
+
       return { ...state, choiceMade: true, cookie: newCookie };
     }),
 
@@ -101,6 +104,8 @@ const useSettings = create<SettingsStore>((set, getState) => ({
 
       cookies.set(state.name, JSON.stringify(newCookie));
 
+      document.dispatchEvent(new CustomEvent('leckerli:permissions-updated'));
+
       return { ...state, choiceMade: true, cookie: newCookie };
     }),