Merge commit 'e186c5d6f740bbdb62d2c6ea304977603a55e59a' as 'themes/paperesque'

This commit is contained in:
2020-10-09 23:41:57 +05:30
108 changed files with 4071 additions and 0 deletions

View File

@@ -0,0 +1,201 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright 2019 JUGGLE LTD
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

View File

@@ -0,0 +1,221 @@
<p align="center">
<img width="160" src="https://user-images.githubusercontent.com/1519516/68546625-51e0f680-03d0-11ea-9955-9f0e1964ba0c.png" />
</p>
<h1 align="center">Resize Observer</h1>
<p align="center">
<img src="https://img.shields.io/circleci/project/github/juggle/resize-observer/master.svg?logo=circleci&style=for-the-badge" />
<img src="https://img.shields.io/coveralls/github/juggle/resize-observer.svg?logoColor=white&style=for-the-badge" />
<img src="https://img.shields.io/bundlephobia/minzip/@juggle/resize-observer.svg?colorB=%233399ff&style=for-the-badge" />
<img src="https://img.shields.io/npm/l/@juggle/resize-observer.svg?colorB=%233399ff&style=for-the-badge" />
</p>
---
A minimal library which polyfills the **ResizeObserver** API and is entirely based on the latest [Draft Specification](https://drafts.csswg.org/resize-observer-1/).
It immediately detects when an element resizes and provides accurate sizing information back to the handler. Check out the [Example Playground](//juggle.studio/resize-observer) for more information on usage and performance.
> The latest [Resize Observer specification](https://drafts.csswg.org/resize-observer-1/) is not yet finalised and is subject to change.
> Any drastic changes to the specification will bump the major version of this library, as there will likely be breaking changes. Check the [release notes](https://github.com/juggle/resize-observer/releases) for more information.
## Installation
``` shell
npm i @juggle/resize-observer
```
## Basic usage
``` js
import { ResizeObserver } from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
console.log('Body has resized!');
observer.disconnect(); // Stop observing
});
ro.observe(document.body); // Watch dimension changes on body
```
This will use the [ponyfilled](https://github.com/sindresorhus/ponyfill) version of **ResizeObserver**, even if the browser supports **ResizeObserver** natively.
## Watching multiple elements
``` js
import { ResizeObserver } from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
console.log('Elements resized:', entries.length);
entries.forEach((entry, index) => {
const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
console.log(`Element ${index + 1}:`, `${width}x${height}`);
});
});
const els = document.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el)); // Watch multiple!
```
## Watching different box sizes
The latest standards allow for watching different box sizes. The box size option can be specified when observing an element. Options include `border-box`, `device-pixel-content-box` and `content-box` (default).
``` js
import { ResizeObserver } from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
console.log('Elements resized:', entries.length);
entries.forEach((entry, index) => {
const [size] = entry.borderBoxSize;
console.log(`Element ${index + 1}:`, `${size.inlineSize}x${size.blockSize}`);
});
});
// Watch border-box
const observerOptions = {
box: 'border-box'
};
const els = document.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el, observerOptions));
```
*From the spec:*
> The box size properties are exposed as sequences in order to support elements that have multiple fragments, which occur in [multi-column](https://www.w3.org/TR/css3-multicol/#) scenarios. However the current definitions of content rect and border box do not mention how those boxes are affected by multi-column layout. In this spec, there will only be a single ResizeObserverSize returned in the sequences, which will correspond to the dimensions of the first column. A future version of this spec will extend the returned sequences to contain the per-fragment size information.
## Using the legacy version (`contentRect`)
Early versions of the API return a `contentRect`. This is still made available for backwards compatibility.
``` js
import { ResizeObserver } from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
console.log('Elements resized:', entries.length);
entries.forEach((entry, index) => {
const { width, height } = entry.contentRect;
console.log(`Element ${index + 1}:`, `${width}x${height}`);
});
});
const els = document.querySelectorAll('.resizes');
[...els].forEach(el => ro.observe(el));
```
## Switching between native and polyfilled versions
You can check to see if the native version is available and switch between this and the polyfill to improve performance on browsers with native support.
``` js
import { ResizeObserver as Polyfill } from '@juggle/resize-observer';
const ResizeObserver = window.ResizeObserver || Polyfill;
// Uses native or polyfill, depending on browser support.
const ro = new ResizeObserver((entries, observer) => {
console.log('Something has resized!');
});
```
To improve this even more, you could use dynamic imports to only load the file when the polyfill is required.
``` js
(async () => {
if ('ResizeObserver' in window === false) {
// Loads polyfill asynchronously, only if required.
const module = await import('@juggle/resize-observer');
window.ResizeObserver = module.ResizeObserver;
}
// Uses native or polyfill, depending on browser support.
const ro = new ResizeObserver((entries, observer) => {
console.log('Something has resized!');
});
})();
```
> Browsers with native support may be behind on the latest specification.
> Use `entry.contentRect` when switching between native and polyfilled versions.
## Resize loop detection
Resize Observers have inbuilt protection against infinite resize loops.
If an element's observed box size changes again within the same resize loop, the observation will be skipped and an error event will be dispatched on the window. Elements with undelivered notifications will be considered for delivery in the next loop.
```js
import { ResizeObserver } from '@juggle/resize-observer';
const ro = new ResizeObserver((entries, observer) => {
// Changing the body size inside of the observer
// will cause a resize loop and the next observation will be skipped
document.body.style.width = '50%';
});
// Listen for errors
window.addEventListener('error', e => console.log(e.message));
// Observe the body
ro.observe(document.body);
```
## Notification Schedule
Notifications are scheduled after all other changes have occurred and all other animation callbacks have been called. This allows the observer callback to get the most accurate size of an element, as no other changes should occur in the same frame.
![resize observer notification schedule](https://user-images.githubusercontent.com/1519516/52825568-20433500-30b5-11e9-9854-4cee13a09a7d.jpg)
## How are differences detected?
To prevent constant polling, every frame. The DOM is queried whenever an event occurs which could cause an element to change its size. This could be when an element is clicked, a DOM Node is added, or, when an animation is running.
To cover these scenarios, there are two types of observation. The first is to listen to specific DOM events, including `resize`, `mousedown` and `focus` to name a few. The second is to listen for any DOM mutations that occur. This detects when a DOM node is added or removed, an attribute is modified, or, even when some text has changed.
This allows for greater idle time, when the application itself is idle.
## Features
- Inbuilt resize loop protection.
- Supports pseudo classes `:hover`, `:active` and `:focus`.
- Supports transitions and animations, including infinite and long-running.
- Detects changes which occur during animation frame.
- Includes support for latest draft spec - observing different box sizes.
- Polls only when required, then shuts down automatically, reducing CPU usage.
- Zero delay system - Notifications are batched and delivered immediately, before the next paint.
## Limitations
- Transitions with initial delays cannot be detected.*
- Animations and transitions with long periods of no change, will not be detected.*
- Style changes from dev tools will only be noticed if they are inline styles.*
## Tested Browsers
[chrome]: https://github.com/alrra/browser-logos/raw/master/src/chrome/chrome_64x64.png
[safari]: https://github.com/alrra/browser-logos/raw/master/src/safari/safari_64x64.png
[safari-ios]: https://github.com/alrra/browser-logos/raw/master/src/safari-ios/safari-ios_64x64.png
[ff]: https://github.com/alrra/browser-logos/raw/master/src/firefox/firefox_64x64.png
[opera]: https://github.com/alrra/browser-logos/raw/master/src/opera/opera_64x64.png
[opera-mini]: https://github.com/alrra/browser-logos/raw/master/src/opera-mini/opera-mini_64x64.png
[edge_12-18]: https://github.com/alrra/browser-logos/raw/master/src/archive/edge_12-18/edge_12-18_64x64.png
[edge]: https://github.com/alrra/browser-logos/raw/master/src/edge/edge_64x64.png
[samsung]: https://github.com/alrra/browser-logos/raw/master/src/samsung-internet/samsung-internet_64x64.png
[ie]: https://github.com/alrra/browser-logos/raw/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_64x64.png
### Desktop
| ![chrome][chrome] | ![safari][safari] | ![ff][ff] | ![opera][opera] | ![edge][edge] | ![edge][edge_12-18] | ![IE][ie] |
|--------|--------|---------|-------|------|------------|---------------------------------------|
| Chrome | Safari | Firefox | Opera | Edge | Edge 12-18 | IE11<br/>IE 9-10 (with polyfills)\*\* |
### Mobile
| ![chrome][chrome] | ![safari][safari] | ![ff][ff] | ![opera][opera] | ![opera mini][opera-mini] | ![edge][edge_12-18] | ![samsung internet][samsung] |
|--------|--------|---------|-------|------------|------|------------------|
| Chrome | Safari | Firefox | Opera | Opera Mini | Edge | Samsung Internet |
---
\*If other interaction occurs, changes will be detected.
\*\*IE10 requires additional polyfills for `Map` and `MutationObserver`. IE9 requires IE10 polyfills plus `requestAnimationFrame`. For more information, [see issue here](https://github.com/juggle/resize-observer/issues/64).

View File

@@ -0,0 +1,30 @@
interface Rectangle {
readonly x: number;
readonly y: number;
readonly width: number;
readonly height: number;
}
declare type DOMRectJSON = {
x: number;
y: number;
top: number;
right: number;
bottom: number;
left: number;
width: number;
height: number;
};
declare class DOMRectReadOnly {
readonly x: number;
readonly y: number;
readonly width: number;
readonly height: number;
readonly top: number;
readonly left: number;
readonly bottom: number;
readonly right: number;
constructor(x: number, y: number, width: number, height: number);
toJSON(): DOMRectJSON;
static fromRect(rectangle: Rectangle): Readonly<DOMRectReadOnly>;
}
export { DOMRectReadOnly };

View File

@@ -0,0 +1,22 @@
var DOMRectReadOnly = (function () {
function DOMRectReadOnly(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.top = this.y;
this.left = this.x;
this.bottom = this.top + this.height;
this.right = this.left + this.width;
return Object.freeze(this);
}
DOMRectReadOnly.prototype.toJSON = function () {
var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, width = _a.width, height = _a.height;
return { x: x, y: y, top: top, right: right, bottom: bottom, left: left, width: width, height: height };
};
DOMRectReadOnly.fromRect = function (rectangle) {
return new DOMRectReadOnly(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
};
return DOMRectReadOnly;
}());
export { DOMRectReadOnly };

View File

@@ -0,0 +1,10 @@
import { ResizeObserverSize } from './ResizeObserverSize';
import { ResizeObserverBoxOptions } from './ResizeObserverBoxOptions';
declare class ResizeObservation {
target: Element;
observedBox: ResizeObserverBoxOptions;
lastReportedSize: ResizeObserverSize;
constructor(target: Element, observedBox?: ResizeObserverBoxOptions);
isActive(): boolean;
}
export { ResizeObservation };

View File

@@ -0,0 +1,31 @@
import { ResizeObserverBoxOptions } from './ResizeObserverBoxOptions';
import { calculateBoxSize } from './algorithms/calculateBoxSize';
import { isSVG, isReplacedElement } from './utils/element';
var skipNotifyOnElement = function (target) {
return !isSVG(target)
&& !isReplacedElement(target)
&& getComputedStyle(target).display === 'inline';
};
var ResizeObservation = (function () {
function ResizeObservation(target, observedBox) {
this.target = target;
this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
this.lastReportedSize = {
inlineSize: 0,
blockSize: 0
};
}
ResizeObservation.prototype.isActive = function () {
var size = calculateBoxSize(this.target, this.observedBox, true);
if (skipNotifyOnElement(this.target)) {
this.lastReportedSize = size;
}
if (this.lastReportedSize.inlineSize !== size.inlineSize
|| this.lastReportedSize.blockSize !== size.blockSize) {
return true;
}
return false;
};
return ResizeObservation;
}());
export { ResizeObservation };

View File

@@ -0,0 +1,10 @@
import { ResizeObserverCallback } from './ResizeObserverCallback';
import { ResizeObserverOptions } from './ResizeObserverOptions';
declare class ResizeObserver {
constructor(callback: ResizeObserverCallback);
observe(target: Element, options?: ResizeObserverOptions): void;
unobserve(target: Element): void;
disconnect(): void;
static toString(): string;
}
export { ResizeObserver };

View File

@@ -0,0 +1,39 @@
import { ResizeObserverController } from './ResizeObserverController';
import { isElement } from './utils/element';
var ResizeObserver = (function () {
function ResizeObserver(callback) {
if (arguments.length === 0) {
throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
}
if (typeof callback !== 'function') {
throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
}
ResizeObserverController.connect(this, callback);
}
ResizeObserver.prototype.observe = function (target, options) {
if (arguments.length === 0) {
throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
}
if (!isElement(target)) {
throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
}
ResizeObserverController.observe(this, target, options);
};
ResizeObserver.prototype.unobserve = function (target) {
if (arguments.length === 0) {
throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
}
if (!isElement(target)) {
throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
}
ResizeObserverController.unobserve(this, target);
};
ResizeObserver.prototype.disconnect = function () {
ResizeObserverController.disconnect(this);
};
ResizeObserver.toString = function () {
return 'function ResizeObserver () { [polyfill code] }';
};
return ResizeObserver;
}());
export { ResizeObserver };

View File

@@ -0,0 +1,6 @@
declare enum ResizeObserverBoxOptions {
BORDER_BOX = "border-box",
CONTENT_BOX = "content-box",
DEVICE_PIXEL_CONTENT_BOX = "device-pixel-content-box"
}
export { ResizeObserverBoxOptions };

View File

@@ -0,0 +1,7 @@
var ResizeObserverBoxOptions;
(function (ResizeObserverBoxOptions) {
ResizeObserverBoxOptions["BORDER_BOX"] = "border-box";
ResizeObserverBoxOptions["CONTENT_BOX"] = "content-box";
ResizeObserverBoxOptions["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box";
})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
export { ResizeObserverBoxOptions };

View File

@@ -0,0 +1,4 @@
import { ResizeObserver } from './ResizeObserver';
import { ResizeObserverEntry } from './ResizeObserverEntry';
declare type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
export { ResizeObserverCallback };

View File

@@ -0,0 +1,10 @@
import { ResizeObserver } from './ResizeObserver';
import { ResizeObserverCallback } from './ResizeObserverCallback';
import { ResizeObserverOptions } from './ResizeObserverOptions';
declare class ResizeObserverController {
static connect(resizeObserver: ResizeObserver, callback: ResizeObserverCallback): void;
static observe(resizeObserver: ResizeObserver, target: Element, options?: ResizeObserverOptions): void;
static unobserve(resizeObserver: ResizeObserver, target: Element): void;
static disconnect(resizeObserver: ResizeObserver): void;
}
export { ResizeObserverController };

View File

@@ -0,0 +1,49 @@
import { scheduler, updateCount } from './utils/scheduler';
import { ResizeObservation } from './ResizeObservation';
import { ResizeObserverDetail } from './ResizeObserverDetail';
import { resizeObservers } from './utils/resizeObservers';
var observerMap = new WeakMap();
var getObservationIndex = function (observationTargets, target) {
for (var i = 0; i < observationTargets.length; i += 1) {
if (observationTargets[i].target === target) {
return i;
}
}
return -1;
};
var ResizeObserverController = (function () {
function ResizeObserverController() {
}
ResizeObserverController.connect = function (resizeObserver, callback) {
var detail = new ResizeObserverDetail(resizeObserver, callback);
observerMap.set(resizeObserver, detail);
};
ResizeObserverController.observe = function (resizeObserver, target, options) {
var detail = observerMap.get(resizeObserver);
var firstObservation = detail.observationTargets.length === 0;
if (getObservationIndex(detail.observationTargets, target) < 0) {
firstObservation && resizeObservers.push(detail);
detail.observationTargets.push(new ResizeObservation(target, options && options.box));
updateCount(1);
scheduler.schedule();
}
};
ResizeObserverController.unobserve = function (resizeObserver, target) {
var detail = observerMap.get(resizeObserver);
var index = getObservationIndex(detail.observationTargets, target);
var lastObservation = detail.observationTargets.length === 1;
if (index >= 0) {
lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1);
detail.observationTargets.splice(index, 1);
updateCount(-1);
}
};
ResizeObserverController.disconnect = function (resizeObserver) {
var _this = this;
var detail = observerMap.get(resizeObserver);
detail.observationTargets.slice().forEach(function (ot) { return _this.unobserve(resizeObserver, ot.target); });
detail.activeTargets.splice(0, detail.activeTargets.length);
};
return ResizeObserverController;
}());
export { ResizeObserverController };

View File

@@ -0,0 +1,12 @@
import { ResizeObserver } from './ResizeObserver';
import { ResizeObservation } from './ResizeObservation';
import { ResizeObserverCallback } from './ResizeObserverCallback';
declare class ResizeObserverDetail {
callback: ResizeObserverCallback;
observer: ResizeObserver;
activeTargets: ResizeObservation[];
skippedTargets: ResizeObservation[];
observationTargets: ResizeObservation[];
constructor(resizeObserver: ResizeObserver, callback: ResizeObserverCallback);
}
export { ResizeObserverDetail };

View File

@@ -0,0 +1,11 @@
var ResizeObserverDetail = (function () {
function ResizeObserverDetail(resizeObserver, callback) {
this.activeTargets = [];
this.skippedTargets = [];
this.observationTargets = [];
this.observer = resizeObserver;
this.callback = callback;
}
return ResizeObserverDetail;
}());
export { ResizeObserverDetail };

View File

@@ -0,0 +1,11 @@
import { DOMRectReadOnly } from './DOMRectReadOnly';
import { ResizeObserverSize } from './ResizeObserverSize';
declare class ResizeObserverEntry {
target: Element;
contentRect: DOMRectReadOnly;
borderBoxSize: ResizeObserverSize[];
contentBoxSize: ResizeObserverSize[];
devicePixelContentBoxSize: ResizeObserverSize[];
constructor(target: Element);
}
export { ResizeObserverEntry };

View File

@@ -0,0 +1,13 @@
import { calculateBoxSizes } from './algorithms/calculateBoxSize';
var ResizeObserverEntry = (function () {
function ResizeObserverEntry(target) {
var boxes = calculateBoxSizes(target);
this.target = target;
this.contentRect = boxes.contentRect;
this.borderBoxSize = [boxes.borderBoxSize];
this.contentBoxSize = [boxes.contentBoxSize];
this.devicePixelContentBoxSize = [boxes.devicePixelContentBoxSize];
}
return ResizeObserverEntry;
}());
export { ResizeObserverEntry };

View File

@@ -0,0 +1,5 @@
import { ResizeObserverBoxOptions } from './ResizeObserverBoxOptions';
interface ResizeObserverOptions {
box?: 'content-box' | 'border-box' | 'device-pixel-content-box' | ResizeObserverBoxOptions;
}
export { ResizeObserverOptions };

View File

@@ -0,0 +1,5 @@
interface ResizeObserverSize {
readonly inlineSize: number;
readonly blockSize: number;
}
export { ResizeObserverSize };

View File

@@ -0,0 +1,2 @@
declare const broadcastActiveObservations: () => number;
export { broadcastActiveObservations };

View File

@@ -0,0 +1,33 @@
import { resizeObservers } from '../utils/resizeObservers';
import { ResizeObserverEntry } from '../ResizeObserverEntry';
import { calculateDepthForNode } from './calculateDepthForNode';
import { calculateBoxSize } from './calculateBoxSize';
var broadcastActiveObservations = function () {
var shallowestDepth = Infinity;
var callbacks = [];
resizeObservers.forEach(function processObserver(ro) {
if (ro.activeTargets.length === 0) {
return;
}
var entries = [];
ro.activeTargets.forEach(function processTarget(ot) {
var entry = new ResizeObserverEntry(ot.target);
var targetDepth = calculateDepthForNode(ot.target);
entries.push(entry);
ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox);
if (targetDepth < shallowestDepth) {
shallowestDepth = targetDepth;
}
});
callbacks.push(function resizeObserverCallback() {
ro.callback.call(ro.observer, entries, ro.observer);
});
ro.activeTargets.splice(0, ro.activeTargets.length);
});
for (var _i = 0, callbacks_1 = callbacks; _i < callbacks_1.length; _i++) {
var callback = callbacks_1[_i];
callback();
}
return shallowestDepth;
};
export { broadcastActiveObservations };

View File

@@ -0,0 +1,12 @@
import { ResizeObserverBoxOptions } from '../ResizeObserverBoxOptions';
import { ResizeObserverSize } from '../ResizeObserverSize';
import { DOMRectReadOnly } from '../DOMRectReadOnly';
interface ResizeObserverSizeCollection {
devicePixelContentBoxSize: ResizeObserverSize;
borderBoxSize: ResizeObserverSize;
contentBoxSize: ResizeObserverSize;
contentRect: DOMRectReadOnly;
}
declare const calculateBoxSizes: (target: Element, forceRecalculation?: boolean) => ResizeObserverSizeCollection;
declare const calculateBoxSize: (target: Element, observedBox: ResizeObserverBoxOptions, forceRecalculation?: boolean | undefined) => ResizeObserverSize;
export { calculateBoxSize, calculateBoxSizes };

View File

@@ -0,0 +1,80 @@
import { ResizeObserverBoxOptions } from '../ResizeObserverBoxOptions';
import { DOMRectReadOnly } from '../DOMRectReadOnly';
import { isSVG, isHidden } from '../utils/element';
import { global } from '../utils/global';
var cache = new WeakMap();
var scrollRegexp = /auto|scroll/;
var verticalRegexp = /^tb|vertical/;
var IE = (/msie|trident/i).test(global.navigator && global.navigator.userAgent);
var parseDimension = function (pixel) { return parseFloat(pixel || '0'); };
var size = function (inlineSize, blockSize, switchSizes) {
if (inlineSize === void 0) { inlineSize = 0; }
if (blockSize === void 0) { blockSize = 0; }
if (switchSizes === void 0) { switchSizes = false; }
return Object.freeze({
inlineSize: (switchSizes ? blockSize : inlineSize) || 0,
blockSize: (switchSizes ? inlineSize : blockSize) || 0
});
};
var zeroBoxes = Object.freeze({
devicePixelContentBoxSize: size(),
borderBoxSize: size(),
contentBoxSize: size(),
contentRect: new DOMRectReadOnly(0, 0, 0, 0)
});
var calculateBoxSizes = function (target, forceRecalculation) {
if (forceRecalculation === void 0) { forceRecalculation = false; }
if (cache.has(target) && !forceRecalculation) {
return cache.get(target);
}
if (isHidden(target)) {
cache.set(target, zeroBoxes);
return zeroBoxes;
}
var cs = getComputedStyle(target);
var svg = isSVG(target) && target.ownerSVGElement && target.getBBox();
var removePadding = !IE && cs.boxSizing === 'border-box';
var switchSizes = verticalRegexp.test(cs.writingMode || '');
var canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || '');
var canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || '');
var paddingTop = svg ? 0 : parseDimension(cs.paddingTop);
var paddingRight = svg ? 0 : parseDimension(cs.paddingRight);
var paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom);
var paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft);
var borderTop = svg ? 0 : parseDimension(cs.borderTopWidth);
var borderRight = svg ? 0 : parseDimension(cs.borderRightWidth);
var borderBottom = svg ? 0 : parseDimension(cs.borderBottomWidth);
var borderLeft = svg ? 0 : parseDimension(cs.borderLeftWidth);
var horizontalPadding = paddingLeft + paddingRight;
var verticalPadding = paddingTop + paddingBottom;
var horizontalBorderArea = borderLeft + borderRight;
var verticalBorderArea = borderTop + borderBottom;
var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight;
var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth;
var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0;
var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0;
var contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness;
var contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness;
var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea;
var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea;
var boxes = Object.freeze({
devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes),
contentBoxSize: size(contentWidth, contentHeight, switchSizes),
contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
});
cache.set(target, boxes);
return boxes;
};
var calculateBoxSize = function (target, observedBox, forceRecalculation) {
var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
switch (observedBox) {
case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
return devicePixelContentBoxSize;
case ResizeObserverBoxOptions.BORDER_BOX:
return borderBoxSize;
default:
return contentBoxSize;
}
};
export { calculateBoxSize, calculateBoxSizes };

View File

@@ -0,0 +1,2 @@
declare const calculateDepthForNode: (node: Element) => number;
export { calculateDepthForNode };

View File

@@ -0,0 +1,14 @@
import { isHidden } from '../utils/element';
var calculateDepthForNode = function (node) {
if (isHidden(node)) {
return Infinity;
}
var depth = 0;
var parent = node.parentNode;
while (parent) {
depth += 1;
parent = parent.parentNode;
}
return depth;
};
export { calculateDepthForNode };

View File

@@ -0,0 +1,2 @@
declare const deliverResizeLoopError: () => void;
export { deliverResizeLoopError };

View File

@@ -0,0 +1,16 @@
var msg = 'ResizeObserver loop completed with undelivered notifications.';
var deliverResizeLoopError = function () {
var event;
if (typeof ErrorEvent === 'function') {
event = new ErrorEvent('error', {
message: msg
});
}
else {
event = document.createEvent('Event');
event.initEvent('error', false, false);
event.message = msg;
}
window.dispatchEvent(event);
};
export { deliverResizeLoopError };

View File

@@ -0,0 +1,2 @@
declare const gatherActiveObservationsAtDepth: (depth: number) => void;
export { gatherActiveObservationsAtDepth };

View File

@@ -0,0 +1,19 @@
import { resizeObservers } from '../utils/resizeObservers';
import { calculateDepthForNode } from './calculateDepthForNode';
var gatherActiveObservationsAtDepth = function (depth) {
resizeObservers.forEach(function processObserver(ro) {
ro.activeTargets.splice(0, ro.activeTargets.length);
ro.skippedTargets.splice(0, ro.skippedTargets.length);
ro.observationTargets.forEach(function processTarget(ot) {
if (ot.isActive()) {
if (calculateDepthForNode(ot.target) > depth) {
ro.activeTargets.push(ot);
}
else {
ro.skippedTargets.push(ot);
}
}
});
});
};
export { gatherActiveObservationsAtDepth };

View File

@@ -0,0 +1,2 @@
declare const hasActiveObservations: () => boolean;
export { hasActiveObservations };

View File

@@ -0,0 +1,5 @@
import { resizeObservers } from '../utils/resizeObservers';
var hasActiveObservations = function () {
return resizeObservers.some(function (ro) { return ro.activeTargets.length > 0; });
};
export { hasActiveObservations };

View File

@@ -0,0 +1,2 @@
declare const hasSkippedObservations: () => boolean;
export { hasSkippedObservations };

View File

@@ -0,0 +1,5 @@
import { resizeObservers } from '../utils/resizeObservers';
var hasSkippedObservations = function () {
return resizeObservers.some(function (ro) { return ro.skippedTargets.length > 0; });
};
export { hasSkippedObservations };

View File

@@ -0,0 +1,2 @@
export { ResizeObserver } from '../ResizeObserver';
export { ResizeObserverEntry } from '../ResizeObserverEntry';

View File

@@ -0,0 +1,2 @@
export { ResizeObserver } from '../ResizeObserver';
export { ResizeObserverEntry } from '../ResizeObserverEntry';

View File

@@ -0,0 +1,500 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.ResizeObserver = {}));
}(this, (function (exports) { 'use strict';
var resizeObservers = [];
var hasActiveObservations = function () {
return resizeObservers.some(function (ro) { return ro.activeTargets.length > 0; });
};
var hasSkippedObservations = function () {
return resizeObservers.some(function (ro) { return ro.skippedTargets.length > 0; });
};
var msg = 'ResizeObserver loop completed with undelivered notifications.';
var deliverResizeLoopError = function () {
var event;
if (typeof ErrorEvent === 'function') {
event = new ErrorEvent('error', {
message: msg
});
}
else {
event = document.createEvent('Event');
event.initEvent('error', false, false);
event.message = msg;
}
window.dispatchEvent(event);
};
var ResizeObserverBoxOptions;
(function (ResizeObserverBoxOptions) {
ResizeObserverBoxOptions["BORDER_BOX"] = "border-box";
ResizeObserverBoxOptions["CONTENT_BOX"] = "content-box";
ResizeObserverBoxOptions["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box";
})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
var DOMRectReadOnly = (function () {
function DOMRectReadOnly(x, y, width, height) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.top = this.y;
this.left = this.x;
this.bottom = this.top + this.height;
this.right = this.left + this.width;
return Object.freeze(this);
}
DOMRectReadOnly.prototype.toJSON = function () {
var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, width = _a.width, height = _a.height;
return { x: x, y: y, top: top, right: right, bottom: bottom, left: left, width: width, height: height };
};
DOMRectReadOnly.fromRect = function (rectangle) {
return new DOMRectReadOnly(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
};
return DOMRectReadOnly;
}());
var isSVG = function (target) { return target instanceof SVGElement && 'getBBox' in target; };
var isHidden = function (target) {
if (isSVG(target)) {
var _a = target.getBBox(), width = _a.width, height = _a.height;
return !width && !height;
}
var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;
return !(offsetWidth || offsetHeight || target.getClientRects().length);
};
var isElement = function (obj) {
var _a, _b;
var scope = (_b = (_a = obj) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView;
return !!(scope && obj instanceof scope.Element);
};
var isReplacedElement = function (target) {
switch (target.tagName) {
case 'INPUT':
if (target.type !== 'image') {
break;
}
case 'VIDEO':
case 'AUDIO':
case 'EMBED':
case 'OBJECT':
case 'CANVAS':
case 'IFRAME':
case 'IMG':
return true;
}
return false;
};
var global = typeof window !== 'undefined' ? window : {};
var cache = new WeakMap();
var scrollRegexp = /auto|scroll/;
var verticalRegexp = /^tb|vertical/;
var IE = (/msie|trident/i).test(global.navigator && global.navigator.userAgent);
var parseDimension = function (pixel) { return parseFloat(pixel || '0'); };
var size = function (inlineSize, blockSize, switchSizes) {
if (inlineSize === void 0) { inlineSize = 0; }
if (blockSize === void 0) { blockSize = 0; }
if (switchSizes === void 0) { switchSizes = false; }
return Object.freeze({
inlineSize: (switchSizes ? blockSize : inlineSize) || 0,
blockSize: (switchSizes ? inlineSize : blockSize) || 0
});
};
var zeroBoxes = Object.freeze({
devicePixelContentBoxSize: size(),
borderBoxSize: size(),
contentBoxSize: size(),
contentRect: new DOMRectReadOnly(0, 0, 0, 0)
});
var calculateBoxSizes = function (target, forceRecalculation) {
if (forceRecalculation === void 0) { forceRecalculation = false; }
if (cache.has(target) && !forceRecalculation) {
return cache.get(target);
}
if (isHidden(target)) {
cache.set(target, zeroBoxes);
return zeroBoxes;
}
var cs = getComputedStyle(target);
var svg = isSVG(target) && target.ownerSVGElement && target.getBBox();
var removePadding = !IE && cs.boxSizing === 'border-box';
var switchSizes = verticalRegexp.test(cs.writingMode || '');
var canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || '');
var canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || '');
var paddingTop = svg ? 0 : parseDimension(cs.paddingTop);
var paddingRight = svg ? 0 : parseDimension(cs.paddingRight);
var paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom);
var paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft);
var borderTop = svg ? 0 : parseDimension(cs.borderTopWidth);
var borderRight = svg ? 0 : parseDimension(cs.borderRightWidth);
var borderBottom = svg ? 0 : parseDimension(cs.borderBottomWidth);
var borderLeft = svg ? 0 : parseDimension(cs.borderLeftWidth);
var horizontalPadding = paddingLeft + paddingRight;
var verticalPadding = paddingTop + paddingBottom;
var horizontalBorderArea = borderLeft + borderRight;
var verticalBorderArea = borderTop + borderBottom;
var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight;
var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth;
var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0;
var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0;
var contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness;
var contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness;
var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea;
var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea;
var boxes = Object.freeze({
devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes),
contentBoxSize: size(contentWidth, contentHeight, switchSizes),
contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
});
cache.set(target, boxes);
return boxes;
};
var calculateBoxSize = function (target, observedBox, forceRecalculation) {
var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
switch (observedBox) {
case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
return devicePixelContentBoxSize;
case ResizeObserverBoxOptions.BORDER_BOX:
return borderBoxSize;
default:
return contentBoxSize;
}
};
var ResizeObserverEntry = (function () {
function ResizeObserverEntry(target) {
var boxes = calculateBoxSizes(target);
this.target = target;
this.contentRect = boxes.contentRect;
this.borderBoxSize = [boxes.borderBoxSize];
this.contentBoxSize = [boxes.contentBoxSize];
this.devicePixelContentBoxSize = [boxes.devicePixelContentBoxSize];
}
return ResizeObserverEntry;
}());
var calculateDepthForNode = function (node) {
if (isHidden(node)) {
return Infinity;
}
var depth = 0;
var parent = node.parentNode;
while (parent) {
depth += 1;
parent = parent.parentNode;
}
return depth;
};
var broadcastActiveObservations = function () {
var shallowestDepth = Infinity;
var callbacks = [];
resizeObservers.forEach(function processObserver(ro) {
if (ro.activeTargets.length === 0) {
return;
}
var entries = [];
ro.activeTargets.forEach(function processTarget(ot) {
var entry = new ResizeObserverEntry(ot.target);
var targetDepth = calculateDepthForNode(ot.target);
entries.push(entry);
ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox);
if (targetDepth < shallowestDepth) {
shallowestDepth = targetDepth;
}
});
callbacks.push(function resizeObserverCallback() {
ro.callback.call(ro.observer, entries, ro.observer);
});
ro.activeTargets.splice(0, ro.activeTargets.length);
});
for (var _i = 0, callbacks_1 = callbacks; _i < callbacks_1.length; _i++) {
var callback = callbacks_1[_i];
callback();
}
return shallowestDepth;
};
var gatherActiveObservationsAtDepth = function (depth) {
resizeObservers.forEach(function processObserver(ro) {
ro.activeTargets.splice(0, ro.activeTargets.length);
ro.skippedTargets.splice(0, ro.skippedTargets.length);
ro.observationTargets.forEach(function processTarget(ot) {
if (ot.isActive()) {
if (calculateDepthForNode(ot.target) > depth) {
ro.activeTargets.push(ot);
}
else {
ro.skippedTargets.push(ot);
}
}
});
});
};
var process = function () {
var depth = 0;
gatherActiveObservationsAtDepth(depth);
while (hasActiveObservations()) {
depth = broadcastActiveObservations();
gatherActiveObservationsAtDepth(depth);
}
if (hasSkippedObservations()) {
deliverResizeLoopError();
}
return depth > 0;
};
var trigger;
var callbacks = [];
var notify = function () { return callbacks.splice(0).forEach(function (cb) { return cb(); }); };
var queueMicroTask = function (callback) {
if (!trigger) {
var toggle_1 = 0;
var el_1 = document.createTextNode('');
var config = { characterData: true };
new MutationObserver(function () { return notify(); }).observe(el_1, config);
trigger = function () { el_1.textContent = "" + (toggle_1 ? toggle_1-- : toggle_1++); };
}
callbacks.push(callback);
trigger();
};
var queueResizeObserver = function (cb) {
queueMicroTask(function ResizeObserver() {
requestAnimationFrame(cb);
});
};
var watching = 0;
var isWatching = function () { return !!watching; };
var CATCH_PERIOD = 250;
var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
var events = [
'resize',
'load',
'transitionend',
'animationend',
'animationstart',
'animationiteration',
'keyup',
'keydown',
'mouseup',
'mousedown',
'mouseover',
'mouseout',
'blur',
'focus'
];
var time = function (timeout) {
if (timeout === void 0) { timeout = 0; }
return Date.now() + timeout;
};
var scheduled = false;
var Scheduler = (function () {
function Scheduler() {
var _this = this;
this.stopped = true;
this.listener = function () { return _this.schedule(); };
}
Scheduler.prototype.run = function (timeout) {
var _this = this;
if (timeout === void 0) { timeout = CATCH_PERIOD; }
if (scheduled) {
return;
}
scheduled = true;
var until = time(timeout);
queueResizeObserver(function () {
var elementsHaveResized = false;
try {
elementsHaveResized = process();
}
finally {
scheduled = false;
timeout = until - time();
if (!isWatching()) {
return;
}
if (elementsHaveResized) {
_this.run(1000);
}
else if (timeout > 0) {
_this.run(timeout);
}
else {
_this.start();
}
}
});
};
Scheduler.prototype.schedule = function () {
this.stop();
this.run();
};
Scheduler.prototype.observe = function () {
var _this = this;
var cb = function () { return _this.observer && _this.observer.observe(document.body, observerConfig); };
document.body ? cb() : global.addEventListener('DOMContentLoaded', cb);
};
Scheduler.prototype.start = function () {
var _this = this;
if (this.stopped) {
this.stopped = false;
this.observer = new MutationObserver(this.listener);
this.observe();
events.forEach(function (name) { return global.addEventListener(name, _this.listener, true); });
}
};
Scheduler.prototype.stop = function () {
var _this = this;
if (!this.stopped) {
this.observer && this.observer.disconnect();
events.forEach(function (name) { return global.removeEventListener(name, _this.listener, true); });
this.stopped = true;
}
};
return Scheduler;
}());
var scheduler = new Scheduler();
var updateCount = function (n) {
!watching && n > 0 && scheduler.start();
watching += n;
!watching && scheduler.stop();
};
var skipNotifyOnElement = function (target) {
return !isSVG(target)
&& !isReplacedElement(target)
&& getComputedStyle(target).display === 'inline';
};
var ResizeObservation = (function () {
function ResizeObservation(target, observedBox) {
this.target = target;
this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
this.lastReportedSize = {
inlineSize: 0,
blockSize: 0
};
}
ResizeObservation.prototype.isActive = function () {
var size = calculateBoxSize(this.target, this.observedBox, true);
if (skipNotifyOnElement(this.target)) {
this.lastReportedSize = size;
}
if (this.lastReportedSize.inlineSize !== size.inlineSize
|| this.lastReportedSize.blockSize !== size.blockSize) {
return true;
}
return false;
};
return ResizeObservation;
}());
var ResizeObserverDetail = (function () {
function ResizeObserverDetail(resizeObserver, callback) {
this.activeTargets = [];
this.skippedTargets = [];
this.observationTargets = [];
this.observer = resizeObserver;
this.callback = callback;
}
return ResizeObserverDetail;
}());
var observerMap = new WeakMap();
var getObservationIndex = function (observationTargets, target) {
for (var i = 0; i < observationTargets.length; i += 1) {
if (observationTargets[i].target === target) {
return i;
}
}
return -1;
};
var ResizeObserverController = (function () {
function ResizeObserverController() {
}
ResizeObserverController.connect = function (resizeObserver, callback) {
var detail = new ResizeObserverDetail(resizeObserver, callback);
observerMap.set(resizeObserver, detail);
};
ResizeObserverController.observe = function (resizeObserver, target, options) {
var detail = observerMap.get(resizeObserver);
var firstObservation = detail.observationTargets.length === 0;
if (getObservationIndex(detail.observationTargets, target) < 0) {
firstObservation && resizeObservers.push(detail);
detail.observationTargets.push(new ResizeObservation(target, options && options.box));
updateCount(1);
scheduler.schedule();
}
};
ResizeObserverController.unobserve = function (resizeObserver, target) {
var detail = observerMap.get(resizeObserver);
var index = getObservationIndex(detail.observationTargets, target);
var lastObservation = detail.observationTargets.length === 1;
if (index >= 0) {
lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1);
detail.observationTargets.splice(index, 1);
updateCount(-1);
}
};
ResizeObserverController.disconnect = function (resizeObserver) {
var _this = this;
var detail = observerMap.get(resizeObserver);
detail.observationTargets.slice().forEach(function (ot) { return _this.unobserve(resizeObserver, ot.target); });
detail.activeTargets.splice(0, detail.activeTargets.length);
};
return ResizeObserverController;
}());
var ResizeObserver = (function () {
function ResizeObserver(callback) {
if (arguments.length === 0) {
throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
}
if (typeof callback !== 'function') {
throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
}
ResizeObserverController.connect(this, callback);
}
ResizeObserver.prototype.observe = function (target, options) {
if (arguments.length === 0) {
throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
}
if (!isElement(target)) {
throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
}
ResizeObserverController.observe(this, target, options);
};
ResizeObserver.prototype.unobserve = function (target) {
if (arguments.length === 0) {
throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
}
if (!isElement(target)) {
throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
}
ResizeObserverController.unobserve(this, target);
};
ResizeObserver.prototype.disconnect = function () {
ResizeObserverController.disconnect(this);
};
ResizeObserver.toString = function () {
return 'function ResizeObserver () { [polyfill code] }';
};
return ResizeObserver;
}());
exports.ResizeObserver = ResizeObserver;
exports.ResizeObserverEntry = ResizeObserverEntry;
Object.defineProperty(exports, '__esModule', { value: true });
})));

