pigallery2/frontend/app/gallery/overlay.service.ts

import {Injectable} from "@angular/core";
import {Event} from "../../../common/event/Event";

@Injectable()
export class OverlayService {

    OnOverlayChange = new Event<boolean>();
    private scrollWidth: number = null;

    public showOverlay() {

        //disable scrolling
        document.getElementsByTagName('body')[0].style.overflow = 'hidden';
        this.OnOverlayChange.trigger(true);
    }

    public hideOverlay() {

        document.getElementsByTagName('body')[0].style.overflowY = 'scroll';
        this.OnOverlayChange.trigger(false);
    }

    getScrollbarWidth() {
        if (this.scrollWidth == null) {


            let outer = document.createElement("div");
            outer.style.visibility = "hidden";
            outer.style.width = "100px";
            outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

            document.body.appendChild(outer);

            let widthNoScroll = outer.offsetWidth;
            // force scrollbars
            outer.style.overflow = "scroll";

            // add innerdiv
            let inner = document.createElement("div");
            inner.style.width = "100%";
            outer.appendChild(inner);

            let widthWithScroll = inner.offsetWidth;

            // remove divs
            outer.parentNode.removeChild(outer);
            this.scrollWidth = widthNoScroll - widthWithScroll;
        }

        return this.scrollWidth;
    }

    getPhantomScrollbarWidth() {
        if (document.getElementsByTagName('body')[0].style.overflow == 'hidden') {
            return this.getScrollbarWidth();
        }
        return 0;
    }

}