https://its-my.link/assets/js/plugins/slider-tabs.js

1class SliderTab {
2  constructor(element = undefined, option = undefined) {
3    if (element !== undefined) {
4      this.init(element, option)
5    }
6  }
7
8  init (element = null, option = undefined) {
9    this.option = option
10    this.element = element;
11    this.slider = document.createElement('div') 
12    this.sliderThumb = 'nav-slider-thumb'
13    this.elemClass = 'nav-slider'
14    const firstChild = this.element.querySelector('.nav-item:first-child .nav-link');
15    const tab = firstChild.cloneNode();
16    tab.innerHTML = "";
17    this.slider.classList.add(this.sliderThumb, 'position-absolute', 'nav-link');
18    this.element.classList.add(this.elemClass);
19    this.slider.appendChild(tab);
20    this.element.appendChild(this.slider);
21    this.resetSlider()
22    this.mouseClick()
23    this.resize()
24    this.updateRTL()
25  }
26
27  resetSlider () {
28    this.slider.style.padding = '0px';
29    this.slider.style.width = this.element.querySelector('.nav-item:nth-child(1)').offsetWidth + 'px';
30    this.slider.style.height = this.element.querySelector('.nav-item:nth-child(1)').offsetHeight + 'px';
31    this.slider.style.transform = 'translate3d(0px, 0px, 0px)';
32    this.slider.style.transition = '300ms ease-in-out';
33  }
34
35  mouseClick () {
36    this.element.onclick = (event) => {
37      const target = this.getEventTarget(event);
38      const item = target.closest('.nav-item');
39      const items = Array.from(this.element.children);
40      const index = items.indexOf(item) + 1;
41      if(item !== null) {
42        this.updateSlide(item, items, index)
43      }
44    }
45  }
46
47  updateSlide (item, items, index, cb = undefined) {
48    this.slider = this.element.querySelector(`.${this.sliderThumb}`);
49    const prevItem = this.element.querySelectorAll('.nav-item')
50    let elem
51    Array.from(prevItem,(elem) => {
52      elem.querySelector('.nav-link').classList.remove('active')
53    })
54    let sum = 0;
55    if (this.element.classList.contains('flex-column')) {
56      let j = 1
57      for (j; j <= items.indexOf(item); j++) {
58        sum += this.element.querySelector('li:nth-child(' + j + ')').offsetHeight;
59      }
60      this.slider.style.transform = 'translate3d(0px,' + sum + 'px, 0px)';
61      elem = this.element.querySelector('.nav-item:nth-child(' + j + ')')
62      elem.querySelector('.nav-link').classList.add('active')
63      this.slider.style.height = elem.offsetHeight;
64      this.slider.style.width = '100%'
65    } else {
66      let j = 1
67      for (j ; j <= items.indexOf(item); j++) {
68        sum += this.element.querySelector('.nav-item:nth-child(' + j + ')').offsetWidth;
69      }
70      if(document.querySelector('html').getAttribute('dir') == 'rtl'){
71        this.slider.style.transform = 'translate3d(-' + sum + 'px, 0px, 0px)';
72      }
73      else{
74        this.slider.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
75      }
76      elem = this.element.querySelector('.nav-item:nth-child(' + index + ')')
77      elem.querySelector('.nav-link').classList.add('active')
78      this.slider.style.width = this.element.querySelector('.nav-item:nth-child(' + index + ')').offsetWidth + 'px';
79    }
80    if(cb !== null && cb !== undefined && typeof cb === 'function') {
81      cb(elem)
82    }
83  }
84
85  getEventTarget (event) {
86    event = event || window.event;
87    return event.target || event.srcElement;
88  }
89
90  destroy () {
91    this.element.removeEventListener('mousemove', this.mouseOver)
92    this.element.querySelector(`.${this.sliderThumb}`).remove()
93    this.element.classList.remove(this.elemClass)
94  }
95
96  resize () {
97    window.addEventListener('resize', (event) => {
98      const target = this.element.querySelector('.active');
99      const item = target.closest('.nav-item');
100      const items = Array.from(this.element.children);
101      const index = items.indexOf(item) + 1;
102      this.updateSlide(item, items, index)
103    })
104  }
105  updateRTL () {
106    // mutation observer for rtl
107    const observer = new MutationObserver(mutations => {
108      mutations.forEach(mutation => {
109        if (mutation.type === 'attributes') {
110          if (mutation.attributeName === 'dir') {
111              const target = this.element.querySelector('.active');
112              const item = target.closest('.nav-item');
113              const items = Array.from(this.element.children);
114              const index = items.indexOf(item) + 1;
115              this.updateSlide(item, items, index)
116          }
117        }
118      })
119    })
120    observer.observe(document.querySelector('html'), {

121      attributes: true
122    })
123  }
124}
125
126window.SliderTab = new SliderTab()