Message from JavaScript discussions

November 2020

— Misan said once how gatsby is great, but probably changed mind since then, maybe i miss it with next or nuxt js, cant be sure

Message permanent page

— 

Hi, using Drupal, I have a slider where each slide has a specific different class (say "slide-1", "slide-2" and so on), plus the slider's own js rotates the active slider by applying the "current-slide" class.
I need to constantly (I mean not just once) get the specific class of the currently active slide and apply a corresponding specific class to another element, so each time the slide changes, the class of that other element changes to match it (when slide-1 is active, this element gets "active-1", and so on).
I'm no good at JS and after googling and tinkering, I applied an observer that is supposed to watch the slides' classes and do what I need, but the best I've achieved is adding the classes to that element, but I'm unable to remove them.

Any help?

Here's the full code:

jQuery(document).ready(function () {
var targetNode = document.querySelector("#slider .slide");
var config = {attributes: true};

var callback = function(mutationsList, observer) {
for (var mutation of mutationsList) {
if (mutation.type === 'attributes' && jQuery(mutation.target.classList.contains("current-slide"))) {
if(jQuery(mutation.target.classList.contains("slide-1"))) {
jQuery("body").addClass("test-1");
}
else {
jQuery("body").removeClass("test-1");
}
if(jQuery(mutation.target.classList.contains("slide-2"))) {
jQuery("body").addClass("test-2");
}
else {
jQuery("body").removeClass("test-2");
}
}
}
}

var observer = new MutationObserver(callback);
observer.observe(targetNode, config);

});

— Nextjs and Gatsby are based on React. And React is not a framework but library

— Exactly my point determin1st. Thanks grispire

— Agreed

— Assigning to object in order to do I/O is less than ideal

— Not exactly, "based on" doesn't always equal to another framework, it assumes a dependency... and ye, before making some huge shiny project it's good to resolve wording issues🤤

Message permanent page

— That "slider" used, how is it called? if it works in a standalone manner, grabbing node by name/id as you do, then your code-hack is correct, otherwise, grabbing slider object from the store and listening to it's events is the way

Message permanent page

— Slick Carousel for Drupal, how can I listen to its events?

— Drop a link to it's manual

— Anyone hiring a nodejs/react dev?

— Https://github.com/kenwheeler/slick/