wolnelektury/static/js/jquery.marquee.js

   1 /**
   2 * author Remy Sharp
   3 * url http://remysharp.com/tag/marquee
   4 */
   5
   6 (function ($) {
   7     $.fn.marquee = function (klass) {
   8         var newMarquee = [],
   9             last = this.length;
  10
  11         // works out the left or right hand reset position, based on scroll
  12         // behavior, current direction and new direction
  13         function getReset(newDir, marqueeRedux, marqueeState) {
  14             var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir;
  15             var r = 0;
  16             if (behavior == 'alternate') {
  17                 r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : width;
  18             } else if (behavior == 'slide') {
  19                 if (newDir == -1) {
  20                     r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
  21                 } else {
  22                     r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : 0;
  23                 }
  24             } else {
  25                 r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
  26             }
  27             return r;
  28         }
  29
  30         // single "thread" animation
  31         function animateMarquee() {
  32             var i = newMarquee.length,
  33                 marqueeRedux = null,
  34                 $marqueeRedux = null,
  35                 marqueeState = {},
  36                 newMarqueeList = [],
  37                 hitedge = false;
  38
  39             while (i--) {
  40                 marqueeRedux = newMarquee[i];
  41                 $marqueeRedux = $(marqueeRedux);
  42                 marqueeState = $marqueeRedux.data('marqueeState');
  43
  44                 if ($marqueeRedux.data('paused') !== true) {
  45                     // TODO read scrollamount, dir, behavior, loops and last from data
  46                     marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);
  47
  48                     // only true if it's hit the end
  49                     hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
  50
  51                     if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {
  52                         if (marqueeState.behavior == 'alternate') {
  53                             marqueeState.dir *= -1; // flip
  54                         }
  55                         marqueeState.last = -1;
  56
  57                         $marqueeRedux.trigger('stop');
  58
  59                         marqueeState.loops--;
  60                         if (marqueeState.loops === 0) {
  61                             if (marqueeState.behavior != 'slide') {
  62                                 marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
  63                             } else {
  64                                 // corrects the position
  65                                 marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
  66                             }
  67
  68                             $marqueeRedux.trigger('end');
  69                         } else {
  70                             // keep this marquee going
  71                             newMarqueeList.push(marqueeRedux);
  72                             $marqueeRedux.trigger('start');
  73                             marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
  74                         }
  75                     } else {
  76                         newMarqueeList.push(marqueeRedux);
  77                     }
  78                     marqueeState.last = marqueeRedux[marqueeState.axis];
  79
  80                     // store updated state only if we ran an animation
  81                     $marqueeRedux.data('marqueeState', marqueeState);
  82                 } else {
  83                     // even though it's paused, keep it in the list
  84                     newMarqueeList.push(marqueeRedux);
  85                 }
  86             }
  87
  88             newMarquee = newMarqueeList;
  89
  90             if (newMarquee.length) {
  91                 setTimeout(animateMarquee, 25);
  92             }
  93         }
  94
  95         // TODO consider whether using .html() in the wrapping process could lead to loosing predefined events...
  96         this.each(function (i) {
  97             var $marquee = $(this),
  98                 width = $marquee.attr('width') || $marquee.width(),
  99                 height = $marquee.attr('height') || $marquee.height(),
 100                 $marqueeRedux = $marquee.after('<div ' + (klass ? 'class="' + klass + '" ' : '') + 'style="display: block-inline; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').next(),
 101                 marqueeRedux = $marqueeRedux.get(0),
 102                 hitedge = 0,
 103                 direction = ($marquee.attr('direction') || 'left').toLowerCase(),
 104                 marqueeState = {
 105                     dir : /down|right/.test(direction) ? -1 : 1,
 106                     axis : /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
 107                     widthAxis : /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
 108                     last : -1,
 109                     loops : $marquee.attr('loop') || -1,
 110                     scrollamount : $marquee.attr('scrollamount') || this.scrollAmount || 2,
 111                     behavior : ($marquee.attr('behavior') || 'scroll').toLowerCase(),
 112                     width : /left|right/.test(direction) ? width : height
 113                 };
 114
 115             // corrects a bug in Firefox - the default loops for slide is -1
 116             if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') {
 117                 marqueeState.loops = 1;
 118             }
 119
 120             $marquee.remove();
 121
 122             // add padding
 123             if (/left|right/.test(direction)) {
 124                 $marqueeRedux.find('> div').css('padding', '0 ' + width + 'px');
 125             } else {
 126                 $marqueeRedux.find('> div').css('padding', height + 'px 0');
 127             }
 128
 129             // events
 130             $marqueeRedux.bind('stop', function () {
 131                 $marqueeRedux.data('paused', true);
 132             }).bind('pause', function () {
 133                 $marqueeRedux.data('paused', true);
 134             }).bind('start', function () {
 135                 $marqueeRedux.data('paused', false);
 136             }).bind('unpause', function () {
 137                 $marqueeRedux.data('paused', false);
 138             }).data('marqueeState', marqueeState); // finally: store the state
 139
 140             // todo - rerender event allowing us to do an ajax hit and redraw the marquee
 141
 142             newMarquee.push(marqueeRedux);
 143
 144             marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
 145             $marqueeRedux.trigger('start');
 146
 147             // on the very last marquee, trigger the animation
 148             if (i+1 == last) {
 149                 animateMarquee();
 150             }
 151         });
 152
 153         return $(newMarquee);
 154     };
 155 }(jQuery));