Merge branch 'dev'

BeAPI · Dec 17, 2024 · 3b67a4a · 3b67a4a
2 parents b538bdd + dfffa73
commit 3b67a4a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/examples/accessible-accordion/README.md b/examples/accessible-accordion/README.md
@@ -103,8 +103,9 @@ Accordion.initFromPreset();
 | `forceExpand`       | boolean                   | `true`                | If true, the accordion has at least one panel opened.   |
 | `hasAnimation`      | boolean                   | `false`               | If true, the panel has a slideDown / slideUp animation. |
 | `mediaQuery`        | null or matchMedia object | `null`                | Set dropdown for a specific media query.                |
-| `onClose`           | null or function          | `null`                | Opened panel callback.                                  |
-| `onOpen`            | null or function          | `null`                | Closed panel callback.                                  |
+| `onInit`            | null or function          | `null`                | Event when component is initialized.                    |
+| `onClose`           | null or function          | `null`                | Event when a panel is opened.                           |
+| `onOpen`            | null or function          | `null`                | Event when a panel is closed.                           |
 | `onReachBreakpoint` | null or function          | `null`                | Event when the media query is reached if `mediaQuery` option is filled. |
 | `panelSelector`     | string                    | `.accordion__panel`   | The selector of the panels.                             |
 | `prefixId`          | string                    | `accordion`           | The prefix id of the component.                         |

diff --git a/examples/accessible-accordion/index.html b/examples/accessible-accordion/index.html
@@ -753,6 +753,9 @@ <h2>Code</h2>
                 '#accordion-demo-5': { closedDefault: true },
                 '#accordion-demo-6': {
                     forceExpand: false,
+                    onInit: function(el) {
+                        console.log(`${el.id} initialized`)
+                    },
                     onClose: function(panel) {
                         alert(`${panel.id} closed`)
                     },

diff --git a/src/classes/Accordion.js b/src/classes/Accordion.js
@@ -52,17 +52,22 @@ class Accordion extends AbstractDomElement {
    * @author Milan Ricoul
    */
   init() {
-    this.active = true
-
     const el = this._element
-    const { closedDefault, mediaQuery, onReachBreakpoint, panelSelector, prefixId, triggerSelector } = this._settings
+    const { closedDefault, mediaQuery, onInit, onReachBreakpoint, panelSelector, prefixId, triggerSelector } = this._settings
     const pattern = /\d+/g
     const triggers = el.querySelectorAll(triggerSelector)
     const panels = el.querySelectorAll(panelSelector)
     const id = randomId()
 
     el.dataset.id = id
 
+    if (onInit && !this.active) {
+      this.active = true
+      onInit.bind(this)(el)
+    }
+
+    this.active = true
+
     if (mediaQuery && onReachBreakpoint && pattern.test(mediaQuery.media)) {
       if (mediaQuery.media.includes('min')) {
         this.hasReachBreakpoint = window.innerWidth > parseInt(mediaQuery.media.match(pattern)[0]) ? 'above' : 'below'
@@ -427,6 +432,7 @@ Accordion.defaults = {
   forceExpand: true,
   hasAnimation: false,
   mediaQuery: null,
+  onInit: null,
   onReachBreakpoint: null,
   onOpen: null,
   onClose: null,