Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

resize-observer-polyfill

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

resize-observer-polyfill - npm Package Compare versions

Comparing version 1.4.2 to 1.5.0

dist/ResizeObserver.js.flow

241

dist/ResizeObserver.es.js

@@ -9,3 +9,3 @@ /**

var MapShim = (function () {
if (typeof Map != 'undefined') {
if (typeof Map !== 'undefined') {
return Map;

@@ -42,3 +42,3 @@ }

var prototypeAccessors = { size: {} };
var prototypeAccessors = { size: { configurable: true } };

@@ -112,5 +112,6 @@ /**

anonymous.prototype.forEach = function (callback, ctx) {
var this$1 = this;
if ( ctx === void 0 ) ctx = null;
for (var i = 0, list = this.__entries__; i < list.length; i += 1) {
for (var i = 0, list = this$1.__entries__; i < list.length; i += 1) {
var entry = list[i];

@@ -131,4 +132,22 @@

*/
var isBrowser = typeof window != 'undefined' && typeof document != 'undefined' && window.document === document;
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1 = (function () {
if (typeof global !== 'undefined' && global.Math === Math) {
return global;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**

@@ -142,3 +161,6 @@ * A shim for the requestAnimationFrame which falls back to the setTimeout if

if (typeof requestAnimationFrame === 'function') {
return requestAnimationFrame;
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1);
}

@@ -233,12 +255,5 @@

// Detect whether running in IE 11 (facepalm).
var isIE11 = typeof navigator != 'undefined' && /Trident\/.*rv:11/.test(navigator.userAgent);
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
// MutationObserver should not be used if running in Internet Explorer 11 as it's
// implementation is unreliable. Example: https://jsfiddle.net/x2r3jpuz/2/
//
// It's a real bummer that there is no other way to check for this issue but to
// use the UA information.
var mutationObserverSupported = typeof MutationObserver != 'undefined' && !isIE11;
/**

@@ -248,28 +263,5 @@ * Singleton controller class which handles updates of ResizeObserver instances.

var ResizeObserverController = function() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];

@@ -287,2 +279,22 @@

*/
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
ResizeObserverController.prototype.addObserver = function (observer) {

@@ -435,3 +447,3 @@ if (!~this.observers_.indexOf(observer)) {

ResizeObserverController.prototype.onTransitionEnd_ = function (ref) {
var propertyName = ref.propertyName;
var propertyName = ref.propertyName; if ( propertyName === void 0 ) propertyName = '';

@@ -461,7 +473,2 @@ // Detect whether transition may affect dimensions of an element.

/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;

@@ -491,2 +498,19 @@

/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1;
});
// Placeholder of an empty content rectangle.

@@ -513,3 +537,4 @@ var emptyRect = createRectInit(0, 0, 0, 0);

function getBordersSize(styles) {
var positions = Array.prototype.slice.call(arguments, 1);
var positions = [], len = arguments.length - 1;
while ( len-- > 0 ) positions[ len ] = arguments[ len + 1 ];

@@ -581,3 +606,3 @@ return positions.reduce(function (size, position) {

var styles = getComputedStyle(target);
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);

@@ -650,4 +675,4 @@ var horizPad = paddings.left + paddings.right;

// interface.
if (typeof SVGGraphicsElement != 'undefined') {
return function (target) { return target instanceof SVGGraphicsElement; };
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}

@@ -658,3 +683,3 @@

// eslint-disable-next-line no-extra-parens
return function (target) { return target instanceof SVGElement && typeof target.getBBox === 'function'; };
return function (target) { return target instanceof getWindowOf(target).SVGElement && typeof target.getBBox === 'function'; };
})();

@@ -669,3 +694,3 @@

function isDocumentElement(target) {
return target === document.documentElement;
return target === getWindowOf(target).document.documentElement;
}

@@ -705,3 +730,3 @@

// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly != 'undefined' ? DOMRectReadOnly : Object;
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);

@@ -740,28 +765,6 @@

var ResizeObservation = function(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
/**
* Reference to the observed element.
*
* @type {Element}
*/
this.target = target;

@@ -776,2 +779,16 @@ };

*/
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
ResizeObservation.prototype.isActive = function () {

@@ -813,2 +830,5 @@ var rect = getContentRect(this.target);

var ResizeObserverSPI = function(callback, controller, callbackCtx) {
this.activeObservations_ = [];
this.observations_ = new MapShim();
if (typeof callback !== 'function') {

@@ -818,37 +838,4 @@ throw new TypeError('The callback provided as parameter 1 is not a function.');

/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
/**
* Reference to the callback function.
*
* @private {ResizeObserverCallback}
*/
this.callback_ = callback;
/**
* Reference to the associated ResizeObserverController.
*
* @private {ResizeObserverController}
*/
this.controller_ = controller;
/**
* Public ResizeObserver instance which will be passed to the callback
* function and used as a value of it's "this" binding.
*
* @private {ResizeObserver}
*/
this.callbackCtx_ = callbackCtx;

@@ -863,2 +850,24 @@ };

*/
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
/**
* Public ResizeObserver instance which will be passed to the callback
* function and used as a value of it's "this" binding.
*
* @private {ResizeObserver}
*/
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
ResizeObserverSPI.prototype.observe = function (target) {

@@ -874,3 +883,3 @@ if (!arguments.length) {

if (!(target instanceof Element)) {
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');

@@ -910,3 +919,3 @@ }

if (!(target instanceof Element)) {
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');

@@ -1002,3 +1011,3 @@ }

// can't be fully polyfilled anyway.
var observers = typeof WeakMap != 'undefined' ? new WeakMap() : new MapShim();
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();

@@ -1009,7 +1018,6 @@ /**

*/
var ResizeObserver$1 = function(callback) {
if (!(this instanceof ResizeObserver$1)) {
throw new TypeError('Cannot call a class as a function');
var ResizeObserver = function(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {

@@ -1027,3 +1035,3 @@ throw new TypeError('1 argument required, but only 0 present.');

['observe', 'unobserve', 'disconnect'].forEach(function (method) {
ResizeObserver$1.prototype[method] = function () {
ResizeObserver.prototype[method] = function () {
return (ref = observers.get(this))[method].apply(ref, arguments);

@@ -1036,10 +1044,9 @@ var ref;

// Export existing implementation if available.
if (typeof ResizeObserver != 'undefined') {
// eslint-disable-next-line no-undef
return ResizeObserver;
if (typeof global$1.ResizeObserver !== 'undefined') {
return global$1.ResizeObserver;
}
return ResizeObserver$1;
return ResizeObserver;
})();
export default index;

@@ -5,26 +5,5 @@ (function (global, factory) {

(global.ResizeObserver = factory());
}(this, (function () {
'use strict';
}(this, (function () { 'use strict';
/**
* Exports global object for the current environment.
*/
var global$1 = (function () {
if (typeof global != 'undefined' && global.Math === Math) {
return global;
}
if (typeof self != 'undefined' && self.Math === Math) {
return self;
}
if (typeof window != 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**
* A collection of shims that provide minimal functionality of the ES6 collections.

@@ -37,3 +16,3 @@ *

var MapShim = (function () {
if (typeof Map != 'undefined') {
if (typeof Map !== 'undefined') {
return Map;

@@ -70,3 +49,3 @@ }

var prototypeAccessors = { size: {} };
var prototypeAccessors = { size: { configurable: true } };

@@ -140,5 +119,6 @@ /**

anonymous.prototype.forEach = function (callback, ctx) {
var this$1 = this;
if ( ctx === void 0 ) ctx = null;
for (var i = 0, list = this.__entries__; i < list.length; i += 1) {
for (var i = 0, list = this$1.__entries__; i < list.length; i += 1) {
var entry = list[i];

@@ -159,4 +139,22 @@

*/
var isBrowser = typeof window != 'undefined' && typeof document != 'undefined' && window.document === document;
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1 = (function () {
if (typeof global !== 'undefined' && global.Math === Math) {
return global;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**

@@ -170,3 +168,6 @@ * A shim for the requestAnimationFrame which falls back to the setTimeout if

if (typeof requestAnimationFrame === 'function') {
return requestAnimationFrame;
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1);
}

@@ -261,12 +262,5 @@

// Detect whether running in IE 11 (facepalm).
var isIE11 = typeof navigator != 'undefined' && /Trident\/.*rv:11/.test(navigator.userAgent);
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
// MutationObserver should not be used if running in Internet Explorer 11 as it's
// implementation is unreliable. Example: https://jsfiddle.net/x2r3jpuz/2/
//
// It's a real bummer that there is no other way to check for this issue but to
// use the UA information.
var mutationObserverSupported = typeof MutationObserver != 'undefined' && !isIE11;
/**

@@ -276,28 +270,5 @@ * Singleton controller class which handles updates of ResizeObserver instances.

var ResizeObserverController = function() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];

@@ -315,2 +286,22 @@

*/
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
ResizeObserverController.prototype.addObserver = function (observer) {

@@ -463,3 +454,3 @@ if (!~this.observers_.indexOf(observer)) {

ResizeObserverController.prototype.onTransitionEnd_ = function (ref) {
var propertyName = ref.propertyName;
var propertyName = ref.propertyName; if ( propertyName === void 0 ) propertyName = '';

@@ -489,7 +480,2 @@ // Detect whether transition may affect dimensions of an element.

/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;

@@ -519,2 +505,19 @@

/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1;
});
// Placeholder of an empty content rectangle.

@@ -541,3 +544,4 @@ var emptyRect = createRectInit(0, 0, 0, 0);

function getBordersSize(styles) {
var positions = Array.prototype.slice.call(arguments, 1);
var positions = [], len = arguments.length - 1;
while ( len-- > 0 ) positions[ len ] = arguments[ len + 1 ];

@@ -609,3 +613,3 @@ return positions.reduce(function (size, position) {

var styles = getComputedStyle(target);
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);

@@ -678,4 +682,4 @@ var horizPad = paddings.left + paddings.right;

// interface.
if (typeof SVGGraphicsElement != 'undefined') {
return function (target) { return target instanceof SVGGraphicsElement; };
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}

@@ -686,3 +690,3 @@

// eslint-disable-next-line no-extra-parens
return function (target) { return target instanceof SVGElement && typeof target.getBBox === 'function'; };
return function (target) { return target instanceof getWindowOf(target).SVGElement && typeof target.getBBox === 'function'; };
})();

@@ -697,3 +701,3 @@

function isDocumentElement(target) {
return target === document.documentElement;
return target === getWindowOf(target).document.documentElement;
}

@@ -733,3 +737,3 @@

// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly != 'undefined' ? DOMRectReadOnly : Object;
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);

@@ -768,28 +772,6 @@

var ResizeObservation = function(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
/**
* Reference to the observed element.
*
* @type {Element}
*/
this.target = target;

@@ -804,2 +786,16 @@ };

*/
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
ResizeObservation.prototype.isActive = function () {

@@ -841,2 +837,5 @@ var rect = getContentRect(this.target);

var ResizeObserverSPI = function(callback, controller, callbackCtx) {
this.activeObservations_ = [];
this.observations_ = new MapShim();
if (typeof callback !== 'function') {

@@ -846,37 +845,4 @@ throw new TypeError('The callback provided as parameter 1 is not a function.');

/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
/**
* Reference to the callback function.
*
* @private {ResizeObserverCallback}
*/
this.callback_ = callback;
/**
* Reference to the associated ResizeObserverController.
*
* @private {ResizeObserverController}
*/
this.controller_ = controller;
/**
* Public ResizeObserver instance which will be passed to the callback
* function and used as a value of it's "this" binding.
*
* @private {ResizeObserver}
*/
this.callbackCtx_ = callbackCtx;

@@ -891,2 +857,24 @@ };

*/
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
/**
* Public ResizeObserver instance which will be passed to the callback
* function and used as a value of it's "this" binding.
*
* @private {ResizeObserver}
*/
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
ResizeObserverSPI.prototype.observe = function (target) {

@@ -902,3 +890,3 @@ if (!arguments.length) {

if (!(target instanceof Element)) {
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');

@@ -938,3 +926,3 @@ }

if (!(target instanceof Element)) {
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');

@@ -1030,3 +1018,3 @@ }

// can't be fully polyfilled anyway.
var observers = typeof WeakMap != 'undefined' ? new WeakMap() : new MapShim();
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();

@@ -1037,7 +1025,6 @@ /**

*/
var ResizeObserver$1 = function(callback) {
if (!(this instanceof ResizeObserver$1)) {
throw new TypeError('Cannot call a class as a function');
var ResizeObserver = function(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {

@@ -1055,3 +1042,3 @@ throw new TypeError('1 argument required, but only 0 present.');

['observe', 'unobserve', 'disconnect'].forEach(function (method) {
ResizeObserver$1.prototype[method] = function () {
ResizeObserver.prototype[method] = function () {
return (ref = observers.get(this))[method].apply(ref, arguments);

@@ -1064,13 +1051,13 @@ var ref;

// Export existing implementation if available.
if (typeof ResizeObserver != 'undefined') {
// eslint-disable-next-line no-undef
return ResizeObserver;
if (typeof global$1.ResizeObserver !== 'undefined') {
return global$1.ResizeObserver;
}
return ResizeObserver$1;
global$1.ResizeObserver = ResizeObserver;
return ResizeObserver;
})();
global$1.ResizeObserver = index;
return index;
return index;
})));
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.ResizeObserver = factory());
}(this, (function () {
'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.ResizeObserver = factory());
}(this, (function () { 'use strict';

@@ -16,3 +15,3 @@ /**

var MapShim = (function () {
if (typeof Map != 'undefined') {
if (typeof Map !== 'undefined') {
return Map;

@@ -49,3 +48,3 @@ }

var prototypeAccessors = { size: {} };
var prototypeAccessors = { size: { configurable: true } };

@@ -119,5 +118,6 @@ /**

anonymous.prototype.forEach = function (callback, ctx) {
var this$1 = this;
if ( ctx === void 0 ) ctx = null;
for (var i = 0, list = this.__entries__; i < list.length; i += 1) {
for (var i = 0, list = this$1.__entries__; i < list.length; i += 1) {
var entry = list[i];

@@ -138,4 +138,22 @@

*/
var isBrowser = typeof window != 'undefined' && typeof document != 'undefined' && window.document === document;
var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;
// Returns global object of a current environment.
var global$1 = (function () {
if (typeof global !== 'undefined' && global.Math === Math) {
return global;
}
if (typeof self !== 'undefined' && self.Math === Math) {
return self;
}
if (typeof window !== 'undefined' && window.Math === Math) {
return window;
}
// eslint-disable-next-line no-new-func
return Function('return this')();
})();
/**

@@ -149,3 +167,6 @@ * A shim for the requestAnimationFrame which falls back to the setTimeout if

if (typeof requestAnimationFrame === 'function') {
return requestAnimationFrame;
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global$1);
}

@@ -240,12 +261,5 @@

// Detect whether running in IE 11 (facepalm).
var isIE11 = typeof navigator != 'undefined' && /Trident\/.*rv:11/.test(navigator.userAgent);
// Check if MutationObserver is available.
var mutationObserverSupported = typeof MutationObserver !== 'undefined';
// MutationObserver should not be used if running in Internet Explorer 11 as it's
// implementation is unreliable. Example: https://jsfiddle.net/x2r3jpuz/2/
//
// It's a real bummer that there is no other way to check for this issue but to
// use the UA information.
var mutationObserverSupported = typeof MutationObserver != 'undefined' && !isIE11;
/**

@@ -255,28 +269,5 @@ * Singleton controller class which handles updates of ResizeObserver instances.

var ResizeObserverController = function() {
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
this.connected_ = false;
/**
* Tells that controller has subscribed for Mutation Events.
*
* @private {boolean}
*/
this.mutationEventsAdded_ = false;
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
this.mutationsObserver_ = null;
/**
* A list of connected observers.
*
* @private {Array<ResizeObserverSPI>}
*/
this.observers_ = [];

@@ -294,2 +285,22 @@

*/
/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
/**
* Keeps reference to the instance of MutationObserver.
*
* @private {MutationObserver}
*/
/**
* Indicates whether DOM listeners have been added.
*
* @private {boolean}
*/
ResizeObserverController.prototype.addObserver = function (observer) {

@@ -442,3 +453,3 @@ if (!~this.observers_.indexOf(observer)) {

ResizeObserverController.prototype.onTransitionEnd_ = function (ref) {
var propertyName = ref.propertyName;
var propertyName = ref.propertyName; if ( propertyName === void 0 ) propertyName = '';

@@ -468,7 +479,2 @@ // Detect whether transition may affect dimensions of an element.

/**
* Holds reference to the controller's instance.
*
* @private {ResizeObserverController}
*/
ResizeObserverController.instance_ = null;

@@ -498,2 +504,19 @@

/**
* Returns the global object associated with provided element.
*
* @param {Object} target
* @returns {Object}
*/
var getWindowOf = (function (target) {
// Assume that the element is an instance of Node, which means that it
// has the "ownerDocument" property from which we can retrieve a
// corresponding global object.
var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
// Return the local global object if it's not possible extract one from
// provided element.
return ownerGlobal || global$1;
});
// Placeholder of an empty content rectangle.

@@ -520,3 +543,4 @@ var emptyRect = createRectInit(0, 0, 0, 0);

function getBordersSize(styles) {
var positions = Array.prototype.slice.call(arguments, 1);
var positions = [], len = arguments.length - 1;
while ( len-- > 0 ) positions[ len ] = arguments[ len + 1 ];

@@ -588,3 +612,3 @@ return positions.reduce(function (size, position) {

var styles = getComputedStyle(target);
var styles = getWindowOf(target).getComputedStyle(target);
var paddings = getPaddings(styles);

@@ -657,4 +681,4 @@ var horizPad = paddings.left + paddings.right;

// interface.
if (typeof SVGGraphicsElement != 'undefined') {
return function (target) { return target instanceof SVGGraphicsElement; };
if (typeof SVGGraphicsElement !== 'undefined') {
return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };
}

@@ -665,3 +689,3 @@

// eslint-disable-next-line no-extra-parens
return function (target) { return target instanceof SVGElement && typeof target.getBBox === 'function'; };
return function (target) { return target instanceof getWindowOf(target).SVGElement && typeof target.getBBox === 'function'; };
})();

@@ -676,3 +700,3 @@

function isDocumentElement(target) {
return target === document.documentElement;
return target === getWindowOf(target).document.documentElement;
}

@@ -712,3 +736,3 @@

// If DOMRectReadOnly is available use it as a prototype for the rectangle.
var Constr = typeof DOMRectReadOnly != 'undefined' ? DOMRectReadOnly : Object;
var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
var rect = Object.create(Constr.prototype);

@@ -747,28 +771,6 @@

var ResizeObservation = function(target) {
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
this.broadcastWidth = 0;
/**
* Broadcasted height of content rectangle.
*
* @type {number}
*/
this.broadcastHeight = 0;
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
this.contentRect_ = createRectInit(0, 0, 0, 0);
/**
* Reference to the observed element.
*
* @type {Element}
*/
this.target = target;

@@ -783,2 +785,16 @@ };

*/
/**
* Reference to the last observed content rectangle.
*
* @private {DOMRectInit}
*/
/**
* Broadcasted width of content rectangle.
*
* @type {number}
*/
ResizeObservation.prototype.isActive = function () {

@@ -820,2 +836,5 @@ var rect = getContentRect(this.target);

var ResizeObserverSPI = function(callback, controller, callbackCtx) {
this.activeObservations_ = [];
this.observations_ = new MapShim();
if (typeof callback !== 'function') {

@@ -825,37 +844,4 @@ throw new TypeError('The callback provided as parameter 1 is not a function.');

/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
this.activeObservations_ = [];
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
this.observations_ = new MapShim();
/**
* Reference to the callback function.
*
* @private {ResizeObserverCallback}
*/
this.callback_ = callback;
/**
* Reference to the associated ResizeObserverController.
*
* @private {ResizeObserverController}
*/
this.controller_ = controller;
/**
* Public ResizeObserver instance which will be passed to the callback
* function and used as a value of it's "this" binding.
*
* @private {ResizeObserver}
*/
this.callbackCtx_ = callbackCtx;

@@ -870,2 +856,24 @@ };

*/
/**
* Registry of the ResizeObservation instances.
*
* @private {Map<Element, ResizeObservation>}
*/
/**
* Public ResizeObserver instance which will be passed to the callback
* function and used as a value of it's "this" binding.
*
* @private {ResizeObserver}
*/
/**
* Collection of resize observations that have detected changes in dimensions
* of elements.
*
* @private {Array<ResizeObservation>}
*/
ResizeObserverSPI.prototype.observe = function (target) {

@@ -881,3 +889,3 @@ if (!arguments.length) {

if (!(target instanceof Element)) {
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');

@@ -917,3 +925,3 @@ }

if (!(target instanceof Element)) {
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');

@@ -1009,3 +1017,3 @@ }

// can't be fully polyfilled anyway.
var observers = typeof WeakMap != 'undefined' ? new WeakMap() : new MapShim();
var observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();

@@ -1016,7 +1024,6 @@ /**

*/
var ResizeObserver$1 = function(callback) {
if (!(this instanceof ResizeObserver$1)) {
throw new TypeError('Cannot call a class as a function');
var ResizeObserver = function(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {

@@ -1034,3 +1041,3 @@ throw new TypeError('1 argument required, but only 0 present.');

['observe', 'unobserve', 'disconnect'].forEach(function (method) {
ResizeObserver$1.prototype[method] = function () {
ResizeObserver.prototype[method] = function () {
return (ref = observers.get(this))[method].apply(ref, arguments);

@@ -1043,11 +1050,11 @@ var ref;

// Export existing implementation if available.
if (typeof ResizeObserver != 'undefined') {
// eslint-disable-next-line no-undef
return ResizeObserver;
if (typeof global$1.ResizeObserver !== 'undefined') {
return global$1.ResizeObserver;
}
return ResizeObserver$1;
return ResizeObserver;
})();
return index;
})));
{
"name": "resize-observer-polyfill",
"author": "Denis Rul <que.etc@gmail.com>",
"version": "1.4.2",
"version": "1.5.0",
"description": "A polyfill for the Resize Observer API",
"main": "dist/ResizeObserver.js",
"jsnext:main": "dist/ResizeObserver.es.js",
"module": "dist/ResizeObserver.es.js",
"scripts": {
"build": "rollup -c",
"build": "rollup -c && cpy src/index.js.flow dist --rename=ResizeObserver.js.flow",
"test": "npm run test:lint && npm run test:spec",
"test:ci": "npm run test:lint && npm run test:spec:sauce && npm run test:spec:node",
"test:ci:pull": "npm run test:lint && karma start --browsers Firefox && npm run test:spec:node",
"test:lint": "node ./node_modules/eslint/bin/eslint.js \"**/*.js\" --ignore-pattern \"/dist/\"",
"test:spec": "karma start --browsers Chrome && npm run test:spec:node",
"test:spec:sauce": "karma start --sauce=windows && karma start --sauce=linux && karma start --sauce=osx && karma start --sauce=ios && karma start --sauce=android",
"test:spec:node": "babel-node --presets latest,stage-2 tests/node/index.js",
"test:spec:node": "npm run build && node tests/node/index.js",
"test:spec:custom": "karma start --no-browsers",

@@ -45,25 +45,26 @@ "test:spec:native": "karma start --no-browsers --native"

"devDependencies": {
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-eslint": "^7.2.1",
"babel-plugin-transform-regenerator": "^6.22.0",
"babel-preset-latest": "^6.24.0",
"babel-preset-stage-2": "^6.22.0",
"eslint": "^3.19.0",
"jasmine": "^2.5.3",
"jasmine-core": "^2.5.2",
"karma": "^1.5.0",
"karma-chrome-launcher": "^2.0.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.2",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-regenerator": "^6.26.0",
"cpy-cli": "^1.0.1",
"eslint": "^4.11.0",
"jasmine": "^2.8.0",
"jasmine-core": "^2.8.0",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-firefox-launcher": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-rollup-plugin": "^0.2.4",
"karma-sauce-launcher": "^1.1.0",
"karma-rollup-preprocessor": "^5.0.2",
"karma-sauce-launcher": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.30",
"karma-spec-reporter": "0.0.31",
"promise-polyfill": "^6.0.2",
"regenerator-runtime": "^0.10.3",
"rollup": "^0.41.6",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-buble": "^0.15.0"
"regenerator-runtime": "^0.11.0",
"rollup": "^0.51.6",
"rollup-plugin-babel": "^3.0.2",
"rollup-plugin-buble": "^0.16.0"
}
}

@@ -9,3 +9,3 @@ ResizeObserver Polyfill

Implementation is based on the MutationObserver and uses Mutation Events as a fall back if the first one is not supported, so there will be no polling unless DOM changes. Doesn't modify observed elements. Handles CSS transitions/animations, `<textarea>` resizes and can possibly observe changes caused by dynamic CSS pseudo-classes, e.g. by `:hover`.
Implementation is based on the MutationObserver and uses Mutation Events as a fall back if the first one is not supported, so there will be no polling unless DOM changes. Doesn't modify observed elements. Handles CSS transitions/animations and can possibly observe changes caused by dynamic CSS pseudo-classes, e.g. by `:hover`.

@@ -24,3 +24,3 @@ Follows the [spec](http://rawgit.com/WICG/ResizeObserver/master/index.html) and the native implementation. The size is _2.44 KiB_ when minified and gzipped.

From Bower:
~~From Bower:~~ (will be removed with the next major release)

@@ -31,3 +31,2 @@ ```sh

Or just [grab](https://github.com/que-etc/resize-observer-polyfill/tree/master/dist/ResizeObserver.js) the pre-built version.

@@ -62,3 +61,3 @@ ## Browser Support

Package's main file is a ES5 [UMD](https://github.com/umdjs/umd) bundle that will be swapped with the ES6 modules version for those bundlers that are aware of the [jnext:main](https://github.com/rollup/rollup/wiki/jsnext:main) field, e.g. for [Rollup](https://github.com/rollup/rollup) or webpack.
Package's main file is a ES5 [UMD](https://github.com/umdjs/umd) bundle that will be swapped with the ES6 modules version for those bundlers that are aware of the [module](https://github.com/rollup/rollup/wiki/pkg.module) field, e.g. for [Rollup](https://github.com/rollup/rollup) or webpack 2+.

@@ -69,3 +68,3 @@ **Note**: global version of the polyfill (`dist/ResizeObserver.global`) is deprecated and will be removed in the next major release.

As mentioned above, this implementation primarily (but not solely) relies on Mutation Observer with a fallback to Mutation Events for IE 9, IE 10 and IE 11. It's important to notice that even though MO is available in Internet Explorer 11, it won't be used due to a very unreliable behavior mentioned in the issue #6 (run [this example](https://jsfiddle.net/x2r3jpuz/2/) in IE11).
As mentioned above, this implementation primarily (but not solely) relies on Mutation Observer with a fallback to Mutation Events for IE 9 and IE 10.

@@ -72,0 +71,0 @@ Speaking of Mutation Events as a fallback approach: they might not be as ugly as they are being rendered, particularly when their calls are batched, throttled and there is no need to analyze changes. Given that, they won't interrupt browser's reflow/repaint cycles (same for MutationObserver) and may even outperform Internet Explorer's implementation of MO causing little to no performance degradation. In contemporary browsers (Chrome, Firefox, etc.) Mutation Observer slows down [the suite](https://jsfiddle.net/que_etc/gaqLe8rn/) that includes 200 iterations of adding/removing elements, changing attributes and modifying text data by less than 1%. Internet Explorer gives different results with MO slowing down the same suite by 2-3% while Mutation Events show the difference of ~0.6%.

@@ -1,8 +0,8 @@

import ResizeObserverPolyfill from './ResizeObserver';
import ResizeObserverPolyfill from './ResizeObserver.js';
import global from './shims/global.js';
export default (() => {
// Export existing implementation if available.
if (typeof ResizeObserver != 'undefined') {
// eslint-disable-next-line no-undef
return ResizeObserver;
if (typeof global.ResizeObserver !== 'undefined') {
return global.ResizeObserver;
}

@@ -9,0 +9,0 @@

@@ -1,2 +0,2 @@

import {createRectInit, getContentRect} from './utils/geometry';
import {createRectInit, getContentRect} from './utils/geometry.js';

@@ -3,0 +3,0 @@ /**

@@ -1,4 +0,4 @@

import {Map} from './shims/es6-collections';
import ResizeObserverController from './ResizeObserverController';
import ResizeObserverSPI from './ResizeObserverSPI';
import {Map} from './shims/es6-collections.js';
import ResizeObserverController from './ResizeObserverController.js';
import ResizeObserverSPI from './ResizeObserverSPI.js';

@@ -8,3 +8,3 @@ // Registry of internal observers. If WeakMap is not available use current shim

// can't be fully polyfilled anyway.
const observers = typeof WeakMap != 'undefined' ? new WeakMap() : new Map();
const observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new Map();

@@ -23,2 +23,5 @@ /**

constructor(callback) {
if (!(this instanceof ResizeObserver)) {
throw new TypeError('Cannot call a class as a function.');
}
if (!arguments.length) {

@@ -25,0 +28,0 @@ throw new TypeError('1 argument required, but only 0 present.');

@@ -1,3 +0,3 @@

import isBrowser from './utils/isBrowser';
import throttle from './utils/throttle';
import isBrowser from './utils/isBrowser.js';
import throttle from './utils/throttle.js';

@@ -11,12 +11,5 @@ // Minimum delay before invoking the update of observers.

// Detect whether running in IE 11 (facepalm).
const isIE11 = typeof navigator != 'undefined' && (/Trident\/.*rv:11/).test(navigator.userAgent);
// Check if MutationObserver is available.
const mutationObserverSupported = typeof MutationObserver !== 'undefined';
// MutationObserver should not be used if running in Internet Explorer 11 as it's
// implementation is unreliable. Example: https://jsfiddle.net/x2r3jpuz/2/
//
// It's a real bummer that there is no other way to check for this issue but to
// use the UA information.
const mutationObserverSupported = typeof MutationObserver != 'undefined' && !isIE11;
/**

@@ -223,3 +216,3 @@ * Singleton controller class which handles updates of ResizeObserver instances.

*/
onTransitionEnd_({propertyName}) {
onTransitionEnd_({propertyName = ''}) {
// Detect whether transition may affect dimensions of an element.

@@ -226,0 +219,0 @@ const isReflowProperty = transitionKeys.some(key => {

@@ -1,3 +0,3 @@

import {createReadOnlyRect} from './utils/geometry';
import defineConfigurable from './utils/defineConfigurable';
import {createReadOnlyRect} from './utils/geometry.js';
import defineConfigurable from './utils/defineConfigurable.js';

@@ -4,0 +4,0 @@ export default class ResizeObserverEntry {

@@ -1,4 +0,5 @@

import {Map} from './shims/es6-collections';
import ResizeObservation from './ResizeObservation';
import ResizeObserverEntry from './ResizeObserverEntry';
import {Map} from './shims/es6-collections.js';
import ResizeObservation from './ResizeObservation.js';
import ResizeObserverEntry from './ResizeObserverEntry.js';
import getWindowOf from './utils/getWindowOf.js';

@@ -79,3 +80,3 @@ export default class ResizeObserverSPI {

if (!(target instanceof Element)) {
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');

@@ -115,3 +116,3 @@ }

if (!(target instanceof Element)) {
if (!(target instanceof getWindowOf(target).Element)) {
throw new TypeError('parameter 1 is not of type "Element".');

@@ -118,0 +119,0 @@ }

@@ -9,3 +9,3 @@ /**

const MapShim = (() => {
if (typeof Map != 'undefined') {
if (typeof Map !== 'undefined') {
return Map;

@@ -12,0 +12,0 @@ }

@@ -0,1 +1,3 @@

import global from './global.js';
/**

@@ -9,3 +11,6 @@ * A shim for the requestAnimationFrame which falls back to the setTimeout if

if (typeof requestAnimationFrame === 'function') {
return requestAnimationFrame;
// It's required to use a bounded function because IE sometimes throws
// an "Invalid calling object" error if rAF is invoked without the global
// object on the left hand side.
return requestAnimationFrame.bind(global);
}

@@ -12,0 +17,0 @@

@@ -1,3 +0,4 @@

import defineConfigurable from './defineConfigurable';
import isBrowser from './isBrowser';
import defineConfigurable from './defineConfigurable.js';
import getWindowOf from './getWindowOf.js';
import isBrowser from './isBrowser.js';

@@ -87,3 +88,3 @@ // Placeholder of an empty content rectangle.

const styles = getComputedStyle(target);
const styles = getWindowOf(target).getComputedStyle(target);
const paddings = getPaddings(styles);

@@ -156,4 +157,4 @@ const horizPad = paddings.left + paddings.right;

// interface.
if (typeof SVGGraphicsElement != 'undefined') {
return target => target instanceof SVGGraphicsElement;
if (typeof SVGGraphicsElement !== 'undefined') {
return target => target instanceof getWindowOf(target).SVGGraphicsElement;
}

@@ -165,3 +166,3 @@

return target => (
target instanceof SVGElement &&
target instanceof getWindowOf(target).SVGElement &&
typeof target.getBBox === 'function'

@@ -178,3 +179,3 @@ );

function isDocumentElement(target) {
return target === document.documentElement;
return target === getWindowOf(target).document.documentElement;
}

@@ -209,3 +210,3 @@

// If DOMRectReadOnly is available use it as a prototype for the rectangle.
const Constr = typeof DOMRectReadOnly != 'undefined' ? DOMRectReadOnly : Object;
const Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;
const rect = Object.create(Constr.prototype);

@@ -212,0 +213,0 @@

/**
* Detects whether window and document objects are available in current environment.
*/
export default typeof window != 'undefined' && typeof document != 'undefined' && window.document === document;
export default typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;

@@ -1,2 +0,2 @@

import requestAnimationFrame from '../shims/requestAnimationFrame';
import requestAnimationFrame from '../shims/requestAnimationFrame.js';

@@ -3,0 +3,0 @@ // Defines minimum timeout before adding a trailing call.

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc