Changes:

* fixed Dropdown nesting * bumped up version * added nested Dropdown example to V4
thednp · Jun 13, 2017 · 0aa7eed · 0aa7eed
1 parent 8329559
commit 0aa7eed
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 26 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap.native",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "homepage": "http://thednp.github.io/bootstrap.native/",
   "authors": [
     "dnp_theme"

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.10 | © dnp_theme | MIT-License
+// Native Javascript for Bootstrap 4 v2.0.11 | © dnp_theme | MIT-License
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
     // AMD support:
@@ -792,8 +792,8 @@
         if (isOpen && (e.which == 27 || e.keyCode == 27)) { relatedTarget = null; hide(); } // e.keyCode for IE8
       },
       clickHandler = function(e) {
-        var eventTarget = e[target], hasData;
-        hasData = ( eventTarget.nodeType !== 1 && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode][getAttribute](dataToggle)) );
+        var eventTarget = e[target],
+          hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
         if ( eventTarget === element || eventTarget === parent || eventTarget[parentNode] === element ) {
           e.preventDefault(); // comment this line to stop preventing navigation when click target is a link 
           relatedTarget = element;

diff --git a/dist/bootstrap-native-v4.min.js b/dist/bootstrap-native-v4.min.js
diff --git a/dist/bootstrap-native.js b/dist/bootstrap-native.js
@@ -1,4 +1,4 @@
-// Native Javascript for Bootstrap 3 v2.0.10 | © dnp_theme | MIT-License
+// Native Javascript for Bootstrap 3 v2.0.11 | © dnp_theme | MIT-License
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
     // AMD support:
@@ -949,14 +949,14 @@
         if (isOpen && (e.which == 27 || e.keyCode == 27)) { relatedTarget = null; hide(); } // e.keyCode for IE8
       },
       clickHandler = function(e) {
-        var eventTarget = e[target], hasData;
-        hasData = ( eventTarget.nodeType !== 1 && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode][getAttribute](dataToggle)) );
+        var eventTarget = e[target],
+          hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
         if ( eventTarget === element || eventTarget === parent || eventTarget[parentNode] === element ) {
           e.preventDefault(); // comment this line to stop preventing navigation when click target is a link 
           relatedTarget = element;
           self.toggle();
         } else if ( isOpen ) {
-          if ( (eventTarget === menu || children && children[indexOf](eventTarget) > -1) && ( self.persist || hasData ) ) {
+          if ( eventTarget === menu || children && children[indexOf](eventTarget) > -1 && (self.persist || hasData) ) {
             return;
           } else { relatedTarget = null; hide(); }
         }

diff --git a/dist/bootstrap-native.min.js b/dist/bootstrap-native.min.js
diff --git a/lib/V3/dropdown-native.js b/lib/V3/dropdown-native.js
@@ -25,14 +25,14 @@ var Dropdown = function( element, option ) {
       if (isOpen && (e.which == 27 || e.keyCode == 27)) { relatedTarget = null; hide(); } // e.keyCode for IE8
     },
     clickHandler = function(e) {
-      var eventTarget = e[target], hasData;
-      hasData = ( eventTarget.nodeType !== 1 && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode][getAttribute](dataToggle)) );
+      var eventTarget = e[target],
+        hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
       if ( eventTarget === element || eventTarget === parent || eventTarget[parentNode] === element ) {
         e.preventDefault(); // comment this line to stop preventing navigation when click target is a link 
         relatedTarget = element;
         self.toggle();
       } else if ( isOpen ) {
-        if ( (eventTarget === menu || children && children[indexOf](eventTarget) > -1) && ( self.persist || hasData ) ) {
+        if ( eventTarget === menu || children && children[indexOf](eventTarget) > -1 && (self.persist || hasData) ) {
           return;
         } else { relatedTarget = null; hide(); }
       }

diff --git a/lib/V4/dropdown-native.js b/lib/V4/dropdown-native.js
@@ -25,8 +25,8 @@ var Dropdown = function( element, option ) {
       if (isOpen && (e.which == 27 || e.keyCode == 27)) { relatedTarget = null; hide(); } // e.keyCode for IE8
     },
     clickHandler = function(e) {
-      var eventTarget = e[target], hasData;
-      hasData = ( eventTarget.nodeType !== 1 && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode][getAttribute](dataToggle)) );
+      var eventTarget = e[target],
+        hasData = eventTarget && (eventTarget[getAttribute](dataToggle) || eventTarget[parentNode] && eventTarget[parentNode][getAttribute](dataToggle));
       if ( eventTarget === element || eventTarget === parent || eventTarget[parentNode] === element ) {
         e.preventDefault(); // comment this line to stop preventing navigation when click target is a link 
         relatedTarget = element;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap.native",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "description": "Native Javascript for Bootstrap, the sweetest Javascript library without jQuery.",
   "main": "dist/bootstrap-native.js",
   "scripts": {

diff --git a/v4.html b/v4.html
@@ -34,6 +34,11 @@
         -webkit-transition-timing-function: cubic-bezier(.45,.18,0,1);
         transition-timing-function: cubic-bezier(.45,.18,0,1);
       }
+      .dropdown-menu .dropdown-menu {
+          top: -1px;
+          left: 100%;
+          margin: 0 0 0 3px;
+      }
 
       @media (max-width: 575px) {
         #myCarousel .container {
@@ -411,15 +416,41 @@ <h5 class="mb-0">
 
       <h2>Dropdown</h2>
       <div class="bd-example" data-example-id="">
-        <div class="dropdown">
-          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Dropdown button
-          </button>
-          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-            <a class="dropdown-item" href="#">Action</a>
-            <a class="dropdown-item" href="#">Another action</a>
-            <a class="dropdown-item" href="#">Something else here</a>
+
+        <div class="row">
+          <div class="" style="margin-right: 5px">
+            <div class="dropdown">
+              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Dropdown button
+              </button>
+              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                <a class="dropdown-item" href="#">Action</a>
+                <a class="dropdown-item" href="#">Another action</a>
+                <a class="dropdown-item" href="#">Something else here</a>
+              </div>
+            </div>
           </div>
+
+          <div>
+            <div class="dropdown">
+              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                Nested Dropdown
+              </button>
+              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
+                <a class="dropdown-item" href="#">Action</a>
+                <a class="dropdown-item" href="#">Another action</a>
+                <div class="dropdown">
+                  <a class="dropdown-item dropdown-toggle" href="#" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More</a>
+                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
+                    <a class="dropdown-item" href="#">The other action</a>
+                    <a class="dropdown-item" href="#">Different action</a>
+                    <a class="dropdown-item" href="#" >More soon</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
         </div>
       </div>
       <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>