https://oknaprosvet.ru/local/js/plugins/accordionSlider.js?173094070516182

1var AccordionSliderManager = can.Control.extend({
2    init: function() {
3        var sliderkitFallback = $('.accordion-slider.sliderkit');
4
5        if (!$('html').hasClass('csstransforms3d')) {
6            this.element.remove();
7
8            sliderkitFallback.removeClass('hidden');
9            sliderkitFallback.sliderkit({
10                auto: false,
11                autospeed: 5000,
12                circular: true,
13                fastchange: false
14            });
15
16            return;
17        }
18
19        sliderkitFallback.remove();
20        this.element.css('visibility', 'visible');
21
22        this.height = this.element.height();
23        this.element.height(this.height);
24        this.mouseover = false;
25        this.isSliding = false;
26        this.interval  = null;
27        this.direction = 'bottom';
28        this.triggerAutoScroll = false;
29
30        var wrappers = this.element.find('.wrapper');
31        if (wrappers.length <= 1) {
32            return;
33        }
34
35        // Инициализируем слайды
36        this.slides      = [];
37        this.openedSlide = null;
38
39        $.each(wrappers, this.proxy(function(i, wrapper) {
40            wrapper = $(wrapper);
41
42            var slide = new AccordionSlide(wrapper, {
43                manager: this,
44                fullHeight: this.height
45            });
46
47            this.slides.push(slide);
48
49            if (!wrapper.hasClass('closed')) {
50                this.openedSlide = slide;
51            }
52        }));
53
54        Hammer(this.element[0]).on('dragup', this.proxy(function(ev) {
55            this.scrollTrigger(ev, 'up');
56        }));
57
58        Hammer(this.element[0]).on('dragdown', this.proxy(function(ev) {
59            this.scrollTrigger(ev, 'down');
60        }));
61
62        if ('ontouchstart' in document.documentElement) {
63            this.setInterval();
64        }
65    },
66    open: function(slide) {
67        /*var openedSlide = null;
68
69        for (var i = 0; i < this.slides.length; i++) {
70            if (!this.slides[i].element.hasClass('closed')) {
71                //this.slides[i].close();
72                openedSlide = this.slides[i];
73            }
74        }*/
75
76        if ('ontouchstart' in document.documentElement && !this.triggerAutoScroll) {
77            clearInterval(this.interval);
78        }
79
80        this.isSliding = true;
81
82        slide.element.removeClass('closed');
83        this.openedSlide.element.addClass('closed');
84
85        slide.open(this.openedSlide);
86        this.openedSlide = slide;
87    },
88    /**
89     * Цикличное открытие
90     */
91    /*openCycle: function(slide) {
92        // Клонируем нужный слайд
93        if (3 === this.slides.length) {
94            var clonedElement = null,
95                insertBefore = false;
96
97            if (slide === this.slides[0]) {
98                clonedElement = this.slides[2].element.clone();
99                insertBefore = true;
100            } else {
101                clonedElement = this.slides[0].element.clone();
102            }
103
104            clonedElement.find('.panel').height(0);
105
106            var clonedSlide = new AccordionSlide(clonedElement, {
107                manager: this,
108                fullHeight: this.height
109            });
110
111            clonedSlide.rotate(90);
112
113            if (insertBefore) {
114                clonedElement.prependTo(this.element);
115            } else {
116                clonedElement.appendTo(this.element);
117            }
118
119            clonedSlide.openSmall();
120            this.slides[insertBefore ? 2 : 0].closeSmall();
121            this.slides[3] = clonedSlide;
122        }
123
124        slide.open();
125
126        if (2 === this.slides.length && slide === this.slides[1]) {
127            this.slides[0].close();
128        } else {
129
130            this.slides[1].close();
131        }
132
133        // Если склонировали, то переставляем все слайды местами
134        if (4 === this.slides.length) {
135            this.slides.splice(3, 1);
136
137            if (insertBefore) {
138                this.slides[2] = this.slides[1];
139                this.slides[1] = this.slides[0];
140                this.slides[0] = clonedSlide;

141            } else {
142                this.slides[0] = this.slides[1];
143                this.slides[1] = this.slides[2];
144                this.slides[2] = clonedSlide;
145            }
146        }
147    },*/
148    mouseenter: function() {
149        this.mouseover = true;
150        //clearInterval(this.interval);
151    },
152    mouseleave: function() {
153        this.mouseover = false;
154        //this.setInterval();
155    },
156    setInterval: function() {
157        this.interval = setInterval(this.proxy(this.autoScroll), 11000);
158    },
159    autoScroll: function() {
160        if (this.isSliding) {
161            return;
162        }
163
164        var slide;
165
166        if ('bottom' === this.direction) {
167            slide = this.getSlideToAutoClick('bottom');
168
169            if (null === slide) {
170                slide = this.getSlideToAutoClick('top');
171                this.direction = 'top';
172            }
173        } else {
174            slide = this.getSlideToAutoClick('top');
175
176            if (null === slide) {
177                slide = this.getSlideToAutoClick('bottom');
178                this.direction = 'bottom';
179            }
180        }
181
182        this.triggerAutoScroll = true;
183        can.trigger(slide.element, 'click');
184        this.triggerAutoScroll = false;
185    },
186    '{window} mousewheel': function(el, e) {
187        if (!this.mouseover) {
188            return;
189        }
190
191        this.scrollTrigger(e);
192    },
193    '{window} DOMMouseScroll': function(el, e) {
194        if (!this.mouseover) {
195            return;
196        }
197
198        this.scrollTrigger(e);
199    },
200    scrollTrigger: function(e, direction) {
201        if (this.isSliding) {
202            e.preventDefault();
203
204            if ('up' === direction || 'down' === direction) {
205                e.gesture.preventDefault();
206            }
207
208            return;
209        }
210
211        var toggleSlide = null;
212
213        if ('up' !== direction && ('down' === direction || e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0)) {
214            toggleSlide = this.getSlideToAutoClick('top');
215        } else {
216            toggleSlide = this.getSlideToAutoClick('bottom');
217        }
218
219        if (null !== toggleSlide) {
220            can.trigger(toggleSlide.element, 'click');
221            e.preventDefault();
222            
223            if ('up' === direction || 'down' === direction) {
224                e.gesture.preventDefault();
225            }
226        }
227    },
228    /*scrollTriggerCycle: function(e) {
229        e.preventDefault();
230
231        if (this.isSliding) {
232            return;
233        }
234
235        if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
236            can.trigger(this.slides[0].element, 'click');
237        } else {
238            can.trigger(this.slides[this.slides.length - 1].element, 'click');
239        }
240    },*/
241    getSlideToAutoClick: function(direction) {
242        for (var i = 0; i < this.slides.length; i++) {
243            if (this.openedSlide === this.slides[i]) {
244                if ('bottom' === direction) {
245                    return i + 1 < this.slides.length ? this.slides[i + 1] : null;
246                } else {
247                    return i - 1 >= 0 ? this.slides[i - 1] : null;
248                }
249            }
250        }
251
252        return null;
253    }
254    /*getSlideToAutoClickCycle: function() {
255        var slideToClick = null;
256
257        if (3 === this.slides.length) {
258            slideToClick = 2;
259        } else {
260            for (var i = 0; i < this.slides.length; i++) {
261                if (this.slides[i].element.hasClass('closed')) {
262                    slideToClick = i;
263                }
264            }
265        }
266
267        return this.slides[slideToClick];
268    }*/
269});
270
271var AccordionSlide = can.Control.extend({
272    defaults: {
273        manager: null,
274        fullHeight: null,
275        minHeight: 68,
276        maxHeight: 446,
277        minAngle: 0,
278        maxAngle: 81,
279        speed: 1
280    }
281}, {
282    init: function() {
283        this.topDiv      = this.element.find('.top');
284        this.bottomDiv   = this.element.find('.bottom');
285        this.height      = this.element.height();
286        this.angle       = this.element.hasClass('closed') ? this.options.maxAngle : this.options.minA

286ngle;
287        //this.state       = null;
288        this.lastChange  = null;
289        this.panel       = this.element.find('.panel');
290        //this.isFirefox  = $('html').hasClass('bx-firefox');
291        this.openedSlide = null;
292
293        if (0 === this.height) {
294            this.angle = 90;
295        }
296
297        this.animateFunc = window.requestAnimationFrame
298            || window.msRequestAnimationFrame
299            || window.mozRequestAnimationFrame
300            || window.oRequestAnimationFrame
301            || window.webkitRequestAnimationFrame;
302
303        var fps = 60;
304        this.frameTimeCorrection = 0;
305        this.lastFrameTime       = new Date();
306        this.timerPeriod         = 1000/fps;
307    },
308    click: function(el, e) {
309        if (!this.element.hasClass('closed') || this.options.manager.isSliding) {
310            return;
311        }
312
313        e.preventDefault();
314        this.options.manager.open(this);
315    },
316    open: function(openedSlide) {
317        this.openedSlide = openedSlide;
318
319        this.lastChange = new Date();
320        //this.state = 'opening';
321        this.animate();
322    },
323    /*openSmall: function() {
324        this.element.addClass('closed');
325        this.lastChange = new Date();
326        this.state = 'opening_small';
327        this.animate();
328    },
329    close: function() {
330        this.element.addClass('closed');
331
332        this.otherSlides = [];
333        var manager = this.options.manager;
334        for (var i = 0; i < manager.slides.length; i++) {
335            if (manager.slides[i] !== this) {
336                this.otherSlides.push(manager.slides[i]);
337            }
338        }
339
340        this.lastChange = new Date();
341        this.state = 'closing';
342        this.animate();
343    },
344    closeSmall: function(otherSlides) {
345        this.element.addClass('closed');
346        this.lastChange = new Date();
347        this.state = 'closing_small';
348        this.animate();
349    },*/
350    animate: function() {
351        /*if ('opening' === this.state && this.height >= this.options.maxHeight) {
352            this.height = this.options.maxHeight;
353            this.angle  = 0;
354            this.rotate(this.angle);
355            this.options.manager.isSliding = false;
356            return;
357        } else if ('opening_small' === this.state && this.height >= this.options.minHeight) {
358            this.height = this.options.minHeight;
359            this.angle  = this.options.maxAngle;
360            this.rotate(this.angle);
361            this.options.manager.isSliding = false;
362            return;
363        } else if ('closing' === this.state && this.height <= this.options.minHeight) {
364            this.height = this.options.minHeight;
365            this.angle  = this.options.maxAngle;
366            this.rotate(this.angle);
367            this.options.manager.isSliding = false;
368            return;
369        } else if ('closing_small' === this.state && this.height <= 0) {
370            this.height = 0;
371            this.angle  = 90;
372            this.rotate(this.angle);
373            this.options.manager.isSliding = false;
374            return;
375        }*/
376
377        if (this.height === this.options.maxHeight) {
378            this.setHeight(this.options.maxHeight);
379            this.openedSlide.setHeight(this.options.minHeight);
380
381            this.options.manager.isSliding = false;
382            return;
383        }
384
385        var timeDiff = new Date() - this.lastChange;
386        if (timeDiff > this.options.speed) {
387            /*if ('opening' === this.state) {
388                this.diffOpen(timeDiff);
389            } else if ('opening_small' === this.state) {
390                this.diffOpenSmall(timeDiff);
391            } else if ('closing' === this.state) {
392                this.diffClose();
393            } else if ('closing_small' === this.state) {
394                this.diffCloseSmall(timeDiff);
395            }*/
396
397            this.diffOpen(timeDiff);
398            this.lastChange = new Date();
399        }
400
401        var nowTime = new Date();
402        this.frameTimeCorrection += nowTime - this.lastFrameTime - this.timerPeriod;
403        if(this.frameTimeCorrection >= this.timerPeriod) {
404            this.frameTimeCorrection = this.timerPeriod - 1;
405        }

406        this.lastFrameTime = nowTime;
407
408        if (this.animateFunc) {
409            this.animateFunc.call(window, this.proxy('animate'));
410        } else {
411            setTimeout(this.proxy('animate'), this.timerPeriod - this.frameTimeCorrection);
412        }
413    },
414    /**
415     * Вызывается для разворачивающегося слайда
416     */
417    diffOpen: function(timeDiff) {
418        this.height = Math.floor(this.height + timeDiff / this.options.speed);
419
420        if (this.height > this.options.maxHeight) {
421            this.height = this.options.maxHeight;
422        }
423
424        var openedSlideHeight = this.options.manager.height - this.height - (3 === this.options.manager.slides.length ? this.options.minHeight : 0);
425
426        this.openedSlide.setHeight(openedSlideHeight);
427        this.setHeight(this.height);
428    },
429    /**
430     * Вызывается для разворачивающегося с нуля слайда
431     */
432    /*diffOpenSmall: function(timeDiff) {
433        this.height = this.height + timeDiff / this.options.speed * this.options.minHeight / (this.options.maxHeight - this.options.minHeight);
434
435        if (this.height > this.options.minHeight) {
436            this.height = this.options.minHeight;
437        }
438
439        this.angle = Math.acos(this.height / this.options.maxHeight) * (180 / Math.PI);
440        if (this.isFirefox) {
441            this.angle -= 1;
442        }
443
444        this.rotate(this.angle);
445        this.panel.height(this.height);
446    },*/
447    /**
448     * Вызывается для сворачивающегося слайда
449     */
450    /*diffClose: function() {
451        var otherSlidesHeight = 0;
452        for (var i = 0; i < this.otherSlides.length; i++) {
453            otherSlidesHeight += this.otherSlides[i].height;
454        }
455
456        this.height = this.options.fullHeight - otherSlidesHeight;
457
458        if (this.height < this.options.minHeight) {
459            this.height = this.options.minHeight;
460        }
461
462        this.panel.height(this.height);
463
464        this.angle = Math.acos(this.height / this.options.maxHeight) * (180 / Math.PI);
465        this.rotate(this.angle);
466    },*/
467    /**
468     * Вызывается для сворачивающегося до нуля слайда
469     */
470    /*diffCloseSmall: function(timeDiff) {
471        this.height = this.height - timeDiff / this.options.speed * this.options.minHeight / (this.options.maxHeight - this.options.minHeight);
472
473        if (this.height < 0) {
474            this.height = 0;
475        }
476
477        this.angle = Math.acos(this.height / this.options.maxHeight) * (180 / Math.PI);
478
479        this.rotate(this.angle);
480        this.panel.height(this.height);
481    },*/
482    setHeight: function(height) {
483        this.height = height;
484
485        this.panel.height(height);
486        this.rotate(Math.acos(height / this.options.maxHeight) * (180 / Math.PI));
487    },
488    rotate: function(angle) {
489        this.angle = angle;
490        //var topAngle = this.isFirefox && 0 !== angle && this.maxAngle != angle ? angle - 1 : angle;
491        //var topAngle = angle;
492
493        this.topDiv.css('transform', 'rotatex(-' + angle + 'deg)')
494                   .css('-o-transform', 'rotatex(-' + angle + 'deg)')
495                   .css('-ms-transform', 'rotatex(-' + angle + 'deg)')
496                   .css('-moz-transform', 'rotatex(-' + angle + 'deg)')
497                   .css('-webkit-transform', 'rotatex(-' + angle + 'deg)');
498
499        this.bottomDiv.css('transform', 'rotatex(' + angle + 'deg)')
500                      .css('-o-transform', 'rotatex(' + angle + 'deg)')
501                      .css('-ms-transform', 'rotatex(' + angle + 'deg)')
502                      .css('-moz-transform', 'rotatex(' + angle + 'deg)')
503                      .css('-webkit-transform', 'rotatex(' + angle + 'deg)');
504    }
505});