[SOLVED]Slider text manipulation

Design help Custom code
17

Hi, @anthonysalamin I had now time to look into MutationObserver and I have to thank you to point me in the right direction. It took me almost 2 days (I know :nerd_face: ) to get it to work. Lots of reading, trial-fails in DevTools but finally I’m there. I would like to share my code as an example if someone will need it.

Basic Idea was to have slider text shifted out over the slide. In the first place I was able to HACK it with CSS it works fine but it wasn’t a clean job. More importantly, I had a bad time with responsiveness, but I make It. So yesterday I sat in front of the computer and start “observing” what a MutationObserver can do for me. It’s a great tool I have to say now.

STRUCTURE

I have div that contain heading and slider. This div is set to relative to be able to set my heading in absolute position inside this div. Inside of each slide is an image and heading(can be text element).

OBSERVER
I would not go to detail as there are lots of resources to read about what and how.

  1. first I have to grab the slider mask, as it contains all slides and element outside the slide where slide text will be placed.

const slideHeaderOut = document.querySelector("#slide-text");
const slider = document.querySelector(".fds-top-slider__mask");
  1. then I have set what I want to observe. In this case, I need to check for changes a subtree of main element [mask], I need to check for attributes but only for class and aria-hidden 
const observerOptions = {
  subtree: true,
  attributes: true,
  attributeFilter: ["class", "aria-hidden"],
};
  1. create a new instance of MutationObserver and add a function that will process data the way I need. Here I will place comments inside the code.

Here I have choose slides instead mutations for better understanding

// setting a new instance of observer and set name for passed arguments to  `slides`
const slideObserver = new MutationObserver(function(slides) {
// loop to go over the each element in slides
  slides.forEach(function(slide) {
// Observer specific condition
    if (slide.type == "attributes") {

// NOW most important is this condition
// check if element has specific `class` as there are also arrows and I need only slides 
// AND check that `aria-hidden` is not present attribute on this element
      if (slide.target.classList.contains("w-slide") && !slide.target.hasAttribute('aria-hidden')) {
// get text from slider
          const sliderText = slide.target.innerText;
// place this text into element outside of slider
          slideHeaderOut.innerText = sliderText
      } else {
// whatever yo need to do 
        console.log('aria-hidden is true') 
      }      
    }
  });
});
  1. finally start observing
slideObserver.observe(slider, observerOptions);

Here is a full code without any comments


const slideHeaderOut = document.querySelector("#slide-text");
const slider = document.querySelector(".fds-top-slider__mask");

const observerOptions = {
  subtree: true,
  attributes: true,
  attributeFilter: ["class", "aria-hidden"],
};

const slideObserver = new MutationObserver(function (mutations) {
  mutations.forEach(function (mutation) {
    if (mutation.type == "attributes") {
      if (
        mutation.target.classList.contains("w-slide") &&
        !mutation.target.hasAttribute("aria-hidden")
      ) {
        const sliderText = mutation.target.innerText;
        slideHeaderOut.innerText = sliderText;
      } else {
        // whatewer you need
        console.log("aria-hidden is true");
      }
    }
  });
});

slideObserver.observe(slider, observerOptions);

So here we go. I still have to learn more to get understanding the whole power of MutationObserver but I hope that this simple example will find someone helpful.

And If there will be an idea how this code can be improved I’m open to any suggestions.
Happy no-coding

1 Like