ux-datagrid-scrollBar.js

! ux-angularjs-datagrid v.1.4.11 (c) 2016, Obogo https://github.com/obogo/ux-angularjs-datagrid License: MIT.

(function (exports, global) {
if (typeof define === "function" && define.amd) {
  define(exports);
} else if (typeof module !== "undefined" && module.exports) {
  module.exports = exports;
} else {
  global.ux = exports;
}

angular.module("ux").factory("scrollBar", function() {
    return [ "inst", function(inst) {
        var result = exports.logWrapper("scrollBar", {}, "red", inst), scrollBarElm = document.createElement("div"), data = {}, parent = inst.element[0].parentNode, nextSibling = inst.element[0].nextSibling;
        scrollBarElm.style.display = "none";
        scrollBarElm.className = "datagrid-scrollbar";
        if (nextSibling) {
            parent.insertBefore(scrollBarElm, nextSibling);
        } else {
            parent.appendChild(scrollBarElm);
        }

TODO: need to remove dynamic style sheets and use inline css.

        if (!exports.css.getSelector(".datagrid-scrollbar")) {
            exports.css.createClass("datagrid-scrollbar", ".datagrid-scrollbar", "box-sizing: border-box; " + "position: absolute; " + "top:0px; " + "right:0px; " + "width:6px; " + "background-color: rgba(0, 0, 0, 0.498039); " + "border: 1px solid rgba(255, 255, 255, 0.901961); " + "border-top-left-radius: 3px; " + "border-top-right-radius: 3px; " + "border-bottom-right-radius: 3px; " + "border-bottom-left-radius: 3px; " + "display: block; height: 476px; " + "background-position: initial initial; " + "background-repeat: initial initial;");
            exports.css.createClass("datagrid-scrollbar", ".scrolling", "opacity:1;");
        }
        function calculateDimensions() {
            var vh = inst.getViewportHeight(), ch = inst.getContentHeight(), sp = inst.values.scroll / ch;
            if (vh < ch) {
                data.percentHeight = vh / ch;
                data.display = "block";
                data.height = vh * data.percentHeight;
                data.height = data.height < 10 ? 10 : data.height;
                data.top = inst.element[0].offsetTop + vh * sp;
            } else {
                data.display = "none";
            }
        }
        function updateScrollBar() {
            calculateDimensions();
            scrollBarElm.style.height = data.height + "px";
            scrollBarElm.style.top = data.top + "px";
            scrollBarElm.style.display = data.display;
        }
        function onScrollStart(event, val) {
            scrollBarElm.classList.add("scrolling");
            updateScrollBar();
        }
        function onScrollMove(event, val) {
            updateScrollBar();
        }
        function onScrollEnd(event, values) {
            updateScrollBar();
            scrollBarElm.classList.remove("scrolling");
        }
        inst.unwatchers.push(inst.scope.$on(exports.datagrid.events.ON_SCROLL_START, onScrollStart));
        inst.unwatchers.push(inst.scope.$on(exports.datagrid.events.ON_SCROLL, onScrollMove));
        inst.unwatchers.push(inst.scope.$on(exports.datagrid.events.ON_SCROLL_STOP, onScrollEnd));
        inst.unwatchers.push(inst.scope.$on(exports.datagrid.events.ON_AFTER_RENDER, updateScrollBar));
        result.destroy = function() {
            scrollBarElm.remove();
            scrollBarElm = null;
            data = null;
            inst = null;
            result = null;
        };
        inst.scrollBar = result;
    } ];
});
}(this.ux = this.ux || {}, function() {return this;}()));