Skip to content
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

Improves #46

Merged
merged 2 commits into from
Sep 24, 2024
Merged

Improves #46

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f9d7d02
Update script.js
reisene Sep 24, 2024
a2e0df2
Update script.js
reisene Sep 24, 2024
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
315 changes: 145 additions & 170 deletions public_html/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,212 +1,187 @@
/**+
* This function initializes the website's functionality, including://+
* - AOS (Animate On Scroll) initialization//+
* - Menu toggle functionality//+
* - Close menu when clicked outside//+
* - Adjust menu icons on window resize//+
* - Add 'active' class to the current menu item//+
* - Smooth scroll functionality for navigation links//+
* - Sticky header and menu functionality//+
* - Logo scaling and header padding adjustment on scroll//+
* - Update page title with a site-specific suffix//+
* - Scroll to top button functionality//+
* - Scroll animations with Intersection Observer//+
* - Service worker registration for offline support//+
* - Function to check if an element is in view//+
* - Tawk.to chat script initialization//+
* - Google Analytics tracking code initialization//+

* @returns {void}//+
*///+
/**

Check failure on line 1 in public_html/js/script.js

View check run for this annotation

Codeac.io / Codeac Code Quality 

Parsing error: No Babel config file detected for /tmp/commit-1255161-eslint/public_html/js/script.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.
* Initializes various functionalities on the webpage.
*
* @returns {void}
*/
$(document).ready(function () {
// Inicjalizacja AOS
// Initialize AOS
AOS.init({
duration: 1200,
duration: 1200,
});


// Menu toggle functionality
const menu = $('nav.menu ul');
const menuToggle = $('.menu-toggle');
const menuIcon = $('.menu-icon');
const closeIcon = $('.close-icon');

// Przełączanie menu

menuToggle.click(function () {
if (!menu.hasClass('active')) {
menu.addClass('active').css('animation', 'menu-opacityup 0.2s ease-in-out forwards');
} else {
menu.css('animation', 'menu-opacitydown 0.2s ease-in-out forwards');
setTimeout(function () {
menu.removeClass('active');
}, 200); // Dopasuj do czasu trwania animacji
}
menuIcon.toggle();
closeIcon.toggle();
if (!menu.hasClass('active')) {
menu.addClass('active').css('animation', 'menu-opacityup 0.2s ease-in-out forwards');
} else {
menu.css('animation', 'menu-opacitydown 0.2s ease-in-out forwards');
setTimeout(function () {
menu.removeClass('active');
}, 200); // Adjust to animation duration
}
menuIcon.toggle();
closeIcon.toggle();
});

// Zamknięcie menu po kliknięciu poza nim
// Close menu when clicked outside
$(document).click(function (event) {
if (!menu.is(event.target) && menu.has(event.target).length === 0 &&
!menuToggle.is(event.target) && menuToggle.has(event.target).length === 0 && menu.hasClass('active')) {
menu.css('animation', 'menu-opacitydown 0.2s ease-in-out forwards');
setTimeout(function () {
menu.removeClass('active');
closeIcon.hide();
if ($(window).width() <= 768) {
menuIcon.show();
}
}, 200); // Dopasuj do czasu trwania animacji
}
if (!menu.is(event.target) && menu.has(event.target).length === 0 &&
!menuToggle.is(event.target) && menuToggle.has(event.target).length === 0 && menu.hasClass('active')) {
menu.css('animation', 'menu-opacitydown 0.2s ease-in-out forwards');
setTimeout(function () {
menu.removeClass('active');
closeIcon.hide();
if ($(window).width() <= 768) {
menuIcon.show();
}
}, 200); // Adjust to animation duration
}
});

// Dostosowanie ikon menu przy zmianie rozmiaru okna
// Adjust menu icons based on window size
$(window).resize(function () {
if ($(window).width() > 768) {
menuIcon.hide();
closeIcon.hide();
} else if (!menu.hasClass('active')) {
menuIcon.show();
}
if ($(window).width() > 768) {
menuIcon.hide();
closeIcon.hide();
} else if (!menu.hasClass('active')) {
menuIcon.show();
}
});

// Add 'active' class to the current menu item
var currentUrl = window.location.href;
var baseUrl = window.location.origin; // Get the base URL, e.g., "http://127.0.0.1:5500" or "http://moja-domena.pl"

const currentUrl = window.location.href;
const baseUrl = window.location.origin; // Get the base URL
$('nav.menu ul li a').each(function () {
var linkUrl = this.href;

// Check if the link is to the homepage
if (linkUrl === currentUrl ||
(linkUrl === baseUrl + '/' && currentUrl === baseUrl + '/') ||
(linkUrl === baseUrl + '/index.html' && (currentUrl === baseUrl + '/' || currentUrl === baseUrl + '/index.html'))) {
$(this).parent().addClass('active');
}
const linkUrl = this.href;
// Check if the link is to the homepage
if (linkUrl === currentUrl ||
(linkUrl === baseUrl + '/' && currentUrl === baseUrl + '/') ||
(linkUrl === baseUrl + '/index.html' && (currentUrl === baseUrl + '/' || currentUrl === baseUrl + '/index.html'))) {
$(this).parent().addClass('active');
}
});

// Smooth scroll functionality for navigation links
$('.smooth-scroll').click(function (e) {
e.preventDefault();
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 800);
e.preventDefault();
const target = $(this).attr('href');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 800);
});

