https://sprinklerfitters704.org/js/jquery.cycle2.carousel.js

1/*! carousel transition plugin for Cycle2;  version: 20130528 */
2(function($) {
3    "use strict";
4
5    $(document).on('cycle-bootstrap', function(e, opts, API) {
6        if (opts.fx !== 'carousel')
7            return;
8
9        API.getSlideIndex = function(el) {
10            var slides = this.opts()._carouselWrap.children();
11            var i = slides.index(el);
12            return i % slides.length;
13        };
14
15        // override default 'next' function
16        API.next = function() {
17            var count = opts.reverse ? -1 : 1;
18            if (opts.allowWrap === false && (opts.currSlide + count) > opts.slideCount - opts.carouselVisible)
19                return;
20            opts.API.advanceSlide(count);
21            opts.API.trigger('cycle-next', [opts]).log('cycle-next');
22        };
23
24    });
25
26
27    $.fn.cycle.transitions.carousel = {
28        // transition API impl
29        preInit: function(opts) {
30            opts.hideNonActive = false;
31
32            opts.container.on('cycle-destroyed', $.proxy(this.onDestroy, opts.API));
33            // override default API implementation
34            opts.API.stopTransition = this.stopTransition;
35
36            // issue #10
37            for (var i = 0; i < opts.startingSlide; i++) {
38                opts.container.append(opts.slides[0]);
39            }
40        },
41        // transition API impl
42        postInit: function(opts) {
43            var i, j, slide, pagerCutoffIndex, wrap;
44            var vert = opts.carouselVertical;
45            if (opts.carouselVisible && opts.carouselVisible > opts.slideCount)
46                opts.carouselVisible = opts.slideCount - 1;
47            var visCount = opts.carouselVisible || opts.slides.length;
48            var slideCSS = {display: vert ? 'block' : 'inline-block', position: 'static'};
49
50            // required styles
51            opts.container.css({position: 'relative', overflow: 'hidden'});
52            opts.slides.css(slideCSS);
53
54            opts._currSlide = opts.currSlide;
55
56            // wrap slides in a div; this div is what is animated
57            wrap = $('<div class="cycle-carousel-wrap"></div>')
58                    .prependTo(opts.container)
59                    .css({margin: 0, padding: 0, top: 0, left: 0, position: 'absolute'})
60                    .append(opts.slides);
61
62            opts._carouselWrap = wrap;
63
64            if (!vert)
65                wrap.css('white-space', 'nowrap');
66
67            if (opts.allowWrap !== false) {
68                // prepend and append extra slides so we don't see any empty space when we
69                // near the end of the carousel.  for fluid containers, add even more clones
70                // so there is plenty to fill the screen
71                // @todo: optimzie this based on slide sizes
72
73                for (j = 0; j < (opts.carouselVisible === undefined ? 2 : 1); j++) {
74                    for (i = 0; i < opts.slideCount; i++) {
75                        wrap.append(opts.slides[i].cloneNode(true));
76                    }
77                    i = opts.slideCount;
78                    while (i--) { // #160, #209
79                        wrap.prepend(opts.slides[i].cloneNode(true));
80                    }
81                }
82
83                wrap.find('.cycle-slide-active').removeClass('cycle-slide-active');
84                opts.slides.eq(opts.startingSlide).addClass('cycle-slide-active');
85            }
86
87            if (opts.pager && opts.allowWrap === false) {
88                // hide "extra" pagers
89                pagerCutoffIndex = opts.slideCount - visCount;
90                $(opts.pager).children().filter(':gt(' + pagerCutoffIndex + ')').hide();
91            }
92
93            opts._nextBoundry = opts.slideCount - opts.carouselVisible;
94
95            this.prepareDimensions(opts);
96        },
97        prepareDimensions: function(opts) {
98            var dim, offset, pagerCutoffIndex, tmp;
99            var vert = opts.carouselVertical;
100            var visCount = opts.carouselVisible || opts.slides.length;
101
102            if (opts.carouselFluid && opts.carouselVisible) {
103                if (!opts._carouselResizeThrottle) {
104                    // fluid container AND fluid slides; slides need to be resized to fit container
105                    this.fluidSlides(opts);
106                }
107            }
108            else if (opts.carouselVisible && opts.carouselSlideDimension) {
109                dim = visCount * opts.carouselSlideDimension;
110                opts.container[ vert ? 'height' : 'width' ](dim);
111            }
112            else if (opts.carouselVisible) {
113                dim = visCount * $(opts.slides[0])[vert ? 'outerHeight' : 'outerWidth'](true);
114                opts.container[ vert ? 'height' : 'width' ](dim);
115            }
116            // else {
117            //     // fluid; don't size the container
118            // }
119

120            offset = (opts.carouselOffset || 0);
121            if (opts.allowWrap !== false) {
122                if (opts.carouselSlideDimension) {
123                    offset -= ((opts.slideCount + opts.currSlide) * opts.carouselSlideDimension);
124                }
125                else {
126                    // calculate offset based on actual slide dimensions
127                    tmp = opts._carouselWrap.children();
128                    for (var j = 0; j < (opts.slideCount + opts.currSlide); j++) {
129                        offset -= $(tmp[j])[vert ? 'outerHeight' : 'outerWidth'](true);
130                    }
131                }
132            }
133
134            opts._carouselWrap.css(vert ? 'top' : 'left', offset);
135        },
136        fluidSlides: function(opts) {
137            var timeout;
138            var slide = opts.slides.eq(0);
139            var adjustment = slide.outerWidth() - slide.width();
140            var prepareDimensions = this.prepareDimensions;
141
142            // throttle resize event
143            $(window).on('resize', resizeThrottle);
144
145            opts._carouselResizeThrottle = resizeThrottle;
146            onResize();
147
148            function resizeThrottle() {
149                clearTimeout(timeout);
150                timeout = setTimeout(onResize, 20);
151            }
152
153            function onResize() {
154                opts._carouselWrap.stop(false, true);
155                var slideWidth = opts.container.width() / opts.carouselVisible;
156                slideWidth = Math.ceil(slideWidth - adjustment);
157                opts._carouselWrap.children().width(slideWidth);
158                if (opts._sentinel)
159                    opts._sentinel.width(slideWidth);
160                prepareDimensions(opts);
161            }
162        },
163        // transition API impl
164        transition: function(opts, curr, next, fwd, callback) {
165            var moveBy, props = {};
166            var hops = opts.nextSlide - opts.currSlide;
167            var vert = opts.carouselVertical;
168            var speed = opts.speed;
169
170            // handle all the edge cases for wrapping & non-wrapping
171            if (opts.allowWrap === false) {
172                fwd = hops > 0;
173                var currSlide = opts._currSlide;
174                var maxCurr = opts.slideCount - opts.carouselVisible;
175                if (hops > 0 && opts.nextSlide > maxCurr && currSlide == maxCurr) {
176                    hops = 0;
177                }
178                else if (hops > 0 && opts.nextSlide > maxCurr) {
179                    hops = opts.nextSlide - currSlide - (opts.nextSlide - maxCurr);
180                }
181                else if (hops < 0 && opts.currSlide > maxCurr && opts.nextSlide > maxCurr) {
182                    hops = 0;
183                }
184                else if (hops < 0 && opts.currSlide > maxCurr) {
185                    hops += opts.currSlide - maxCurr;
186                }
187                else
188                    currSlide = opts.currSlide;
189
190                moveBy = this.getScroll(opts, vert, currSlide, hops);
191                opts.API.opts()._currSlide = opts.nextSlide > maxCurr ? maxCurr : opts.nextSlide;
192            }
193            else {
194                if (fwd && opts.nextSlide === 0) {
195                    // moving from last slide to first
196                    moveBy = this.getDim(opts, opts.currSlide, vert);
197                    callback = this.genCallback(opts, fwd, vert, callback);
198                }
199                else if (!fwd && opts.nextSlide == opts.slideCount - 1) {
200                    // moving from first slide to last
201                    moveBy = this.getDim(opts, opts.currSlide, vert);
202                    callback = this.genCallback(opts, fwd, vert, callback);
203                }
204                else {
205                    moveBy = this.getScroll(opts, vert, opts.currSlide, hops);
206                }
207            }
208
209            props[ vert ? 'top' : 'left' ] = fwd ? ("-=" + moveBy) : ("+=" + moveBy);
210
211            // throttleSpeed means to scroll slides at a constant rate, rather than
212            // a constant speed
213            if (opts.throttleSpeed)
214                speed = (moveBy / $(opts.slides[0])[vert ? 'height' : 'width']()) * opts.speed;
215
216            opts._carouselWrap.animate(props, speed, opts.easing, callback);
217        },
218        getDim: function(opts, index, vert) {
219            var slide = $(opts.slides[index]);
220            return slide[ vert ? 'outerHeight' : 'outerWidth'](true);
221        },
222        getScroll: function(opts, vert, currSlide, hops) {
223            var i, moveBy = 0;
224
225            if (hops > 0) {
226                for (i = currSlide; i < currSlide + hops; i++)
227                    moveBy += this.getDim(opts, i, vert);
228            }
229            else {
230                for (i = currSlide; i > currSlide + hops; i--)
231                    moveBy += this.getDim(opts, i, vert);
232            }
233            return moveBy;
234        },
235        genCallback: function(opts, fwd, vert, callback) {
236            // returns callback fn that resets the left/top wrap position to the "real" slides
237            return function() {
238                var pos = $(opts.slides[opts.nextSlide]).position();
239                var offset = 0 - pos[vert ? 'top' : 'left'] + (opts.carouselOff

239set || 0);
240                opts._carouselWrap.css(opts.carouselVertical ? 'top' : 'left', offset);
241                callback();
242            };
243        },
244        // core API override
245        stopTransition: function() {
246            var opts = this.opts();
247            opts.slides.stop(false, true);
248            opts._carouselWrap.stop(false, true);
249        },
250        // core API supplement
251        onDestroy: function(e) {
252            var opts = this.opts();
253            if (opts._carouselResizeThrottle)
254                $(window).off('resize', opts._carouselResizeThrottle);
255            opts.slides.prependTo(opts.container);
256            opts._carouselWrap.remove();
257        }
258    };
259
260})(jQuery);