https://kujawsko-pomorskie.pl/wp-content/themes/kujawsko-pomorskie…/assets/js/jquery.marquee.js?ver=1781634672

1/**
2* author Remy Sharp
3* url http://remysharp.com/tag/marquee
4*/
5
6(function ($) {
7    $.fn.marquee = function (className) {
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(newDirection, marqueeRedux, marqueeState) {
14            var behavior = marqueeState.behavior, width = marqueeState.width, direction = marqueeState.direction;
15            var reset = 0;
16            if (behavior == 'alternate') {
17                reset = newDirection == 1 ? marqueeRedux[marqueeState.widthAxis] - (width * 2) : width;
18            } else if (behavior == 'slide') {
19                if (newDirection == -1) {
20                    reset = direction == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
21                } else {
22                    reset = direction == -1 ? marqueeRedux[marqueeState.widthAxis] - (width * 2) : 0;
23                }
24            } else {
25                reset = newDirection == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
26            }
27            return reset;
28        }
29
30        // single "thread" animation
31        function animateMarquee() {
32            var index = newMarquee.length,
33                marqueeRedux = null,
34                $marqueeRedux = null,
35                marqueeState = {},
36                newMarqueeList = [],
37                hitedge = false;
38
39            while (index--) {
40                marqueeRedux = newMarquee[index];
41                $marqueeRedux = $(marqueeRedux);
42                marqueeState = $marqueeRedux.data('marqueeState');
43
44                if ($marqueeRedux.data('paused') !== true) {
45                    // TODO read scrollamount, direction, behavior, loops and last from data
46                    marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.direction);
47
48                    // only true if it's hit the end
49                    hitedge = marqueeState.direction == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.direction * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.direction * -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.direction *= -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.direction, marqueeRedux, marqueeState);
63                            } else {
64                                // corrects the position
65                                marqueeRedux[marqueeState.axis] = getReset(marqueeState.direction * -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.direction, 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 (index) {
97            if (Array.isArray(className)) {
98                className = className.join(' ');
99            }
100            var $marquee = $(this),
101                width = $marquee.attr('width') || $marquee.width(),
102                height = $marquee.attr('height') || $marquee.height(),
103                $marqueeRedux = $marquee.after('<div ' + (className ? 'class="' + className + '" ' : '') + 'data-scroll-amount="' + ($marquee.attr('scrollamount') || this.scrollAmount || 1) + '" style="display: inline-block; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').next(),
104                marqueeRedux = $marqueeRedux.get(0),
105                hitedge = 0,
106                direction = ($marquee.attr('direction') || 'left').toLowerCase(),
107                marqueeState = {
108                    direction: /down|right/.test(direction) ? -1 : 1,
109                    axis: /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
110                    widthAxis: /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
111                    last: -1,
112                    loops: $marquee.attr('loop') || -1,
113                    scrollamount: $marquee.attr('scrollamount') || this.scrollAmount || 2,
114                    behavior: ($marquee.attr('behavior') || 'scroll').toLowerCase(),
115                    width: /left|right/.test(direction) ? width : height
116                };
117
118            // corrects a bug in Firefox - the default loops for slide is -1
119            if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide') {
120                marqueeState.loops = 1;
121            }
122
123            $marquee.remove();
124
125            // add padding
126            if (/left|right/.test(direction)) {
127                $marqueeRedux.find('> div').css('padding', '0 ' + width + 'px');
128            } else {
129                $marqueeRedux.find('> div').css('padding', height + 'px 0');
130            }
131
132            // events
133            $marqueeRedux.bind('stop', function () {
134                $marqueeRedux.data('paused', true);
135            }).bind('pause', function () {
136                $marqueeRedux.data('paused', true);
137            }).bind('start', function () {
138                $marqueeRedux.data('paused', false);
139            }).bind('unpause', function () {
140                $marqueeRedux.data('paused', false);
141            }).data('marqueeState', marqueeState); // finally: store the state
142
143            // todo - rerender event allowing us to do an ajax hit and redraw the marquee
144
145            newMarquee.push(marqueeRedux);
146
147            marqueeRedux[marqueeState.axis] = getReset(marqueeState.direction, marqueeRedux, marqueeState);
148            $marqueeRedux.trigger('start');
149
150            // on the very last marquee, trigger the animation
151            if (index + 1 == last) {
152                animateMarquee();
153            }
154        });
155
156        return $(newMarquee);
157    };
158}(jQuery));