Skip to content

Commit

Permalink
Changes:
Browse files Browse the repository at this point in the history
* removed some dependency on `shorter-js` for events and class manipulation
* code updates
  • Loading branch information
thednp committed Jun 18, 2020
1 parent ea29638 commit 5ddd6c9
Show file tree
Hide file tree
Showing 9 changed files with 109 additions and 180 deletions.
5 changes: 5 additions & 0 deletions demo/assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,11 @@ ul { list-style: inherit; list-style-position: inside; }
.hidden-xs {display: none;}
}

/* smooth scroll */
html {
scroll-behavior: smooth;
}

/* HERO */
.hero {
padding: 2rem 3rem;
Expand Down
4 changes: 2 additions & 2 deletions demo/src/js/navbar.min.js

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

98 changes: 31 additions & 67 deletions dist/js/navbar.esm.js
Original file line number Diff line number Diff line change
@@ -1,55 +1,25 @@
/*!
* Navbar.js v2.0.5 (http://thednp.github.io/navbar.js)
* Navbar.js v2.0.6 (http://thednp.github.io/navbar.js)
* Copyright 2016-2020 © thednp
* Licensed under MIT (https://github.com/thednp/navbar.js/blob/master/LICENSE)
*/
function on (element, event, handler, options) {
options = options || false;
element.addEventListener(event, handler, options);
}

function off (element, event, handler, options) {
options = options || false;
element.removeEventListener(event, handler, options);
}

function addClass(element,classNAME) {
element.classList.add(classNAME);
}

function removeClass(element,classNAME) {
element.classList.remove(classNAME);
}

function hasClass(element,classNAME) {
return element.classList.contains(classNAME)
}

var mouseHoverEvents = ('onmouseleave' in document) ? [ 'mouseenter', 'mouseleave'] : [ 'mouseover', 'mouseout' ];

var supportTransition = 'webkitTransition' in document.body.style || 'transition' in document.body.style;

var transitionDuration = 'webkitTransition' in document.body.style ? 'webkitTransitionDuration' : 'transitionDuration';

function getElementTransitionDuration (element) {
var duration = supportTransition ? window.getComputedStyle(element)[transitionDuration] : 0;
duration = parseFloat(duration);
function getElementTransitionDuration(element) {
var duration = supportTransition ? parseFloat(getComputedStyle(element)[transitionDuration]) : 0;
duration = typeof duration === 'number' && !isNaN(duration) ? duration * 1000 : 0;
return duration;
}

function queryElement (selector, parent) {
function queryElement(selector, parent) {
var lookUp = parent && parent instanceof Element ? parent : document;
return selector instanceof Element ? selector : lookUp.querySelector(selector);
}

function tryWrapper (fn,origin){
try{ fn(); }
catch(e){
console.error((origin + ": " + e));
}
}

function Navbar(target, options) {
options = options || {};
var self = this,
Expand All @@ -73,47 +43,48 @@ function Navbar(target, options) {
toggleSiblings,
delayDuration,
close = function (element, leave) {
if (hasClass(element,openClass)) {
removeClass(element, openClass);
if (element.classList.contains(openClass)) {
element.classList.remove(openClass);
if (leave) {
setTimeout(function () {
removeClass(element, openPosition);
element.classList.remove(openPosition);
element.isOpen = 0;
}, transitionDuration);
} else {
removeClass(element, openPosition);
element.classList.remove(openPosition);
element.isOpen = 0;
}
}
if (hasClass(element,openMobile)) {
removeClass(element,openMobile);
if (element.classList.contains(openMobile)) {
element.classList.remove(openMobile);
}
},
checkView = function() {
return firstToggle && getComputedStyle(firstToggle).display !== 'none' || window.innerWidth < breakpoint;
},
toggleEvents = function(action) {
action = action ? 'addEventListener' : 'removeEventListener';
Array.from(items).map(function (listItem) {
if (hasClass(listItem.lastElementChild,'subnav') ) {
action(listItem, mouseHoverEvents[0], enterHandler);
action(listItem, mouseHoverEvents[1], leaveHandler);
if (listItem.lastElementChild.classList.contains('subnav') ) {
listItem[action](mouseHoverEvents[0], enterHandler);
listItem[action](mouseHoverEvents[1], leaveHandler);
}
var toggleElement = listItem.getElementsByClassName(parentToggle)[0];
toggleElement && action(toggleElement, 'click', clickHandler);
toggleElement && toggleElement[action]( 'click', clickHandler);
});
navbarToggle && action(navbarToggle, 'click', clickHandler);
navbarToggle && navbarToggle[action]('click', clickHandler);
},
clickHandler = function(e) {
e.preventDefault();
var that = this, lookup, element;
if ( (e.target === that || that.contains(e.target)) ) {
element = that.closest('li') || that.closest('.navbar');
if ( !hasClass(element,openMobile) ) {
addClass(element,openMobile);
if ( !element.classList.contains(openMobile) ) {
element.classList.add(openMobile);
lookup = toggleSiblings ? element.parentNode.getElementsByTagName('LI') : element.getElementsByTagName('LI');
Array.from(lookup).map(function (x){ return x!==element && close(x); });
} else {
removeClass(element,openMobile);
element.classList.remove(openMobile);
}
}
},
Expand All @@ -122,8 +93,8 @@ function Navbar(target, options) {
clearTimeout(that.timer);
if (!that.isOpen && !checkView() ) {
that.timer = setTimeout(function(){
addClass(that,openPosition);
addClass(that,openClass);
that.classList.add(openPosition);
that.classList.add(openClass);
that.isOpen = 1;
Array.from(that.parentNode.getElementsByTagName('LI'))
.map(function (x) { return x !== that && close(x); });
Expand All @@ -138,7 +109,7 @@ function Navbar(target, options) {
}
};
this.dispose = function() {
toggleEvents(off);
toggleEvents();
delete menu.Navbar;
};
menu = queryElement(target);
Expand All @@ -157,25 +128,18 @@ function Navbar(target, options) {
breakpoint = !isNaN(breakpointOption) ? breakpointOption : dataBreakpoint && !isNaN(dataBreakpoint) ? parseInt(dataBreakpoint) : 768;
toggleSiblings = !!toggleSiblingsOption ? toggleSiblingsOption : dataToggleSiblings && dataToggleSiblings === 'true' ? 1 : 0;
delayDuration = !isNaN(delayOption) ? delayOption : dataDelay && !isNaN(dataDelay) ? parseInt(dataDelay) : 500;
toggleEvents(on);
toggleEvents(1);
menu.Navbar = self;
}

function one (element, event, handler, options) {
on(element, event, function handlerWrapper(e){
if (e.target === element) {
handler(e);
off(element, event, handlerWrapper, options);
}
}, options);
}

function initComponent() {
tryWrapper(function (){
var Navbars = Array.from(document.querySelectorAll('[data-function="navbar"]'));
Navbars.map(function (x){ return new Navbar(x); });
},'Navbar');
function initComponent(lookup) {
lookup = lookup ? lookup : document;
var Navbars = Array.from(lookup.querySelectorAll('[data-function="navbar"]'));
Navbars.map(function (x){ return new Navbar(x); });
}
document.body ? initComponent() : one(document, 'DOMContentLoaded', initComponent);
document.body ? initComponent() : document.addEventListener( 'DOMContentLoaded', function iniWrapper(){
initComponent();
document.removeEventListener( 'DOMContentLoaded', iniWrapper );
});

export default Navbar;
4 changes: 2 additions & 2 deletions dist/js/navbar.esm.min.js

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

Loading

0 comments on commit 5ddd6c9

Please sign in to comment.