Further improvements in regards to #287

thednp · May 28, 2019 · b2bddbb · b2bddbb
1 parent 6e05997
commit b2bddbb
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 34 deletions.
diff --git a/assets/js/scripts.js b/assets/js/scripts.js
@@ -3,6 +3,18 @@ myModal.addEventListener('show.bs.modal', function(e) {
 	e.target && console.log('show.bs.modal triggered for #'+e.target.id);
 	e.relatedTarget && console.log('event.relatedTarget is '+e.relatedTarget.tagName+'.'+e.relatedTarget.className.replace(/\s/g,'.'));
 }, false);
+myModal.addEventListener('shown.bs.modal', function(e) {
+	e.target && console.log('shown.bs.modal triggered for #'+e.target.id);
+	e.relatedTarget && console.log('event.relatedTarget is '+e.relatedTarget.tagName+'.'+e.relatedTarget.className.replace(/\s/g,'.'));
+}, false);
+myModal.addEventListener('hide.bs.modal', function(e) {
+	e.target && console.log('hide.bs.modal triggered for #'+e.target.id);
+	e.relatedTarget && console.log('event.relatedTarget is '+e.relatedTarget.tagName+'.'+e.relatedTarget.className.replace(/\s/g,'.'));
+}, false);
+myModal.addEventListener('hidden.bs.modal', function(e) {
+	e.target && console.log('hidden.bs.modal triggered for #'+e.target.id);
+	e.relatedTarget && console.log('event.relatedTarget is '+e.relatedTarget.tagName+'.'+e.relatedTarget.className.replace(/\s/g,'.'));
+}, false);
 
 
 // Modal initialized with JavaScript

diff --git a/dist/bootstrap-native-v4.js b/dist/bootstrap-native-v4.js
@@ -1,4 +1,4 @@
-// Native Javascript for Bootstrap 4 v2.0.26 | © dnp_theme | MIT-License
+// Native Javascript for Bootstrap 4 v2.0.27 | © dnp_theme | MIT-License
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
     // AMD support:
@@ -319,7 +319,7 @@
       arrowLeft && (arrow[style][left] = arrowLeft + 'px');
     };
 
-  BSN.version = '2.0.26';
+  BSN.version = '2.0.27';
 
   /* Native Javascript for Bootstrap 4 | Alert
   -------------------------------------------*/
@@ -1020,8 +1020,8 @@
         // determine modal, triggering element
         btnCheck = element[getAttribute](dataTarget)||element[getAttribute]('href'),
         checkModal = queryElement( btnCheck ),
-        modal = hasClass(element,component) ? element : checkModal;  
-    
+        modal = hasClass(element,component) ? element : checkModal;
+
       if ( hasClass(element, component) ) { element = null; } // modal is now independent of it's triggering element
 
     if ( !modal ) { return; } // invalidate
@@ -1032,6 +1032,7 @@
     this[keyboard] = options[keyboard] === false || modal[getAttribute](dataKeyboard) === 'false' ? false : true;
     this[backdrop] = options[backdrop] === staticString || modal[getAttribute](databackdrop) === staticString ? staticString : true;
     this[backdrop] = options[backdrop] === false || modal[getAttribute](databackdrop) === 'false' ? false : this[backdrop];
+    this[animation] = hasClass(modal, 'fade') ? true : false;
     this[content]  = options[content]; // JavaScript only
 
     // bind, constants, event targets and other vars
@@ -1082,24 +1083,22 @@
         scrollBarWidth = measureScrollbar();
       },
       createOverlay = function() {
-        modalOverlay = 1;        
-
         var newOverlay = DOC[createElement]('div');
         overlay = queryElement('.'+modalBackdropString);
 
         if ( overlay === null ) {
-          newOverlay[setAttribute]('class',modalBackdropString+' fade');
+          newOverlay[setAttribute]('class', modalBackdropString + (self[animation] ? ' fade' : ''));
           overlay = newOverlay;
           DOC[body][appendChild](overlay);
         }
+        modalOverlay = 1;
       },
       removeOverlay = function() {
         overlay = queryElement('.'+modalBackdropString);
         if ( overlay && overlay !== null && typeof overlay === 'object' ) {
-          modalOverlay = 0;        
+          modalOverlay = 0;
           DOC[body].removeChild(overlay); overlay = null;
         }
-        bootstrapCustomEvent.call(modal, hiddenEvent, component);      
       },
       keydownHandlerToggle = function() {
         if (hasClass(modal,showClass)) {
@@ -1133,12 +1132,13 @@
       triggerHide = function() {
         modal[style].display = '';
         element && (setFocus(element));
-
+        bootstrapCustomEvent.call(modal, hiddenEvent, component);
+
         (function(){
           if (!getElementsByClassName(DOC,component+' '+showClass)[0]) {
             resetScrollbar();
             removeClass(DOC[body],component+'-open');
-            overlay && hasClass(overlay,'fade') ? (removeClass(overlay,showClass), emulateTransitionEnd(overlay,removeOverlay)) 
+            overlay && hasClass(overlay,'fade') ? (removeClass(overlay,showClass), emulateTransitionEnd(overlay,removeOverlay))
             : removeOverlay();
 
             resizeHandlerToggle();
@@ -1193,7 +1193,7 @@
 
       if ( overlay && modalOverlay && !hasClass(overlay,showClass)) {
         overlay[offsetWidth]; // force reflow to enable trasition
-        overlayDelay = getTransitionDurationFromElement(overlay);              
+        overlayDelay = getTransitionDurationFromElement(overlay);
         addClass(overlay, showClass);
       }
 
@@ -1208,19 +1208,19 @@
         modal[setAttribute](ariaHidden, false);
 
         hasClass(modal,'fade') ? emulateTransitionEnd(modal, triggerShow) : triggerShow();
-      }, supportTransitions && overlay ? overlayDelay : 0);
+      }, supportTransitions && overlay && overlayDelay ? overlayDelay : 0);
     };
     this.hide = function() {
       bootstrapCustomEvent.call(modal, hideEvent, component);
       overlay = queryElement('.'+modalBackdropString);
-      overlayDelay = overlay && getTransitionDurationFromElement(overlay);    
+      overlayDelay = overlay && getTransitionDurationFromElement(overlay);
 
       removeClass(modal,showClass);
       modal[setAttribute](ariaHidden, true);
 
       setTimeout(function(){
         hasClass(modal,'fade') ? emulateTransitionEnd(modal, triggerHide) : triggerHide();
-      }, supportTransitions && overlay ? overlayDelay : 0);
+      }, supportTransitions && overlay && overlayDelay ? overlayDelay : 1);
     };
     this.setContent = function( content ) {
       queryElement('.'+component+'-content',modal)[innerHTML] = content;