// Dodajemy obsługę sticky headera i menu
// Sticky header and menu
const stickyHeader = $('header');
const stickyMenu = $('nav.menu');
const sticky = stickyHeader.offset().top;
const logo = $('.header-left img'); // Select your logo image

function makeSticky() {
const scrollTop = $(window).scrollTop();

// Sticky header and menu
if (scrollTop > sticky) {
stickyHeader.addClass('sticky');
stickyMenu.addClass('sticky');
} else {
stickyHeader.removeClass('sticky');
stickyMenu.removeClass('sticky');
}

// Logo and header scaling
const maxLogoScale = 150; // Original width
const minLogoScale = 100; // Reduced width in sticky state
const maxScroll = 300; // Adjust this value to set when the scaling stops

let logoWidth = maxLogoScale - (scrollTop / maxScroll) * (maxLogoScale - minLogoScale);
if (logoWidth < minLogoScale) logoWidth = minLogoScale;
logo.css('width', logoWidth + 'px');

const maxPadding = 10; // Original padding top/bottom
const minPadding = 5; // Reduced padding in sticky state

let headerPadding = maxPadding - (scrollTop / maxScroll) * (maxPadding - minPadding);
if (headerPadding < minPadding) headerPadding = minPadding;
stickyHeader.css('padding', headerPadding + 'px 20px');
}

const scrollTop = $(window).scrollTop();
const stickyClass = scrollTop > sticky ? 'sticky' : '';
stickyHeader.addClass(stickyClass);
stickyMenu.addClass(stickyClass);

// Logo and header scaling
const maxLogoScale = 150; // Original width
const minLogoScale = 100; // Reduced width in sticky state
const maxScroll = 300; // Adjust this value to set when the scaling stops

let logoWidth = maxLogoScale - (scrollTop / maxScroll) * (maxLogoScale - minLogoScale);
if (logoWidth < minLogoScale) logo Width = minLogoScale;
logo.css('width', logoWidth + 'px');

const maxPadding = 10; // Original padding top/bottom
const minPadding = 5; // Reduced padding in sticky state

let headerPadding = maxPadding - (scrollTop / maxScroll) * (maxPadding - minPadding);
if (headerPadding < minPadding) headerPadding = minPadding;
stickyHeader.css('padding', headerPadding + 'px 20px');
}

$(window).scroll(makeSticky);

// Pobrano tytuł strony z elementu title
var originalTitle = document.title;

// Dodano część tytułu, która pojawia się na każdej stronie
var siteName = " - HulajDusza serwis hulajnóg elektrycznych";

// Aktualizacja tytułu strony

// Page title modification
const originalTitle = document.title;
const siteName = " - HulajDusza serwis hulajnóg elektrycznych";
document.title = originalTitle + siteName;

// Scroll to top button functionality
const mybutton = $("#scrollToTopBtn");

const scrollToTopBtn = $("#scrollToTopBtn");
$(window).scroll(function () {
if ($(this).scrollTop() > 20) {
mybutton.addClass("show");
} else {
mybutton.removeClass("show");
}
if ($(this).scrollTop() > 20) {
scrollToTopBtn.addClass("show");
} else {
scrollToTopBtn.removeClass("show");
}
});

mybutton.click(function () {
$('html, body').animate({
scrollTop: 0
}, 'smooth');
scrollToTopBtn.click(function () {
$('html, body').animate({
scrollTop: 0
}, 'smooth');
});

// Scroll animations with Intersection Observer
const scrollElements = $('.fade-in');

const observerOptions = {
threshold: 0.25
threshold: 0.25
};

const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
$(entry.target).addClass('visible');
observer.unobserve(entry.target);
}
});
entries.forEach(entry => {
if (entry.isIntersecting) {
$(entry.target).addClass('visible');
observer.unobserve(entry.target);
}
});
}, observerOptions);

scrollElements.each(function () {
observer.observe(this);
observer.observe(this);
});
});

if ('serviceWorker' in navigator) {
window.addEventListener('load', registerServiceWorker);
}

function registerServiceWorker() {
const swUrl = '/js/service-worker.js';
navigator.serviceWorker
.register(swUrl)
.then(({ scope }) => console.log(`ServiceWorker registration successful with scope: ${scope}`))
.catch((error) => console.error(`ServiceWorker registration failed: ${error}`));
}

function isElementInView(element) {
const rect = element.getBoundingClientRect();
return (

// Service worker registration
if ('serviceWorker' in navigator) {
window.addEventListener('load', registerServiceWorker);
}

function registerServiceWorker() {
const swUrl = '/js/service-worker.js';
navigator.serviceWorker
.register(swUrl)
.then(({ scope }) => console.log(`ServiceWorker registration successful with scope: ${scope}`))
.catch((error) => console.error(`ServiceWorker registration failed: ${error}`));
}

// Element visibility check
function isElementInView(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

// Tawk.to Script
var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
(function(){
var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
s1.async = true;
s1.src = 'https://embed.tawk.to/66ae13d81601a2195ba058ee/1i4bvr1p7';
s1.charset = 'UTF-8'; //charset depreciated, only for compatibility
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})();

myUndefinedFunction();
);
}

// Tawk.to Script
var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
(function(){
var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
s1.async = true;
s1.src = 'https://embed.tawk.to/66ae13d81601a2195ba058ee/1i4bvr1p7';
s1.charset = 'UTF-8'; //charset depreciated, only for compatibility
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})();
});
Loading