4 Min.cornerstone

Slider API

This is a technical summary of what is offered by our Slider API.

Basics
Examples

Basics

To subscribe to events and send events you will use the function window.csGlobal.rivet.store.subscribe. You will need access to the DOM element and passing into the second argument the string slider which is the state name. The next argument is a function to handle whenever the slider state has changed at all. The basic setup will look something like this.

const subscription = window.csGlobal.rivet.store.subscribe(YOUR_DOM_ELEMENT, "slider", function() {
  // A change has happened
});

The output of this function call is a subscription or event dispatcher. This can dispatch events that update the slider state. The following is an example on how to dispatch the navigateTo property, which changes the slider index. If you change the state through the subscription event you can create an infinite loop. So check any state variables you need to before you do that.

// Setup subscription
const subscription = window.csGlobal.rivet.store.subscribe(YOUR_DOM_ELEMENT, "slider", function() {
  // A change has happened
});

// Navigate to 2nd slider index
// We take the old state and append this new key value
// So only navigateTo updates
subscription.dispatch(function(prev) {
  return {
    ...prev,
    navigateTo: 2,
  };
});

// Current values of the state
const currentValues = subscription.getState();

// Stop listening to events
subscription.unsubscribe();

Examples

Update A Slider Using an Index and a Click Event

In this example we will change the slider index of a Slider from the change events of a click event. Through a looper we setup a custom attribute data-looper-index which is equal to the Loopers current index ({{dc:looper:index}}). We then use this index for the click event of these elements to open up a Modal to the valid Slider index. This is supposed to resemble an Image Gallery.

Download the Example Page Here

// On click to a gallery item
// open the modal and navigate to the valid slide
window.addEventListener("load", function() {
  // Nicer alias
  var rivet = window.csGlobal.rivet;

  // Get Dom Element
  const gallerySlider = document.querySelector(".gallery-slider");

  // Setup subscription
  const smallSliderSub = window.csGlobal.rivet.store.subscribe(gallerySlider, "slider");

  // Main update func to another index
  function updateSlider(index) {
    smallSliderSub.dispatch(function(prev) {
      return {
        ...prev,
        navigateTo: index,
      };
    });
  }


  // Attach to gallery items
  rivet.attach(".gallery-item", function(el) {
    let index = el.getAttribute("data-looper-index") - 1;
    index = Math.max(0, index);

    // Click event handler
    return rivet.util.listener(el, "click", function(e) {
      updateSlider(index);
    });
  });
});

Pausing Vimeo Videos on Slider Changes

In this example we have a slider filled with Vimeo videos. When the slider changes, we want the current video to stop. Whenever the slider does anything, like change, we then pause the Vimeo video.

// Using class of vimeo-video in Cornerstone
// Use that to find all iframes to check
const VIDEO_WRAPPER_SELECTORS = ".vimeo-video";

// Setup on load
window.addEventListener("load", function() {

  // We create a script that loads in the Vimeo API
  // You could load this elsewhere though
  // and just call setupVideoReset();
  // Which is what we do for the scripts onload event
  const script = document.createElement("script");

  script.src = "https://player.vimeo.com/api/player.js";
  script.onload = setupVideoReset;
  document.body.appendChild(script);

});

// Find all videos
// And set them up
function setupVideoReset() {
  const videos = document.querySelectorAll(".vimeo-video");

  for(var i = 0; i < videos.length; ++i) {
    setupVideo(videos[i]);
  }
}

// Setup a video to look at events and pause videos
function setupVideo(videoWrapper) {
  // Use either this element if it is an iframe
  // Or find an iframe in this container
  const iframe = videoWrapper.tagName === "IFRAME"
    ? videoWrapper
    : videoWrapper.querySelector("iframe");

  if (!iframe) {
    console.warn("No iframe found for", videoWrapper);
    return;
  }

  // Setup player from Vimeo API
  const player = new Vimeo.Player(iframe);

  // Find which slider we are using to look at events from
  const sliderEl = document.querySelector(".slider");

  // Subscribe and watch any changes to the slider
  window.csGlobal.rivet.store.subscribe(sliderEl, "slider", function() {
    // Pause on any change to slider
    player.pause();
  });
}

See something inaccurate? Let us know