fix: dynamic bind for components

fixed components: accordion, back to top, dimmer, forward, history-back, navscroll, sticky, transfer

docs/componenti/dimmer.md

@@ -107,6 +107,66 @@ Il testo è contenuto all'interno di un tag `<p>` e può essere preceduto da un'
 </div>
 {% endcapture %}{% include example.html content=example %}
 
+Se si vuole iniziare con il dimmer disabilitato è necessario utilizzare l'attributo `aria-hidden`.
+
+<div class="toggles col-md-6 col-lg-4">
+  <label for="toggleDimmer2">
+    Attiva Dimmer 2
+    <input type="checkbox" id="toggleDimmer2" data-bs-toggle="dimmer" data-bs-target="#dimmer2">
+    <span class="lever"></span>
+  </label>
+</div>
+
+{% capture example %}
+
+<div class="row dimmable">
+  <div class="dimmer fade" id="dimmer2" aria-hidden="true">
+    <div class="dimmer-inner">
+      <div class="dimmer-icon">
+        <svg class="icon icon-xl"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-unlocked"></use></svg>
+      </div>
+      <p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
+    </div>
+  </div>
+  <div class="col-12 col-lg-4">
+    <!--start card-->
+    <div class="card-wrapper">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
+          <p class="card-text">Praesent volutpat in dolor in sollicitudin. Donec mollis varius condimentum. Nunc viverra, metus at viverra consectetur, magna orci posuere ipsum, et bibendum est urna sed sem. Fusce libero neque, elementum volutpat tincidunt id, egestas vitae nisi. Nulla vulputate luctus sem, eu maximus lacus faucibus eget. Fusce tristique enim augue, sed suscipit lorem bibendum vel. Donec vehicula vehicula nibh non suscipit.</p>
+        </div>
+      </div>
+    </div>
+    <!--end card-->
+  </div>
+  <div class="col-12 col-lg-4 d-none d-lg-block">
+    <!--start card-->
+    <div class="card-wrapper">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
+          <p class="card-text">Praesent volutpat in dolor in sollicitudin. Donec mollis varius condimentum. Nunc viverra, metus at viverra consectetur, magna orci posuere ipsum, et bibendum est urna sed sem. Fusce libero neque, elementum volutpat tincidunt id, egestas vitae nisi. Nulla vulputate luctus sem, eu maximus lacus faucibus eget. Fusce tristique enim augue, sed suscipit lorem bibendum vel. Donec vehicula vehicula nibh non suscipit.</p>
+        </div>
+      </div>
+    </div>
+    <!--end card-->
+  </div>
+  <div class="col-12 col-lg-4 d-none d-lg-block">
+    <!--start card-->
+    <div class="card-wrapper">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
+          <p class="card-text">Praesent volutpat in dolor in sollicitudin. Donec mollis varius condimentum. Nunc viverra, metus at viverra consectetur, magna orci posuere ipsum, et bibendum est urna sed sem. Fusce libero neque, elementum volutpat tincidunt id, egestas vitae nisi. Nulla vulputate luctus sem, eu maximus lacus faucibus eget. Fusce tristique enim augue, sed suscipit lorem bibendum vel. Donec vehicula vehicula nibh non suscipit.</p>
+        </div>
+      </div>
+    </div>
+    <!--end card-->
+  </div>
+</div>
+{% endcapture %}{% include example.html content=example %}
+
 ### Colore Primario
 
 Aggiungendo la classe `.dimmer-primary` al wrapper del dimmer si ottiene una versione con sfondo di colore primario.
@@ -122,7 +182,7 @@ Aggiungendo la classe `.dimmer-primary` al wrapper del dimmer si ottiene una ver
 {% capture example %}
 
 <div class="row dimmable">
-  <div class="dimmer dimmer-primary fade" id="dimmer2">
+  <div class="dimmer dimmer-primary fade show" id="dimmer2">
     <div class="dimmer-inner">
       <p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus. Nulla vulputate luctus sem, eu maximus lacus faucibus eget. Fusce tristique enim augue, sed suscipit lorem bibendum vel. Donec vehicula vehicula nibh non suscipit.</p>
     </div>
