Changelog:

* Fixing Modal `transitionend` issue #192 * Fixing Tooltip/Popover position #182 * Code cleanup * V4 page updates
thednp · Mar 29, 2018 · c2f4b03 · c2f4b03
1 parent 4325007
commit c2f4b03
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 146 deletions.
diff --git a/build-module-v4.js b/build-module-v4.js
@@ -97,30 +97,31 @@ module.exports = (options) => {
       rootAttachments.push(`root.${name} = bsn.${name};`);
       returns.push(`${name}: ${name}`);
     });
-    // Custom UMD Template:
-    return `(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-      // AMD support:
-      define([], factory);
-    } else if (typeof module === 'object' && module.exports) {
-      // CommonJS-like:
-      module.exports = factory();
-    } else {
-      // Browser globals (root is window)
-      var bsn = factory();
-      ${rootAttachments.join('\n    ')/* add indentation */}
-    }
-  }(this, function () {
-    ${utils}
-    BSN.version = '${pack.version}';
-    ${main}
-    ${init}
-    return {
-      ${returns.join(',\n    ')/* add indentation and comma */}
-    };
-  }));`;
-    // End of Template
+
+// Custom UMD Template:
+return `(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD support:
+    define([], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // CommonJS-like:
+    module.exports = factory();
+  } else {
+    // Browser globals (root is window)
+    var bsn = factory();
+    ${rootAttachments.join('\n    ')/* add indentation */}
   }
+}(this, function () {
+  ${utils}
+  BSN.version = '${pack.version}';
+  ${main}
+  ${init}
+  return {
+    ${returns.join(',\n    ')/* add indentation and comma */}
+  };
+}));`;
+// End of Template
 
+  }
   return result;
 }
diff --git a/build-module.js b/build-module.js
@@ -97,30 +97,31 @@ module.exports = (options) => {
       rootAttachments.push(`root.${name} = bsn.${name};`);
       returns.push(`${name}: ${name}`);
     });
-    // Custom UMD Template:
-    return `(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-      // AMD support:
-      define([], factory);
-    } else if (typeof module === 'object' && module.exports) {
-      // CommonJS-like:
-      module.exports = factory();
-    } else {
-      // Browser globals (root is window)
-      var bsn = factory();
-      ${rootAttachments.join('\n    ')/* add indentation */}
-    }
-  }(this, function () {
-    ${utils}
-    BSN.version = '${pack.version}';
-    ${main}
-    ${init}
-    return {
-      ${returns.join(',\n    ')/* add indentation and comma */}
-    };
-  }));`;
-    // End of Template
+
+// Custom UMD Template:
+return `(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD support:
+    define([], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // CommonJS-like:
+    module.exports = factory();
+  } else {
+    // Browser globals (root is window)
+    var bsn = factory();
+    ${rootAttachments.join('\n    ')/* add indentation */}
   }
+}(this, function () {
+  ${utils}
+  BSN.version = '${pack.version}';
+  ${main}
+  ${init}
+  return {
+    ${returns.join(',\n    ')/* add indentation and comma */}
+  };
+}));`;
+// End of Template
 
+  }
   return result;
 }
