UNPKG

7.5 kBJavaScriptView Raw
1/**
2 * @license
3 * Copyright 2018 Google Inc.
4 *
5 * Permission is hereby granted, free of charge, to any person obtaining a copy
6 * of this software and associated documentation files (the "Software"), to deal
7 * in the Software without restriction, including without limitation the rights
8 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 * copies of the Software, and to permit persons to whom the Software is
10 * furnished to do so, subject to the following conditions:
11 *
12 * The above copyright notice and this permission notice shall be included in
13 * all copies or substantial portions of the Software.
14 *
15 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 * THE SOFTWARE.
22 */
23import { __extends } from "tslib";
24import { numbers } from '../constants';
25import { MDCTopAppBarBaseFoundation } from '../foundation';
26var INITIAL_VALUE = 0;
27var MDCTopAppBarFoundation = /** @class */ (function (_super) {
28 __extends(MDCTopAppBarFoundation, _super);
29 /* istanbul ignore next: optional argument is not a branch statement */
30 function MDCTopAppBarFoundation(adapter) {
31 var _this = _super.call(this, adapter) || this;
32 /**
33 * Indicates if the top app bar was docked in the previous scroll handler iteration.
34 */
35 _this.wasDocked = true;
36 /**
37 * Indicates if the top app bar is docked in the fully shown position.
38 */
39 _this.isDockedShowing = true;
40 /**
41 * Variable for current scroll position of the top app bar
42 */
43 _this.currentAppBarOffsetTop = 0;
44 /**
45 * Used to prevent the top app bar from being scrolled out of view during resize events
46 */
47 _this.isCurrentlyBeingResized = false;
48 /**
49 * The timeout that's used to throttle the resize events
50 */
51 _this.resizeThrottleId = INITIAL_VALUE;
52 /**
53 * The timeout that's used to debounce toggling the isCurrentlyBeingResized
54 * variable after a resize
55 */
56 _this.resizeDebounceId = INITIAL_VALUE;
57 _this.lastScrollPosition = _this.adapter.getViewportScrollY();
58 _this.topAppBarHeight = _this.adapter.getTopAppBarHeight();
59 return _this;
60 }
61 MDCTopAppBarFoundation.prototype.destroy = function () {
62 _super.prototype.destroy.call(this);
63 this.adapter.setStyle('top', '');
64 };
65 /**
66 * Scroll handler for the default scroll behavior of the top app bar.
67 * @override
68 */
69 MDCTopAppBarFoundation.prototype.handleTargetScroll = function () {
70 var currentScrollPosition = Math.max(this.adapter.getViewportScrollY(), 0);
71 var diff = currentScrollPosition - this.lastScrollPosition;
72 this.lastScrollPosition = currentScrollPosition;
73 // If the window is being resized the lastScrollPosition needs to be updated
74 // but the current scroll of the top app bar should stay in the same
75 // position.
76 if (!this.isCurrentlyBeingResized) {
77 this.currentAppBarOffsetTop -= diff;
78 if (this.currentAppBarOffsetTop > 0) {
79 this.currentAppBarOffsetTop = 0;
80 }
81 else if (Math.abs(this.currentAppBarOffsetTop) > this.topAppBarHeight) {
82 this.currentAppBarOffsetTop = -this.topAppBarHeight;
83 }
84 this.moveTopAppBar();
85 }
86 };
87 /**
88 * Top app bar resize handler that throttle/debounce functions that execute updates.
89 * @override
90 */
91 MDCTopAppBarFoundation.prototype.handleWindowResize = function () {
92 var _this = this;
93 // Throttle resize events 10 p/s
94 if (!this.resizeThrottleId) {
95 this.resizeThrottleId = setTimeout(function () {
96 _this.resizeThrottleId = INITIAL_VALUE;
97 _this.throttledResizeHandler();
98 }, numbers.DEBOUNCE_THROTTLE_RESIZE_TIME_MS);
99 }
100 this.isCurrentlyBeingResized = true;
101 if (this.resizeDebounceId) {
102 clearTimeout(this.resizeDebounceId);
103 }
104 this.resizeDebounceId = setTimeout(function () {
105 _this.handleTargetScroll();
106 _this.isCurrentlyBeingResized = false;
107 _this.resizeDebounceId = INITIAL_VALUE;
108 }, numbers.DEBOUNCE_THROTTLE_RESIZE_TIME_MS);
109 };
110 /**
111 * Function to determine if the DOM needs to update.
112 */
113 MDCTopAppBarFoundation.prototype.checkForUpdate = function () {
114 var offscreenBoundaryTop = -this.topAppBarHeight;
115 var hasAnyPixelsOffscreen = this.currentAppBarOffsetTop < 0;
116 var hasAnyPixelsOnscreen = this.currentAppBarOffsetTop > offscreenBoundaryTop;
117 var partiallyShowing = hasAnyPixelsOffscreen && hasAnyPixelsOnscreen;
118 // If it's partially showing, it can't be docked.
119 if (partiallyShowing) {
120 this.wasDocked = false;
121 }
122 else {
123 // Not previously docked and not partially showing, it's now docked.
124 if (!this.wasDocked) {
125 this.wasDocked = true;
126 return true;
127 }
128 else if (this.isDockedShowing !== hasAnyPixelsOnscreen) {
129 this.isDockedShowing = hasAnyPixelsOnscreen;
130 return true;
131 }
132 }
133 return partiallyShowing;
134 };
135 /**
136 * Function to move the top app bar if needed.
137 */
138 MDCTopAppBarFoundation.prototype.moveTopAppBar = function () {
139 if (this.checkForUpdate()) {
140 // Once the top app bar is fully hidden we use the max potential top app bar height as our offset
141 // so the top app bar doesn't show if the window resizes and the new height > the old height.
142 var offset = this.currentAppBarOffsetTop;
143 if (Math.abs(offset) >= this.topAppBarHeight) {
144 offset = -numbers.MAX_TOP_APP_BAR_HEIGHT;
145 }
146 this.adapter.setStyle('top', offset + 'px');
147 }
148 };
149 /**
150 * Throttled function that updates the top app bar scrolled values if the
151 * top app bar height changes.
152 */
153 MDCTopAppBarFoundation.prototype.throttledResizeHandler = function () {
154 var currentHeight = this.adapter.getTopAppBarHeight();
155 if (this.topAppBarHeight !== currentHeight) {
156 this.wasDocked = false;
157 // Since the top app bar has a different height depending on the screen width, this
158 // will ensure that the top app bar remains in the correct location if
159 // completely hidden and a resize makes the top app bar a different height.
160 this.currentAppBarOffsetTop -= this.topAppBarHeight - currentHeight;
161 this.topAppBarHeight = currentHeight;
162 }
163 this.handleTargetScroll();
164 };
165 return MDCTopAppBarFoundation;
166}(MDCTopAppBarBaseFoundation));
167export { MDCTopAppBarFoundation };
168// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
169export default MDCTopAppBarFoundation;
170//# sourceMappingURL=foundation.js.map
\No newline at end of file