@@ -183,7 +243,7 @@ I pulsanti vanno inseriti in un `<div>` con classi `.dimmer-buttons` e `.bg-dark
 {% capture example %}
 
 <div class="row dimmable">
-  <div class="dimmer fade" id="dimmer3">
+  <div class="dimmer fade show" id="dimmer3">
     <div class="dimmer-inner">
       <h4>Titolo Dimmer</h4>
       <div class="dimmer-buttons bg-dark">
@@ -246,7 +306,7 @@ Aggiungendo la classe `.dimmer-primary` al wrapper del dimmer si ottiene una ver
 {% capture example %}
 
 <div class="row dimmable">
-  <div class="dimmer dimmer-primary fade" id="dimmer4">
+  <div class="dimmer dimmer-primary fade show" id="dimmer4">
     <div class="dimmer-inner">
       <h4>Titolo Dimmer</h4>
       <div class="dimmer-buttons single-button bg-dark">

src/js/plugins/accordion.js

@@ -87,7 +87,7 @@ accordions.forEach((acc) => {
   Accordion.getOrCreateInstance(acc)
 })*/
 
-const accordionToggles = SelectorEngine.find(SELECTOR_HEADBTN)
+/*const accordionToggles = SelectorEngine.find(SELECTOR_HEADBTN)
 accordionToggles.forEach((toggle) => {
   EventHandler.one(toggle, EVENT_KEYDOWN_DATA_API, (evt) => {
     const parent = toggle.closest(SELECTOR_HEADBTN_WRAPPER)
@@ -96,6 +96,14 @@ accordionToggles.forEach((toggle) => {
       accordion.handleKeyDown(evt.key, toggle, evt)
     }
   })
+})*/
+
+EventHandler.on(document, EVENT_KEYDOWN_DATA_API, SELECTOR_HEADBTN, function (evt) {
+  const parent = this.closest(SELECTOR_HEADBTN_WRAPPER)
+  if (parent) {
+    const accordion = Accordion.getOrCreateInstance(parent)
+    accordion.handleKeyDown(evt.key, this, evt)
+  }
 })
 
 export default Accordion

src/js/plugins/backToTop.js

@@ -116,13 +116,11 @@ toggles.forEach((toggle) => {
   BackToTop.getOrCreateInstance(toggle)
 })*/
 
-const dataApiCb = onDocumentScroll(() => {
+onDocumentScroll(() => {
   const toggles = SelectorEngine.find(SELECTOR_TOGGLE)
-  toggles.forEach((toggle) => {
-    const backToTop = BackToTop.getOrCreateInstance(toggle)
-    backToTop.toggleShow()
+  toggles.map((toggle) => {
+    BackToTop.getOrCreateInstance(toggle)
   })
-  dataApiCb.dispose()
 })
 
 export default BackToTop

src/js/plugins/cookiebar.js

@@ -278,17 +278,6 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, function () {
   }
 })
 
-/*$(window).on(EVENT_LOAD_DATA_API, () => {
-  const cookiebars = $.makeArray($(SELECTOR_COOKIE_BAR))
-  var consent = Cookiebar._getCookieEU()
-  if (!consent) {
-    for (let i = cookiebars.length; i--;) {
-      const $cookiebar = $(cookiebars[i])
-      Cookiebar._jQueryInterface.call($cookiebar, 'show')
-    }
-  }
-})*/
-
 /**
  * ------------------------------------------------------------------------
  * jQuery

src/js/plugins/dimmer.js

@@ -2,28 +2,28 @@ import BaseComponent from 'bootstrap/js/src/base-component.js'
 
 import { reflow, getElementFromSelector } from 'bootstrap/js/src/util'
 import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+//import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 
 const NAME = 'dimmer'
 const DATA_KEY = 'bs.dimmer'
 const EVENT_KEY = `.${DATA_KEY}`
-//const DATA_API_KEY = '.data-api'
+const DATA_API_KEY = '.data-api'
 
-const EVENT_CLICK = `click${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+//const EVENT_CLICK = `click${EVENT_KEY}`
 
 const CLASS_NAME_FADE = 'fade'
 const CLASS_NAME_SHOW = 'show'
 
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dimmer"]'
+const SELECTOR_DATA_ARIAHIDDEN = '[aria-hidden=true]'
 
 class Dimmer extends BaseComponent {
   constructor(element) {
     super(element)
 
-    this._isShown = false
+    this._isShown = !element.matches(SELECTOR_DATA_ARIAHIDDEN)
     this._isTransitioning = false
-
-    this._init()
   }
 
   // Getters
@@ -66,11 +66,6 @@ class Dimmer extends BaseComponent {
   }
 
   //Private
-  _init() {
-    if (this._element.classList.contains(CLASS_NAME_SHOW)) {
-      this.show()
-    }
-  }
 
   _isAnimated() {
     return this._element.classList.contains(CLASS_NAME_FADE)
@@ -79,7 +74,7 @@ class Dimmer extends BaseComponent {
   _showElement() {
     const isAnimated = this._isAnimated()
 
-    this._element.style.display = 'flex'
+    //this._element.style.display = 'flex'
     this._element.removeAttribute('aria-hidden')
     //this._element.setAttribute('aria-modal', true)
     //this._element.setAttribute('role', 'dialog')
@@ -98,7 +93,7 @@ class Dimmer extends BaseComponent {
   }
 
   _hideElement() {
-    this._element.style.display = 'none'
+    //this._element.style.display = 'none'
     this._element.setAttribute('aria-hidden', true)
     //this._element.removeAttribute('aria-modal')
     //this._element.removeAttribute('role')
@@ -112,7 +107,7 @@ class Dimmer extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((toggle) => {
+/*SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((toggle) => {
   const dimmerElement = getElementFromSelector(toggle)
   const dimmer = Dimmer.getOrCreateInstance(dimmerElement)
 
@@ -123,6 +118,13 @@ SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((toggle) => {
   if (toggle.checked) {
     dimmer.show()
   }
+})*/
+
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function () {
+  const dimmerElement = getElementFromSelector(this)
+  const dimmer = Dimmer.getOrCreateInstance(dimmerElement)
+
+  this.checked ? dimmer.show() : dimmer.hide()
 })
 
 export default Dimmer

src/js/plugins/forward.js

@@ -1,7 +1,7 @@
 import BaseComponent from 'bootstrap/js/src/base-component.js'
 
 import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+//import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 import Manipulator from 'bootstrap/js/src/dom/manipulator'
 import { getElementFromSelector } from 'bootstrap/js/src/util/index'
 
@@ -71,13 +71,19 @@ class Forward extends BaseComponent {
  * Data Api implementation
  * ------------------------------------------------------------------------
  */
-const toggles = SelectorEngine.find(SELECTOR_TOGGLE)
+/*const toggles = SelectorEngine.find(SELECTOR_TOGGLE)
 toggles.forEach((toggle) => {
   EventHandler.one(toggle, EVENT_CLICK_DATA_API, (evt) => {
     evt.preventDefault()
     const forward = Forward.getOrCreateInstance(toggle)
     forward.goToTarget()
   })
+})*/
+
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_TOGGLE, function (evt) {
+  evt.preventDefault()
+  const forward = Forward.getOrCreateInstance(this)
+  forward.goToTarget()
 })
 
 export default Forward

src/js/plugins/history-back.js

@@ -1,7 +1,7 @@
 import BaseComponent from 'bootstrap/js/src/base-component.js'
 
 import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+//import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 
 const NAME = 'historyback'
 const DATA_KEY = 'bs.historyback'
@@ -46,13 +46,19 @@ class HistoryBack extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const toggles = SelectorEngine.find(SELECTOR_TOGGLE)
+/*const toggles = SelectorEngine.find(SELECTOR_TOGGLE)
 toggles.forEach((toggle) => {
   EventHandler.one(toggle, EVENT_CLICK_DATA_API, (evt) => {
     evt.preventDefault()
     const historyBack = HistoryBack.getOrCreateInstance(toggle)
     historyBack.back()
   })
+})*/
+
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_TOGGLE, function (evt) {
+  evt.preventDefault()
+  const historyBack = HistoryBack.getOrCreateInstance(this)
+  historyBack.back()
 })
 
 export default HistoryBack

src/js/plugins/navscroll.js

@@ -242,12 +242,11 @@ class NavScroll extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const dataApiCb = onDocumentScroll(() => {
+onDocumentScroll(() => {
   const navs = SelectorEngine.find(SELECTOR_NAVSCROLL)
-  navs.forEach((nav) => {
+  navs.map((nav) => {
     NavScroll.getOrCreateInstance(nav)
   })
-  dataApiCb.dispose()
 })
 
 export default NavScroll

src/js/plugins/sticky.js

@@ -243,12 +243,11 @@ class Sticky extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const dataApiCb = onDocumentScroll(() => {
+onDocumentScroll(() => {
   const stickies = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
-  stickies.forEach((sticky) => {
+  stickies.map((sticky) => {
     Sticky.getOrCreateInstance(sticky)
   })
-  dataApiCb.dispose()
 })
 
 export default Sticky

src/js/plugins/transfer.js

@@ -15,8 +15,10 @@ import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 const NAME = 'transfer'
 const DATA_KEY = 'bs.transfer'
 const EVENT_KEY = `.${DATA_KEY}`
-//const DATA_API_KEY = '.data-api'
+const DATA_API_KEY = '.data-api'
 
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
 //const EVENT_SCROLL = `scroll${EVENT_KEY}`
 const EVENT_CLICK = `click${EVENT_KEY}`
 
@@ -258,8 +260,15 @@ class Transfer extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-SelectorEngine.find(SELECTOR_BLOCK).forEach((block) => {
+/*SelectorEngine.find(SELECTOR_BLOCK).forEach((block) => {
   Transfer.getOrCreateInstance(block)
+})*/
+
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_BLOCK + ' .form-check label', function () {
+  Transfer.getOrCreateInstance(this.closest(SELECTOR_BLOCK))
+})
+EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_BLOCK + ' .form-check label', function () {
+  Transfer.getOrCreateInstance(this.closest(SELECTOR_BLOCK))
 })
 
 export default Transfer

src/js/plugins/upload-dragdrop.js

@@ -127,19 +127,14 @@ class UploadDragDrop extends BaseComponent {
 })*/
 
 const createInput = (element) => {
-  let found = element
-  //looking for the form element starting from the target of the event
-  while ((!found.matches || !found.matches(SELECTOR_FORM)) && found.parentNode) {
-    found = found.parentNode
-  }
-  if (found.matches && found.matches(SELECTOR_FORM)) {
+  let found = element.matches && element.matches(SELECTOR_FORM) ? element : element.closest ? element.closest(SELECTOR_FORM) : null
+  if (found) {
     UploadDragDrop.getOrCreateInstance(found)
   }
   return null
 }
 
 document.addEventListener('dragenter', function (evt) {
-  console.log('---drage')
   createInput(evt.target)
 })
 EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_FORM + ' label', function () {