I got a code in Jquery from finsweet hack#4 and need it in pure javascript, because no more room in before body because of character limits… (I need to put it in Embed code that accept only pure javascript.) Could you help me to translate this finsweet code in pure javascript ?
I’ve let the comments to make it easier.
ORIGINAL JQUERY CODE:
// when DOM's ready
$(document).ready(function() {
const linkTextArr = [];
// for each filter button
$('.navlink_button').each((index, link) => {
// get its text content and reformat to a valid ID
let linkText = $(link).text().replace(/\W/g,'_').toLowerCase();
// set the reformatted linkText as the link href attribute
$(link).attr('href', '#'+linkText);
// push reformatted linkText to array
linkTextArr.push(linkText);
});
// for each section
$('.hack4-cms-anchor-section').each((index, section) => {
$(section).attr('id', linkTextArr[index]);
});
// set up intrsection observer
let observer = new IntersectionObserver((entries, observer) => {
// for each anchor section
entries.forEach(entry => {
// if it's in the viewport
if(entry.isIntersecting){
$('.navlink_button.hack4-active').removeClass('hack4-active');
$(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');
}
});
// set thrshld to 1 ensures the whole anchor section
// is in viewport before adding active class to active link
}, {threshold: 0});
// start intersection observer for each anchor section
$('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) );
});
I tried to translate it like this, by replacing all the selectors:
// when DOM's ready
document.addEventListener('DOMContentLoaded', () => {
// create empty array that will store link text strings
const linkTextArr = [];
// for each filter button
document.querySelectorAll('.navlink_button').each((index, link) => {
// get its text content and reformat to a valid ID
let linkText = document.querySelector(link).text().replace(/\W/g,'_').toLowerCase();
// set the reformatted linkText as the link href attribute
document.querySelector(link).attr('href', '#'+linkText);
// push reformatted linkText to array
linkTextArr.push(linkText);
// console.log(linkText);
});
// for each section
// ex: hellosign > hellosign
document.querySelectorAll('.hack4-cms-anchor-section').each((index, section) => {
// set id attribute to linkTextArray value sequentially
// 1st section gets id: linkTextArr[0]
// 2nd section gets id: linkTextArr[1] and so on
document.querySelectorAll(section).attr('id', linkTextArr[index]);
});
// set up intrsctn obsrvr
// (navlnk btn highlight when on sectn)
// 2 observ whn th anchor sectns ar in viewport
let observer = new IntersectionObserver((entries, observer) => {
// for each anchor section
entries.forEach(entry => {
// if it's in the viewport
if(entry.isIntersecting){
// remov l'active class from current active link
document.querySelector('.navlink_button.hack4-active').removeClass('hack4-active');
// add the active class to the current active link
document.querySelector(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');
}
});
// set thrshld to 1 ensures the whole anchor section
// is in viewport before adding active class to active link
// this part ', {threshold: 1}' is optional
}, {threshold: 0});
// start intersection observer for each anchor section
document.querySelectorAll('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) );
});
But I don’t know how to translate this line with this #${ :
$(`.navlink_button[href='#${entry.target.id}']`).addClass('hack4-active');
after that can you tell me if there something else that is still jQuery on my translation attempt ?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)