Updated V4 to latest beta version:

* Tooltip and Popover updated
* Dropdown updated, thanks to @ctl for #145
* Documentation updates
* Version bump

README.md

@@ -23,8 +23,8 @@ $ bower install --save bootstrap.native
 
 ```html
 <!-- Using one of the CDN repositories-->
-<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.12/bootstrap-native.min.js"></script>
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native.min.js"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.13/bootstrap-native.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.13/bootstrap-native.min.js"></script>
 <!-- Using a local assets folder -->
 <script type="text/javascript" src="/assets/js/bootstrap-native.min.js"></script>
 <!-- Using Bower -->
@@ -35,8 +35,8 @@ $ bower install --save bootstrap.native
 
 ```html
 <!-- Using one of the CDN repositories-->
-<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.12/bootstrap-native-v4.min.js"></script>
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native-v4.min.js"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.13/bootstrap-native-v4.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.13/bootstrap-native-v4.min.js"></script>
 <!-- Using a local assets folder -->
 <script type="text/javascript" src="/assets/js/bootstrap-native-v4.min.js"></script>
 <!-- Using Bower -->
@@ -72,8 +72,8 @@ The components are developed with clean code mainly for modern browsers that nat
 
 ```html
 <!-- Using one of the CDN repositories-->
-<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.12/polyfill.min.js"></script>
-<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/polyfill.min.js"></script>
+<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.native/2.0.13/polyfill.min.js"></script>
+<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.13/polyfill.min.js"></script>
 <!-- Using a local assets folder -->
 <script type="text/javascript" src="/assets/js/polyfill.min.js"></script>
 <!-- Using Bower -->

assets/css/theme.css

@@ -28,6 +28,13 @@ h3:not(.popover-title) {
 
 hr.clearfix {clear: both; width: 100%; float: left}
 
+/* colors */
+.bg-bootstrap { background-color: #563d7c }
+.bg-pink { background-color: #E91E63 }
+.bg-indigo { background-color: #673ab7 }
+.bg-purple { background-color: #9c27b0 }
+.bg-red { background-color: #e51c23 }
+
 
 /* CONTENT STYLING
 -------------------------------------------------- */
@@ -113,6 +120,10 @@ p .btn, p .form-control {margin-bottom: 20px; vertical-align: top}
 .navbar-collapse.collapsing {overflow-y: hidden}
 
 .navbar-nav { float: none }
+.navbar-fixed-top { padding: .5rem 0; border:0 }
+
+.navbar-brand svg { display: inline-block; vertical-align:top; margin: -8px 5px 0 } 
+.navbar-brand span { display: inline-block; vertical-align:middle } 
 
 
 /* CUSTOMIZE THE CAROUSEL

bower.json

@@ -1,6 +1,6 @@
 {
  "name": "bootstrap.native",
- "version": "2.0.12",
+ "version": "2.0.13",
  "homepage": "http://thednp.github.io/bootstrap.native/",
  "authors": [
  "dnp_theme"

dist/bootstrap-native-v4.js

@@ -1,4 +1,4 @@
-// Native Javascript for Bootstrap 4 v2.0.12 | © dnp_theme | MIT-License
+// Native Javascript for Bootstrap 4 v2.0.13 | © dnp_theme | MIT-License
 (function (root, factory) {
  if (typeof define === 'function' && define.amd) {
  // AMD support:
@@ -244,27 +244,33 @@
  }
  },
  styleTip = function(link,element,position,parent) { // both popovers and tooltips
- var rect = link[getBoundingClientRect](), 
+ var rect = link[getBoundingClientRect](),
+ arrow = queryElement('.arrow',element),
+ arrowWidth = arrow[offsetWidth], isPopover = hasClass(element,'popover'),
  scroll = parent === body ? getScroll() : { x: parent[offsetLeft] + parent[scrollLeft], y: parent[offsetTop] + parent[scrollTop] },
  linkDimensions = { w: rect[right] - rect[left], h: rect[bottom] - rect[top] },
  elementDimensions = { w : element[offsetWidth], h: element[offsetHeight] };
 
  // apply styling to tooltip or popover
  if ( position === top ) { // TOP
- element[style][top] = rect[top] + scroll.y - elementDimensions.h + 'px';
+ element[style][top] = rect[top] + scroll.y - elementDimensions.h - ( isPopover ? arrowWidth : 0 ) + 'px'; // isPopover is trying to fix bug with V4beta CSS
  element[style][left] = rect[left] + scroll.x - elementDimensions.w/2 + linkDimensions.w/2 + 'px'
+ arrow[style][left] = elementDimensions.w/2 - arrowWidth/2 + 'px';
 
  } else if ( position === bottom ) { // BOTTOM
  element[style][top] = rect[top] + scroll.y + linkDimensions.h + 'px';
  element[style][left] = rect[left] + scroll.x - elementDimensions.w/2 + linkDimensions.w/2 + 'px';
+ arrow[style][left] = elementDimensions.w/2 - arrowWidth/2 + 'px';
 
  } else if ( position === left ) { // LEFT
  element[style][top] = rect[top] + scroll.y - elementDimensions.h/2 + linkDimensions.h/2 + 'px';
- element[style][left] = rect[left] + scroll.x - elementDimensions.w + 'px';
+ element[style][left] = rect[left] + scroll.x - elementDimensions.w - ( isPopover ? arrowWidth : 0 ) + 'px'; // isPopover is trying to fix bug with V4beta CSS
+ arrow[style][top] = elementDimensions.h/2 - arrowWidth/2 + 'px';
 
  } else if ( position === right ) { // RIGHT
  element[style][top] = rect[top] + scroll.y - elementDimensions.h/2 + linkDimensions.h/2 + 'px';
  element[style][left] = rect[left] + scroll.x + linkDimensions.w + 'px';
+ arrow[style][top] = elementDimensions.h/2 - arrowWidth/2 + 'px';
  }
  element.className[indexOf](position) === -1 && (element.className = element.className.replace(tipPositions,position));
  },
@@ -572,13 +578,7 @@
  clearInterval(timer);
  setActivePage( next );
 
- if ( supportTransitions && hasClass(element,'slide') 
- && ( // we now check if the media queries do actually filter out BS4 transitions
- globalObject.getComputedStyle(slides[next])[Transition[toLowerCase]()] 
- || globalObject.getComputedStyle(slides[next])[Webkit[toLowerCase]() + Transition]
- || globalObject.getComputedStyle(slides[next])[Webkit + Transition + 'Duration'] // old Safari stuff
- )
- ) {
+ if ( supportTransitions && hasClass(element,'slide') ) {
 
  addClass(slides[next],carouselItem +'-'+ orientation);
  slides[next][offsetWidth];
@@ -587,6 +587,7 @@
 
  one(slides[activeItem], transitionEndEvent, function(e) {
  var timeout = e[target] !== slides[activeItem] ? e.elapsedTime*1000 : 0;
+
  setTimeout(function(){
  isSliding = false;
 
@@ -602,7 +603,7 @@
  if ( !document.hidden && self[interval] && !hasClass(element,paused) ) {
  self.cycle();
  }
- },timeout);
+ },timeout+100);
  });
 
  } else {
@@ -805,6 +806,7 @@
  // private methods
  show = function() {
  bootstrapCustomEvent.call(parent, showEvent, component, relatedTarget);
+ addClass(menu,showClass);
  addClass(parent,showClass);
  menu[setAttribute](ariaExpanded,true);
  bootstrapCustomEvent.call(parent, shownEvent, component, relatedTarget);
@@ -813,6 +815,7 @@
  },
  hide = function() {
  bootstrapCustomEvent.call(parent, hideEvent, component, relatedTarget);
+ removeClass(menu,showClass);
  removeClass(parent,showClass);
  menu[setAttribute](ariaExpanded,false);
  bootstrapCustomEvent.call(parent, hiddenEvent, component, relatedTarget);
@@ -1172,21 +1175,26 @@
 
  popover = document.createElement(div);
 
+ // popover arrow
+ var popoverArrow = document.createElement(div);
+ popoverArrow[setAttribute](classString,'arrow');
+ popover.appendChild(popoverArrow);
+
  if ( contentString !== null && self[template] === null ) { //create the popover from data attributes
 
  popover[setAttribute]('role','tooltip');
 
  if (titleString !== null) {
  var popoverTitle = document.createElement('h3');
- popoverTitle[setAttribute](classString,component+'-title');
+ popoverTitle[setAttribute](classString,component+'-header');
 
  popoverTitle.innerHTML = self[dismissible] ? titleString + closeBtn : titleString;
  popover.appendChild(popoverTitle);
  }
 
  //set popover content
  var popoverContent = document.createElement(div);
- popoverContent[setAttribute](classString,component+'-content');
+ popoverContent[setAttribute](classString,component+'-body');
  popoverContent.innerHTML = self[dismissible] && titleString === null ? contentString + closeBtn : contentString;
  popover.appendChild(popoverContent);
 
@@ -1199,7 +1207,7 @@
  //append to the container
  self[container].appendChild(popover);
  popover[style].display = 'block';
- popover[setAttribute](classString, component+ ' ' + component+'-'+placementSetting + ' ' + self[animation]);
+ popover[setAttribute](classString, component+ ' bs-' + component+'-'+placementSetting + ' ' + self[animation]);
  },
  showPopover = function () {
  !hasClass(popover,showClass) && ( addClass(popover,showClass) );
@@ -1560,14 +1568,19 @@
  titleString = element[getAttribute](title) || element[getAttribute](dataOriginalTitle); // read the title again
  tooltip = document.createElement(div);
  tooltip[setAttribute]('role',component);
+
+ // tooltip arrow
+ var tooltipArrow = document.createElement(div);
+ tooltipArrow[setAttribute](classString,'arrow');
+ tooltip.appendChild(tooltipArrow);
 
  var tooltipInner = document.createElement(div);
  tooltipInner[setAttribute](classString,component+'-inner');
  tooltip.appendChild(tooltipInner);
  tooltipInner.innerHTML = titleString;
 
  self[container].appendChild(tooltip);
- tooltip[setAttribute](classString, component + ' ' + component+'-'+placementSetting + ' ' + self[animation]);
+ tooltip[setAttribute](classString, component + ' bs-' + component+'-'+placementSetting + ' ' + self[animation]);
  },
  updateTooltip = function () {
  styleTip(element,tooltip,placementSetting,self[container]);

dist/bootstrap-native.js

@@ -740,7 +740,7 @@
  slides[next][offsetWidth];
  addClass(slides[next],slideDirection);
  addClass(slides[activeItem],slideDirection);
- 
+
  one(slides[activeItem], transitionEndEvent, function(e) {
  var timeout = e[target] !== slides[activeItem] ? e.elapsedTime*1000 : 0;
  setTimeout(function(){
@@ -758,7 +758,7 @@
  if ( self[interval] && !hasClass(element,paused) ) {
  self.cycle();
  }
- },timeout);
+ },timeout+100);
  });
 
  } else {

index.html

@@ -39,15 +39,15 @@
  <!-- Just use it for all browsers on production websites. -->
 
  <!-- Native JavaScript for Bootstrap 3 Polyfill -->
- <!-- <script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.12/polyfill.min.js"></script> -->
+ <!-- <script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.13/polyfill.min.js"></script> -->
  <script src="./dist/polyfill.js"></script>
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <![endif]-->
 </head>
 <body>
  <div class="navbar-wrapper">
- <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+ <div class="navbar navbar-inverse navbar-fixed-top bg-bootstrap" role="navigation">
 
  <div class="navbar-header">
  <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar">
@@ -56,7 +56,12 @@
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
- <a href="https:/thednp/bootstrap.native/" data-toggle="tooltip" data-placement="bottom" class="navbar-brand" title="<b>Native JavaScript for Bootstrap</b><br>The sweetest Vanilla JavaScript library for everyone">Native JavaScript for Bootstrap</a>
+ <a href="https:/thednp/bootstrap.native/" data-toggle="tooltip" data-placement="bottom" class="navbar-brand" title="<b>Native JavaScript for Bootstrap</b><br>The sweetest Vanilla JavaScript library for everyone">
+ <svg class="d-inline-block align-top" width="36" height="36" viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title>
+ <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path>
+ </svg>
+ <span class="d-inline-block align-middle">Native JavaScript for Bootstrap</span>
+ </a>
  </div>
  <nav id="bs-navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
@@ -93,7 +98,7 @@
  </ol>
  <div class="carousel-inner">
  <div class="item active">
- <div class="item-bg" style="background-color: #5677fc;"></div>
+ <div class="item-bg bg-primary"></div>
  <div class="container">
  <div class="carousel-caption slide">
  <h2>A better way to Bootstrap</h2>
@@ -103,7 +108,7 @@ <h2>A better way to Bootstrap</h2>
  </div>
  </div>
  <div class="item">
- <div class="item-bg" style="background-color: #E91E63;"></div>
+ <div class="item-bg bg-pink"></div>
  <div class="container">
  <div class="carousel-caption">
  <h2>New to native JavaScript?</h2>
@@ -115,7 +120,7 @@ <h2>New to native JavaScript?</h2>
  </div>
  </div>
  <div class="item">
- <div class="item-bg" style="background-color: #673ab7;"></div>
+ <div class="item-bg bg-indigo"></div>
  <div class="container">
  <div class="carousel-caption">
  <h2>HTML5 inside</h2>
@@ -126,7 +131,7 @@ <h2>HTML5 inside</h2>
  </div>
  </div>
  <div class="item">
- <div class="item-bg" style="background-color: #9c27b0;"></div>
+ <div class="item-bg bg-purple"></div>
  <div class="container">
  <div class="carousel-caption">
  <h2>What's the fuzz?</h2>
@@ -136,7 +141,7 @@ <h2>What's the fuzz?</h2>
  </div>
  </div>
  <div class="item">
- <div class="item-bg" style="background-color: #e51c23;"></div>
+ <div class="item-bg bg-red"></div>
  <div class="container">
  <div class="carousel-caption">
  <h2>This was a <b>Carousel</b> example</h2>
@@ -191,9 +196,9 @@ <h3>Load from CDN</h3>
  and <a href="https://cdnjs.com/libraries/bootstrap.native">here</a> on cdnjs. Other <a href="https://www.google.com/search?q=bootstrap+native+cdn" target="_blank">CDN links</a> are also available.</p>
 
 <pre><code class="language-markup">&lt;!-- jsdelivr repo --&gt;
-&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.12/bootstrap-native.min.js"&gt;&lt;/script&gt;
+&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.13/bootstrap-native.min.js"&gt;&lt;/script&gt;
 &lt;!-- or cdnjs repo --&gt;
-&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.12/bootstrap-native.min.js"&gt;&lt;/script&gt;</code></pre>
+&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap.native/2.0.13/bootstrap-native.min.js"&gt;&lt;/script&gt;</code></pre>
 
  <p>As most of the scripts manipulate the DOM when ready, there is no need to include a <code>document.ready</code> like statement or link the script(s) in the <code>&lt;head&gt;</code>. We don't do that 
  with native JavaScript unless required by a special ocasion.</p>
@@ -229,7 +234,7 @@ <h3>Browser support</h3>
  <p>The Native JavaScript for Bootstrap comes with a dedicated <kbd>4Kb</kbd> polyfill we made called <em><a href="./assets/js/polyfill.js" target="_blank">polyfill.js</a></em> for IE8-IE11. Since most 
  of the legacy browsers don't cover support for the standardized <code>Event</code> the <em>polyfill.js</em> can be combined with HTML5 shims like so:</p>
 
-<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.12/polyfill.min.js"> &lt;/script>
+<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/bootstrap.native/2.0.13/polyfill.min.js"> &lt;/script>
 &lt;!--[if lt IE 9]>
  &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">&lt;/script>
 &lt;![endif]-->
@@ -3242,7 +3247,7 @@ <h3 class="visible-xs">Navigation</h3>
  <!-- highlighter -->
  <script src="./assets/js/prism.js" type="text/javascript"></script>
 
- <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.12/bootstrap-native.min.js"></script> now we have CDN -->
+ <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/2.0.13/bootstrap-native.min.js"></script> now we have CDN -->
  <!--<script type="text/javascript" src="./dist/bootstrap-native.min.js"></script>-->
  <script type="text/javascript" src="./dist/bootstrap-native.js"></script>
  <script type="text/javascript" src="./assets/js/scripts.js"></script>

lib/V3/carousel-native.js

@@ -156,7 +156,7 @@ var Carousel = function( element, options ) {
  addClass(slides[next],orientation);
  slides[next][offsetWidth];
  addClass(slides[next],slideDirection);
- addClass(slides[activeItem],slideDirection);
+ addClass(slides[activeItem],carouselItem +'-'+ slideDirection);
 
  one(slides[activeItem], transitionEndEvent, function(e) {
  var timeout = e[target] !== slides[activeItem] ? e.elapsedTime*1000 : 0;
@@ -175,7 +175,7 @@ var Carousel = function( element, options ) {
  if ( self[interval] && !hasClass(element,paused) ) {
  self.cycle();
  }
- },timeout);
+ },timeout+100);
  });
 
  } else {

lib/V4/carousel-native.js

@@ -152,13 +152,7 @@ var Carousel = function( element, options ) {
  clearInterval(timer);
  setActivePage( next );
 
- if ( supportTransitions && hasClass(element,'slide') 
- && ( // we now check if the media queries do actually filter out BS4 transitions
- globalObject.getComputedStyle(slides[next])[Transition[toLowerCase]()] 
- || globalObject.getComputedStyle(slides[next])[Webkit[toLowerCase]() + Transition]
- || globalObject.getComputedStyle(slides[next])[Webkit + Transition + 'Duration'] // old Safari stuff
- )
- ) {
+ if ( supportTransitions && hasClass(element,'slide') ) {
 
  addClass(slides[next],carouselItem +'-'+ orientation);
  slides[next][offsetWidth];
@@ -167,6 +161,7 @@ var Carousel = function( element, options ) {
 
  one(slides[activeItem], transitionEndEvent, function(e) {
  var timeout = e[target] !== slides[activeItem] ? e.elapsedTime*1000 : 0;
+
  setTimeout(function(){
  isSliding = false;
 
@@ -182,7 +177,7 @@ var Carousel = function( element, options ) {
  if ( !document.hidden && self[interval] && !hasClass(element,paused) ) {
  self.cycle();
  }
- },timeout);
+ },timeout+100);
  });
 
  } else {