http://www.abigailvigoa.com/wp-content/themes/abigail/filmroll/js/jquery.film_roll.js

1// Generated by CoffeeScript 1.10.0
2
3/*
4  FilmRoll (for jQuery)
5  version: 0.1.17 (1/13/16)
6  @requires $ >= v1.4
7
8  By Noel Peden
9  Examples at http://straydogstudio.github.io/film_roll
10
11  Licensed under the MIT:
12    http://www.opensource.org/licenses/mit-license.php
13
14  Usage:
15    var film_roll = new FilmRoll({container: '#container_id', OPTIONS});
16 */
17var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
18
19(function($) {
20  this.FilmRoll = (function() {
21    function FilmRoll(options) {
22      var inst;
23      this.options = options != null ? options : {};
24      this.rotateRight = bind(this.rotateRight, this);
25      this.rotateLeft = bind(this.rotateLeft, this);
26      this.resize = bind(this.resize, this);
27      this.moveRight = bind(this.moveRight, this);
28      this.moveLeft = bind(this.moveLeft, this);
29      this.configureWidths = bind(this.configureWidths, this);
30      this.configureSwipe = bind(this.configureSwipe, this);
31      this.configureScroll = bind(this.configureScroll, this);
32      this.configureLoad = bind(this.configureLoad, this);
33      this.configureHover = bind(this.configureHover, this);
34      this.clearScroll = bind(this.clearScroll, this);
35      if (this.options.container) {
36        this.div = $(this.options.container);
37        if (this.div.length) {
38          inst = this.div.data('film_roll_instance');
39          if (inst) {
40            return inst;
41          }
42          inst = this.configure();
43          this.div.data('film_roll_instance', inst);
44          return inst;
45        }
46      }
47    }
48
49    FilmRoll.prototype.configure = function() {
50      var first_child;
51      this.children = this.div.children();
52      this.children.wrapAll('<div class="film_roll_wrapper"></div>');
53      this.children.wrapAll('<div class="film_roll_shuttle"></div>');
54      this.wrapper = this.div.find('.film_roll_wrapper');
55      this.shuttle = this.div.find('.film_roll_shuttle');
56      this.rotation = [];
57      this.shuttle.width(this.options.shuttle_width ? parseInt(this.options.shuttle_width, 10) : 10000);
58      if (this.options.start_height) {
59        this.wrapper.height(parseInt(this.options.start_height, 10));
60      }
61      if (this.options.vertical_center) {
62        this.shuttle.addClass('vertical_center');
63      }
64      if (!(this.options.no_css === true || document.film_roll_styles_added)) {
65        $("<style type='text/css'> .film_roll_wrapper{display:block;text-align:center;float:none;position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:auto;width:100%;height:100%;margin:0 !important;padding:0 !important;overflow:hidden;} .film_roll_shuttle{text-align:left;float:none;position:relative;top:0;left:0;right:auto;bottom:auto;height:100%;margin:0 !important;padding:0 !important;z-index:auto;} .film_roll_shuttle.vertical_center:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em;} .film_roll_child{position:relative;display:inline-block;*display:inline;vertical-align:middle;zoom:1;} .film_roll_prev,.film_roll_next{position:absolute;top:48%;left:15px;width:40px;height:40px;margin:-20px 0 0 0;padding:0;font-size:60px;font-weight:100;line-height:30px;color:white;text-align:center;background:#222;border:3px solid white;border-radius:23px;opacity:0.5} .film_roll_prev:hover,.film_roll_next:hover{color:white;text-decoration:none;opacity:0.9} .film_roll_next{left:auto;right:15px} .film_roll_pager{text-align:center;} .film_roll_pager a{width:5px;height:5px;border:2px solid #333;border-radius:5px;display:inline-block;margin:0 5px 0 0;transition:all 1s ease} .film_roll_pager a:hover{background:#666} .film_roll_pager a.active{background:#333} .film_roll_pager span{display:none} .film_roll_pager a,a.film_roll_prev,a.film_roll_next{-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;} </style>").appendTo('head');
66        document.film_roll_styles_added = true;
67      }
68      if (this.options.pager !== false) {
69        this.pager = $('<div class="film_roll_pager">');
70        this.div.append(this.pager);
71        this.children.each((function(_this) {
72          return function(i, e) {
73            var link;
74            link = $("<a href='#' data-id='" + e.id + "'><span>" + (i + 1) + "</span></a>");
75            _this.pager.append(link);
76            return link.click(function() {
77              _this.index = i;
78              _this.moveToIndex(_this.index, 'best', true);
79              return false;

80            });
81          };
82        })(this));
83      }
84      this.pager_links = this.div.find('.film_roll_pager a');
85      if (this.options.hover === 'scroll') {
86        this.options.scroll = false;
87        this.hover_in = (function(_this) {
88          return function() {
89            clearTimeout(_this.hover_timer);
90            return _this.hover_timer = setTimeout(function() {
91              _this.moveLeft();
92              return _this.configureScroll();
93            }, 300);
94          };
95        })(this);
96        this.hover_out = this.clearScroll;
97      } else {
98        if (this.options.hover !== false) {
99          this.hover_in = (function(_this) {
100            return function() {
101              clearTimeout(_this.hover_timer);
102              return _this.hover_timer = setTimeout(function() {
103                return _this.clearScroll();
104              }, 300);
105            };
106          })(this);
107          this.hover_out = this.configureScroll;
108        }
109      }
110      if (this.options.hover !== false) {
111        this.mouse_catcher = $('<div style="position:absolute; top:0; left: 0; height: 100%; width: 100%;" class="film_roll_mouse_catcher"></div>');
112        this.mouse_catcher.appendTo(this.wrapper).mousemove((function(_this) {
113          return function() {
114            _this.hover_in();
115            return _this.mouse_catcher.remove();
116          };
117        })(this));
118      }
119      first_child = null;
120      this.children.each((function(_this) {
121        return function(i, e) {
122          var $el;
123          $el = $(e);
124          $el.attr('data-film-roll-child-id', i);
125          $el.addClass("film_roll_child");
126          return _this.rotation.push(e);
127        };
128      })(this));
129      if (this.options.prev !== false) {
130        if (this.options.prev && this.options.next) {
131          this.prev = $(this.options.prev);
132        } else {
133          this.wrapper.append('<a class="film_roll_prev" href="#">&lsaquo;</a>');
134          this.prev = this.div.find('.film_roll_prev');
135        }
136        this.prev.click((function(_this) {
137          return function() {
138            return _this.moveRight();
139          };
140        })(this));
141      }
142      if (this.options.next !== false) {
143        if (this.options.next) {
144          this.next = $(this.options.next);
145        } else {
146          this.wrapper.append('<a class="film_roll_next" href="#">&rsaquo;</a>');
147          this.next = this.div.find('.film_roll_next');
148        }
149        this.next.click((function(_this) {
150          return function() {
151            return _this.moveLeft();
152          };
153        })(this));
154      }
155      this.index = this.options.start_index || 0;
156      this.offset = this.options.offset || 0;
157      this.interval = this.options.interval || 4000;
158      this.animation = this.options.animation || this.interval / 4;
159      this.easing = this.options.easing || FilmRoll.default_easing;
160      if (this.options.resize !== false) {
161        $(window).resize((function(_this) {
162          return function() {
163            return _this.resize();
164          };
165        })(this));
166      }
167      if (this.options.configure_load) {
168        if (typeof this.options.configure_load === 'function') {
169          this.options.configure_load.apply(this, arguments);
170        } else if (typeof this.options.configure_load === 'number') {
171          setTimeout((function(_this) {
172            return function() {
173              return _this.configureLoad();
174            };
175          })(this), this.options.configure_load);
176        } else {
177          this.configureLoad();
178        }
179      } else {
180        $(window).load(this.configureLoad);
181      }
182      if (this.options.swipe !== false) {
183        this.configureSwipe();
184      }
185      this.div.trigger($.Event("film_roll:dom_ready"));
186      return this;
187    };
188
189    FilmRoll.prototype.bestDirection = function(child, rotation_index) {
190      rotation_index || (rotation_index = $.inArray(child, this.rotation));
191      if (rotation_index < (this.children.length / 2)) {
192        return 'right';
193      } else {
194        return 'left';
195      }
196    };
197
198    FilmRoll.prototype.cancelClick = function(event) {
199      if ($(this).hasClass('fr-no-click')) {
200        event.preventDefault();
201        return false;

202      }
203      return true;
204    };
205
206    FilmRoll.prototype.childIndex = function(child) {
207      return $.inArray(child, this.children);
208    };
209
210    FilmRoll.prototype.childWidth = function(child) {
211      var index;
212      index = this.childIndex(child);
213      return this.child_widths[index] || $(child).outerWidth(true);
214    };
215
216    FilmRoll.prototype.clearScroll = function() {
217      if (this.scrolled !== false) {
218        clearInterval(this.timer);
219        this.scrolled = false;
220      }
221      return this;
222    };
223
224    FilmRoll.prototype.configureHover = function() {
225      this.div.hover(this.hover_in, this.hover_out);
226      if (this.options.prev && this.options.next) {
227        this.prev.hover(this.hover_in, this.hover_out);
228        return this.next.hover(this.hover_in, this.hover_out);
229      }
230    };
231
232    FilmRoll.prototype.configureLoad = function() {
233      this.configureWidths();
234      if (this.options.move_on_start !== false) {
235        this.moveToIndex(this.index, 'right', true);
236      }
237      if (this.options.hover === 'scroll') {
238        this.options.scroll = false;
239        return this.configureHover();
240      } else if (this.options.scroll !== false) {
241        this.configureScroll();
242        if (this.options.hover !== false) {
243          return this.configureHover();
244        }
245      }
246    };
247
248    FilmRoll.prototype.configureScroll = function() {
249      if (this.scrolled !== true) {
250        this.timer = setInterval((function(_this) {
251          return function() {
252            return _this.moveLeft();
253          };
254        })(this), this.interval);
255        this.scrolled = true;
256      }
257      return this;
258    };
259
260    FilmRoll.prototype.configureSwipe = function() {
261      if (typeof $.fn.swipe !== 'undefined') {
262        this.div.swipe({
263          swipeStatus: (function(_this) {
264            return function(event, phase, direction, distance) {
265              var rotation_index, wrapper_width;
266              if (direction === 'up' || direction === 'down') {
267                return false;
268              }
269              if (phase === 'start') {
270                wrapper_width = _this.wrapper.width();
271                if (wrapper_width >= _this.real_width || _this.children.length === 1) {
272                  return false;
273                }
274                _this.was_scrolled = _this.scrolled;
275                if (_this.scrolled) {
276                  _this.clearScroll();
277                }
278                _this.active_half = _this.child_widths[_this.index] / 2;
279                rotation_index = $.inArray(_this.children[_this.index], _this.rotation);
280                _this.offscreen_left = parseInt(_this.shuttle.css('left'), 10);
281                _this.offscreen_right = _this.marginRight(rotation_index) - (wrapper_width - _this.child_widths[_this.index]) / 2;
282                _this.div.find('a').addClass('fr-no-click');
283              } else if (phase === 'move') {
284                if (direction === 'left') {
285                  if (distance > _this.active_half) {
286                    $(_this.children[_this.index]).removeClass('active');
287                    _this.index = (_this.index + 1) % _this.children.length;
288                    $(_this.children[_this.index]).addClass('active');
289                    _this.active_half += _this.child_widths[_this.index];
290                  }
291                  if (distance > _this.offscreen_right) {
292                    _this.offscreen_left = _this.rotateLeft() + distance;
293                    _this.offscreen_right += _this.childWidth(_this.rotation[_this.rotation.length - 1]);
294                  }
295                  _this.shuttle.css('left', _this.offscreen_left - distance);
296                } else {
297                  if (distance > _this.active_half) {
298                    $(_this.children[_this.index]).removeClass('active');
299                    _this.index -= 1;
300                    if (_this.index < 0) {
301                      _this.index = _this.children.length - 1;
302                    }
303                    $(_this.children[_this.index]).addClass('active');
304                    _this.active_half += _this.child_widths[_this.index];
305                  }
306                  if (distance + _this.offscreen_left > 0) {
307                    _this.offscreen_left = _this.rotateRight() - distance;
308                  }
309                  _this.shuttle.css('left', _this.offscreen_left + distance);
310                }
311              } else {
312                if (phase === 'end') {
313                  _this.moveToIndex(_this.index, direction);
314                } else if (phase === 'cancel') {
315                  _this.moveToIndex(_this.index, (direction === 'right' ? 'left' : 'right'));
316                  _this.div.find('a.fr-no-click').removeClass('fr-no-click');
317                }
318                if (_this.was_scrolled) {
319                  _this.configureScroll();
320                }
321              }
322              return true;
323            };
324          })(this),
325          excludedElements: 'label, button, input, select, textarea, .noSwipe',
326          allowPageScroll: 'vertical'
327        });
328        return this.div.find('a').on('click', this.cancelClick);
329      }
330    };
331

332    FilmRoll.prototype.configureWidths = function() {
333      var min_height;
334      this.width = min_height = 0;
335      this.wrapper.css({
336        height: '',
337        'min-height': 0
338      });
339      this.shuttle.width('').removeClass('film_roll_shuttle').addClass('film_roll_resizing');
340      this.children.width('');
341      this.div.trigger($.Event("film_roll:resizing"));
342      this.child_widths = [];
343      if (this.options.height && this.options.height.toString().match(/^\+/)) {
344        this.options.height_padding = parseInt(this.options.height, 10);
345        this.options.height = null;
346      } else {
347        this.options.height_padding = 0;
348      }
349      this.children.each((function(_this) {
350        return function(i, e) {
351          var $el, el_height, el_width;
352          $el = $(e);
353          $el.width($el.outerWidth(true));
354          el_width = $el.outerWidth(true);
355          _this.child_widths.push(el_width);
356          _this.width += el_width;
357          if (!_this.options.height) {
358            el_height = $el.outerHeight(true);
359            if (el_height > min_height) {
360              min_height = el_height;
361            }
362          }
363          return e;
364        };
365      })(this));
366      if (this.options.height) {
367        this.wrapper.height(this.options.height);
368      } else {
369        this.wrapper.height('');
370        this.wrapper.css('min-height', min_height + this.options.height_padding);
371      }
372      this.real_width = this.width;
373      this.shuttle.width(this.real_width * 2).removeClass('film_roll_resizing').addClass('film_roll_shuttle');
374      if (this.wrapper.width() > this.real_width) {
375        if (!(this.options.force_buttons || this.options.prev === false)) {
376          this.prev.hide();
377        }
378        if (!(this.options.force_buttons || this.options.next === false)) {
379          this.next.hide();
380        }
381      } else {
382        if (this.options.prev !== false) {
383          this.prev.show();
384        }
385        if (this.options.next !== false) {
386          this.next.show();
387        }
388      }
389      return this;
390    };
391
392    FilmRoll.prototype.rotationIndex = function(child) {
393      return $.inArray(child, this.rotation);
394    };
395
396    FilmRoll.prototype.marginLeft = function(rotation_index) {
397      var child, i, j, len, margin, ref;
398      margin = 0;
399      ref = this.rotation;
400      for (i = j = 0, len = ref.length; j < len; i = ++j) {
401        child = ref[i];
402        if (i < rotation_index && i >= 0) {
403          margin += this.childWidth(child);
404        }
405      }
406      return margin;
407    };
408
409    FilmRoll.prototype.marginRight = function(rotation_index) {
410      var child, i, j, len, margin, offset, ref;
411      offset = this.rotation.length - 1;
412      margin = 0;
413      ref = this.rotation;
414      for (i = j = 0, len = ref.length; j < len; i = ++j) {
415        child = ref[i];
416        if (i > rotation_index && i <= offset) {
417          margin += this.childWidth(child);
418        }
419      }
420      return margin;
421    };
422
423    FilmRoll.prototype.moveLeft = function() {
424      this.index = (this.index + 1) % this.children.length;
425      this.moveToIndex(this.index, 'left', true);
426      return false;
427    };
428
429    FilmRoll.prototype.moveRight = function() {
430      this.index -= 1;
431      if (this.index < 0) {
432        this.index = this.children.length - 1;
433      }
434      this.moveToIndex(this.index, 'right', true);
435      return false;
436    };
437
438    FilmRoll.prototype.moveToChild = function(element) {
439      var child_index;
440      child_index = this.childIndex($(element)[0]);
441      if (child_index > -1) {
442        return this.moveToIndex(child_index);
443      }
444    };
445
446    FilmRoll.prototype.moveToIndex = function(index, direction, animate) {
447      var child, direction_class, new_left_margin, remainder, rotation_index, scrolled, visible_margin_left, visible_margin_right, wrapper_width;
448      if (animate == null) {
449        animate = true;
450      }
451      this.index = index;
452      scrolled = this.scrolled;
453      this.clearScroll();
454      child = this.children[index];
455      rotation_index = $.inArray(child, this.rotation);
456      if (!direction || direction === 'best') {
457        direction = this.bestDirection(child, rotation_index);
458      }
459      this.children.removeClass('active');
460      $(child).addClass('active').trigger($.Event("film_roll:activate"));
461      this.pager_links.removeClass('active');
462      $(this.pager_links[index]).addClass('active');
463      wrapper_width = this.wrapper.width();
464      remainder = wrapper_width - this.child_widths[index];
465      if (this.options.position === 'left') {
466        visible_margin_left = 0 + this.offset;
467      } else if (this.options.position === 'right') {
468        visible_margin_left = wrapper_width - this.child_widths[index] + this.offset;
469      } else {
470        visible_margin_left = remainder / 2 + this.offset;
471      }
472      visible_margin_right = remainder - visible_margin_left;
473      if (wrapper_width < this.real_width && this.children.length > 1 || this.options.force_rotate) {
474        if (direction === 'right') {
475          while (rotation_index === 0 || this.marginLeft(rotation_index) < visible_margin_left) {
476            this.rotateRight();
477            rotation_index = $.inArray(child, this.rotation);
478          }
479        } else {
480          while (rotation_index === this.children.length - 1 || this.marginRight(rotation_index) < visible_margin_right) {
481            this.rotateLeft();
482            rotation_index = $.inArray(child, this.rotation);
483          }
484        }
485      }
486      new_left_margin = -1 * (this.marginLeft(rotation_index) - visible_margin_left);
487      if (animate) {
488        direction_class = "moving_" + direction;
489        this.shuttle.addClass(direction_class);
490        this.div.trigger($.Event("film_roll:moving"));
491        this.shuttle.stop().animate({
492          'left': new_left_margin
493        }, this.animation, this.easing, (function(_this) {
494          return function() {
495            _this.shuttle.removeClass(direction_class);
496            return _this.div.trigger($.Event("film_roll:moved"));
497          };
498        })(this));
499      } else {
500        this.shuttle.css('left', new_left_margin);
501        this.div.trigger($.Event("film_roll:moved"));
502      }
503      if (scrolled) {
504        this.configureScroll();
505      }
506      return this;
507    };
508
509    FilmRoll.prototype.resize = function() {
510      clearTimeout(this.resize_timer);
511      this.resize_timer = setTimeout((function(_this) {
512        return function() {
513          var scrolled;
514          scrolled = _this.scrolled;
515          _this.clearScroll();
516          if (scrolled) {
517            _this.configureScroll();
518          }
519          _this.configureWidths();
520          _this.moveToIndex(_this.index, 'best');
521          return _this.div.trigger($.Event("film_roll:resized"));
522        };
523      })(this), 200);
524      return this;
525    };
526
527    FilmRoll.prototype.rotateLeft = function() {
528      var _css_left, _first_child, _new_left, _shuttle_left;
529      _css_left = this.shuttle.css('left');
530      _shuttle_left = _css_left ? parseInt(_css_left, 10) : 0;
531      _first_child = this.rotation.shift();
532      _new_left = _shuttle_left + this.childWidth(_first_child);
533      this.rotation.push(_first_child);
534      this.shuttle.css('left', _new_left);
535      this.shuttle.append(this.shuttle.children().first().detach());
536      return _new_left;
537    };
538
539    FilmRoll.prototype.rotateRight = function() {
540      var _css_left, _last_child, _new_left, _shuttle_left;
541      _css_left = this.shuttle.css('left');
542      _shuttle_left = _css_left ? parseInt(_css_left, 10) : 0;
543      _last_child = this.rotation.pop();
544      _new_left = _shuttle_left - this.childWidth(_last_child);
545      this.rotation.unshift(_last_child);
546      this.shuttle.css('left', _new_left);

547      this.shuttle.prepend(this.shuttle.children().last().detach());
548      return _new_left;
549    };
550
551    return FilmRoll;
552
553  })();
554  return this.FilmRoll.default_easing = 'swing';
555})(jQuery);