1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | "use strict";
|
8 | Object.defineProperty(exports, "__esModule", { value: true });
|
9 | var requestAnimationFrame$1 = (function () {
|
10 | if (typeof requestAnimationFrame === "function") {
|
11 | return requestAnimationFrame.bind(window);
|
12 | }
|
13 | return function (callback) {
|
14 | return setTimeout(function () {
|
15 | return callback(Date.now());
|
16 | }, 1000 / 60);
|
17 | };
|
18 | })();
|
19 | var trailingTimeout = 2;
|
20 | var throttle = function (callback, delay) {
|
21 | var leadingCall = false;
|
22 | var trailingCall = false;
|
23 | var lastCallTime = 0;
|
24 | function resolvePending() {
|
25 | if (leadingCall) {
|
26 | leadingCall = false;
|
27 | callback();
|
28 | }
|
29 | if (trailingCall) {
|
30 | proxy();
|
31 | }
|
32 | }
|
33 | function timeoutCallback() {
|
34 | requestAnimationFrame$1(resolvePending);
|
35 | }
|
36 | function proxy() {
|
37 | var timeStamp = Date.now();
|
38 | if (leadingCall) {
|
39 | if (timeStamp - lastCallTime < trailingTimeout) {
|
40 | return;
|
41 | }
|
42 | trailingCall = true;
|
43 | }
|
44 | else {
|
45 | leadingCall = true;
|
46 | trailingCall = false;
|
47 | setTimeout(timeoutCallback, delay);
|
48 | }
|
49 | lastCallTime = timeStamp;
|
50 | }
|
51 | return proxy;
|
52 | };
|
53 | var REFRESH_DELAY = 20;
|
54 | var getWindowOf = function (target) {
|
55 | var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
|
56 | return ownerGlobal || window;
|
57 | };
|
58 | var emptyRect = createRectInit(0, 0, 0, 0);
|
59 | function toFloat(value) {
|
60 | return parseFloat(value) || 0;
|
61 | }
|
62 | function getBordersSize(styles, start, end) {
|
63 | var positions = [start, end];
|
64 | return positions.reduce(function (size, position) {
|
65 | var value = styles.getPropertyValue("border-" + position + "-width");
|
66 | return size + toFloat(value);
|
67 | }, 0);
|
68 | }
|
69 | function getPaddings(styles) {
|
70 | var positions = ["top", "right", "bottom", "left"];
|
71 | var paddings = {
|
72 | top: null,
|
73 | left: null,
|
74 | right: null,
|
75 | bottom: null
|
76 | };
|
77 | for (var i = 0, list = positions; i < list.length; i += 1) {
|
78 | var position = list[i];
|
79 | var value = styles.getPropertyValue("padding-" + position);
|
80 | paddings[position] = toFloat(value);
|
81 | }
|
82 | return paddings;
|
83 | }
|
84 | function getHTMLElementContentRect(target) {
|
85 | var clientWidth = target.clientWidth;
|
86 | var clientHeight = target.clientHeight;
|
87 | if (!clientWidth && !clientHeight) {
|
88 | return emptyRect;
|
89 | }
|
90 | var styles = getWindowOf(target).getComputedStyle(target);
|
91 | var paddings = getPaddings(styles);
|
92 | var horizPad = paddings.left + paddings.right;
|
93 | var vertPad = paddings.top + paddings.bottom;
|
94 | var width = toFloat(styles.width);
|
95 | var height = toFloat(styles.height);
|
96 | if (styles.boxSizing === "border-box") {
|
97 | if (Math.round(width + horizPad) !== clientWidth) {
|
98 | width -= getBordersSize(styles, "left", "right") + horizPad;
|
99 | }
|
100 | if (Math.round(height + vertPad) !== clientHeight) {
|
101 | height -= getBordersSize(styles, "top", "bottom") + vertPad;
|
102 | }
|
103 | }
|
104 | var vertScrollbar = Math.round(width + horizPad) - clientWidth;
|
105 | var horizScrollbar = Math.round(height + vertPad) - clientHeight;
|
106 | if (Math.abs(vertScrollbar) !== 1) {
|
107 | width -= vertScrollbar;
|
108 | }
|
109 | if (Math.abs(horizScrollbar) !== 1) {
|
110 | height -= horizScrollbar;
|
111 | }
|
112 | return createRectInit(paddings.left, paddings.top, width, height);
|
113 | }
|
114 | function getContentRect(target) {
|
115 | return getHTMLElementContentRect(target);
|
116 | }
|
117 | function createReadOnlyRect(ref) {
|
118 | var x = ref.x;
|
119 | var y = ref.y;
|
120 | var width = ref.width;
|
121 | var height = ref.height;
|
122 | var Constr = window.DOMRectReadOnly ? window.DOMRectReadOnly : Object;
|
123 | var rect = Object.create(Constr.prototype);
|
124 | defineConfigurable(rect, {
|
125 | x: x,
|
126 | y: y,
|
127 | width: width,
|
128 | height: height,
|
129 | top: y,
|
130 | right: x + width,
|
131 | bottom: height + y,
|
132 | left: x
|
133 | });
|
134 | return rect;
|
135 | }
|
136 | function createRectInit(x, y, width, height) {
|
137 | return { x: x, y: y, width: width, height: height };
|
138 | }
|
139 | var ResizeObserverController = (function () {
|
140 | function ResizeObserverController() {
|
141 | this.connected_ = false;
|
142 | this.mutationEventsAdded_ = false;
|
143 | this.mutationsObserver_ = null;
|
144 | this.observers_ = [];
|
145 | this.callback_ = null;
|
146 | this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
|
147 | }
|
148 | ResizeObserverController.prototype.addObserver = function (observer) {
|
149 | if (this.observers_.indexOf(observer) == -1) {
|
150 | this.observers_.push(observer);
|
151 | }
|
152 |
|
153 | if (!this.connected_) {
|
154 | this.connect_();
|
155 | }
|
156 | };
|
157 | ResizeObserverController.prototype.removeObserver = function (observer) {
|
158 | var observers = this.observers_;
|
159 | var index = observers.indexOf(observer);
|
160 | if (index > -1) {
|
161 | observers.splice(index, 1);
|
162 | }
|
163 | if (!observers.length && this.connected_) {
|
164 | this.disconnect_();
|
165 | }
|
166 | };
|
167 | ResizeObserverController.prototype.refresh = function () {
|
168 | var changesDetected = this.updateObservers_();
|
169 | if (changesDetected) {
|
170 | this.refresh();
|
171 | }
|
172 | };
|
173 | ResizeObserverController.prototype.updateObservers_ = function () {
|
174 | var activeObservers = this.observers_.filter(function (observer) {
|
175 | return observer.hasActive();
|
176 | });
|
177 | activeObservers.forEach(function (observer) {
|
178 | return observer.broadcastActive();
|
179 | });
|
180 | return activeObservers.length > 0;
|
181 | };
|
182 | ResizeObserverController.prototype.connect_ = function () {
|
183 | if (this.connected_) {
|
184 | return;
|
185 | }
|
186 | window.addEventListener("resize", this.refresh);
|
187 | document.addEventListener("DOMSubtreeModified", this.refresh);
|
188 | this.mutationEventsAdded_ = true;
|
189 | this.connected_ = true;
|
190 | };
|
191 | ResizeObserverController.prototype.disconnect_ = function () {
|
192 | if (!this.connected_) {
|
193 | return;
|
194 | }
|
195 | window.removeEventListener("resize", this.refresh);
|
196 | if (this.mutationsObserver_) {
|
197 | this.mutationsObserver_.disconnect();
|
198 | }
|
199 | if (this.mutationEventsAdded_) {
|
200 | document.removeEventListener("DOMSubtreeModified", this.refresh);
|
201 | }
|
202 | this.mutationsObserver_ = null;
|
203 | this.mutationEventsAdded_ = false;
|
204 | this.connected_ = false;
|
205 | };
|
206 | ResizeObserverController.getInstance = function () {
|
207 | if (!this.instance_) {
|
208 | this.instance_ = new ResizeObserverController();
|
209 | }
|
210 | return this.instance_;
|
211 | };
|
212 | ResizeObserverController.instance_ = null;
|
213 | return ResizeObserverController;
|
214 | }());
|
215 | var defineConfigurable = function (target, props) {
|
216 | for (var i = 0, list = Object.keys(props); i < list.length; i += 1) {
|
217 | var key = list[i];
|
218 | Object.defineProperty(target, key, {
|
219 | value: props[key],
|
220 | enumerable: false,
|
221 | writable: false,
|
222 | configurable: true
|
223 | });
|
224 | }
|
225 | return target;
|
226 | };
|
227 | var ResizeObservation = (function () {
|
228 | function ResizeObservation(target) {
|
229 | this.target = target;
|
230 | this.broadcastWidth = 0;
|
231 | this.broadcastHeight = 0;
|
232 | this.contentRect_ = null;
|
233 | this.contentRect_ = createRectInit(0, 0, 0, 0);
|
234 | }
|
235 | ResizeObservation.prototype.isActive = function () {
|
236 | var rect = getContentRect(this.target);
|
237 | this.contentRect_ = rect;
|
238 | return rect.width !== this.broadcastWidth || rect.height !== this.broadcastHeight;
|
239 | };
|
240 | ResizeObservation.prototype.broadcastRect = function () {
|
241 | var rect = this.contentRect_;
|
242 | this.broadcastWidth = rect.width;
|
243 | this.broadcastHeight = rect.height;
|
244 | return rect;
|
245 | };
|
246 | return ResizeObservation;
|
247 | }());
|
248 | var ResizeObserverSPI = (function () {
|
249 | function ResizeObserverSPI(callback, controller, callbackCtx) {
|
250 | this.observation = null;
|
251 | this.callback_ = null;
|
252 | this.controller_ = null;
|
253 | this.callbackCtx_ = null;
|
254 | this.observation = null;
|
255 | if (typeof callback !== "function") {
|
256 | throw new TypeError("The callback provided as parameter 1 is not a function.");
|
257 | }
|
258 | this.callback_ = callback;
|
259 | this.controller_ = controller;
|
260 | this.callbackCtx_ = callbackCtx;
|
261 | }
|
262 | ResizeObserverSPI.prototype.observe = function (target) {
|
263 | this.observation = new ResizeObservation(target);
|
264 | this.controller_.addObserver(this);
|
265 |
|
266 | this.controller_.refresh();
|
267 | };
|
268 | ResizeObserverSPI.prototype.disconnect = function () {
|
269 | this.observation = null;
|
270 | this.controller_.removeObserver(this);
|
271 | };
|
272 | ResizeObserverSPI.prototype.broadcastActive = function () {
|
273 | if (!this.hasActive()) {
|
274 | return;
|
275 | }
|
276 | var ctx = this.callbackCtx_;
|
277 | this.callback_.call(ctx, {
|
278 | target: this.observation.target,
|
279 | contentRect: createReadOnlyRect(this.observation.broadcastRect())
|
280 | }, ctx);
|
281 | };
|
282 | ResizeObserverSPI.prototype.hasActive = function () {
|
283 | return this.observation.isActive();
|
284 | };
|
285 | return ResizeObserverSPI;
|
286 | }());
|
287 | var ResizeObserverFallback = (function () {
|
288 | function ResizeObserverFallback(callback) {
|
289 | var controller = ResizeObserverController.getInstance();
|
290 | var observer = new ResizeObserverSPI(callback, controller, this);
|
291 | this.observer_ = observer;
|
292 | }
|
293 | ResizeObserverFallback.prototype.observe = function (element) {
|
294 | this.observer_.observe(element);
|
295 | };
|
296 | ResizeObserverFallback.prototype.disconnect = function () {
|
297 | this.observer_.disconnect();
|
298 | };
|
299 | return ResizeObserverFallback;
|
300 | }());
|
301 | function observeResize(element, callback) {
|
302 | if (window.ResizeObserver) {
|
303 | var ro_1 = new window.ResizeObserver(function (entries, observer) {
|
304 | for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
|
305 | var entry = entries_1[_i];
|
306 | callback(entry);
|
307 | }
|
308 | });
|
309 | ro_1.observe(element);
|
310 | return function unobserve() {
|
311 | ro_1.disconnect();
|
312 | };
|
313 | }
|
314 | else {
|
315 | var ro_2 = new ResizeObserverFallback(function (entry) {
|
316 | callback(entry);
|
317 | });
|
318 | ro_2.observe(element);
|
319 | return function unobserve() {
|
320 | ro_2.disconnect();
|
321 | };
|
322 | }
|
323 | }
|
324 | exports.observeResize = observeResize;
|