1 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
2 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
3 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
4 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
5 | return c > 3 && r && Object.defineProperty(target, key, r), r;
|
6 | };
|
7 | var __metadata = (this && this.__metadata) || function (k, v) {
|
8 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
9 | };
|
10 | import { Injectable } from '@angular/core';
|
11 | /**
|
12 | * Simple utility for getting the bounds of the browser viewport.
|
13 | * TODO: internal
|
14 | */
|
15 | export var ViewportRuler = (function () {
|
16 | function ViewportRuler() {
|
17 | }
|
18 | // TODO(jelbourn): cache the document's bounding rect and only update it when the window
|
19 | // is resized (debounced).
|
20 | /** Gets a ClientRect for the viewport's bounds. */
|
21 | ViewportRuler.prototype.getViewportRect = function () {
|
22 | // Use the document element's bounding rect rather than the window scroll properties
|
23 | // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll
|
24 | // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different
|
25 | // conceptual viewports. Under most circumstances these viewports are equivalent, but they
|
26 | // can disagree when the page is pinch-zoomed (on devices that support touch).
|
27 | // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4
|
28 | // We use the documentElement instead of the body because, by default (without a css reset)
|
29 | // browsers typically give the document body an 8px margin, which is not included in
|
30 | // getBoundingClientRect().
|
31 | var documentRect = document.documentElement.getBoundingClientRect();
|
32 | var scrollPosition = this.getViewportScrollPosition(documentRect);
|
33 | var height = window.innerHeight;
|
34 | var width = window.innerWidth;
|
35 | return {
|
36 | top: scrollPosition.top,
|
37 | left: scrollPosition.left,
|
38 | bottom: scrollPosition.top + height,
|
39 | right: scrollPosition.left + width,
|
40 | height: height,
|
41 | width: width,
|
42 | };
|
43 | };
|
44 | /**
|
45 | * Gets the (top, left) scroll position of the viewport.
|
46 | * @param documentRect
|
47 | */
|
48 | ViewportRuler.prototype.getViewportScrollPosition = function (documentRect) {
|
49 | if (documentRect === void 0) { documentRect = document.documentElement.getBoundingClientRect(); }
|
50 | // The top-left-corner of the viewport is determined by the scroll position of the document
|
51 | // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about
|
52 | // whether `document.body` or `document.documentElement` is the scrolled element, so reading
|
53 | // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of
|
54 | // `document.documentElement` works consistently, where the `top` and `left` values will
|
55 | // equal negative the scroll position.
|
56 | var top = documentRect.top < 0 && document.body.scrollTop == 0 ?
|
57 | -documentRect.top :
|
58 | document.body.scrollTop;
|
59 | var left = documentRect.left < 0 && document.body.scrollLeft == 0 ?
|
60 | -documentRect.left :
|
61 | document.body.scrollLeft;
|
62 | return { top: top, left: left };
|
63 | };
|
64 | ViewportRuler = __decorate([
|
65 | Injectable(),
|
66 | __metadata('design:paramtypes', [])
|
67 | ], ViewportRuler);
|
68 | return ViewportRuler;
|
69 | }());
|
70 |
|
71 | //# sourceMappingURL=viewport-ruler.js.map
|