stagfe2/public/js/stag-scrollbar.js

(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 = $('<div/>').addClass('stag-scrollbar-horiz-container');
            stagScrollbarUI.append($('<div/>').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);