ShWasher/src_0nline/ShwasherSys/ShwasherSys.Web/Content/Plugins/scroll/js/scrollBar.js

;
(function($) {
    $.fn.extend({
        "scrollBar": function(options) {
            var settings = { barWidth: 5, position: "x,y", wheelDis: 15 };
            options = $.extend(settings, options);
            var horizontalDiv = '<div class="zl-scrollBarBox" style="width:100%;left:0;height:' + settings.barWidth + 'px;bottom:0;">' +
                '<div class="zl-scrollBar zl-horizontalBar" style="height:' + settings.barWidth + 'px;border-radius:' + settings.barWidth / 2 + 'px;"></div>' +
                '</div>';
            var verticalDiv = '<div class="zl-scrollBarBox" style="height:100%;top:0;width:' + settings.barWidth + 'px;right:0;">' +
                '<div class="zl-scrollBar zl-verticalBar" style="width:' + settings.barWidth + 'px;border-radius:' + settings.barWidth / 2 + 'px;"></div>' +
                '</div>';
            var T = this;
            T.each(function() { $(this).attr("paddingR", $(this).css("padding-right")).attr("paddingB", $(this).css("padding-bottom")); });

            function creatScrollBar(obj) {
                var This = $(obj).get(0);
                var paddingR = parseFloat($(obj).attr("paddingR"));
                var paddingB = parseFloat($(obj).attr("paddingB"));
                $(obj).css({ "padding-right": paddingR + "px", "padding-bottom": paddingB + "px", "overflow": "hidden" });
                if (!($(obj).children().hasClass("zl-scrollContentDiv"))) { $(obj).wrapInner('<div class="zl-scrollContentDiv"></div>'); };
                if ($(obj).css("position") == "static") { $(obj).css({ "position": "relative" }); };
                var scrollContentDiv = $(obj).find(".zl-scrollContentDiv");
                var scrollH = scrollContentDiv[0].scrollHeight;
                var scrollW = scrollContentDiv[0].scrollWidth;
                var innerH = scrollContentDiv.height();
                var innerW = scrollContentDiv.width();
                var outerH = $(obj).innerHeight();
                var outerW = $(obj).innerWidth();

                function addVerticalBar(a) { This.style.paddingRight = paddingR + settings.barWidth + 'px';
                    innerH = $(a).height(); var barHeight = outerH * (innerH / scrollH);
                    $(a).find(".zl-scrollBarBox").remove().end().append(verticalDiv).find(".zl-verticalBar").height(barHeight); };

                function addHorizontalBar(a) { This.style.paddingBottom = paddingB + settings.barWidth + 'px';
                    innerW = $(a).width(); var barWidth = outerW * (innerW / scrollW);
                    $(a).find(".zl-scrollBarBox").remove().end().append(horizontalDiv).find(".zl-horizontalBar").width(barWidth); };
                switch (settings.position) {
                    case "x,y":
                        if (scrollH > innerH && scrollW > innerW) { This.style.paddingRight = paddingR + settings.barWidth + 'px';
                            innerH = $(obj).height();
                            outerH = $(obj).innerHeight(); var barHeight = (outerH - settings.barWidth) * ((innerH - settings.barWidth) / scrollH); if (!($(obj).find(".zl-verticalBar").length)) { $(obj).append(verticalDiv); };
                            $(obj).find(".zl-verticalBar").height(barHeight).parent().height(outerH - settings.barWidth);
                            This.style.paddingBottom = paddingB + settings.barWidth + 'px';
                            innerW = $(obj).width(); var barWidth = (outerW - settings.barWidth) * ((innerW - settings.barWidth) / scrollW); if (!($(obj).find(".zl-horizontalBar").length)) { $(obj).append(horizontalDiv); };
                            $(obj).find(".zl-horizontalBar").width(barWidth).parent().width(outerW).css({ "padding-right": settings.barWidth + "px", "box-sizing": "border-box" }); } else if (scrollH > innerH) { addVerticalBar(obj); } else if (scrollW > innerW) { addHorizontalBar(obj); } else { $(obj).find(".zl-scrollBarBox").remove(); }
                        break;
                    case "x":
                        if (scrollW > innerW) { addHorizontalBar(obj); } else { $(obj).find(".zl-scrollBarBox").remove(); }
                        break;
                    case "y":
                        if (scrollH > innerH) { addVerticalBar(obj); } else { $(obj).find(".zl-scrollBarBox").remove(); }
                        break;
                };
            }

            function recycleThis() { T.each(function() { creatScrollBar(this); }); };
            recycleThis();

            function creatTimer(obj, oldWidth, oldHeight, oldInnerWidth, oldInnerHeight, timer) {
                timer = setInterval(function() {
                    var newWidth = null;
                    var newHeight = null;
                    var newInnerWidth = null;
                    var newInnerHeight = null;
                    var topDiv = null;
                    var leftDiv = null;
                    var topBar = null;
                    var leftBar = null;
                    var scrollContentDiv = $(obj).find(".zl-scrollContentDiv");
                    if (scrollContentDiv.length) { newWidth = scrollContentDiv[0].scrollWidth;
                        newHeight = scrollContentDiv[0].scrollHeight;
                        newInnerWidth = scrollContentDiv.width();
                        newInnerHeight = scrollContentDiv.height(); } else { newWidth = $(obj)[0].scrollWidth - parseFloat($(obj).css("padding-left"));
                        newHeight = $(obj)[0].scrollHeight - parseFloat($(obj).css("padding-top"));
                        newInnerWidth = $(obj).width();
                        newInnerHeight = $(obj).height(); };
                    if (newWidth != oldWidth || newHeight != oldHeight || newInnerWidth != oldInnerWidth || newInnerHeight != oldInnerHeight) {
                        if (scrollContentDiv.length) { topDiv = parseFloat(scrollContentDiv.css("top"));
                            leftDiv = parseFloat(scrollContentDiv.css("left")); };
                        if ($(obj).find(".zl-verticalBar").length) { topBar = parseFloat($(obj).find(".zl-verticalBar").css("top")); };
                        if ($(obj).find(".zl-horizontalBar").length) { leftBar = parseFloat($(obj).find(".zl-horizontalBar").css("left")); };
                        creatScrollBar(obj);
                        if ($(obj).find(".zl-scrollBarBox").length) {
                            if (topDiv) {
                                var maxTopBox = scrollContentDiv[0].scrollHeight - $(obj).height();
                                var maxLeftBox = scrollContentDiv[0].scrollWidth - $(obj).width();
                                if (-leftDiv > maxLeftBox) { leftDiv = -maxLeftBox; }
                                if (-topDiv > maxTopBox) { topDiv = -maxTopBox; }
                                scrollContentDiv.css({ "left": leftDiv + 'px', "top": topDiv + 'px' });
                            };
                            if (topBar && $(obj).find(".zl-verticalBar").length) {
                                var verticalBar = $(obj).find(".zl-verticalBar");
                                var maxTop = verticalBar.parent().height() - verticalBar.height();
                                if (topBar > maxTop) { topBar = maxTop; }
                                verticalBar.css("top", topBar + 'px');
                            };
                            if (leftBar && $(obj).find(".zl-horizontalBar").length) {
                                var horizontalBar = $(obj).find(".zl-verticalBar");
                                var maxLeft = horizontalBar.parent().width() - horizontalBar.width();
                                if (leftBar > maxLeft) { leftBar = maxLeft; }
                                $(obj).find(".zl-horizontalBar").css("left", leftBar + 'px');
                            };
                        }
                        oldWidth = newWidth;
                        oldHeight = newHeight;
                        oldInnerHeight = newInnerHeight;
                        oldInnerWidth = newInnerWidth;
                    }
                }, 100);
            }

            function addTimer() {
                $.each(T, function(k, v) {
                    var obj = v;
                    var timer = "timer" + k;
                    var oldWidth = null;
                    var oldHeight = null;
                    var oldInnerWidth = null;
                    var oldInnerHeight = null;
                    if ($(v).find(".zl-scrollContentDiv").length) { oldWidth = $(v).find(".zl-scrollContentDiv")[0].scrollWidth;
                        oldHeight = $(v).find(".zl-scrollContentDiv")[0].scrollHeight;
                        oldInnerWidth = $(v).find(".zl-scrollContentDiv").width();
                        oldInnerHeight = $(v).find(".zl-scrollContentDiv").height(); } else { oldWidth = $(obj)[0].scrollWidth - parseFloat($(obj).css("padding-left"));
                        oldHeight = $(obj)[0].scrollHeight - parseFloat($(obj).css("padding-top"));
                        oldInnerWidth = $(obj).width();
                        oldInnerHeight = $(obj).height(); }
                    creatTimer(obj, oldWidth, oldHeight, oldInnerWidth, oldInnerHeight, timer);
                });
            }
            addTimer();

            function clearTimer() { $.each(T, function(index, item) { var timer = "timer" + index;
                    clearInterval(timer); }); };
            this.on("mousedown", ".zl-scrollBar", function(ev) {
                clearTimer();
                var direction = null;
                if ($(this).hasClass("zl-verticalBar")) { direction = "0"; } else if ($(this).hasClass("zl-horizontalBar")) { direction = "1"; }
                var This = $(this).get(0);
                var height = $(this).parent().height() - $(this).height();
                var width = $(this).parent().width() - $(this).width();
                var contentDiv = $(this).parent().parent().find(".zl-scrollContentDiv").get(0);
                var scrollH = contentDiv.scrollHeight;
                var innerH = $(this).parent().parent().height();
                var scrollW = contentDiv.scrollWidth;
                var innerW = $(this).parent().parent().width();
                var ev = ev || event;
                var disY = ev.clientY - This.offsetTop;
                var disX = ev.clientX - This.offsetLeft;
                var topCount = null;
                var leftCount = null;
                switch (direction) {
                    case "0":
                        document.onmousemove = function(ev) {
                            var ev = ev || event;
                            if (ev.clientY - disY <= 0) { topCount = 0; } else
                            if ((ev.clientY - disY) >= height) { topCount = height; } else { topCount = ev.clientY - disY; }
                            This.style.top = topCount + "px";
                            contentDiv.style.top = -(topCount * (scrollH - innerH) / height) + 'px';
                        };
                        break;
                    case "1":
                        document.onmousemove = function(ev) {
                            var ev = ev || event;
                            if (ev.clientX - disX <= 0) { leftCount = 0; } else
                            if ((ev.clientX - disX) >= width) { leftCount = width; } else { leftCount = ev.clientX - disX; }
                            This.style.left = leftCount + "px";
                            contentDiv.style.left = -(leftCount * (scrollW - innerW) / width) + 'px';
                        };
                        break;
                }
                document.onmouseup = function() { document.onmousemove = null;
                    document.onmouseup = null;
                    addTimer(); };
                return false;
            });

            function fn(ev, a) {
                if (a.find(".zl-verticalBar").length) {
                    var b = true;
                    var height = a.find(".zl-scrollBarBox").height() - a.find(".zl-scrollBar").height();
                    var contentDiv = a.find(".zl-scrollContentDiv").get(0);
                    var scrollH = contentDiv.scrollHeight;
                    var innerH = a.height();
                    if (ev.wheelDelta) { b = ev.wheelDelta > 0 ? true : false; } else { b = ev.detail < 0 ? true : false; }
                    var topDis = parseFloat(a.find(".zl-scrollBar").css("top"));
                    if (b) { topDis -= settings.wheelDis; if (topDis < 0) { topDis = 0; } } else { topDis += settings.wheelDis; if (topDis > height) { topDis = height; } }
                    a.find(".zl-scrollBar").get(0).style.top = topDis + "px";
                    a.find(".zl-scrollContentDiv").get(0).style.top = -(topDis * (scrollH - innerH) / height) + 'px';
                }
            };
            T.each(function() {
                var oDiv = $(this).get(0);
                if (oDiv.addEventListener) { oDiv.addEventListener("DOMMouseScroll", function(ev) { var ev = ev || event; var $This = $(this);
                        fn(ev, $This);
                        ev.preventDefault(); }, false); }
                oDiv.onmousewheel = function(ev) { var ev = ev || event; var $This = $(this);
                    fn(ev, $This); return false; };
            });
            return this;
        }
    });
})(jQuery);