+++ /dev/null
-/**
-* author Remy Sharp
-* url http://remysharp.com/tag/marquee
-*/
-
-(function ($) {
- $.fn.marquee = function (klass) {
- var newMarquee = [],
- last = this.length;
-
- // works out the left or right hand reset position, based on scroll
- // behavior, current direction and new direction
- function getReset(newDir, marqueeRedux, marqueeState) {
- var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir;
- var r = 0;
- if (behavior == 'alternate') {
- r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : width;
- } else if (behavior == 'slide') {
- if (newDir == -1) {
- r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
- } else {
- r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width*2) : 0;
- }
- } else {
- r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
- }
- return r;
- }
-
- // single "thread" animation
- function animateMarquee() {
- var i = newMarquee.length,
- marqueeRedux = null,
- $marqueeRedux = null,
- marqueeState = {},
- newMarqueeList = [],
- hitedge = false;
-
- while (i--) {
- marqueeRedux = newMarquee[i];
- $marqueeRedux = $(marqueeRedux);
- marqueeState = $marqueeRedux.data('marqueeState');
-
- if ($marqueeRedux.data('paused') !== true) {
- // TODO read scrollamount, dir, behavior, loops and last from data
- marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);
-
- // only true if it's hit the end
- hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
-
- if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1)) {
- if (marqueeState.behavior == 'alternate') {
- marqueeState.dir *= -1; // flip
- }
- marqueeState.last = -1;
-
- $marqueeRedux.trigger('stop');
-
- marqueeState.loops--;
- if (marqueeState.loops === 0) {
- if (marqueeState.behavior != 'slide') {
- marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
- } else {
- // corrects the position
- marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
- }
-
- $marqueeRedux.trigger('end');
- } else {
- // keep this marquee going
- newMarqueeList.push(marqueeRedux);
- $marqueeRedux.trigger('start');
- marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
- }
- } else {
- newMarqueeList.push(marqueeRedux);
- }
- marqueeState.last = marqueeRedux[marqueeState.axis];
-
- // store updated state only if we ran an animation
- $marqueeRedux.data('marqueeState', marqueeState);
- } else {
- // even though it's paused, keep it in the list
- newMarqueeList.push(marqueeRedux);
- }
- }
-
- newMarquee = newMarqueeList;
-
- if (newMarquee.length) {
- setTimeout(animateMarquee, 25);
- }
- }
-
- // TODO consider whether using .html() in the wrapping process could lead to loosing predefined events...
- this.each(function (i) {
- var $marquee = $(this),
- width = $marquee.attr('width') || $marquee.width(),
- height = $marquee.attr('height') || $marquee.height(),
- $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(),
- marqueeRedux = $marqueeRedux.get(0),
- hitedge = 0,
- direction = ($marquee.attr('direction') || 'left').toLowerCase(),
- marqueeState = {
- dir : /down|right/.test(direction) ? -1 : 1,
- axis : /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
- widthAxis : /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
- last : -1,
- loops : $marquee.attr('loop') || -1,
- scrollamount : $marquee.attr('scrollamount') || this.scrollAmount || 2,
- behavior : ($marquee.attr('behavior') || 'scroll').toLowerCase(),
- width : /left|right/.test(direction) ? width : height
- };
-
- // corrects a bug in Firefox - the default loops for slide is -1
- if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') {
- marqueeState.loops = 1;
- }
-
- $marquee.remove();
-
- // add padding
- if (/left|right/.test(direction)) {
- $marqueeRedux.find('> div').css('padding', '0 ' + width + 'px');
- } else {
- $marqueeRedux.find('> div').css('padding', height + 'px 0');
- }
-
- // events
- $marqueeRedux.bind('stop', function () {
- $marqueeRedux.data('paused', true);
- }).bind('pause', function () {
- $marqueeRedux.data('paused', true);
- }).bind('start', function () {
- $marqueeRedux.data('paused', false);
- }).bind('unpause', function () {
- $marqueeRedux.data('paused', false);
- }).data('marqueeState', marqueeState); // finally: store the state
-
- // todo - rerender event allowing us to do an ajax hit and redraw the marquee
-
- newMarquee.push(marqueeRedux);
-
- marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
- $marqueeRedux.trigger('start');
-
- // on the very last marquee, trigger the animation
- if (i+1 == last) {
- animateMarquee();
- }
- });
-
- return $(newMarquee);
- };
-}(jQuery));
fnp / wolnelektury.git / blobdiff