https://www.arcnetwork.ca/shout/web/v6.51.1.R20260831/shout/modules/gallery2/resources/js/jquery.scroller.js

1(function($){
2    // JavaScript Document
3    $.extend($.fn, {
4        scroller: function(options) {
5
6            if(!options)
7            {
8                options = {};
9            }
10
11            if(options == 'api')
12            {
13                return $(this).data('scroller');
14            }
15
16            if(options == 'resize')
17            {
18                scrollerObj = $(this).data('scroller');
19
20                if(arguments.length > 1)
21                {
22                    scrollerObj.options.width = arguments[1];
23                }
24                return scrollerObj._update(true);
25            }
26
27            if(options == 'scrollTo')
28            {
29                scrollerObj = $(this).data('scroller');
30
31                if (arguments[2] == true) {
32                    scrollerObj.skip_animation = true;
33                }
34                return scrollerObj.scrollContentTo(arguments[1]);
35            }
36
37            var scrollerObj = new horizontalScroller($(this),options);
38            scrollerObj.init();
39            $(this).data('scroller',scrollerObj);
40
41            return $(this);
42        }
43    });
44
45    function horizontalScroller(elm, options)
46    {
47        var defaults = { selector:{} };
48
49        defaults.selector.gutter = 'gutter';
50        defaults.selector.scrubber = 'scrubber';
51        defaults.selector.scrubber_icon = 'scrubber-icon';
52        defaults.selector.content;
53        defaults.width = 200;
54
55        this.options = $.extend(true, defaults, options);
56        this.scroller = $(elm);
57        this.scrubber;
58        this.gutter;
59        this.start_mouse_x;
60        this.scrubber_offset_x;
61        this.mouse_offset_x;
62        this.scrubber_padding;
63        this.scrubber_min_width = 20;
64        this.gutter_padding;
65        this.position_ratio;
66        this.scroll_ratio;
67        this.resize_scrubber;
68        this.content = $(this.options.selector.content);
69        this.scrollto_pos;
70        this.skip_animation = false;
71
72    }
73
74    horizontalScroller.prototype.init = function()
75    {
76        var self = this;
77
78        this._drawParts();
79
80        $(window).resize(function() {
81            self._update();
82        });
83    }
84
85    horizontalScroller.prototype._drawParts = function()
86    {
87        var self = this;
88
89        this.scroller.html('<div class="' + this.options.selector.gutter + '"><div class="' + this.options.selector.scrubber + '"><div class="' + this.options.selector.scrubber_icon + '"></div></div></div>');
90        this.scrubber = this.scroller.find('.' + this.options.selector.scrubber);
91        this.gutter = this.scroller.find('.' + this.options.selector.gutter);
92        this.content.parent().css({ overflow:'hidden' });
93
94        this.gutter_padding = (this.gutter.outerWidth() - this.gutter.width()) / 2;
95        this.scrubber_padding = (this.scroller.outerWidth() - this.scroller.width()) / 2;
96
97        this.gutter.css({ width:(this.options.width - (this.gutter_padding*2)) + 'px' });
98
99        this.scrubber.mousedown(function(e) { e.preventDefault();e.stopPropagation(); self._startDrag(e); });
100        this.gutter.mousedown(function(e) { e.preventDefault(); self._scrubTo(e); });
101        this._updateScrubber();
102    }
103
104    horizontalScroller.prototype._startDrag = function(e)
105    {
106        var self = this;
107
108        // mouse offset position relative to the elements and their padding;
109        this.mouse_offset_x = e.pageX - this.scrubber.offset().left + this.scroller.offset().left + this.gutter_padding + this.scrubber_padding;
110
111        $('html').on('mousemove', function(e) { self._doDrag(e); });

112        $('html').mouseup(function() { self._stopDrag(); });
113
114        // prevent ie from selecting everything while dragging (lock selectstart)
115        if ($.browser.msie) {
116            $('html').get(0).ondrag = function () { return false; };
117            $('html').get(0).onselectstart = function () { return false; };
118        }
119
120
121    }
122
123    horizontalScroller.prototype._doDrag = function(e)
124    {
125        var self = this;
126        var bound_left = 0;
127        var bound_right = this.gutter.innerWidth() - this.scrubber.outerWidth() - (this.gutter_padding * 2);
128        var pos_x = e.pageX - this.mouse_offset_x;
129        var _x;
130        var _w;
131        var _n;
132
133        this.position_ratio = _x / _w;
134
135        if (pos_x > bound_right) { pos_x = bound_right; }
136        if (pos_x < bound_left) { pos_x = bound_left; }
137
138        this.scrubber.css({ left:pos_x });
139
140        _x = this.scrubber.position().left - this.gutter.position().left - this.gutter_padding;
141        _w = this.gutter.outerWidth() - this.scrubber.outerWidth() - (this.gutter_padding*2);
142
143        this.position_ratio = _x / _w;
144
145        _n = this.position_ratio * (this.content.width()-this.content.parent().width());
146
147        this.scrollTo(Math.round(_n));
148    }
149
150    horizontalScroller.prototype._stopDrag = function()
151    {
152        var self = this;
153
154        $('html').off('mousemove');
155
156        // release selectstart
157        if ($.browser.msie) {
158            $('html').get(0).ondrag = null;
159            $('html').get(0).onselectstart = null;
160        }
161    }
162
163    horizontalScroller.prototype._update = function(update_gutter)
164    {
165        var bound_left = 0;
166        var bound_right = this.gutter.innerWidth() - this.scrubber.outerWidth() - (this.gutter_padding * 2);
167        var pos_x = (this.gutter.outerWidth() * this.position_ratio) - (this.gutter_padding*2) - this.scrubber.outerWidth();
168
169        if (isNaN(pos_x)) { pos_x = 0; }
170        if (pos_x > bound_right) { pos_x = bound_right; }
171        if (pos_x < bound_left) { pos_x = bound_left; }
172
173        if (update_gutter == true) {
174            this.gutter.css({ width:(this.options.width - (this.gutter_padding*2)) + 'px' });
175        }
176
177        this.scrubber.css({ left:pos_x });
178        this._updateScrubber()
179    }
180
181    horizontalScroller.prototype._updateScrubber = function()
182    {
183        var size_ratio = this.content.parent().width() / this.content.width();
184        var gutter_w = this.gutter.innerWidth() - (this.gutter_padding * 2);
185        var w = size_ratio * gutter_w;
186
187        if (w < this.scrubber_min_width) {
188            w = this.scrubber_min_width;
189        }
190
191        if (size_ratio >= 1) {
192            this.scrubber.css({ visibility:'hidden' });
193            this.content.scrollLeft(0);
194            this.scrubber.width(gutter_w);
195        } else {
196            this.scrubber.width(w);
197            this.scrubber.css({ visibility:'visible' });
198        }
199    }
200
201    horizontalScroller.prototype._updateScrubberPosition = function()
202    {
203        var _w = this.content.width() - this.content.parent().width();
204        var _x = this.content.parent().scrollLeft();
205        var bound_left = 0;
206        var bound_right = this.gutter.innerWidth() - this.scrubber.outerWidth() - (this.gutter_padding * 2);
207        var gutter_w = this.gutter.innerWidth() - (this.gutter_padding * 2);
208        var pos_x;
209
210        this.scroll_ratio = _x / _w;
211        pos_x = (this.scroll_ratio * gutter_w) - (this.scrubber.width()/2);
212
213        if (pos_x > bound_right) { pos_x = bound_right; }
214        if (pos_x < bound_left) { pos_x = bound_left; }
215
216        this.scrubber.css({ left:pos_x + 'px' });
217    }
218
219    horizontalScroller.prototype._scrubTo = function(e)
220    {
221        // mouse offset position relative to the elements and their padding;
222        var offset_x = this.scroller.offset().left + this.gutter_padding + this.scrubber_padding;
223        var pos_x = e.pageX - offset_x - (this.scrubber.width()/2);
224        var bound_left = 0;
225        var bound_right = this.gutter.innerWidth() - this.scrubber.outerWidth() - (this.gutter_padding * 2);
226        var _x;
227        var _w;
228        var _n;
229
230        if (pos_x > bound_right) { pos_x = bound_right; }
231        if (pos_x < bound_left) { pos_x = bound_left; }
232
233        this.scrubber.css({ left:pos_x + 'px' });
234
235        _x = this.scrubber.position().left - this.gutter.position().left - this.gutter_padding;
236        _w = this.gutter.outerWidth() - this.scrubber.outerWidth() - (this.gutter_padding*2);
237
238        this.position_ratio = _x / _w;
239
240        _n = this.position_ratio * (this.content.width()-this.content.parent().width());
241
242        this.scrollTo(Math.round(_n));
243    }
244
245    horizontalScroller.prototype.scrollTo = function(n)
246    {
247        if (this.content != null) {
248            this.content.parent().scrollLeft(n);
249        }
250    }
251

252    horizontalScroller.prototype.scrollContentTo = function(n)
253    {
254        var self = this;
255
256        if (this.skip_animation == true) {
257            this.content.parent().scrollLeft(n);
258            this._updateScrubberPosition();
259        } else {
260            this.content.parent().animate({scrollLeft: n}, { duration:1000, step:function() { self._updateScrubberPosition(); } });
261        }
262
263        this.skip_animation = false;
264    }
265
266    horizontalScroller.prototype._ignoreNativeDrag = function() {    return false; };
267
268})(jQuery);