diff --git a/dist/bootstrap-native-v4.js b/dist/bootstrap-native-v4.js
@@ -1,15 +1,15 @@
 // Native Javascript for Bootstrap 4 v2.0.22 | © dnp_theme | MIT-License
 (function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-      // AMD support:
-      define([], factory);
-    } else if (typeof module === 'object' && module.exports) {
-      // CommonJS-like:
-      module.exports = factory();
-    } else {
-      // Browser globals (root is window)
-      var bsn = factory();
-      root.Alert = bsn.Alert;
+  if (typeof define === 'function' && define.amd) {
+    // AMD support:
+    define([], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // CommonJS-like:
+    module.exports = factory();
+  } else {
+    // Browser globals (root is window)
+    var bsn = factory();
+    root.Alert = bsn.Alert;
     root.Button = bsn.Button;
     root.Carousel = bsn.Carousel;
     root.Collapse = bsn.Collapse;
@@ -19,9 +19,9 @@
     root.ScrollSpy = bsn.ScrollSpy;
     root.Tab = bsn.Tab;
     root.Tooltip = bsn.Tooltip;
-    }
-  }(this, function () {
-    
+  }
+}(this, function () {
+
   /* Native Javascript for Bootstrap 4 | Internal Utility Functions
   ----------------------------------------------------------------*/
   "use strict";
@@ -231,9 +231,11 @@
           rect = link[getBoundingClientRect](),
           scroll = parent === DOC[body] ? getScroll() : { x: parent[offsetLeft] + parent[scrollLeft], y: parent[offsetTop] + parent[scrollTop] },
           linkDimensions = { w: rect[right] - rect[left], h: rect[bottom] - rect[top] },
+          isPopover = hasClass(element,'popover'),
+          topPosition, leftPosition, 
+
           arrow = queryElement('.arrow',element),
-          arrowWidth = arrow[offsetWidth], isPopover = hasClass(element,'popover'),
-          topPosition, leftPosition, arrowTop, arrowLeft,
+          arrowTop, arrowLeft, arrowWidth, arrowHeight,
 
           halfTopExceed = rect[top] + linkDimensions.h/2 - elementDimensions.h/2 < 0,
           halfLeftExceed = rect[left] + linkDimensions.w/2 - elementDimensions.w/2 < 0,
@@ -251,60 +253,60 @@
       position = position === left && leftExceed ? right : position;
       position = position === right && rightExceed ? left : position;
 
+      // update tooltip/popover class
+      element.className[indexOf](position) === -1 && (element.className = element.className.replace(tipPositions,position));
+
+      // we check the computed width & height and update here
+      arrowWidth = arrow[offsetWidth]; arrowHeight = arrow[offsetHeight];
+
       // apply styling to tooltip or popover
       if ( position === left || position === right ) { // secondary|side positions
         if ( position === left ) { // LEFT
-          leftPosition = rect[left] + scroll.x - elementDimensions.w;
+          leftPosition = rect[left] + scroll.x - elementDimensions.w - ( isPopover ? arrowWidth : 0 );
         } else { // RIGHT
           leftPosition = rect[left] + scroll.x + linkDimensions.w;
         }
 
         // adjust top and arrow
         if (halfTopExceed) {
           topPosition = rect[top] + scroll.y;
-          arrowTop = linkDimensions.h/2;
+          arrowTop = linkDimensions.h/2 - arrowWidth;
         } else if (halfBottomExceed) {
           topPosition = rect[top] + scroll.y - elementDimensions.h + linkDimensions.h;
-          arrowTop = elementDimensions.h - linkDimensions.h/2;
+          arrowTop = elementDimensions.h - linkDimensions.h/2 - arrowWidth;
         } else {
           topPosition = rect[top] + scroll.y - elementDimensions.h/2 + linkDimensions.h/2;
-          arrowTop = elementDimensions.h/2;
+          arrowTop = elementDimensions.h/2 - (isPopover ? arrowHeight*0.9 : arrowHeight/2);
         }
       } else if ( position === top || position === bottom ) { // primary|vertical positions
         if ( position === top) { // TOP
-          topPosition =  rect[top] + scroll.y - elementDimensions.h;
+          topPosition =  rect[top] + scroll.y - elementDimensions.h - ( isPopover ? arrowHeight : 0 );
         } else { // BOTTOM
           topPosition = rect[top] + scroll.y + linkDimensions.h;
         }
         // adjust left | right and also the arrow
         if (halfLeftExceed) {
           leftPosition = 0;
-          arrowLeft = rect[left] + linkDimensions.w/2;
+          arrowLeft = rect[left] + linkDimensions.w/2 - arrowWidth;
         } else if (halfRightExceed) {
           leftPosition = windowWidth - elementDimensions.w*1.01;
-          arrowLeft = elementDimensions.w - ( windowWidth - rect[left] ) + linkDimensions.w/2;
+          arrowLeft = elementDimensions.w - ( windowWidth - rect[left] ) + linkDimensions.w/2 - arrowWidth/2;
         } else {
           leftPosition = rect[left] + scroll.x - elementDimensions.w/2 + linkDimensions.w/2;
-          arrowLeft = elementDimensions.w/2;
+          arrowLeft = elementDimensions.w/2 - arrowWidth/2;
         }
       }
 
-      // fixing some CSS bug with Bootstrap 4 alpha
-      topPosition = position === top && isPopover ? topPosition - arrowWidth : topPosition;
-      leftPosition = position === left && isPopover ? leftPosition - arrowWidth : leftPosition;
-
-      // apply style to tooltip/popover and it's arrow
+      // apply style to tooltip/popover and its arrow
       element[style][top] = topPosition + 'px';
       element[style][left] = leftPosition + 'px';
 
       arrowTop && (arrow[style][top] = arrowTop + 'px');
       arrowLeft && (arrow[style][left] = arrowLeft + 'px');
-
-      element.className[indexOf](position) === -1 && (element.className = element.className.replace(tipPositions,position));
     };
 
-    BSN.version = '2.0.22';
-    
+  BSN.version = '2.0.22';
+
   /* Native Javascript for Bootstrap 4 | Alert
   -------------------------------------------*/
 
@@ -1058,7 +1060,7 @@
         modal[style].display = '';
         element && (setFocus(element));
 
-        setTimeout(function(){
+        (function(){
           if (!getElementsByClassName(DOC,component+' '+showClass)[0]) {
             resetAdjustments();
             resetScrollbar();
@@ -1070,7 +1072,7 @@
             dismissHandlerToggle();
             keydownHandlerToggle();
           }
-        }, 50);
+        }());
       },
       // handlers
       clickHandler = function(e) {
@@ -1143,9 +1145,9 @@
       removeClass(modal,showClass);
       modal[setAttribute](ariaHidden, true);
 
-      setTimeout(function(){
+      (function(){
         hasClass(modal,'fade') ? emulateTransitionEnd(modal, triggerHide) : triggerHide();
-      }, supportTransitions ? 150 : 0);
+      }());
     };
     this.setContent = function( content ) {
       queryElement('.'+component+'-content',modal)[innerHTML] = content;
@@ -1744,7 +1746,7 @@
   supports[push]( [ stringTooltip, Tooltip, '['+dataToggle+'="tooltip"]' ] );
 
 
-    
+
   /* Native Javascript for Bootstrap 4 | Initialize Data API
   --------------------------------------------------------*/
   var initializeDataAPI = function( constructor, collection ){
@@ -1762,8 +1764,8 @@
   // bulk initialize all components
   DOC[body] ? initCallback() : on( DOC, 'DOMContentLoaded', function(){ initCallback(); } );
 
-    return {
-      Alert: Alert,
+  return {
+    Alert: Alert,
     Button: Button,
     Carousel: Carousel,
     Collapse: Collapse,
@@ -1773,5 +1775,5 @@
     ScrollSpy: ScrollSpy,
     Tab: Tab,
     Tooltip: Tooltip
-    };
-  }));
+  };
+}));
diff --git a/dist/bootstrap-native-v4.min.js b/dist/bootstrap-native-v4.min.js