source: pro-violet-viettel/www/deploy/20150304/assets/js/jquery.slides.js @ 789

Last change on this file since 789 was 789, checked in by quyenla, 10 years ago

preview
File size: 20.7 KB
RevLine 
[789]1// Generated by CoffeeScript 1.6.1
2(function() {
3
4  (function($, window, document) {
5    var Plugin, defaults, pluginName;
6    pluginName = "slidesjs";
7    defaults = {
8      width: 940,
9      height: 528,
10      start: 1,
11      navigation: {
12        active: true,
13        effect: "slide"
14      },
15      pagination: {
16        active: true,
17        effect: "slide"
18      },
19      play: {
20        active: false,
21        effect: "slide",
22        interval: 5000,
23        auto: false,
24        swap: true,
25        pauseOnHover: false,
26        restartDelay: 2500
27      },
28      effect: {
29        slide: {
30          speed: 500
31        },
32        fade: {
33          speed: 300,
34          crossfade: true
35        }
36      },
37      callback: {
38        loaded: function() {},
39        start: function() {},
40        complete: function() {}
41      }
42    };
43    Plugin = (function() {
44
45      function Plugin(element, options) {
46        this.element = element;
47        this.options = $.extend(true, {}, defaults, options);
48        this._defaults = defaults;
49        this._name = pluginName;
50        this.init();
51      }
52
53      return Plugin;
54
55    })();
56    Plugin.prototype.init = function() {
57      var $element, nextButton, pagination, playButton, prevButton, stopButton,
58        _this = this;
59      $element = $(this.element);
60      this.data = $.data(this);
61      $.data(this, "animating", false);
62      $.data(this, "total", $element.children().not(".slidesjs-navigation", $element).length);
63      $.data(this, "current", this.options.start - 1);
64      $.data(this, "vendorPrefix", this._getVendorPrefix());
65      if (typeof TouchEvent !== "undefined") {
66        $.data(this, "touch", true);
67        this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
68      }
69      $element.css({
70        overflow: "hidden"
71      });
72      $element.slidesContainer = $element.children().not(".slidesjs-navigation", $element).wrapAll("<div class='slidesjs-container'>", $element).parent().css({
73        overflow: "hidden",
74        position: "relative"
75      });
76      $(".slidesjs-container", $element).wrapInner("<div class='slidesjs-control'>", $element).children();
77      $(".slidesjs-control", $element).css({
78        position: "relative",
79        left: 0
80      });
81      $(".slidesjs-control", $element).children().addClass("slidesjs-slide").css({
82        position: "absolute",
83        top: 0,
84        left: 0,
85        width: "100%",
86        zIndex: 0,
87        display: "none",
88        webkitBackfaceVisibility: "hidden"
89      });
90      $.each($(".slidesjs-control", $element).children(), function(i) {
91        var $slide;
92        $slide = $(this);
93        return $slide.attr("slidesjs-index", i);
94      });
95      if (this.data.touch) {
96        $(".slidesjs-control", $element).on("touchstart", function(e) {
97          return _this._touchstart(e);
98        });
99        $(".slidesjs-control", $element).on("touchmove", function(e) {
100          return _this._touchmove(e);
101        });
102        $(".slidesjs-control", $element).on("touchend", function(e) {
103          return _this._touchend(e);
104        });
105      }
106      $element.fadeIn(0);
107      this.update();
108      if (this.data.touch) {
109        this._setuptouch();
110      }
111      $(".slidesjs-control", $element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function() {
112        return $(this).css({
113          zIndex: 10
114        });
115      });
116      if (this.options.navigation.active) {
117        prevButton = $("<a>", {
118          "class": "slidesjs-previous slidesjs-navigation",
119          href: "#",
120          title: "Previous",
121          text: "Previous"
122        }).appendTo($element);
123        nextButton = $("<a>", {
124          "class": "slidesjs-next slidesjs-navigation",
125          href: "#",
126          title: "Next",
127          text: "Next"
128        }).appendTo($element);
129      }
130      $(".slidesjs-next", $element).click(function(e) {
131        e.preventDefault();
132        _this.stop(true);
133        return _this.next(_this.options.navigation.effect);
134      });
135      $(".slidesjs-previous", $element).click(function(e) {
136        e.preventDefault();
137        _this.stop(true);
138        return _this.previous(_this.options.navigation.effect);
139      });
140      if (this.options.play.active) {
141        playButton = $("<a>", {
142          "class": "slidesjs-play slidesjs-navigation",
143          href: "#",
144          title: "Play",
145          text: "Play"
146        }).appendTo($element);
147        stopButton = $("<a>", {
148          "class": "slidesjs-stop slidesjs-navigation",
149          href: "#",
150          title: "Stop",
151          text: "Stop"
152        }).appendTo($element);
153        playButton.click(function(e) {
154          e.preventDefault();
155          return _this.play(true);
156        });
157        stopButton.click(function(e) {
158          e.preventDefault();
159          return _this.stop(true);
160        });
161        if (this.options.play.swap) {
162          stopButton.css({
163            display: "none"
164          });
165        }
166      }
167      if (this.options.pagination.active) {
168        pagination = $("<ul>", {
169          "class": "slidesjs-pagination"
170        }).appendTo($element);
171        $.each(new Array(this.data.total), function(i) {
172          var paginationItem, paginationLink;
173          paginationItem = $("<li>", {
174            "class": "slidesjs-pagination-item"
175          }).appendTo(pagination);
176          paginationLink = $("<a>", {
177            href: "#",
178            "data-slidesjs-item": i,
179            html: i + 1
180          }).appendTo(paginationItem);
181          return paginationLink.click(function(e) {
182            e.preventDefault();
183            _this.stop(true);
184            return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1);
185          });
186        });
187      }
188      $(window).bind("resize", function() {
189        return _this.update();
190      });
191      this._setActive();
192      if (this.options.play.auto) {
193        this.play();
194      }
195      return this.options.callback.loaded(this.options.start);
196    };
197    Plugin.prototype._setActive = function(number) {
198      var $element, current;
199      $element = $(this.element);
200      this.data = $.data(this);
201      current = number > -1 ? number : this.data.current;
202      $(".active", $element).removeClass("active");
203      return $(".slidesjs-pagination li:eq(" + current + ") a", $element).addClass("active");
204    };
205    Plugin.prototype.update = function() {
206      var $element, height, width;
207      $element = $(this.element);
208      this.data = $.data(this);
209      $(".slidesjs-control", $element).children(":not(:eq(" + this.data.current + "))").css({
210        display: "none",
211        left: 0,
212        zIndex: 0
213      });
214      width = $element.width();
215      height = (this.options.height / this.options.width) * width;
216      this.options.width = width;
217      this.options.height = height;
218      return $(".slidesjs-control, .slidesjs-container", $element).css({
219        width: width,
220        height: height
221      });
222    };
223    Plugin.prototype.next = function(effect) {
224      var $element;
225      $element = $(this.element);
226      this.data = $.data(this);
227      $.data(this, "direction", "next");
228      if (effect === void 0) {
229        effect = this.options.navigation.effect;
230      }
231      if (effect === "fade") {
232        return this._fade();
233      } else {
234        return this._slide();
235      }
236    };
237    Plugin.prototype.previous = function(effect) {
238      var $element;
239      $element = $(this.element);
240      this.data = $.data(this);
241      $.data(this, "direction", "previous");
242      if (effect === void 0) {
243        effect = this.options.navigation.effect;
244      }
245      if (effect === "fade") {
246        return this._fade();
247      } else {
248        return this._slide();
249      }
250    };
251    Plugin.prototype.goto = function(number) {
252      var $element, effect;
253      $element = $(this.element);
254      this.data = $.data(this);
255      if (effect === void 0) {
256        effect = this.options.pagination.effect;
257      }
258      if (number > this.data.total) {
259        number = this.data.total;
260      } else if (number < 1) {
261        number = 1;
262      }
263      if (typeof number === "number") {
264        if (effect === "fade") {
265          return this._fade(number);
266        } else {
267          return this._slide(number);
268        }
269      } else if (typeof number === "string") {
270        if (number === "first") {
271          if (effect === "fade") {
272            return this._fade(0);
273          } else {
274            return this._slide(0);
275          }
276        } else if (number === "last") {
277          if (effect === "fade") {
278            return this._fade(this.data.total);
279          } else {
280            return this._slide(this.data.total);
281          }
282        }
283      }
284    };
285    Plugin.prototype._setuptouch = function() {
286      var $element, next, previous, slidesControl;
287      $element = $(this.element);
288      this.data = $.data(this);
289      slidesControl = $(".slidesjs-control", $element);
290      next = this.data.current + 1;
291      previous = this.data.current - 1;
292      if (previous < 0) {
293        previous = this.data.total - 1;
294      }
295      if (next > this.data.total - 1) {
296        next = 0;
297      }
298      slidesControl.children(":eq(" + next + ")").css({
299        display: "block",
300        left: this.options.width
301      });
302      return slidesControl.children(":eq(" + previous + ")").css({
303        display: "block",
304        left: -this.options.width
305      });
306    };
307    Plugin.prototype._touchstart = function(e) {
308      var $element, touches;
309      $element = $(this.element);
310      this.data = $.data(this);
311      touches = e.originalEvent.touches[0];
312      this._setuptouch();
313      $.data(this, "touchtimer", Number(new Date()));
314      $.data(this, "touchstartx", touches.pageX);
315      $.data(this, "touchstarty", touches.pageY);
316      return e.stopPropagation();
317    };
318    Plugin.prototype._touchend = function(e) {
319      var $element, duration, prefix, slidesControl, timing, touches, transform,
320        _this = this;
321      $element = $(this.element);
322      this.data = $.data(this);
323      touches = e.originalEvent.touches[0];
324      slidesControl = $(".slidesjs-control", $element);
325      if (slidesControl.position().left > this.options.width * 0.5 || slidesControl.position().left > this.options.width * 0.1 && (Number(new Date()) - this.data.touchtimer < 250)) {
326        $.data(this, "direction", "previous");
327        this._slide();
328      } else if (slidesControl.position().left < -(this.options.width * 0.5) || slidesControl.position().left < -(this.options.width * 0.1) && (Number(new Date()) - this.data.touchtimer < 250)) {
329        $.data(this, "direction", "next");
330        this._slide();
331      } else {
332        prefix = this.data.vendorPrefix;
333        transform = prefix + "Transform";
334        duration = prefix + "TransitionDuration";
335        timing = prefix + "TransitionTimingFunction";
336        slidesControl[0].style[transform] = "translateX(0px)";
337        slidesControl[0].style[duration] = this.options.effect.slide.speed * 0.85 + "ms";
338      }
339      slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
340        prefix = _this.data.vendorPrefix;
341        transform = prefix + "Transform";
342        duration = prefix + "TransitionDuration";
343        timing = prefix + "TransitionTimingFunction";
344        slidesControl[0].style[transform] = "";
345        slidesControl[0].style[duration] = "";
346        return slidesControl[0].style[timing] = "";
347      });
348      return e.stopPropagation();
349    };
350    Plugin.prototype._touchmove = function(e) {
351      var $element, prefix, slidesControl, touches, transform;
352      $element = $(this.element);
353      this.data = $.data(this);
354      touches = e.originalEvent.touches[0];
355      prefix = this.data.vendorPrefix;
356      slidesControl = $(".slidesjs-control", $element);
357      transform = prefix + "Transform";
358      $.data(this, "scrolling", Math.abs(touches.pageX - this.data.touchstartx) < Math.abs(touches.pageY - this.data.touchstarty));
359      if (!this.data.animating && !this.data.scrolling) {
360        e.preventDefault();
361        this._setuptouch();
362        slidesControl[0].style[transform] = "translateX(" + (touches.pageX - this.data.touchstartx) + "px)";
363      }
364      return e.stopPropagation();
365    };
366    Plugin.prototype.play = function(next) {
367      var $element, currentSlide, slidesContainer,
368        _this = this;
369      $element = $(this.element);
370      this.data = $.data(this);
371      if (!this.data.playInterval) {
372        if (next) {
373          currentSlide = this.data.current;
374          this.data.direction = "next";
375          if (this.options.play.effect === "fade") {
376            this._fade();
377          } else {
378            this._slide();
379          }
380        }
381        $.data(this, "playInterval", setInterval((function() {
382          currentSlide = _this.data.current;
383          _this.data.direction = "next";
384          if (_this.options.play.effect === "fade") {
385            return _this._fade();
386          } else {
387            return _this._slide();
388          }
389        }), this.options.play.interval));
390        slidesContainer = $(".slidesjs-container", $element);
391        if (this.options.play.pauseOnHover) {
392          slidesContainer.unbind();
393          slidesContainer.bind("mouseenter", function() {
394            return _this.stop();
395          });
396          slidesContainer.bind("mouseleave", function() {
397            if (_this.options.play.restartDelay) {
398              return $.data(_this, "restartDelay", setTimeout((function() {
399                return _this.play(true);
400              }), _this.options.play.restartDelay));
401            } else {
402              return _this.play();
403            }
404          });
405        }
406        $.data(this, "playing", true);
407        $(".slidesjs-play", $element).addClass("slidesjs-playing");
408        if (this.options.play.swap) {
409          $(".slidesjs-play", $element).hide();
410          return $(".slidesjs-stop", $element).show();
411        }
412      }
413    };
414    Plugin.prototype.stop = function(clicked) {
415      var $element;
416      $element = $(this.element);
417      this.data = $.data(this);
418      clearInterval(this.data.playInterval);
419      if (this.options.play.pauseOnHover && clicked) {
420        $(".slidesjs-container", $element).unbind();
421      }
422      $.data(this, "playInterval", null);
423      $.data(this, "playing", false);
424      $(".slidesjs-play", $element).removeClass("slidesjs-playing");
425      if (this.options.play.swap) {
426        $(".slidesjs-stop", $element).hide();
427        return $(".slidesjs-play", $element).show();
428      }
429    };
430    Plugin.prototype._slide = function(number) {
431      var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
432        _this = this;
433      $element = $(this.element);
434      this.data = $.data(this);
435      if (!this.data.animating && number !== this.data.current + 1) {
436        $.data(this, "animating", true);
437        currentSlide = this.data.current;
438        if (number > -1) {
439          number = number - 1;
440          value = number > currentSlide ? 1 : -1;
441          direction = number > currentSlide ? -this.options.width : this.options.width;
442          next = number;
443        } else {
444          value = this.data.direction === "next" ? 1 : -1;
445          direction = this.data.direction === "next" ? -this.options.width : this.options.width;
446          next = currentSlide + value;
447        }
448        if (next === -1) {
449          next = this.data.total - 1;
450        }
451        if (next === this.data.total) {
452          next = 0;
453        }
454        this._setActive(next);
455        slidesControl = $(".slidesjs-control", $element);
456        if (number > -1) {
457          slidesControl.children(":not(:eq(" + currentSlide + "))").css({
458            display: "none",
459            left: 0,
460            zIndex: 0
461          });
462        }
463        slidesControl.children(":eq(" + next + ")").css({
464          display: "block",
465          left: value * this.options.width,
466          zIndex: 10
467        });
468        this.options.callback.start(currentSlide + 1);
469        if (this.data.vendorPrefix) {
470          prefix = this.data.vendorPrefix;
471          transform = prefix + "Transform";
472          duration = prefix + "TransitionDuration";
473          timing = prefix + "TransitionTimingFunction";
474          slidesControl[0].style[transform] = "translateX(" + direction + "px)";
475          slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
476          return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
477            slidesControl[0].style[transform] = "";
478            slidesControl[0].style[duration] = "";
479            slidesControl.children(":eq(" + next + ")").css({
480              left: 0
481            });
482            slidesControl.children(":eq(" + currentSlide + ")").css({
483              display: "none",
484              left: 0,
485              zIndex: 0
486            });
487            $.data(_this, "current", next);
488            $.data(_this, "animating", false);
489            slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
490            slidesControl.children(":not(:eq(" + next + "))").css({
491              display: "none",
492              left: 0,
493              zIndex: 0
494            });
495            if (_this.data.touch) {
496              _this._setuptouch();
497            }
498            return _this.options.callback.complete(next + 1);
499          });
500        } else {
501          return slidesControl.stop().animate({
502            left: direction
503          }, this.options.effect.slide.speed, (function() {
504            slidesControl.css({
505              left: 0
506            });
507            slidesControl.children(":eq(" + next + ")").css({
508              left: 0
509            });
510            return slidesControl.children(":eq(" + currentSlide + ")").css({
511              display: "none",
512              left: 0,
513              zIndex: 0
514            }, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
515          }));
516        }
517      }
518    };
519    Plugin.prototype._fade = function(number) {
520      var $element, currentSlide, next, slidesControl, value,
521        _this = this;
522      $element = $(this.element);
523      this.data = $.data(this);
524      if (!this.data.animating && number !== this.data.current + 1) {
525        $.data(this, "animating", true);
526        currentSlide = this.data.current;
527        if (number) {
528          number = number - 1;
529          value = number > currentSlide ? 1 : -1;
530          next = number;
531        } else {
532          value = this.data.direction === "next" ? 1 : -1;
533          next = currentSlide + value;
534        }
535        if (next === -1) {
536          next = this.data.total - 1;
537        }
538        if (next === this.data.total) {
539          next = 0;
540        }
541        this._setActive(next);
542        slidesControl = $(".slidesjs-control", $element);
543        slidesControl.children(":eq(" + next + ")").css({
544          display: "none",
545          left: 0,
546          zIndex: 10
547        });
548        this.options.callback.start(currentSlide + 1);
549        if (this.options.effect.fade.crossfade) {
550          slidesControl.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed);
551          return slidesControl.children(":eq(" + next + ")").stop().fadeIn(this.options.effect.fade.speed, (function() {
552            slidesControl.children(":eq(" + next + ")").css({
553              zIndex: 0
554            });
555            $.data(_this, "animating", false);
556            $.data(_this, "current", next);
557            return _this.options.callback.complete(next + 1);
558          }));
559        } else {
560          return slidesControl.children(":eq(" + currentSlide + ")").stop().fadeOut(this.options.effect.fade.speed, (function() {
561            slidesControl.children(":eq(" + next + ")").stop().fadeIn(_this.options.effect.fade.speed, (function() {
562              return slidesControl.children(":eq(" + next + ")").css({
563                zIndex: 10
564              });
565            }));
566            $.data(_this, "animating", false);
567            $.data(_this, "current", next);
568            return _this.options.callback.complete(next + 1);
569          }));
570        }
571      }
572    };
573    Plugin.prototype._getVendorPrefix = function() {
574      var body, i, style, transition, vendor;
575      body = document.body || document.documentElement;
576      style = body.style;
577      transition = "transition";
578      vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
579      transition = transition.charAt(0).toUpperCase() + transition.substr(1);
580      i = 0;
581      while (i < vendor.length) {
582        if (typeof style[vendor[i] + transition] === "string") {
583          return vendor[i];
584        }
585        i++;
586      }
587      return false;
588    };
589    return $.fn[pluginName] = function(options) {
590      return this.each(function() {
591        if (!$.data(this, "plugin_" + pluginName)) {
592          return $.data(this, "plugin_" + pluginName, new Plugin(this, options));
593        }
594      });
595    };
596  })(jQuery, window, document);
597
598}).call(this);
Note: See TracBrowser for help on using the repository browser.