UNPKG

7.46 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 */
68 MDCTopAppBarFoundation.prototype.handleTargetScroll = function () {
69 var currentScrollPosition = Math.max(this.adapter.getViewportScrollY(), 0);
70 var diff = currentScrollPosition - this.lastScrollPosition;
71 this.lastScrollPosition = currentScrollPosition;
72 // If the window is being resized the lastScrollPosition needs to be updated
73 // but the current scroll of the top app bar should stay in the same
74 // position.
75 if (!this.isCurrentlyBeingResized) {
76 this.currentAppBarOffsetTop -= diff;
77 if (this.currentAppBarOffsetTop > 0) {
78 this.currentAppBarOffsetTop = 0;
79 }
80 else if (Math.abs(this.currentAppBarOffsetTop) > this.topAppBarHeight) {
81 this.currentAppBarOffsetTop = -this.topAppBarHeight;
82 }
83 this.moveTopAppBar();
84 }
85 };
86 /**
87 * Top app bar resize handler that throttle/debounce functions that execute updates.
88 */
89 MDCTopAppBarFoundation.prototype.handleWindowResize = function () {
90 var _this = this;
91 // Throttle resize events 10 p/s
92 if (!this.resizeThrottleId) {
93 this.resizeThrottleId = setTimeout(function () {
94 _this.resizeThrottleId = INITIAL_VALUE;
95 _this.throttledResizeHandler();
96 }, numbers.DEBOUNCE_THROTTLE_RESIZE_TIME_MS);
97 }
98 this.isCurrentlyBeingResized = true;
99 if (this.resizeDebounceId) {
100 clearTimeout(this.resizeDebounceId);
101 }
102 this.resizeDebounceId = setTimeout(function () {
103 _this.handleTargetScroll();
104 _this.isCurrentlyBeingResized = false;
105 _this.resizeDebounceId = INITIAL_VALUE;
106 }, numbers.DEBOUNCE_THROTTLE_RESIZE_TIME_MS);
107 };
108 /**
109 * Function to determine if the DOM needs to update.
110 */
111 MDCTopAppBarFoundation.prototype.checkForUpdate = function () {
112 var offscreenBoundaryTop = -this.topAppBarHeight;
113 var hasAnyPixelsOffscreen = this.currentAppBarOffsetTop < 0;
114 var hasAnyPixelsOnscreen = this.currentAppBarOffsetTop > offscreenBoundaryTop;
115 var partiallyShowing = hasAnyPixelsOffscreen && hasAnyPixelsOnscreen;
116 // If it's partially showing, it can't be docked.
117 if (partiallyShowing) {
118 this.wasDocked = false;
119 }
120 else {
121 // Not previously docked and not partially showing, it's now docked.
122 if (!this.wasDocked) {
123 this.wasDocked = true;
124 return true;
125 }
126 else if (this.isDockedShowing !== hasAnyPixelsOnscreen) {
127 this.isDockedShowing = hasAnyPixelsOnscreen;
128 return true;
129 }
130 }
131 return partiallyShowing;
132 };
133 /**
134 * Function to move the top app bar if needed.
135 */
136 MDCTopAppBarFoundation.prototype.moveTopAppBar = function () {
137 if (this.checkForUpdate()) {
138 // Once the top app bar is fully hidden we use the max potential top app bar height as our offset
139 // so the top app bar doesn't show if the window resizes and the new height > the old height.
140 var offset = this.currentAppBarOffsetTop;
141 if (Math.abs(offset) >= this.topAppBarHeight) {
142 offset = -numbers.MAX_TOP_APP_BAR_HEIGHT;
143 }
144 this.adapter.setStyle('top', offset + 'px');
145 }
146 };
147 /**
148 * Throttled function that updates the top app bar scrolled values if the
149 * top app bar height changes.
150 */
151 MDCTopAppBarFoundation.prototype.throttledResizeHandler = function () {
152 var currentHeight = this.adapter.getTopAppBarHeight();
153 if (this.topAppBarHeight !== currentHeight) {
154 this.wasDocked = false;
155 // Since the top app bar has a different height depending on the screen width, this
156 // will ensure that the top app bar remains in the correct location if
157 // completely hidden and a resize makes the top app bar a different height.
158 this.currentAppBarOffsetTop -= this.topAppBarHeight - currentHeight;
159 this.topAppBarHeight = currentHeight;
160 }
161 this.handleTargetScroll();
162 };
163 return MDCTopAppBarFoundation;
164}(MDCTopAppBarBaseFoundation));
165export { MDCTopAppBarFoundation };
166// tslint:disable-next-line:no-default-export Needed for backward compatibility with MDC Web v0.44.0 and earlier.
167export default MDCTopAppBarFoundation;
168//# sourceMappingURL=foundation.js.map
\No newline at end of file