https://ica.art/static/js/HomeRowBodySlideshow.js

1class HomeRowBodySlideshow extends HomeRowBody {
2    constructor(body, cols, visible) {
3        super(body, visible);
4        this.prev = body.querySelector('.arrow-button.prev');
5        // console.log(this.prev);
6        this.next = body.querySelector('.arrow-button.next');
7        this.itemsCount = parseInt(body.dataset['itemsCount']);
8        this.cols = cols;
9        this.maxIndex = this.itemsCount - this.cols;
10        this.currentIndex = 0;
11        this.isInfinite = true;
12        this.slidable = '';
13        this.updateSlidable();
14        if(!this.isInfinite)
15            this.updateArrowAvailability();
16    }
17
18    setCurrentIndex(index) {
19        this.body.style.setProperty('--current-index', index);
20    }
21    init() {
22        if(!this.prev || !this.next) {
23            return;
24        }
25        super.init();
26        // this.body.dataset.visible = this.visible;
27        this.prev.addEventListener('click', () => this.goToPrev());
28        this.next.addEventListener('click', () => this.goToNext());
29    }
30    // show(){
31    //     super.show();
32    //     this.visible = 1;
33    //     this.body.dataset.visible = this.visible;
34        
35    // }
36    hide(){
37        super.hide();
38        this.currentIndex = 0;
39        this.setCurrentIndex(this.currentIndex);
40    }
41    updateCols(cols){
42        this.cols = cols;
43        this.maxIndex = this.itemsCount - this.cols;
44        this.currentIndex = Math.max(0, Math.min(this.currentIndex, this.maxIndex));
45        
46        this.setCurrentIndex(this.currentIndex);
47        this.updateSlidable();
48    }
49    goToPrev() {
50        if((this.currentIndex === 0 && !this.isInfinite) || !this.slidable) return;
51        if(!this.isInfinite) {
52            this.currentIndex --;
53            this.updateArrowAvailability();
54        } else
55            this.currentIndex = this.currentIndex - 1 < 0 ? this.maxIndex : this.currentIndex-1;
56        this.setCurrentIndex(this.currentIndex);      
57    }
58
59    goToNext() {
60        if((this.currentIndex >= this.maxIndex && !this.isInfinite) || !this.slidable) return;
61        if(!this.isInfinite){
62            this.updateArrowAvailability();
63            this.currentIndex++;
64        } else
65            this.currentIndex = this.currentIndex + 1 > this.maxIndex ? 0 : this.currentIndex+1;
66        this.setCurrentIndex(this.currentIndex);
67        
68    }
69    updateSlidable(){
70        this.slidable = this.cols < this.itemsCount;
71        if(!this.slidable) {
72            this.prev.classList.add('disabled');
73            this.next.classList.add('disabled');
74        } else {
75            if(this.isInfinite)  {
76                this.prev.classList.remove('disabled');
77                this.next.classList.remove('disabled');
78            }
79            else
80                this.updateArrowAvailability();
81        }
82    }
83    updateArrowAvailability(){
84        if(this.currentIndex === 0) {
85            if(!this.prev.classList.contains('disabled'))
86                this.prev.classList.add('disabled');
87        }
88        else if(this.prev.classList.contains('disabled')) {
89            this.prev.classList.remove('disabled');
90        }
91        if(this.currentIndex >= this.maxIndex) {
92            if(!this.next.classList.contains('disabled'))
93                this.next.classList.add('disabled');
94        } else if(this.next.classList.contains('disabled')){
95            this.next.classList.remove('disabled');
96        }
97        
98    }
99}