http://pro-karusel.ru/assets/js/main.js

1/*
2	Helios by HTML5 UP
3	html5up.net | @ajlkn
4	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
5*/
6
7(function($) {
8
9	var settings = {
10
11		// Carousels
12			carousels: {
13				speed: 4,
14				fadeIn: true,
15				fadeDelay: 250
16			},
17
18	};
19
20	skel.breakpoints({
21		wide: '(max-width: 1680px)',
22		normal: '(max-width: 1280px)',
23		narrow: '(max-width: 960px)',
24		narrower: '(max-width: 840px)',
25		mobile: '(max-width: 736px)'
26	});
27
28	$(function() {
29
30		var	$window = $(window),
31			$body = $('body');
32
33		// Disable animations/transitions until the page has loaded.
34			$body.addClass('is-loading');
35
36			$window.on('load', function() {
37				$body.removeClass('is-loading');
38			});
39
40		// CSS polyfills (IE<9).
41			if (skel.vars.IEVersion < 9)
42				$(':last-child').addClass('last-child');
43
44		// Fix: Placeholder polyfill.
45			$('form').placeholder();
46
47		// Prioritize "important" elements on mobile.
48			skel.on('+mobile -mobile', function() {
49				$.prioritize(
50					'.important\\28 mobile\\29',
51					skel.breakpoint('mobile').active
52				);
53			});
54
55		// Dropdowns.
56			$('#nav > ul').dropotron({
57				mode: 'fade',
58				speed: 350,
59				noOpenerFade: true,
60				alignment: 'center'
61			});
62
63		// Scrolly links.
64			$('.scrolly').scrolly();
65
66		// Off-Canvas Navigation.
67
68			// Navigation Button.
69				$(
70					'<div id="navButton">' +
71						'<a href="#navPanel" class="toggle"></a>' +
72					'</div>'
73				)
74					.appendTo($body);
75
76			// Navigation Panel.
77				$(
78					'<div id="navPanel">' +
79						'<nav>' +
80							$('#nav').navList() +
81						'</nav>' +
82					'</div>'
83				)
84					.appendTo($body)
85					.panel({
86						delay: 500,
87						hideOnClick: true,
88						hideOnSwipe: true,
89						resetScroll: true,
90						resetForms: true,
91						target: $body,
92						visibleClass: 'navPanel-visible'
93					});
94
95			// Fix: Remove navPanel transitions on WP<10 (poor/buggy performance).
96				if (skel.vars.os == 'wp' && skel.vars.osVersion < 10)
97					$('#navButton, #navPanel, #page-wrapper')
98						.css('transition', 'none');
99
100		// Carousels.
101			$('.carousel').each(function() {
102
103				var	$t = $(this),
104					$forward = $('<span class="forward"></span>'),
105					$backward = $('<span class="backward"></span>'),
106					$reel = $t.children('.reel'),
107					$items = $reel.children('article');
108
109				var	pos = 0,
110					leftLimit,
111					rightLimit,
112					itemWidth,
113					reelWidth,
114					timerId;
115
116				// Items.
117					if (settings.carousels.fadeIn) {
118
119						$items.addClass('loading');
120
121						$t.onVisible(function() {
122							var	timerId,
123								limit = $items.length - Math.ceil($window.width() / itemWidth);
124
125							timerId = window.setInterval(function() {
126								var x = $items.filter('.loading'), xf = x.first();
127
128								if (x.length <= limit) {
129
130									window.clearInterval(timerId);
131									$items.removeClass('loading');
132									return;
133
134								}
135
136								if (skel.vars.IEVersion < 10) {
137
138									xf.fadeTo(750, 1.0);
139									window.setTimeout(function() {
140										xf.removeClass('loading');
141									}, 50);
142
143								}
144								else
145									xf.removeClass('loading');
146
147							}, settings.carousels.fadeDelay);
148						}, 50);
149					}
150
151				// Main.
152					$t._update = function() {
153						pos = 0;
154						rightLimit = (-1 * reelWidth) + $window.width();
155						leftLimit = 0;
156						$t._updatePos();
157					};
158
159					if (skel.vars.IEVersion < 9)
160						$t._updatePos = function() { $reel.css('left', pos); };
161					else
162						$t._updatePos = function() { $reel.css('transform', 'translate(' + pos + 'px, 0)'); };
163
164				// Forward.
165					$forward
166						.appendTo($t)
167						.hide()
168						.mouseenter(function(e) {
169							timerId = window.setInterval(function() {
170								pos -= settings.carousels.speed;
171
172								if (pos <= rightLimit)
173								{
174									window.clearInterval(timerId);
175									pos = rightLimit;
176								}
177
178								$t._updatePos();
179							}, 10);
180						})
181						.mouseleave(function(e) {
182							window.clearInterval(timerId);
183						});

184
185				// Backward.
186					$backward
187						.appendTo($t)
188						.hide()
189						.mouseenter(function(e) {
190							timerId = window.setInterval(function() {
191								pos += settings.carousels.speed;
192
193								if (pos >= leftLimit) {
194
195									window.clearInterval(timerId);
196									pos = leftLimit;
197
198								}
199
200								$t._updatePos();
201							}, 10);
202						})
203						.mouseleave(function(e) {
204							window.clearInterval(timerId);
205						});
206
207				// Init.
208					$window.load(function() {
209
210						reelWidth = $reel[0].scrollWidth;
211
212						skel.on('change', function() {
213
214							if (skel.vars.touch) {
215
216								$reel
217									.css('overflow-y', 'hidden')
218									.css('overflow-x', 'scroll')
219									.scrollLeft(0);
220								$forward.hide();
221								$backward.hide();
222
223							}
224							else {
225
226								$reel
227									.css('overflow', 'visible')
228									.scrollLeft(0);
229								$forward.show();
230								$backward.show();
231
232							}
233
234							$t._update();
235
236						});
237
238						$window.resize(function() {
239							reelWidth = $reel[0].scrollWidth;
240							$t._update();
241						}).trigger('resize');
242
243					});
244
245			});
246
247	});
248
249})(jQuery);