View File

@@ -0,0 +1,5 @@
declare const isSVG: (target: Element) => boolean;
declare const isHidden: (target: Element) => boolean;
declare const isElement: (obj: unknown) => boolean;
declare const isReplacedElement: (target: Element) => boolean;
export { isSVG, isHidden, isElement, isReplacedElement };

View File

@@ -0,0 +1,32 @@
var isSVG = function (target) { return target instanceof SVGElement && 'getBBox' in target; };
var isHidden = function (target) {
if (isSVG(target)) {
var _a = target.getBBox(), width = _a.width, height = _a.height;
return !width && !height;
}
var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;
return !(offsetWidth || offsetHeight || target.getClientRects().length);
};
var isElement = function (obj) {
var _a, _b;
var scope = (_b = (_a = obj) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView;
return !!(scope && obj instanceof scope.Element);
};
var isReplacedElement = function (target) {
switch (target.tagName) {
case 'INPUT':
if (target.type !== 'image') {
break;
}
case 'VIDEO':
case 'AUDIO':
case 'EMBED':
case 'OBJECT':
case 'CANVAS':
case 'IFRAME':
case 'IMG':
return true;
}
return false;
};
export { isSVG, isHidden, isElement, isReplacedElement };

View File

@@ -0,0 +1,8 @@
import { ResizeObserver } from '../ResizeObserver';
import { ResizeObserverEntry } from '../ResizeObserverEntry';
declare type IsomorphicWindow = Window & {
ResizeObserver?: typeof ResizeObserver;
ResizeObserverEntry?: typeof ResizeObserverEntry;
};
export declare const global: IsomorphicWindow;
export {};

View File

@@ -0,0 +1 @@
export var global = typeof window !== 'undefined' ? window : {};

View File

@@ -0,0 +1,2 @@
declare const process: () => boolean;
export { process };

View File

@@ -0,0 +1,18 @@
import { hasActiveObservations } from '../algorithms/hasActiveObservations';
import { hasSkippedObservations } from '../algorithms/hasSkippedObservations';
import { deliverResizeLoopError } from '../algorithms/deliverResizeLoopError';
import { broadcastActiveObservations } from '../algorithms/broadcastActiveObservations';
import { gatherActiveObservationsAtDepth } from '../algorithms/gatherActiveObservationsAtDepth';
var process = function () {
var depth = 0;
gatherActiveObservationsAtDepth(depth);
while (hasActiveObservations()) {
depth = broadcastActiveObservations();
gatherActiveObservationsAtDepth(depth);
}
if (hasSkippedObservations()) {
deliverResizeLoopError();
}
return depth > 0;
};
export { process };

View File

@@ -0,0 +1,2 @@
declare const queueMicroTask: (callback: () => void) => void;
export { queueMicroTask };

View File

@@ -0,0 +1,15 @@
var trigger;
var callbacks = [];
var notify = function () { return callbacks.splice(0).forEach(function (cb) { return cb(); }); };
var queueMicroTask = function (callback) {
if (!trigger) {
var toggle_1 = 0;
var el_1 = document.createTextNode('');
var config = { characterData: true };
new MutationObserver(function () { return notify(); }).observe(el_1, config);
trigger = function () { el_1.textContent = "" + (toggle_1 ? toggle_1-- : toggle_1++); };
}
callbacks.push(callback);
trigger();
};
export { queueMicroTask };

View File

@@ -0,0 +1,2 @@
declare const queueResizeObserver: (cb: () => void) => void;
export { queueResizeObserver };

View File

@@ -0,0 +1,7 @@
import { queueMicroTask } from './queueMicroTask';
var queueResizeObserver = function (cb) {
queueMicroTask(function ResizeObserver() {
requestAnimationFrame(cb);
});
};
export { queueResizeObserver };

View File

@@ -0,0 +1,3 @@
import { ResizeObserverDetail } from '../ResizeObserverDetail';
declare const resizeObservers: ResizeObserverDetail[];
export { resizeObservers };

View File

@@ -0,0 +1,2 @@
var resizeObservers = [];
export { resizeObservers };

View File

@@ -0,0 +1,14 @@
declare class Scheduler {
private observer;
private listener;
stopped: boolean;
constructor();
private run;
schedule(): void;
private observe;
start(): void;
stop(): void;
}
declare const scheduler: Scheduler;
declare const updateCount: (n: number) => void;
export { scheduler, updateCount };

View File

@@ -0,0 +1,100 @@
import { process } from './process';
import { global } from './global';
import { queueResizeObserver } from './queueResizeObserver';
var watching = 0;
var isWatching = function () { return !!watching; };
var CATCH_PERIOD = 250;
var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
var events = [
'resize',
'load',
'transitionend',
'animationend',
'animationstart',
'animationiteration',
'keyup',
'keydown',
'mouseup',
'mousedown',
'mouseover',
'mouseout',
'blur',
'focus'
];
var time = function (timeout) {
if (timeout === void 0) { timeout = 0; }
return Date.now() + timeout;
};
var scheduled = false;
var Scheduler = (function () {
function Scheduler() {
var _this = this;
this.stopped = true;
this.listener = function () { return _this.schedule(); };
}
Scheduler.prototype.run = function (timeout) {
var _this = this;
if (timeout === void 0) { timeout = CATCH_PERIOD; }
if (scheduled) {
return;
}
scheduled = true;
var until = time(timeout);
queueResizeObserver(function () {
var elementsHaveResized = false;
try {
elementsHaveResized = process();
}
finally {
scheduled = false;
timeout = until - time();
if (!isWatching()) {
return;
}
if (elementsHaveResized) {
_this.run(1000);
}
else if (timeout > 0) {
_this.run(timeout);
}
else {
_this.start();
}
}
});
};
Scheduler.prototype.schedule = function () {
this.stop();
this.run();
};
Scheduler.prototype.observe = function () {
var _this = this;
var cb = function () { return _this.observer && _this.observer.observe(document.body, observerConfig); };
document.body ? cb() : global.addEventListener('DOMContentLoaded', cb);
};
Scheduler.prototype.start = function () {
var _this = this;
if (this.stopped) {
this.stopped = false;
this.observer = new MutationObserver(this.listener);
this.observe();
events.forEach(function (name) { return global.addEventListener(name, _this.listener, true); });
}
};
Scheduler.prototype.stop = function () {
var _this = this;
if (!this.stopped) {
this.observer && this.observer.disconnect();
events.forEach(function (name) { return global.removeEventListener(name, _this.listener, true); });
this.stopped = true;
}
};
return Scheduler;
}());
var scheduler = new Scheduler();
var updateCount = function (n) {
!watching && n > 0 && scheduler.start();
watching += n;
!watching && scheduler.stop();
};
export { scheduler, updateCount };

View File

@@ -0,0 +1,69 @@
{
"name": "@juggle/resize-observer",
"version": "3.2.0",
"description": "Polyfills the ResizeObserver API and supports box size options from the latest spec",
"main": "lib/exports/resize-observer.umd.js",
"module": "lib/exports/resize-observer.js",
"types": "lib/exports/resize-observer.d.ts",
"files": [
"lib/**/*.{js,ts}"
],
"scripts": {
"build": "rm -rf lib && npm run build:esm && npm run build:umd",
"build:esm": "tsc",
"build:umd": "rollup -c",
"build:docs": "rm -f docs/*.* && parcel build docs/src/index.html --out-dir docs --public-url ./",
"ci-tests": "npm test -- --ci --runInBand && cat coverage/lcov.info | coveralls",
"test": "npm run lint && jest --coverage",
"lint": "eslint '{src,test}/**/*.ts'",
"preVersion": "npm run build-docs",
"prepublishOnly": "npm run build"
},
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/juggle/resize-observer.git"
},
"keywords": [
"ResizeObserver",
"polyfill",
"ponyfill",
"event",
"resize",
"observer",
"typescript",
"javascript",
"element",
"component",
"container",
"queries",
"web components",
"front-end",
"html",
"Angular",
"React",
"Vue"
],
"author": "Juggle",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/juggle/resize-observer/issues"
},
"homepage": "https://juggle.studio/resize-observer/",
"devDependencies": {
"@types/jest": "^25.2.3",
"@typescript-eslint/eslint-plugin": "^3.0.2",
"@typescript-eslint/parser": "^3.0.2",
"core-js": "^3.6.5",
"coveralls": "^3.1.0",
"cssnano": "^4.1.10",
"eslint": "^7.1.0",
"jest": "^26.0.1",
"jest-cli": "^26.0.1",
"jest-junit": "^10.0.0",
"jsdom": "^16.2.2",
"parcel-bundler": "^1.12.4",
"rollup": "^2.12.0",
"ts-jest": "^26.1.0",
"typescript": "^3.9.3"
}
}