fix: dynamic bind input upload drag and drop

italia · Nov 24, 2022 · c27bcc1 · c27bcc1
1 parent 0085bd0
commit c27bcc1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/docs/form/introduzione.md b/docs/form/introduzione.md
@@ -61,11 +61,11 @@ Ecco l'esempio di una struttura più complessa creata con il sistema a griglie.
 <div>
   <div class="row">
     <div class="form-group col-md-6">
-      <label for="inputEmail4">Email</label>
+      <label class="active" for="inputEmail4">Email</label>
       <input type="email" class="form-control" id="inputEmail4" placeholder="inserisci il tuo indirizzo email">
     </div>
     <div class="form-group col-md-6">
-      <label for="exampleInputPassword">Password</label>
+      <label class="active" for="exampleInputPassword">Password</label>
       <input type="password" data-bs-input class="form-control input-password" id="exampleInputPassword" placeholder="inserisci la tua password">
       <span class="password-icon" aria-hidden="true">
         <svg class="password-icon-visible icon icon-sm"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-password-visible"></use></svg>
@@ -75,7 +75,7 @@ Ecco l'esempio di una struttura più complessa creata con il sistema a griglie.
   </div>
   <div class="row">
     <div class="form-group col">
-      <label for="inputAddress">Indirizzo</label>
+      <label class="active" for="inputAddress">Indirizzo</label>
       <input type="text" class="form-control" id="inputAddress" placeholder="Via Roma, 1">
     </div>
   </div>
@@ -263,11 +263,11 @@ Di seguito un esempio di form validato con Just Validate.
 <form class="needs-validation" id="justValidateForm">
   <div class="row mt-4">
     <div class="form-group col-md-3">
-      <label for="validationCustom01">Nome</label>
+      <label class="active" for="validationCustom01">Nome</label>
       <input type="text" class="form-control" id="validationCustom01" value="Mario" required>
     </div>
     <div class="form-group col-md-3">
-      <label for="validationCustom02">Cognome</label>
+      <label class="active" for="validationCustom02">Cognome</label>
       <input type="text" class="form-control" id="validationCustom02" value="Rossi" required>
     </div>
     <div class="form-group col-md-3">

diff --git a/src/js/plugins/upload-dragdrop.js b/src/js/plugins/upload-dragdrop.js
@@ -6,9 +6,11 @@ import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 import ProgressDonut from './progress-donut'
 
 const NAME = 'upload'
-//const DATA_KEY = 'bs.upload'
-//const EVENT_KEY = `.${DATA_KEY}`
-//const DATA_API_KEY = '.data-api'
+const DATA_KEY = 'bs.upload'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
 const EVENT_DRAG = `drag`
 const EVENT_DRAG_START = `dragstart`
@@ -120,8 +122,28 @@ class UploadDragDrop extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-SelectorEngine.find(SELECTOR_FORM).forEach((form) => {
+/*SelectorEngine.find(SELECTOR_FORM).forEach((form) => {
   UploadDragDrop.getOrCreateInstance(form)
+})*/
+
+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)) {
+    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 () {
+  createInput(this)
 })
 
 export default UploadDragDrop