https://specmachinery.com.ua/modules/mod_news_pro_gk5/tmpl/portal_modes/new_news_slider/script.jquery.js

1jQuery(document).ready(function() {
2	jQuery(document).find('.gkNspPM-NewNewsSlider').each(function(i, module) {
3		module = jQuery(module);
4
5		if(!module.hasClass('active')) {
6			module.addClass('active');
7			new InfiniteSlider(module);
8		}
9	});
10});
11
12var InfiniteSlider = function (wrapper) {
13    // Set object fields
14    this.wrapper = wrapper;
15    this.next = this.wrapper.find('.gkNext');
16    this.prev = this.wrapper.find('.gkPrev');
17    this.items = false;
18    this.itemsAmount = this.wrapper.find('.gkItem').length;
19    this.newWidth = 0;
20    this.itemWidth = 0;
21    this.list = this.wrapper.find('.gkList');
22    this.currentItem = 0;
23    this.blank = false;
24    this.hoverStop = false;
25    this.autoAnimation = this.list.attr('data-interval');
26    // Initialize the UI
27    this.initUI();
28    // Add swipe gestures support
29    this.addTouchEvents();
30};
31
32InfiniteSlider.prototype.initUI = function () {
33    var self = this;
34    var content = this.list.html();
35    // Duplicate items in the list
36    this.list.html(content + content);
37    this.items = this.wrapper.find('.gkItem');
38    // Get dimensions
39    this.itemWidth = this.items.first().outerWidth();
40    this.newWidth = this.items.length * this.itemWidth;
41    // Set list dimension
42    this.list.css('width', this.newWidth + "px");
43    // Add clone classes to items
44    this.items.each(function (i, item) {
45        if (i >= self.items.length / 2) {
46            item = jQuery(item);
47            item.addClass('gkClone');
48        }
49    });
50
51    this.next.on('click', function (e) {
52        e.preventDefault();
53        self.animate('next');
54    });
55
56    this.prev.on('click', function (e) {
57        e.preventDefault();
58        self.animate('prev');
59    });
60
61    this.wrapper.on('mouseenter', function () {
62        self.hoverStop = true;
63    });
64
65    this.wrapper.on('mouseleave', function () {
66        self.hoverStop = false;
67    });
68
69    jQuery(window).on('resize', function () {
70        self.resize();
71    });
72
73    if (this.autoAnimation > 0) {
74        setTimeout(function () {
75            self.autoAnimate(self.autoAnimation);
76        }, this.autoAnimation);
77    }
78    
79    this.resize();
80};
81
82InfiniteSlider.prototype.addTouchEvents = function () {
83	var self = this;
84	var arts_pos_start_x = 0;
85	var arts_pos_start_y = 0;
86	var arts_time_start = 0;
87	var arts_swipe = false;
88	var swipe_max_time = 500;
89	var swipe_min_move = 100;
90	
91	this.wrapper.bind('touchstart', function(e) {
92		arts_swipe = true;
93		var touches = e.originalEvent.changedTouches || e.originalEvent.touches;
94
95		if(touches.length > 0) {
96			arts_pos_start_x = touches[0].pageX;
97			arts_pos_start_y = touches[0].pageY;
98			arts_time_start = new Date().getTime();
99		}
100	});
101	
102	this.wrapper.bind('touchmove', function(e) {
103		var touches = e.originalEvent.changedTouches || e.originalEvent.touches;
104		
105		if(touches.length > 0 && arts_swipe) {
106			if(
107				Math.abs(touches[0].pageX - arts_pos_start_x) > Math.abs(touches[0].pageY - arts_pos_start_y)
108			) {
109				e.preventDefault();
110			} else {
111				arts_swipe = false;
112			}
113		}
114	});
115				
116	this.wrapper.bind('touchend', function(e) {
117		var touches = e.originalEvent.changedTouches || e.originalEvent.touches;
118		
119		if(touches.length > 0 && arts_swipe) {									
120			if(
121				Math.abs(touches[0].pageX - arts_pos_start_x) >= swipe_min_move && 
122				new Date().getTime() - arts_time_start <= swipe_max_time
123			) {					
124				if(touches[0].pageX - arts_pos_start_x > 0) {
125					self.animate('prev');
126				} else {
127					self.animate('next');
128				}
129			}
130		}
131	});
132};
133
134InfiniteSlider.prototype.elementToMove = function (direction) {
135    if (direction === 'prev') {
136        return ((this.itemsAmount * 2) + this.currentItem) % (this.itemsAmount * 2);
137    }
138
139    return ((this.itemsAmount * 2) + this.currentItem - 1) % (this.itemsAmount * 2);
140};
141
142InfiniteSlider.prototype.elementForMove = function (direction) {
143    if (direction === 'prev') {
144        return ((this.itemsAmount * 2) + this.currentItem + 1) % (this.itemsAmount * 2);
145    }
146
147    return ((this.itemsAmount * 2) + this.currentItem - 2) % (this.itemsAmount * 2);
148};
149
150InfiniteSlider.prototype.animate = function (direction) {
151    var self = this;
152    var forMove, toMove;
153
154    if (this.blank || !this.list.hasClass('gkScrollable')) {
155        return false;

156    }
157
158    if (direction === 'next') {
159        this.currentItem = ++this.currentItem;
160    } else {
161        this.currentItem = --this.currentItem;
162    }
163
164    this.currentItem = this.currentItem % (this.itemsAmount * 2);
165    forMove = this.elementForMove(direction);
166    toMove = this.elementToMove(direction);
167    this.blank = true;
168
169    if (direction === 'next') {
170        this.list.addClass('gkAnimate');
171
172        setTimeout(function () {
173            self.list.css('margin-left', -self.itemWidth + "px");
174
175            setTimeout(function () {
176                self.list.removeClass('gkAnimate');
177
178                setTimeout(function () {
179                    self.list.css('margin-left', "0px");
180                    jQuery(self.items.get(forMove)).after(jQuery(self.items.get(toMove)));
181                    self.blank = false;
182                }, 20);
183            }, 320);
184        }, 20);
185    } else {
186        this.list.css('margin-left', -1 * this.itemWidth + "px");
187        jQuery(this.items.get(forMove)).before(jQuery(this.items.get(toMove)));
188
189        setTimeout(function () {
190            self.list.addClass('gkAnimate');
191
192            setTimeout(function () {
193                self.list.css('margin-left', "0px");
194
195                setTimeout(function () {
196                    self.list.removeClass('gkAnimate');
197                    self.blank = false;
198                }, 320);
199            }, 20);
200        }, 20);
201    }
202};
203
204InfiniteSlider.prototype.autoAnimate = function (interval) {
205    var self = this;
206
207    if (this.blank) {
208        this.blank = false;
209    } else if (!this.hoverStop) {
210        this.animate('next');
211    }
212
213    setTimeout(function () {
214        self.autoAnimate(interval);
215    }, interval);
216};
217
218InfiniteSlider.prototype.resize = function () {
219    var divider = this.list.hasClass('scrollable') ? 2 : 1;
220    // Get item new iwdth
221    this.itemWidth = this.items.first().outerWidth();
222
223    // Compare the size of the list area
224    if ((this.list.outerWidth() / divider) >= this.wrapper.outerWidth()) {
225        this.newWidth = this.items.length * this.itemWidth;
226        this.list.removeClass('gkNonScrollable');
227        this.list.addClass('gkScrollable');
228        this.prev.css('display', 'block');
229        this.next.css('display', 'block');
230    } else {
231        this.newWidth = (this.items.length / 2) * this.itemWidth;
232        this.list.removeClass('gkScrollable');
233        this.list.addClass('gkNonScrollable');
234        this.prev.css('display', 'none');
235        this.next.css('display', 'none');
236    }
237    // Set list dimension
238    this.list.css('width', this.newWidth + "px");
239};