Skip to content

Update main.js #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update main.js #20

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
187 changes: 77 additions & 110 deletions assets/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,174 +1,141 @@
/*==================== SHOW MENU ====================*/
/*==================== MENU TOGGLE ====================*/
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
navToggle.addEventListener('click', () =>{
navMenu.classList.add('show-menu')
})
}
navClose = document.getElementById('nav-close');

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
navClose.addEventListener('click', () =>{
navMenu.classList.remove('show-menu')
})
// Show Menu
if (navToggle) {
navToggle.addEventListener('click', () => navMenu.classList.add('show-menu'));
}

/*==================== REMOVE MENU MOBILE ====================*/
const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
const navMenu = document.getElementById('nav-menu')
// When we click on each nav__link, we remove the show-menu class
navMenu.classList.remove('show-menu')
// Hide Menu
if (navClose) {
navClose.addEventListener('click', () => navMenu.classList.remove('show-menu'));
}
navLink.forEach(n => n.addEventListener('click', linkAction))

/*==================== REMOVE MENU MOBILE ====================*/
const navLinks = document.querySelectorAll('.nav__link');
navLinks.forEach(link => link.addEventListener('click', () => navMenu.classList.remove('show-menu')));

/*==================== CHANGE BACKGROUND HEADER ====================*/
function scrollHeader(){
const header = document.getElementById('header')
// When the scroll is greater than 100 viewport height, add the scroll-header class to the header tag
if(this.scrollY >= 100) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
function scrollHeader() {
const header = document.getElementById('header');
this.scrollY >= 100 ? header.classList.add('scroll-header') : header.classList.remove('scroll-header');
}
window.addEventListener('scroll', scrollHeader)
window.addEventListener('scroll', scrollHeader);

/*==================== SWIPER DISCOVER ====================*/
let swiper = new Swiper(".discover__container", {
new Swiper(".discover__container", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
loop: true,
spaceBetween: 32,
coverflowEffect: {
rotate: 0,
},
})
coverflowEffect: { rotate: 0 }
});

/*==================== VIDEO ====================*/
/*==================== VIDEO PLAY/PAUSE ====================*/
const videoFile = document.getElementById('video-file'),
videoButton = document.getElementById('video-button'),
videoIcon = document.getElementById('video-icon')

function playPause(){
if (videoFile.paused){
// Play video
videoFile.play()
// We change the icon
videoIcon.classList.add('ri-pause-line')
videoIcon.classList.remove('ri-play-line')
}
else {
// Pause video
videoFile.pause();
// We change the icon
videoIcon.classList.remove('ri-pause-line')
videoIcon.classList.add('ri-play-line')

videoIcon = document.getElementById('video-icon');

const togglePlayPause = () => {
if (videoFile.paused) {
videoFile.play();
videoIcon.classList.replace('ri-play-line', 'ri-pause-line');
} else {
videoFile.pause();
videoIcon.classList.replace('ri-pause-line', 'ri-play-line');
}
}
videoButton.addEventListener('click', playPause)
};

function finalVideo(){
// Video ends, icon change
videoIcon.classList.remove('ri-pause-line')
videoIcon.classList.add('ri-play-line')
}
// ended, when the video ends
videoFile.addEventListener('ended', finalVideo)
videoButton.addEventListener('click', togglePlayPause);
videoFile.addEventListener('ended', () => {
videoIcon.classList.replace('ri-pause-line', 'ri-play-line');
});


/*==================== SHOW SCROLL UP ====================*/
function scrollUp(){
/*==================== SHOW SCROLL UP ====================*/
function scrollUp() {
const scrollUp = document.getElementById('scroll-up');
// When the scroll is higher than 200 viewport height, add the show-scroll class to the a tag with the scroll-top class
if(this.scrollY >= 200) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
this.scrollY >= 200 ? scrollUp.classList.add('show-scroll') : scrollUp.classList.remove('show-scroll');
}
window.addEventListener('scroll', scrollUp)
window.addEventListener('scroll', scrollUp);

/*==================== SCROLL SECTIONS ACTIVE LINK ====================*/
const sections = document.querySelectorAll('section[id]')
const sections = document.querySelectorAll('section[id]');

function scrollActive(){
const scrollY = window.pageYOffset
function scrollActive() {
const scrollY = window.pageYOffset;

sections.forEach(current =>{
const sectionHeight = current.offsetHeight
sections.forEach(current => {
const sectionHeight = current.offsetHeight;
const sectionTop = current.offsetTop - 50;
sectionId = current.getAttribute('id')
const sectionId = current.getAttribute('id');

if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
}else{
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
document.querySelector(`.nav__menu a[href*=${sectionId}]`).classList.add('active-link');
} else {
document.querySelector(`.nav__menu a[href*=${sectionId}]`).classList.remove('active-link');
}
})
});
}
window.addEventListener('scroll', scrollActive)
window.addEventListener('scroll', scrollActive);

/*==================== SCROLL REVEAL ANIMATION ====================*/
const sr = ScrollReveal({
distance: '60px',
duration: 2800,
// reset: true,
})

// reset: true, // Uncomment if you want to enable reset on scroll
});

sr.reveal(`.home__data, .home__social-link, .home__info,
.discover__container,
.experience__data, .experience__overlay,
.place__card,
.sponsor__content,
.footer__data, .footer__rights`,{
.footer__data, .footer__rights`, {
origin: 'top',
interval: 100,
})
});

sr.reveal(`.about__data,
.video__description,
.subscribe__description`,{
.subscribe__description`, {
origin: 'left',
})
});

sr.reveal(`.about__img-overlay,
.video__content,
.subscribe__form`,{
.subscribe__form`, {
origin: 'right',
interval: 100,
})
});

/*==================== DARK LIGHT THEME ====================*/
const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'ri-sun-line'
/*==================== DARK LIGHT THEME ====================*/
const themeButton = document.getElementById('theme-button');
const darkTheme = 'dark-theme';
const iconTheme = 'ri-sun-line';

// Previously selected topic (if user selected)
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')
// Get stored user theme preference
const selectedTheme = localStorage.getItem('selected-theme');
const selectedIcon = localStorage.getItem('selected-icon');

// We obtain the current theme that the interface has by validating the dark-theme class
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'ri-moon-line' : 'ri-sun-line'
// Get current theme
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light';
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'ri-moon-line' : 'ri-sun-line';

// We validate if the user previously chose a topic
// Apply previously selected theme and icon
if (selectedTheme) {
// If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
themeButton.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove'](iconTheme)
document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme);
themeButton.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove'](iconTheme);
}

// Activate / deactivate the theme manually with the button
// Toggle theme and icon
themeButton.addEventListener('click', () => {
// Add or remove the dark / icon theme
document.body.classList.toggle(darkTheme)
themeButton.classList.toggle(iconTheme)
// We save the theme and the current icon that the user chose
localStorage.setItem('selected-theme', getCurrentTheme())
localStorage.setItem('selected-icon', getCurrentIcon())
})
document.body.classList.toggle(darkTheme);
themeButton.classList.toggle(iconTheme);
// Save user's preference
localStorage.setItem('selected-theme', getCurrentTheme());
localStorage.setItem('selected-icon', getCurrentIcon());
});