@talentsoft-opensource/uxp-themes
Version:
Talentsoft UX themes
149 lines (148 loc) • 6.19 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Utils_1 = require("./Utils");
var ScrollTo_1 = require("./ScrollTo");
var NavbarVertical = /** @class */ (function () {
/**
* Offset top detect top of Element
* @param offsetSpy {Number}
*/
function NavbarVertical(offsetSpy) {
this.$status = document.querySelector('.navbar-status--vertical');
this.$statusShowActive = document.querySelector('.navbar-status--showActive');
this.$itemsNavbarVertical = document.querySelectorAll('.navbar--vertical li');
var itemMenu = this.$itemsNavbarVertical[0];
this.heightItem = itemMenu.offsetHeight;
/**
* Catch the attribute href for ScrollTo
* @type {NodeList}
*/
this.$navigationItem = document.querySelectorAll('.navbar--vertical li a');
this.offsetToSpy = offsetSpy;
this.inScrolling = false;
if (this.$status) {
this.$status.style.height = this.heightItem + "px";
this.$status.style.transition = "all .5s";
}
if (this.$statusShowActive) {
this.$statusShowActive.style.height = this.heightItem + "px";
this.$statusShowActive.style.transition = "all .5s";
}
this.initEvents();
this.initScrollTo();
this.initScrollSpy();
}
/**
* Init all Events on the Menu Vertical
*/
NavbarVertical.prototype.initEvents = function () {
var _this = this;
/**
* Parse menu elements and attribute Events
*/
var nodelistToArray = Array.prototype.slice.call(this.$itemsNavbarVertical);
nodelistToArray.forEach(function ($el) {
/**
* @event mouseenter
*/
$el.addEventListener('mouseenter', function (event) {
if (_this.$status) {
_this.$status.style.transition = 'all .5s';
var index = Array.prototype.indexOf.call($el.parentNode.children, $el);
_this.$status.style.transform = "translateY(" + index * _this.heightItem + "px)";
}
});
/**
* @event mouseleave
*/
$el.addEventListener('mouseleave', function (event) {
if (_this.$status) {
var navbarVertical = document.querySelector('.navbar--vertical--active');
if (navbarVertical) {
var itemIsSelected = navbarVertical.parentElement;
if (itemIsSelected) {
var index = Array.prototype.indexOf.call(itemIsSelected.children, itemIsSelected);
_this.$status.style.transform = "translateY(" + index * _this.heightItem + "px)";
}
}
}
});
/**
* @event click
*/
$el.addEventListener('click', function (event) {
_this.animationMenu(event.currentTarget);
});
});
};
/**
* Create animation when i select the item menu
* @param eventTarget {Node}
*/
NavbarVertical.prototype.animationMenu = function (eventTarget) {
var navbarActive = document.querySelector('.navbar--vertical--active');
if (navbarActive)
navbarActive.classList.remove('navbar--vertical--active');
eventTarget.classList.add('navbar--vertical--active');
if (this.$status)
this.$status.style.transform = "translateY(" + eventTarget.offsetTop + "px)";
if (this.$statusShowActive)
this.$statusShowActive.style.transform = "translateY(" + eventTarget.offsetTop + "px)";
};
/**
* Allow to change item selected when i pass a section panel
*/
NavbarVertical.prototype.initScrollSpy = function () {
var _this = this;
var $sections = document.querySelectorAll('.panel');
var animMenu = function ($element) {
var idToGo = $element.getAttribute('id');
var $el = document.querySelector("a[href=\"#" + idToGo + "\"]");
if ($el)
_this.animationMenu($el.parentNode);
};
/**
* @event scroll
*/
window.addEventListener('scroll', Utils_1.utils.debounce(function () {
var sectionsToArray = Array.prototype.slice.call($sections);
sectionsToArray.forEach(function ($item, index) {
if ($item.getBoundingClientRect().top < $item.offsetHeight
&& $item.getBoundingClientRect().top < _this.offsetToSpy + 5) {
animMenu($item);
}
//
if (index === 0 && $item.getBoundingClientRect().top > _this.offsetToSpy + 5) {
animMenu($item);
}
});
}, 250));
};
/**
* Init ScrollTo
*/
NavbarVertical.prototype.initScrollTo = function () {
var _this = this;
var navigationItemToArray = Array.prototype.slice.call(this.$navigationItem);
navigationItemToArray.forEach(function ($el) {
/**
* @event click
*/
$el.addEventListener('click', function (event) {
event.preventDefault();
_this.inScrolling = true;
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
var idSection = event.currentTarget.getAttribute('href');
var section = document.querySelector("" + idSection);
var posTop = section && section.getBoundingClientRect().top || 0;
var scrollTo = (scrollPosition + posTop) - _this.offsetToSpy + 5;
ScrollTo_1.default((document.documentElement || document.body.parentNode || document.body), scrollTo, 600);
setTimeout(function () {
_this.inScrolling = false;
}, 600);
});
});
};
return NavbarVertical;
}());
exports.NavbarVertical = NavbarVertical;