(function() { function recalculate(_container, _bottomThreshold) { let $container = $(_container); let width = $container.width(), scrollWidth = _container.scrollWidth, scrollLeft = _container.scrollLeft, stagScrollbarUI = $container.find('>.stag-scrollbar-horiz-container').first(); if(Math.ceil(scrollWidth) > Math.ceil(width)) { $container.attr({ 'stag-h-scrollbar': 1, 'stag-h-scroll-left': scrollLeft, 'stag-h-scroll-width': scrollWidth, 'stag-h-width': width, }); if($container.offset().top + $container.outerHeight() > $(window).height() + $(window).scrollTop() - _bottomThreshold) { stagScrollbarUI.css({ display: 'block', left: ($container.offset().left + 4) + 'px', width: ($container.width() - 4) + 'px', bottom: _bottomThreshold + 'px', }); let trackerWidth = Math.floor((width/scrollWidth)*stagScrollbarUI.width()) + 'px', // ((width/scrollwidth) * 100) %, trackerLeft = Math.ceil((scrollLeft/scrollWidth)*stagScrollbarUI.width()) + 'px'; // // ((scrollLeft/scrollwidth) * 100) %, stagScrollbarUI.find('.stag-scrollbar-horiz-tracker').css({ marginLeft: trackerLeft, width: trackerWidth, }); } else { stagScrollbarUI.css({ display: 'none' }); } } else { $container.removeAttr('stag-h-scrollbar'); } } window.initStagScrollbar = function(_bottomThreshold = 0) { $('.stag-scrollbar:not([stag-scrollbar-initialized])').each(function() { let scrollbarID = 'stag-scrollbar-' + (Math.random() * 10000); let stagScrollbarUI = $('
').addClass('stag-scrollbar-horiz-container'); stagScrollbarUI.append($('
').addClass('stag-scrollbar-horiz-tracker')) $(this).append(stagScrollbarUI); recalculate(this, _bottomThreshold); let self = this; $(this) .off('mouseenter.stag-scrollbar') .on('mouseenter.stag-scrollbar', function() { if(!scrolling) recalculate(this, _bottomThreshold); }) .off('scroll.stag-scrollbar') .on('scroll.stag-scrollbar', function() { if(!scrolling) recalculate(this, _bottomThreshold); }) .off('resize.stag-scrollbar') .on('resize.stag-scrollbar', function() { recalculate(this, _bottomThreshold); }); $(window).on('resize', function() { recalculate(self, _bottomThreshold); }); $(window).on('scroll', function() { recalculate(self, _bottomThreshold); }); $(document).on('v-splitter-change', function() { recalculate(self, _bottomThreshold); }); let origX = 0, origLeft = 0, scrolling = false, tracker = $(this).find('.stag-scrollbar-horiz-tracker'); tracker .off('mousedown.' + scrollbarID) .on('mousedown.' + scrollbarID, function (_e) { origLeft = tracker.offset().left - stagScrollbarUI.offset().left; origX = _e.screenX; scrolling = true; $('body').addClass('stag-scrollbar-scrolling'); return false; }); $(document) .off('mousemove.' + scrollbarID) .on('mousemove.' + scrollbarID, function (_e) { if (!scrolling) return; let delta = _e.screenX - origX, finalML = origLeft + delta; if(finalML < 0) { finalML = 0; } else if(finalML + tracker.width() > stagScrollbarUI.width()) { finalML = stagScrollbarUI.width() - tracker.width(); } tracker.css({ marginLeft: finalML + 'px' }); let percentScrolled = delta/(stagScrollbarUI.width() - tracker.width()); $(self).scrollLeft((self.scrollWidth - $(self).width()) * percentScrolled); }) .off('mouseup.' + scrollbarID) .on('mouseup.' + scrollbarID, function (_e) { if (!scrolling) return; scrolling = false; $('body').removeClass('stag-scrollbar-scrolling'); recalculate(self, _bottomThreshold); }); $(this).attr('stag-scrollbar-id', scrollbarID).attr('stag-scrollbar-initialized', 1); }); } // addMCInitializer('stag-scrollbar', initStagScrollbar); }).call(window);