https://www.nabto.com/assets/js/slider.js

1// Flickity slider initialisation.
2//
3// Live runs Flickity (bundled inside the Flatsome theme script) and hands it its
4// options through a data-flickity-options attribute on every slider element.
5// Reading those attribute values is a measurement, and it is the only way to get
6// identical drag/settle physics, so DEFAULTS below is transcribed verbatim from
7// them. Extracted from the Task 3 DOM dumps with:
8//   node -e '...' over audit/dom/*.html, matching data-flickity-options="..."
9// which yields 7 distinct option sets across the 13 slider pages. Every key that
10// is identical in all 7 is a default here; the keys that differ per instance
11// (autoPlay, freeScroll, wrapAround, prevNextButtons, pageDots, draggable,
12// cellAlign) are the per-instance data attributes read below.
13//
14// The 7 live sets, and which pages use them:
15//   1. cellAlign center, freeScroll true,  wrapAround true,  autoPlay 6000,  prevNext true,  dots false, drag true
16//      cases (x2), home, landingpage, old-www
17//   2. cellAlign center, freeScroll false, wrapAround false, autoPlay false, prevNext false, dots false, drag false
18//      cases (x2)
19//   3. cellAlign center, freeScroll false, wrapAround false, autoPlay 6000,  prevNext false, dots false, drag false
20//      cases
21//   4. cellAlign center, freeScroll false, wrapAround true,  autoPlay 10000, prevNext true,  dots true,  drag true
22//      home
23//   5. cellAlign center, freeScroll false, wrapAround true,  autoPlay 20000, prevNext true,  dots false, drag true
24//      nabto-video-cam-demo, old-www, smart-energy/hvac-control, smart-energy/solar-energy,
25//      smart-energy/thermostat, smart-medical, smart-security/alarm, thermostat-app-demo
26//   6. cellAlign left,   freeScroll true,  wrapAround false, autoPlay 5000,  prevNext true,  dots true,  drag true
27//      pricing-old (x2)
28//   7. cellAlign center, freeScroll false, wrapAround true,  autoPlay 6000,  prevNext true,  dots false, drag true
29//      smart-industrial
30//
31// Live's option blobs also carry "parallax": 0. That is a Flatsome extension, not
32// a Flickity option, and it is 0 (off) on every instance, so it is dropped here.
33
34const DEFAULTS = {
35  cellAlign: "center",
36  imagesLoaded: true,
37  lazyLoad: 1,
38  freeScroll: false,
39  wrapAround: false,
40  autoPlay: false,
41  pauseAutoPlayOnHover: true,
42  prevNextButtons: true,
43  contain: true,
44  adaptiveHeight: true,
45  dragThreshold: 10,
46  percentPosition: true,
47  pageDots: false,
48  rightToLeft: false,
49  draggable: true,
50  selectedAttraction: 0.1,
51  friction: 0.6,
52};
53
54function bool(value, fallback) {
55  if (value === undefined) return fallback;
56  return value === "true" || value === "";
57}
58
59function optionsFor(el) {
60  const d = el.dataset;
61  const options = {
62    ...DEFAULTS,
63    cellAlign: d.sliderAlign || DEFAULTS.cellAlign,
64    freeScroll: bool(d.sliderFreeScroll, DEFAULTS.freeScroll),
65    wrapAround: bool(d.sliderWrap, DEFAULTS.wrapAround),
66    prevNextButtons: bool(d.sliderArrows, DEFAULTS.prevNextButtons),
67    pageDots: bool(d.sliderDots, DEFAULTS.pageDots),
68    draggable: bool(d.sliderDrag, DEFAULTS.draggable),
69    autoPlay: d.sliderAutoplay ? Number(d.sliderAutoplay) : DEFAULTS.autoPlay,
70  };
71
72  // Escape hatch for an instance that needs something none of the 7 live sets
73  // cover; JSON here wins over everything above.
74  if (d.sliderOptions) {
75    try {
76      Object.assign(options, JSON.parse(d.sliderOptions));
77    } catch {
78      // a malformed blob must not take the whole slider down
79    }
80  }
81  return options;
82}
83
84export function initSliders() {
85  const sliders = document.querySelectorAll("[data-slider]");
86  if (!sliders.length) return;
87  if (typeof window.Flickity !== "function") return;
88
89  for (const el of sliders) {
90    new window.Flickity(el, optionsFor(el));
91  }
92}