CMS List Sync

Newer Tutorial Available

Cloneable

Add to before </body> tag in page or project settings

<script>
// CMS LIST SYNC POWER-UP
window.addEventListener("DOMContentLoaded", (event) => {
  // attribute value checker
  function attr(defaultVal, attrVal) {
    const defaultValType = typeof defaultVal;
    if (typeof attrVal !== "string" || attrVal.trim() === "") return defaultVal;
    if (attrVal === "true" && defaultValType === "boolean") return true;
    if (attrVal === "false" && defaultValType === "boolean") return false;
    if (isNaN(attrVal) && defaultValType === "string") return attrVal;
    if (!isNaN(attrVal) && defaultValType === "number") return +attrVal;
    return defaultVal;
  }
  // cms list sync component
  $("[tr-listsync-element='component']").each(function (index) {
    let componentEl = $(this),
      cmsListEl = componentEl.find("[tr-listsync-element='list']"),
      cmsItemEl = cmsListEl.children(),
      prevButtonEl = componentEl.find("[tr-listsync-element='button-prev']"),
      nextButtonEl = componentEl.find("[tr-listsync-element='button-next']");
    let onLoadSetting = attr(false, componentEl.attr("tr-listsync-onload")),
      activeIndexSetting = attr(0, componentEl.attr("tr-listsync-activeindex")),
      activeClassSetting = attr("is-active", componentEl.attr("tr-listsync-activeclass"));
    function addActive(trigger) {
      cmsItemEl.removeClass(activeClassSetting);
      let itemIndex = trigger.index();
      cmsListEl.each(function () {
        $(this).children().eq(itemIndex).addClass(activeClassSetting);
      });
    }
    if (onLoadSetting) addActive(cmsItemEl.eq(activeIndexSetting));
    cmsListEl.each(function () {
      let childrenItemEl = $(this).children(),
        clickSetting = attr(true, $(this).attr("tr-listsync-click")),
        hoverInSetting = attr(false, $(this).attr("tr-listsync-hoverin")),
        hoverOutSetting = attr(false, $(this).attr("tr-listsync-hoverout"));
      if (clickSetting) {
        childrenItemEl.on("click", function () {
          addActive($(this));
        });
      }
      if (hoverInSetting) {
        childrenItemEl.on("mouseenter", function () {
          addActive($(this));
        });
      }
      if (hoverOutSetting) {
        childrenItemEl.on("mouseleave", function () {
          cmsItemEl.removeClass(activeClassSetting);
        });
      }
    });
    prevButtonEl.on("click", function () {
      cmsListEl.each(function (index) {
        let childrenItemEl = $(this).children();
        let currentItemEl = childrenItemEl.filter("." + activeClassSetting).removeClass(activeClassSetting);
        let prevItemEl = currentItemEl.prev();
        if (prevItemEl.length === 0) prevItemEl = childrenItemEl.last();
        prevItemEl.addClass(activeClassSetting);
      });
    });
    nextButtonEl.on("click", function () {
      cmsListEl.each(function (index) {
        let childrenItemEl = $(this).children();
        let currentItemEl = childrenItemEl.filter("." + activeClassSetting).removeClass(activeClassSetting);
        let nextItemEl = currentItemEl.next();
        if (nextItemEl.length === 0) nextItemEl = childrenItemEl.first();
        nextItemEl.addClass(activeClassSetting);
      });
    });
  });
});
</script>

Copy Code

Apply the required attributes

Required Elements

This component contains all elements related to this instance

is-active combo class applied to active cms items within this component

Name

tr-listsync-element

Value

component

Optional settings for this element

on page load make 1 item in each list active

Name

tr-listsync-onload

Value

true

index of active item when onload is true

Name

tr-listsync-activeindex

Value

custom combo class that gets added to active items

Name

tr-listsync-activeclass

Value

is-active

Name

Value

Name

Value

Use items within these cms lists

Name

tr-listsync-element

Value

list

Optional settings for this element

disable clicking on items in this list to switch class

Name

tr-listsync-click

Value

false

enable hover in on items in this list to switch class

Name

tr-listsync-hoverin

Value

true

enable hover out on items in this list to remove class

Name

tr-listsync-hoverout

Value

true

Name

Value

Name

Value

Optional Elements

Click this button to highlight previous item in lists

Name

tr-listsync-element

Value

button-prev

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Click this button to highlight next item in lists

Name

tr-listsync-element

Value

button-next

Optional settings for this element

Name

Value

Name

Value

Name

Value

Name

Value

Name

Value

Optional Settings

No items found.

Project Cloneable

Original Website

Project Code

Starter File

Design File

Documentation

All Resources

No items found.