Skip to content

Commit

Permalink
Improved dropdown-menu
Browse files Browse the repository at this point in the history
* removed the delay from `.close()` method
* removed the previously added `.getClosest()` method
* improved the `.handle()` method
* added support for nested dropdowns
thednp committed May 11, 2016
1 parent a5d6018 commit f62079c
Showing 6 changed files with 43 additions and 73 deletions.
39 changes: 9 additions & 30 deletions assets/js/minifill.js
Original file line number Diff line number Diff line change
@@ -5,6 +5,15 @@ if (!this.Document){this.Document = this.HTMLDocument; }
// Element
if (!window.HTMLElement) { window.HTMLElement = window.Element; }

// Window
(function(global) {
if (global.constructor) {
global.Window = global.constructor;
} else {
(global.Window = global.constructor = new Function('return function Window() {}')()).prototype = this;
}
}(this));

// Date.now
if(!Date.now){ Date.now = function now() { return new Date().getTime(); }; }

@@ -162,36 +171,6 @@ if (!('getComputedStyle' in window)) {
})();
}

// requestAnimationFrame
if (!window.requestAnimationFrame) {

var lastTime = Date.now();
window.requestAnimationFrame = function (callback) {
'use strict';
if (typeof callback !== 'function') {
throw new TypeError(callback + 'is not a function');
}

var currentTime = Date.now(),
delay = 16 + lastTime - currentTime;

if (delay < 0) { delay = 0; }

lastTime = currentTime;

return setTimeout(function () {
lastTime = Date.now();

callback(performance.now());
}, delay);
};

window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}


// Event
if (!window.Event||!Window.prototype.Event) {
(function (){
29 changes: 10 additions & 19 deletions dist/bootstrap-native.js
Original file line number Diff line number Diff line change
@@ -909,19 +909,21 @@
var self = this;

this.handle = function(e) { // fix some Safari bug with <button>
var target = e.target || e.currentTarget, closest = self.getClosest(target,'.dropdown-menu');

var target = e.target || e.currentTarget,
children = [], c = self.menu.parentNode.getElementsByTagName('*');
for ( var i=0, l = c.length||0; i<l; i++) { l && children.push(c[i]); }

if ( target === self.menu || target.parentNode === self.menu ) {
self.toggle(e);
} else if (closest && closest === self.menu.parentNode.querySelector('.dropdown-menu') ) {
} else if ( children && children.indexOf(target) > -1 ) {
return;
} else { self.close(200); }
} else { self.close(); }
/\#$/g.test(target.href) && e.preventDefault();
}

this.toggle = function(e) {
if (/open/.test(this.menu.parentNode.className)) {
this.close(0);
this.close();
document.removeEventListener('keydown', this.key, false);
} else {
this.menu.parentNode.className += ' open';
@@ -934,20 +936,9 @@
if (e.which == 27) {self.close(0);}
}

this.close = function(t) {
setTimeout(function() { // links inside dropdown-menu don't fire without a short delay
self.menu.parentNode.className = self.menu.parentNode.className.replace(' open','');
self.menu.setAttribute('aria-expanded',false);
}, t);
}

this.getClosest = function (el, s) { //el is the element and s the selector of the closest item to find
// source http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
var f = s.charAt(0);
for ( ; el && el !== document; el = el.parentNode ) {// Get closest match
if ( el.querySelector(s) ) { return el.querySelector(s); }
}
return false;
this.close = function() {
self.menu.parentNode.className = self.menu.parentNode.className.replace(' open','');
self.menu.setAttribute('aria-expanded',false);
}
}
}
4 changes: 2 additions & 2 deletions dist/bootstrap-native.min.js

Large diffs are not rendered by default.

21 changes: 14 additions & 7 deletions index.html
Original file line number Diff line number Diff line change
@@ -43,7 +43,7 @@
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<body>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-default navbar-static-top" role="navigation">
@@ -375,15 +375,22 @@ <h3>Dropdown</h3>
</li>
<li class="dropdown">
<a id="drop2" href="#" class="dropdown-toggle" data-toggle="dropdown" data-trigger="mouseover" aria-haspopup="true" role="button" aria-expanded="false">
Dropdown
Nested
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.cn" target="_blank">External link</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown">
<a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Go deeper <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Crazy Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nested Menu</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Other stuff</a></li>
</ul>
</li>
</ul>
</li>
</ul>
21 changes: 7 additions & 14 deletions lib/dropdown-native.js
Original file line number Diff line number Diff line change
@@ -41,15 +41,17 @@
var self = this;

this.handle = function(e) { // fix some Safari bug with <button>
var target = e.target || e.currentTarget, closest = self.getClosest(target,'.dropdown-menu');

var target = e.target || e.currentTarget,
children = [], c = self.menu.parentNode.getElementsByTagName('*');
for ( var i=0, l = c.length||0; i<l; i++) { l && children.push(c[i]); }

if ( target === self.menu || target.parentNode === self.menu ) {
self.toggle(e);
} else if (closest && closest === self.menu.parentNode.querySelector('.dropdown-menu') ) {
} else if ( children && children.indexOf(target) > -1 ) {
return;
} else { self.close(200); }
} else { self.close(); }
/\#$/g.test(target.href) && e.preventDefault();
}
}

this.toggle = function(e) {
if (/open/.test(this.menu.parentNode.className)) {
@@ -72,15 +74,6 @@
self.menu.setAttribute('aria-expanded',false);
}, t);
}

this.getClosest = function (el, s) { //el is the element and s the selector of the closest item to find
// source http://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/
var f = s.charAt(0);
for ( ; el && el !== document; el = el.parentNode ) {// Get closest match
if ( el.querySelector(s) ) { return el.querySelector(s); }
}
return false;
}
}
}

2 changes: 1 addition & 1 deletion lib/min/dropdown-native.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit f62079c

Please sign in to comment.