https://esensja.pl/openCarousel/jquery.openCarousel.js

1/*
2jQuery Open Carousel
3
4Copyright (c) 2013 Justin McCandless (justinmccandless.com)
5
6Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
7
8The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
9
10THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
11*/
12
13
14/*
15This is the main coffeescript file
16Include jquery.openCarousel.js and jquery.openCarousel.css in your projects
17*/
18
19
20(function() {
21
22  window.Ocarousel = (function() {
23    /* Initialize
24*/
25
26    var arrayShuffle;
27
28    Ocarousel.prototype.ocarousel = null;
29
30    Ocarousel.prototype.ocarousel_window = null;
31
32    Ocarousel.prototype.ocarousel_container = null;
33
34    Ocarousel.prototype.indicators_container = null;
35
36    Ocarousel.prototype.frames = null;
37
38    Ocarousel.prototype.indicators = null;
39
40    Ocarousel.prototype.timer = null;
41
42    Ocarousel.prototype.active = 0;
43
44    /* Default Settings
45*/
46
47
48    Ocarousel.settings = {
49      speed: .5 * 1000,
50      period: 4 * 1000,
51      transition: "scroll",
52      perscroll: 1,
53      wrapearly: 0,
54      shuffle: false,
55      indicator_fill: "#ffffff",
56      indicator_r: 6,
57      indicator_spacing: 6,
58      indicator_cy: 20,
59      indicator_stroke: "#afafaf",
60      indicator_strokewidth: "2"
61    };
62
63    function Ocarousel(ocarousel) {
64      var me, _ref, _ref1, _ref10, _ref11, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
65      me = this;

66      this.ocarousel = jQuery(ocarousel);
67      this.ocarousel_window = jQuery(this.ocarousel).find(".ocarousel_window");
68      this.frames = jQuery(this.ocarousel_window).children();
69      this.indicators_container = jQuery(this.ocarousel).find(".ocarousel_indicators");
70      this.pagination_current = jQuery(this.ocarousel).find(".ocarousel_pagination_current");
71      this.pagination_total = jQuery(this.ocarousel).find(".ocarousel_pagination_total");
72      if (this.frames.length > 1) {
73        this.settings = {};
74        this.settings.speed = (_ref = jQuery(this.ocarousel).data('ocarousel-speed')) != null ? _ref : Ocarousel.settings.speed;
75        this.settings.period = (_ref1 = jQuery(this.ocarousel).data('ocarousel-period')) != null ? _ref1 : Ocarousel.settings.period;
76        this.settings.transition = (_ref2 = jQuery(this.ocarousel).data('ocarousel-transition')) != null ? _ref2 : Ocarousel.settings.transition;
77        this.settings.perscroll = (_ref3 = jQuery(this.ocarousel).data('ocarousel-perscroll')) != null ? _ref3 : Ocarousel.settings.perscroll;
78        this.settings.wrapearly = (_ref4 = jQuery(this.ocarousel).data('ocarousel-wrapearly')) != null ? _ref4 : Ocarousel.settings.wrapearly;
79        this.settings.shuffle = (_ref5 = jQuery(this.ocarousel).data('ocarousel-shuffle')) != null ? _ref5 : Ocarousel.settings.shuffle;
80        this.settings.indicator_fill = (_ref6 = jQuery(this.ocarousel).data('ocarousel-indicator-fill')) != null ? _ref6 : Ocarousel.settings.indicator_fill;
81        this.settings.indicator_r = (_ref7 = jQuery(this.ocarousel).data('ocarousel-indicator-r')) != null ? _ref7 : Ocarousel.settings.indicator_r;
82        this.settings.indicator_spacing = (_ref8 = jQuery(this.ocarousel).data('ocarousel-indicator-spacing')) != null ? _ref8 : Ocarousel.settings.indicator_spacing;
83        this.settings.indicator_cy = (_ref9 = jQuery(this.ocarousel).data('ocarousel-indicator-cy')) != null ? _ref9 : Ocarousel.settings.indicator_cy;
84        this.settings.indicator_stroke = (_ref10 = jQuery(this.ocarousel).data('ocarousel-indicator-stroke')) != null ? _ref10 : Ocarousel.settings.indicator_stroke;
85        this.settings.indicator_strokewidth = (_ref11 = jQuery(this.ocarousel).data('ocarousel-indicator-strokewidth')) != null ? _ref11 : Ocarousel.settings.indicator_strokewidth;
86        this.ocarousel_container = document.createElement("div");
87        this.ocarousel_container.className = "ocarousel_window_slides";
88        jQuery(this.ocarousel).show();
89        this.render();
90        this.ocarousel_window.html("");
91        jQuery(this.ocarousel_window).get(0).appendChild(this.ocarousel_container);
92      }
93    }
94
95    /* Remove and reset everything in the DOM
96*/
97
98
99    Ocarousel.prototype.render = function() {
100      var cx, i, indicator, indicators_svg, me, _i, _ref;
101      this.timerStop();
102      if (this.settings.shuffle === true) {
103        this.frames = arrayShuffle(this.frames);
104      }
105      jQuery(this.ocarousel_container).html("");
106      me = this;
107      jQuery(this.frames).each(function(i) {
108        return me.ocarousel_container.appendChild(this);
109      });
110      if (this.indicators_container.length && document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")) {
111        jQuery(this.indicators_container).html("");
112        indicators_svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
113        indicators_svg.setAttribute("version", "1.1");
114        jQuery(this.indicators_container).get(0).appendChild(indicators_svg);
115        this.indicators = [];
116        cx = jQuery(this.indicators_container).width() / 2 - this.settings.indicator_r * this.frames.length - this.settings.indicator_spacing * this.frames.length / 2;
117        for (i = _i = 0, _ref = this.frames.length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
118          indicator = document.createElementNS("http://www.w3.org/2000/svg", "circle");
119          indicator.className = "ocarousel_link";
120          indicator.setAttribute("data-ocarousel-link", i);
121          indicator.setAttribute("cx", cx);
122          indicator.setAttribute("cy", this.settings.indicator_cy);
123          indicator.setAttribute("r", this.settings.indicator_r);
124          indicator.setAttribute("stroke", this.settings.indicator_stroke);
125          indicator.setAttribute("stroke-width", this.settings.indicator_strokewidth);
126          indicator.setAttribute("fill", i === this.active ? this.settings.indicator_stroke : this.settings.indicator_fill);
127          indicators_svg.appendChild(indicator);
128          this.indicators.push(indicator);
129          jQuery(indicator).data("ocarousel_index", i);
130          cx = cx + this.settings.indicator_r * 2 + this.settings.indicator_spacing;
131        }
132      }
133      if (this.pagination_current.length) {
134        jQuery(this.pagination_current).html(this.active + 1);
135      }
136      if (this.pagination_total.length) {
137        jQuery(this.pagination_total).html(this.frames.length);
138      }

139      jQuery(this.ocarousel).find("[data-ocarousel-link]").off("click");
140      jQuery(this.ocarousel).find("[data-ocarousel-link]").on("click", function(event) {
141        var goHere;
142        event.preventDefault();
143        goHere = jQuery(this).data("ocarousel-link");
144        if (goHere != null) {
145          if (goHere === "left" || goHere === "Left" || goHere === "l" || goHere === "L") {
146            goHere = me.getPrev();
147          } else if (goHere === "right" || goHere === "Right" || goHere === "r" || goHere === "R") {
148            goHere = me.getNext();
149          } else if (goHere === "first" || goHere === "First" || goHere === "beginning" || goHere === "Beginning") {
150            goHere = 0;
151          } else if (goHere === "last" || goHere === "Last" || goHere === "end" || goHere === "End") {
152            goHere = me.frames.length - 1;
153          }
154          return me.scrollTo(goHere);
155        }
156      });
157      return this.timerStart();
158    };
159
160    /* Animate a transition to the given position
161*/
162
163
164    Ocarousel.prototype.scrollTo = function(index, instant) {
165      var me, nextPos, perEnd, wrapEnd;
166      if (instant == null) {
167        instant = false;
168      }
169      me = this;
170      if (index != null) {
171        this.timerStop();
172        if (index >= (this.frames.length - this.settings.wrapearly)) {
173          index = 0;
174        } else if (index >= (this.frames.length - this.settings.perscroll)) {
175          index = this.frames.length - this.settings.perscroll;
176        } else if (index < 0) {
177          perEnd = this.frames.length - this.settings.perscroll;
178          wrapEnd = this.frames.length - 1 - this.settings.wrapearly;
179          index = Math.min(perEnd, wrapEnd);
180        }
181        jQuery(this.ocarousel_container).stop();
182        nextPos = this.getPos(index);
183        if (instant) {
184          jQuery(this.ocarousel_container).animate({
185            right: nextPos + "px"
186          }, 0);
187        } else if (this.settings.transition === "fade") {
188          jQuery(this.ocarousel_container).fadeOut(this.settings.speed, null).animate({
189            right: nextPos + "px"
190          }, 0).fadeIn(me.settings.speed);
191        } else {
192          jQuery(this.ocarousel_container).animate({
193            right: nextPos + "px"
194          }, this.settings.speed);
195        }
196        if (this.indicators != null) {
197          jQuery(this.indicators[this.active]).attr("fill", this.settings.indicator_fill);
198          jQuery(this.indicators[index]).attr("fill", this.settings.indicator_stroke);
199        }
200        this.active = index;
201        if (this.pagination_current.length) {
202          jQuery(this.pagination_current).html(this.active + 1);
203        }
204        return this.timerStart();
205      }
206    };
207
208    /* Returns the distance of a frame from the left edge of its container
209*/
210
211
212    Ocarousel.prototype.getPos = function(index) {
213      return jQuery(this.frames[index]).position().left;
214    };
215
216    /* Returns the index of the next slide that should be shown
217*/
218
219
220    Ocarousel.prototype.getNext = function() {
221      var count, next;
222      next = this.active + this.settings.perscroll;
223      if (next > (this.frames.length - this.settings.perscroll) && next < this.frames.length) {
224        next = this.frames.length - this.settings.perscroll;
225      }
226      count = this.frames.length;
227      while (count && !jQuery(this.frames[next]).is(":visible")) {
228        next++;
229        if (next > this.frames.length - 1) {
230          next = 0;
231        }
232        count--;
233      }
234      return next;
235    };
236
237    /* Returns the index of the next slide that should be shown before the current position
238*/
239
240
241    Ocarousel.prototype.getPrev = function() {
242      var count, prev;
243      prev = this.active - this.settings.perscroll;
244      if (prev < 0 && this.active !== 0) {
245        prev = 0;
246      }
247      count = this.frames.length;
248      while (count && !jQuery(this.frames[prev]).is(":visible")) {
249        prev--;
250        if (prev < 0) {
251          prev = this.frames.length - 1;
252        }
253        count--;
254      }
255      return prev;
256    };
257
258    /* Starts or resumes the scroll timer
259*/
260
261
262    Ocarousel.prototype.timerStart = function() {
263      var me;
264      me = this;
265      if (this.settings.period !== Infinity) {
266        return this.timer = setInterval((function() {
267          return me.scrollTo(me.getNext());
268        }), this.settings.period);
269      }
270    };
271
272    /* Stops the scroll timer
273*/
274
275
276    Ocarousel.prototype.timerStop = function() {
277      if (this.timer != null) {
278        clearInterval(this.timer);
279        return this.timer = null;
280      }
281    };
282
283    /* Starts the timer if it is stopped, stops the timer if it is running
284*/
285
286
287    Ocarousel.prototype.timerToggle = function() {
288      if (this.timer != null) {
289        return this.timerStop();
290      } else {
291        return this.timerStart();
292      }
293    };
294
295    /* Removes a frame, keeping the carousel in an intuitive position afterwards
296*/
297
298
299    Ocarousel.prototype.remove = function(index) {
300      if (index > 0 && index < (this.frames.length - 1)) {
301        this.frames.splice(index, 1);
302        this.render();
303        if (this.active > index) {
304          return this.scrollTo(this.active - 1, true);
305        }
306      }
307    };
308
309    /* Adds a frame, keeping the carousel in an intuitive position afterwards
310*/
311
312
313    Ocarousel.prototype.add = function(elt, index) {
314      if (index > 0 && index < (this.frames.length - 1)) {
315        this.frames.splice(index, 0, elt);
316        this.render();
317        if (this.active >= index) {
318          return this.scrollTo(this.active + 1, true);
319        }
320      }
321    };
322
323    arrayShuffle = function(arr) {
324      var i, j, tempi, tempj;
325      i = arr.length;
326      if (i === 0) {
327        return false;

328      }
329      while (--i) {
330        j = Math.floor(Math.random() * (i + 1));
331        tempi = arr[i];
332        tempj = arr[j];
333        arr[i] = tempj;
334        arr[j] = tempi;
335      }
336      return arr;
337    };
338
339    return Ocarousel;
340
341  })();
342
343  jQuery(document).ready(function() {
344    return jQuery(".ocarousel").each(function() {
345      return new Ocarousel(this);
346    });
347  });
348
349}).call(this);