https://crcnortheast.org/Commonscripts/NWS/Modules.CommonScripts/NWS.Display.ScrollContainer.js

1NWS.initNamespace('NWS.Display.ScrollContainer', function () {
2
3    // Private variable for this namespace
4    var _params;
5
6    function addScrollText($wrappers) {
7        $wrappers.each(function () {
8            if (hasHorizontalScrollBar($(this))) {
9                $(this).prev('.' + _params.scrollTextClass).show();
10            } else {
11                $(this).prev('.' + _params.scrollTextClass).hide();
12            }
13        });
14    }
15
16    function hasHorizontalScrollBar(el) {
17		return el.get(0).scrollWidth > el.innerWidth() + 1;
18    }
19	
20    function addKeyboardControls($wrappers) {
21        $wrappers.each(function () {
22            var $wrapper = $(this);
23            
24			// Check if horizontal scrolling is needed
25			var needsHorizontalScroll = function() {
26				var element = $wrapper.get(0);
27				return element.scrollWidth > element.clientWidth;
28			};			
29			var updateTabindex = function() {
30				if (needsHorizontalScroll()) {
31					if (!$wrapper.attr('tabindex')) {
32						$wrapper.attr('tabindex', '0');
33					}
34				} else {
35					$wrapper.removeAttr('tabindex');
36				}
37			};			
38			updateTabindex();
39			$(window).off('resize.scrollcontainer' + $wrapper.index()).on('resize.scrollcontainer' + $wrapper.index(), function() {
40				updateTabindex();
41			});
42            
43            // Add keyboard event handler
44            $wrapper.off('keydown.scrollcontainer').on('keydown.scrollcontainer', function (e) {
45                var scrollAmount = _params.scrollAmount || 50;
46                var currentScroll = $wrapper.scrollLeft();
47                
48                switch(e.key) {
49                    case 'ArrowLeft':
50                        e.preventDefault();
51                        $wrapper.scrollLeft(currentScroll - scrollAmount);
52                        break;
53                    case 'ArrowRight':
54                        e.preventDefault();
55                        $wrapper.scrollLeft(currentScroll + scrollAmount);
56                        break;
57                    case 'Home':
58                        e.preventDefault();
59                        $wrapper.scrollLeft(0);
60                        break;
61                    case 'End':
62                        e.preventDefault();
63                        $wrapper.scrollLeft($wrapper.get(0).scrollWidth);
64                        break;
65                }
66            });
67            
68            $wrapper.off('focus.scrollcontainer').on('focus.scrollcontainer', function () {
69                $(this).addClass('scroll-container-focused');
70            });
71            
72            $wrapper.off('blur.scrollcontainer').on('blur.scrollcontainer', function () {
73                $(this).removeClass('scroll-container-focused');
74            });
75        });
76    }
77
78    return {
79        /**
80         * Creates a horizontal scrolling container around an element. This is designed primarily for tables, but could be used for other elements
81         * @param {Object} params - An object containing the parameters
82         * @param {Object} params.element - Required. The element to scroll. This can be a DOM element, a jQuery element, or a jQuery selector
83         * @param {string} params.scrollText - Optional. The text that appears above the element
84         * @param {string} params.scrollTextClass - Optional. The class name that appears around the text above the element
85         * @param {string} params.containerClass - Optional. The class name for the container around the element
86         */
87        init: function (params) {
88            _params = params;
89
90            // Required parameters
91            if (typeof (_params.element) === 'undefined')
92                throw 'params.element must be defined';
93
94            // Convert DOM element to jQuery element if needed
95            if (!(_params.element instanceof jQuery))
96                _params.element = $(_params.element);
97			
98            // Optional parameters
99            if (typeof (_params.scrollText) === 'undefined')
100                _params.scrollText = 'Scroll table to view all';
101            if (typeof (_params.scrollTextClass) === 'undefined')
102                _params.scrollTextClass = 'scrollText';
103            if (typeof (_params.containerClass) === 'undefined')
104                _params.containerClass = 'scrollTable';
105            if (typeof (_params.enableKeyboard) === 'undefined')
106                _params.enableKeyboard = true;
107
108                _params.element.wrap('<div class="' + _params.containerClass + '"/>');
109                var $wrappers = $('.' + _params.containerClass);
110                $('<div class="' + _params.scrollTextClass + '">' + _params.scrollText + '</div>').insertBefore($wrappers);
111
112                addScrollText($wrappers);
113
114				// Add keyboard controls if enabled
115				if (_params.enableKeyboard) {
116					addKeyboardControls($wrappers);
117				}
118
119				$(window).resize(function () {
120					addScrollText($wrappers);
121				});
122        }
123    };
124});