componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
smoothScroll.init({
speed: 1000,
offset: 40
});
gumShoe.init({
offset: 0
});
}
ready(function () {
smoothScroll.init({
easing: 'easeInOutCubic',
speed: 600
})
/* Contact Form */
var contactForm = document.getElementById('contact-form')
var button = document.getElementById('btn-send')
var baseURL = 'https://formspree.io/luislacruz.dev@gmail.com'
contactForm.addEventListener('submit', function (event) {
event.preventDefault()
loadingButton(true)
axios({
method: 'POST',
url: baseURL,
data: new FormData(contactForm),
responseType: 'json',
})
.then(function (response) {
loadingButton(false)
notify.success({
title: 'OK',
message: 'Email enviado exitosamente.',
});
// clean form
event.target.reset()
})
.catch(function (error) {
loadingButton(false)
notify.error({
title: 'Oops',
message: 'Ocurrio un error en el servidor, intente otra vez',
})
})
})
function loadingButton (boolean) {
if (boolean) {
button.innerHTML = 'Enviando...'
button.disabled = true
} else {
button.innerHTML = 'Enviar'
button.disabled = false
}
}
})
import './styles/index.scss';
import 'waypoints/lib/noframework.waypoints';
import smoothScroll from 'smooth-scroll';
smoothScroll.init();
import Animated from './js/animated';
import Modal from './js/modal';
import Navigation from './js/navigation';
import ScrollTopButton from './js/scroll-top-button';
import Statistics from './js/statistics';
import Portfolio from './js/portfolio';
document.querySelectorAll('[data-animated]').forEach(element => new Animated(element));
document.querySelectorAll('[role="modal"]').forEach(element => new Modal(element));
new ScrollTopButton(document.querySelector('.hwd-scroll-top-btn'));
new Navigation(document.getElementById('navigation-menu'));
new Statistics(document.getElementById('statistics'));
new Portfolio(document.getElementById('portfolio'));
(function () {
var FastClick = require('fastclick');
var responsiveNav = require('responsive-nav');
var smoothScroll = require('smooth-scroll');
"use strict";
if(document.querySelector(".nav-collapse")){
// Feature test to rule out some older browsers
if ("querySelector" in document && "addEventListener" in window) {
// forEach method, that passes back the stuff we need
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]);
}
};
// Attach FastClick to remove the 300ms tap delay
FastClick(document.body);
// Init smooth scrolling
smoothScroll.init();
// Init Responsive Nav
var navigation = responsiveNav(".nav-collapse", {
// Close the navigation when it's tapped
closeOnNavClick: true
});
// Create a Mask
var mask = document.createElement("div");
mask.className = "mask";
// Append the mask inside <body>
document.body.appendChild(mask);
// Disable mask transitions on Android to boost performance
if (navigator.userAgent.match(/Android/i) !== null) {
document.documentElement.className += " android";
}
// Find navigation links and save a reference to them
var nav = document.querySelector(".nav-collapse ul"),
links = nav.querySelectorAll("a");
// "content" will store all the location cordinates
var content;
// Set up an array of locations which we store in "content"
var setupLocations = function () {
content = [];
forEach(links, function (i, el) {
var href = links[i].getAttribute("href").replace("#", "");
console.log(href);
if (href) {
content.push(document.getElementById(href).offsetTop + 200);
}
});
};
// call locations set up once
setupLocations();
// Re-calculate locations on window resize and orientation change
window.addEventListener("resize", function () {
setupLocations();
}, false);
// Highlight active link on the navigation
var selectActiveMenuItem = function (i) {
forEach(links, function (i, el) {
links[i].parentNode.className = "";
});
links[i].parentNode.className = "active";
};
// Highlight active link when scrolling
var wasNavigationTapped = false;
window.addEventListener("scroll", function () {
// Determine viewport and body size
var top = window.pageYOffset,
bodyheight = document.body.offsetHeight,
viewport = window.innerHeight;
// For each content link, when it's in viewport, highlight it
if (!wasNavigationTapped) {
forEach(content, function (i, loc) {
if ((loc > top && (loc < top + 300 || (top + viewport) >= bodyheight))) {
selectActiveMenuItem(i);
}
});
}
}, false);
// Close navigation when tapping the mask under it
mask.addEventListener("click", function (e) {
e.preventDefault();
navigation.close();
}, false);
// Clear wasNavigationTapped check after scrolling
var clearTapCheck = function () {
setTimeout(function () {
wasNavigationTapped = false;
}, 500);
};
// Select the right navigation item when tapping the logo
document.querySelector(".logo").addEventListener("click", function (e) {
e.preventDefault();
wasNavigationTapped = true;
// Select first navigation item
selectActiveMenuItem(0);
// Close navigation
navigation.close();
// Remove hash from the URL if pushState is supported
if (history.pushState) {
history.pushState("", document.title, window.location.pathname);
}
// Clear wasNavigationTapped check
clearTapCheck();
}, false);
// When a navigation item is tapped, select it and begin scrolling
forEach(links, function (i, el) {
links[i].addEventListener("click", function (e) {
e.preventDefault();
wasNavigationTapped = true;
// Select right navigation item (we are passing which one to select "i")
selectActiveMenuItem(i);
// Show the URL of the section on the address bar
var thisID = this.getAttribute("href").replace("#", ""),
pane = document.getElementById(thisID);
// If the URL isn't "#home", change it
if (thisID !== "home") {
pane.removeAttribute("id");
location.hash = "#" + thisID;
pane.setAttribute("id", thisID);
// If the URL is "#home", remove hash from the URL
} else {
if (history.pushState) {
history.pushState("", document.title, window.location.pathname);
}
}
// Clear wasNavigationTapped check
clearTapCheck();
}, false);
});
}
}
})();
});
/**
* Initializations
*/
new Sidebar('sidebar', {
translate: 'page-content',
openButtonId: 'open-sidebar',
closeButtonId: 'close-sidebar'
});
const portfolioModal = new Modal('modal-portfolio');
smoothScroll.init({
speed: 800,
easing: 'easeInOutCubic'
});
gumshoe.init({
activeClass: 'c-navigation__item--is-active',
offset: 50
});
new ContactForm('contact-form');
/**
* Event listeners
*/
// Dynamically add files for faster load time.
document.body.onload = function () {