https://www.teraokatape.co.jp/english/wp-content/themes/teraoka_en_v1/assets/js/products.js

1class ProductsSlider {
2  constructor(el) {
3    this.dom = {el: el};
4    this.dom.slider = this.dom.el.querySelector('.splide');
5    this.dom.thumbnail = this.dom.el.querySelectorAll('[data-js="splide-thumbnail-item"]');
6
7    this.slider = null;
8    this.current = this.dom.thumbnail[0];
9    this.option = {
10      type: 'loop',
11      perPage: 1,
12      speed: 600,
13      arrowPath: false,
14      pagination: false,
15    };
16
17    this.init();
18  }
19
20  init() {
21    const _this = this;
22    this.slider = new Splide(this.dom.slider, this.option);
23    this.slider.mount();
24
25    [...this.dom.thumbnail].forEach((el, i)=>{
26      el.addEventListener('click', e=>{
27        _this.slideChange(i);
28      });
29    });
30
31    this.slider.on('move', ()=>{
32      if (_this.current) {
33        _this.current.removeAttribute('data-is');
34      }
35    
36      let thumbnail = _this.dom.thumbnail[_this.slider.index];
37    
38      if (thumbnail) {
39        thumbnail.dataset.is = 'active';
40        _this.current = thumbnail;
41      }
42    });
43  }
44
45  getIndex(_target) {
46    return this.elements.indexOf(_target);
47  }
48
49  slideChange(_index) {
50    this.slider.go(_index);
51  }
52}
53
54class ColorSelect {
55  constructor(elms) {
56    this.dom = {elms: elms};
57    this.dom.colorname = document.querySelector('[data-js="color-name"]');
58
59    this.init();
60  }
61
62  init() {
63    const _this = this;
64    [...this.dom.elms].forEach(elm=>{
65      elm.addEventListener('click', (e)=>{
66        const selected = document.querySelector('.pdct-use-contents-color-list.is-selected');
67        if (selected) selected.classList.remove('is-selected');
68        e.currentTarget.classList.add('is-selected');
69
70/*
71        let width_ary = e.currentTarget.dataset.width;
72        width_ary = width_ary.split(',');
73        console.log(width_ary);
74        const size_elms = document.querySelectorAll('.pdct-use-contents-width-list[data-size]');
75        [...size_elms].forEach(el=>{
76          const size = el.dataset.size;
77          el.classList.remove('is-disabled');
78          if (!width_ary.includes(size)) {
79            el.classList.add('is-disabled');
80          }
81        });
82*/
83        _this.dom.colorname.textContent = e.currentTarget.dataset.color;
84
85        // 引数に希望のスライド番号を入れて実行すると指定した画像にスライド
86        _this.imageChange(e.currentTarget.dataset.color);
87      });
88    });
89
90    const domProductsSlider = document.querySelector('[data-js="splide-products"]');
91    if (domProductsSlider) {
92      this.productsSlider = new ProductsSlider(domProductsSlider);
93    }
94  }
95
96  imageChange(_color) {
97    console.log(_color);
98    let color_idx = 0;
99    this.productsSlider.dom.thumbnail.forEach((el, idx) => {
100      if (typeof el.dataset.colorname !== 'undefined') {
101        console.log(el.dataset.colorname)
102
103        if (el.dataset.colorname === _color) {
104          color_idx = idx;
105        }
106      }
107    });
108
109    this.productsSlider.slideChange(color_idx);
110  }
111}
112
113const domColorSelect = document.querySelectorAll('.pdct-use-contents-color-list');
114if (domColorSelect) new ColorSelect(domColorSelect);