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.1.5 to 1.2.0

src/throttle.js

2044

dist/ResizeObserver.global.js

@@ -1,1414 +0,1142 @@

(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object') {
module.exports = factory();
} else if(typeof define === 'function' && define.amd) {
define([], factory);
} else if(typeof exports === 'object') {
exports["ResizeObserver"] = factory();
} else {
root["ResizeObserver"] = factory();
(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';
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
})(this, function () {
// webpackBootstrap
return (function (modules) {
// The module cache
var installedModules = {};
};
// The require function
function __webpack_require__(moduleId) {
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
// Check if module is in cache
if(installedModules[moduleId])
return installedModules[moduleId].exports;
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
exports: {},
id: moduleId,
loaded: false
};
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
// Flag the module as loaded
module.loaded = true;
// Return the exports of the module
return module.exports;
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules;
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
// expose the module cache
__webpack_require__.c = installedModules;
/**
* A collection of shims that provides minimal
* support of WeakMap and Map classes.
*
* These implementations are not meant to be used outside of
* ResizeObserver modules as they cover only a limited range
* of use cases.
*//* eslint-disable require-jsdoc */
var hasNativeCollections = typeof window.WeakMap === 'function' && typeof window.Map === 'function';
// __webpack_public_path__
__webpack_require__.p = "";
var WeakMap = function () {
if (hasNativeCollections) {
return window.WeakMap;
}
// Load entry module and return exports
return __webpack_require__(0);
})([function (module, exports, __webpack_require__) {
'use strict';
function getIndex(arr, key) {
var result = -1;
exports.__esModule = true;
arr.some(function (entry, index) {
var matches = entry[0] === key;
var _ResizeObserver = __webpack_require__(1);
if (matches) {
result = index;
}
var _ResizeObserver2 = _interopRequireDefault(_ResizeObserver);
return matches;
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
if (typeof window.ResizeObserver !== 'function') {
// ResizeObserver host property is not enumerable
// in the native implementation.
Object.defineProperty(window, 'ResizeObserver', {
value: _ResizeObserver2.default,
writable: true,
configurable: true
});
return result;
}
// Still export the constructor as for me it seems
// awkward when a module doesn't export anything.
exports.default = window.ResizeObserver;
module.exports = exports['default'];
}, function (module, exports, __webpack_require__) {
'use strict';
return function () {
function _class() {
classCallCheck(this, _class);
exports.__esModule = true;
this.__entries__ = [];
}
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
_class.prototype.get = function get(key) {
var index = getIndex(this.__entries__, key);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
return this.__entries__[index][1];
};
var _es6Collections = __webpack_require__(2);
_class.prototype.set = function set(key, value) {
var index = getIndex(this.__entries__, key);
var _ResizeObserverController = __webpack_require__(3);
if (~index) {
this.__entries__[index][1] = value;
} else {
this.__entries__.push([key, value]);
}
};
var _ResizeObserverController2 = _interopRequireDefault(_ResizeObserverController);
_class.prototype.delete = function _delete(key) {
var entries = this.__entries__,
index = getIndex(entries, key);
var _ResizeObserver2 = __webpack_require__(6);
if (~index) {
entries.splice(index, 1);
}
};
var _ResizeObserver3 = _interopRequireDefault(_ResizeObserver2);
_class.prototype.has = function has(key) {
return !!~getIndex(this.__entries__, key);
};
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
return _class;
}();
}();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Map = function () {
if (hasNativeCollections) {
return window.Map;
}
// Controller that will be assigned to all instances of ResizeObserver.
var controller = new _ResizeObserverController2.default();
return function (_WeakMap) {
inherits(_class2, _WeakMap);
// Registry of the internal observers.
var observers = new _es6Collections.WeakMap();
function _class2() {
classCallCheck(this, _class2);
return possibleConstructorReturn(this, _WeakMap.apply(this, arguments));
}
/**
* ResizeObservers' "Proxy" class which is meant to hide private
* properties and methods from public instances.
*
* Additionally it implements "idleTimeout" and "continuousUpdates" static property
* accessors to give control over the behavior of the ResizeObserverController
* instance. Changes made to these properties affect all future and
* existing observers.
*/
var ResizeObserver = function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {Function} callback - Callback that will
* be invoked when dimensions of one of the
* observed elements have been changed.
*/
function ResizeObserver(callback) {
_classCallCheck(this, ResizeObserver);
_class2.prototype.clear = function clear() {
this.__entries__.splice(0, this.__entries__.length);
};
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
_class2.prototype.entries = function entries() {
return this.__entries__.slice();
};
var observer = new _ResizeObserver3.default(callback, controller, this);
_class2.prototype.keys = function keys() {
return this.__entries__.map(function (entry) {
return entry[0];
});
};
// Register an internal observer.
observers.set(this, observer);
}
_class2.prototype.values = function values() {
return this.__entries__.map(function (entry) {
return entry[1];
});
};
_createClass(ResizeObserver, null, [{
_class2.prototype.forEach = function forEach(callback) {
var ctx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
/**
* Extracts controllers' idle timeout value.
*
* @returns {Number}
*/
key: 'idleTimeout',
get: function get() {
return controller.idleTimeout;
},
for (var _iterator = this.__entries__, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
/**
* Sets up new idle timeout.
*
* @param {Number} value - New timeout value.
*/
set: function set(value) {
if (typeof value !== 'number') {
throw new TypeError('type of "idleTimeout" value must be number.');
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) < 0) {
throw new TypeError('"idleTimeout" value must be greater than 0.');
}
var entry = _ref;
controller.idleTimeout = value;
callback.call(ctx, entry[1], entry[0]);
}
}, {
};
/**
* Tells whether continuous updates are enabled.
*
* @returns {Boolean}
*/
key: 'continuousUpdates',
createClass(_class2, [{
key: 'size',
get: function get() {
return controller.continuousUpdates;
},
/**
* Enables or disables continuous updates.
*
* @param {Boolean} value - Whether to enable or disable
* continuous updates.
*/
set: function set(value) {
if (typeof value !== 'boolean') {
throw new TypeError('type of "continuousUpdates" value must be boolean.');
}
controller.continuousUpdates = value;
return this.__entries__.length;
}
}]);
return _class2;
}(WeakMap);
}();
return ResizeObserver;
}();
/**
* A shim for requestAnimationFrame which falls back
* to setTimeout if the first one is not supported.
*
* @returns {Number} Requests' identifier.
*/
var reqAnimFrame = (function () {
if (typeof window.requestAnimationFrame === 'function') {
return window.requestAnimationFrame;
}
// Expose public methods of ResizeObserver.
['observe', 'unobserve', 'disconnect'].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _observers$get;
return function (callback) {
return setTimeout(function () {
return callback(Date.now());
}, 1000 / 60);
};
})();
return (_observers$get = observers.get(this))[method].apply(_observers$get, arguments);
};
});
/**
* Creates a wrapper function that ensures that provided callback will
* be invoked only once during the specified delay period. It caches the last
* call and re-invokes it after pending activation is resolved.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {Number} [delay = 0] - Delay after which to invoke callback.
* @param {Boolean} [afterRAF = false] - Whether function needs to be invoked as
* a requestAnimationFrame callback.
* @returns {Function}
*/
var throttle = function (callback) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var afterRAF = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
exports.default = ResizeObserver;
module.exports = exports['default'];
}, function (module, exports) {
'use strict';
var leadCall = null,
edgeCall = null;
exports.__esModule = true;
/**
* Invokes the original callback function and schedules a new invocation if
* the wrapper was called during current request.
*/
function invokeCallback() {
// Invoke original function.
callback.apply.apply(callback, leadCall);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
leadCall = null;
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
// Schedule new invocation if there was a call during delay period.
if (edgeCall) {
proxy.apply.apply(proxy, edgeCall);
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
edgeCall = null;
}
}
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Callback that will be invoked after the specified delay period. It will
* delegate invocation of the original function to the requestAnimationFrame
* if "afterRAF" parameter is set to "true".
*/
function timeoutCallback() {
afterRAF ? reqAnimFrame(invokeCallback) : invokeCallback();
}
/**
* A collection of shims that provides minimal
* support of WeakMap and Map classes.
*
* These implementations are not meant to be used outside of
* ResizeObserver modules as they cover only a limited range
* of use cases.
* Schedules invocation of the initial function.
*/
/* eslint-disable require-jsdoc */
var hasNativeCollections = typeof window.WeakMap === 'function' && typeof window.Map === 'function';
var WeakMap = function () {
if (hasNativeCollections) {
return window.WeakMap;
function proxy() {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
function getIndex(arr, key) {
var result = -1;
// eslint-disable-next-line no-invalid-this
var callData = [this, args];
arr.some(function (entry, index) {
var matches = entry[0] === key;
// Cache current call to be re-invoked later if there is already a
// pending call.
if (leadCall) {
edgeCall = callData;
} else {
leadCall = callData;
if (matches) {
result = index;
}
return matches;
});
return result;
// Schedule new invocation.
setTimeout(timeoutCallback, delay);
}
}
return function () {
function _class() {
_classCallCheck(this, _class);
return proxy;
};
this.__entries__ = [];
}
// Define whether the MutationObserver is supported.
var mutationsSupported = typeof window.MutationObserver === 'function';
_class.prototype.get = function get(key) {
var index = getIndex(this.__entries__, key);
/**
* Controller class which handles updates of ResizeObserver instances.
* It decides when and for how long it's necessary to run updates by listening
* to the windows "resize" event along with a tracking of DOM mutations
* (nodes removal, changes of attributes, etc.).
*
* Transitions and animations are handled by running a repeatable update cycle
* until the dimensions of observed elements are changing.
*
* Continuous update cycle will be used automatically in case MutationObserver
* is not supported.
*/
var ResizeObserverController = function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @param {Boolean} [continuousUpdates = false] - Whether to use a continuous
* update cycle.
*/
function ResizeObserverController() {
var continuousUpdates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
classCallCheck(this, ResizeObserverController);
return this.__entries__[index][1];
};
// Continuous updates must be enabled if MutationObserver is not supported.
this._isCycleContinuous = !mutationsSupported || continuousUpdates;
_class.prototype.set = function set(key, value) {
var index = getIndex(this.__entries__, key);
// Indicates whether DOM listeners have been added.
this._listenersEnabled = false;
if (~index) {
this.__entries__[index][1] = value;
} else {
this.__entries__.push([key, value]);
}
};
// Keeps reference to the instance of MutationObserver.
this._mutationsObserver = null;
_class.prototype.delete = function _delete(key) {
var entries = this.__entries__,
index = getIndex(entries, key);
// A list of connected observers.
this._observers = [];
if (~index) {
entries.splice(index, 1);
}
};
// Make sure that the "refresh" method is invoked as a RAF callback and
// that it happens only once during the period of 30 milliseconds.
this.refresh = throttle(this.refresh.bind(this), 30, true);
_class.prototype.has = function has(key) {
return !!~getIndex(this.__entries__, key);
};
// Additionally postpone invocation of the continuous updates.
this._continuousUpdateHandler = throttle(this.refresh, 70);
}
return _class;
}();
}();
/**
* Adds observer to observers list.
*
* @param {ResizeObserver} observer - Observer to be added.
*/
ResizeObserverController.prototype.connect = function connect(observer) {
if (!this.isConnected(observer)) {
this._observers.push(observer);
}
var Map = function () {
if (hasNativeCollections) {
return window.Map;
// Add listeners if they haven't been added yet.
if (!this._listenersEnabled) {
this._addListeners();
}
};
return function (_WeakMap) {
_inherits(_class2, _WeakMap);
/**
* Removes observer from observers list.
*
* @param {ResizeObserver} observer - Observer to be removed.
*/
ResizeObserverController.prototype.disconnect = function disconnect(observer) {
var observers = this._observers;
var index = observers.indexOf(observer);
function _class2() {
_classCallCheck(this, _class2);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
return _possibleConstructorReturn(this, _WeakMap.apply(this, arguments));
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this._listenersEnabled) {
this._removeListeners();
}
};
_class2.prototype.clear = function clear() {
this.__entries__.splice(0, this.__entries__.length);
};
/**
* Tells whether the provided observer is connected to controller.
*
* @param {ResizeObserver} observer - Observer to be checked.
* @returns {Boolean}
*/
ResizeObserverController.prototype.isConnected = function isConnected(observer) {
return !!~this._observers.indexOf(observer);
};
_class2.prototype.entries = function entries() {
return this.__entries__.slice();
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes or if continuous updates are enabled.
*/
ResizeObserverController.prototype.refresh = function refresh() {
var hasChanges = this._updateObservers();
_class2.prototype.keys = function keys() {
return this.__entries__.map(function (entry) {
return entry[0];
});
};
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (hasChanges) {
this.refresh();
} else if (this._isCycleContinuous && this._listenersEnabled) {
// Automatically repeat cycle if it's necessary.
this._continuousUpdateHandler();
}
};
_class2.prototype.values = function values() {
return this.__entries__.map(function (entry) {
return entry[1];
});
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {Boolean} Returns "true" if any observer has detected changes in
* dimensions of its' elements.
*/
ResizeObserverController.prototype._updateObservers = function _updateObservers() {
var hasChanges = false;
_class2.prototype.forEach = function forEach(callback) {
var ctx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
for (var _iterator = this._observers, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
for (var _iterator = this.__entries__, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var observer = _ref;
var entry = _ref;
// Collect active observations.
observer.gatherActive();
callback.call(ctx, entry[1], entry[0]);
}
};
// Broadcast active observations and set the flag that changes have
// been detected.
if (observer.hasActive()) {
hasChanges = true;
_createClass(_class2, [{
key: 'size',
get: function get() {
return this.__entries__.length;
}
}]);
observer.broadcastActive();
}
}
return _class2;
}(WeakMap);
}();
return hasChanges;
};
exports.Map = Map;
exports.WeakMap = WeakMap;
}, function (module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _performance = __webpack_require__(4);
var _performance2 = _interopRequireDefault(_performance);
var _requestAnimationFrame = __webpack_require__(5);
var _requestAnimationFrame2 = _interopRequireDefault(_requestAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var mutationsSupported = typeof window.MutationObserver === 'function';
/**
* Creates a wrapper function which ensures only one
* invocation of provided callback during the specified delay.
* Initializes DOM listeners.
*
* @param {Function} callback - Function to be invoked.
* @param {Number} [delay = 0] - Delay after which to invoke callback.
* @returns {Function}
* @private
*/
function debounce(callback) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
ResizeObserverController.prototype._addListeners = function _addListeners() {
// Do nothing if listeners have been already added.
if (this._listenersEnabled) {
return;
}
var timeoutID = false;
window.addEventListener('resize', this.refresh);
return function () {
var _this = this;
// Subscribe to DOM mutations if it's possible as they may lead to
// changes in the dimensions of elements.
if (mutationsSupported) {
this._mutationsObserver = new MutationObserver(this.refresh);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
this._mutationsObserver.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
if (timeoutID !== false) {
clearTimeout(timeoutID);
}
this._listenersEnabled = true;
timeoutID = setTimeout(function () {
timeoutID = false;
// Don't wait for a possible event that might trigger the update of
// observers and manually initiate the update process.
if (this._isCycleContinuous) {
this.refresh();
}
};
/* eslint-disable no-invalid-this */
callback.apply(_this, args);
/* eslint-enable no-invalid-this */
}, delay);
};
}
/**
* Controller class which handles updates of ResizeObserver instances.
* It's meant to decide when and for how long it's necessary to run updates by listening to the windows
* "resize" event along with a tracking of DOM mutations (nodes removal, changes of attributes, etc.).
* Removes DOM listeners.
*
* Transitions and animations are handled by running a repeatable update cycle either until the dimensions
* of observed elements are changing or the timeout is reached (default timeout is 50 milliseconds).
* Timeout value can be manually increased if transitions have a delay.
*
* Continuous update cycle will be used automatically in case if MutationObserver is not supported.
* @private
*/
var ResizeObserverController = function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @param {Number} [idleTimeout = 0] - Idle timeout value.
* @param {Boolean} [continuousUpdates = false] - Whether to use a continuous update cycle.
*/
function ResizeObserverController() {
var idleTimeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
var continuousUpdates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
ResizeObserverController.prototype._removeListeners = function _removeListeners() {
// Do nothing if listeners have been already removed.
if (!this._listenersEnabled) {
return;
}
_classCallCheck(this, ResizeObserverController);
window.removeEventListener('resize', this.refresh);
this._idleTimeout = idleTimeout;
this._isCycleContinuous = !mutationsSupported || continuousUpdates;
this._cycleStartTime = 0;
// Indicates whether the update cycle is currently running.
this._isCycleActive = false;
// Indicates whether the update of observers is scheduled.
this._isUpdateScheduled = false;
// Indicates whether DOM listeners have been added.
this._listenersEnabled = false;
// Keeps reference to the instance of MutationObserver.
this._mutationsObserver = null;
// A list of connected observers.
this._observers = [];
// Fix value of "this" binding for the following methods.
this.runUpdates = this.runUpdates.bind(this);
this._onMutation = this._onMutation.bind(this);
this._resolveScheduled = this._resolveScheduled.bind(this);
// Function that will be invoked to re-run the
// update cycle if continuous cycles are enabled.
this._continuousCycleHandler = debounce(this.runUpdates, 100);
if (this._mutationsObserver) {
this._mutationsObserver.disconnect();
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserver} observer - Observer to be added.
*/
ResizeObserverController.prototype.connect = function connect(observer) {
if (!this.isConnected(observer)) {
this._observers.push(observer);
}
this._mutationsObserver = null;
this._listenersEnabled = false;
};
// Add listeners if they haven't been added yet.
if (!this._listenersEnabled) {
this._addListeners();
}
};
createClass(ResizeObserverController, [{
key: 'continuousUpdates',
/**
* Removes observer from observers list.
* Tells whether continuous updates are enabled.
*
* @param {ResizeObserver} observer - Observer to be removed.
*/
ResizeObserverController.prototype.disconnect = function disconnect(observer) {
var observers = this._observers,
index = observers.indexOf(observer);
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this._listenersEnabled) {
this._removeListeners();
}
};
/**
* Tells whether provided observer is connected to controller.
*
* @param {ResizeObserver} observer - Observer to be checked.
* @returns {Boolean}
*/
ResizeObserverController.prototype.isConnected = function isConnected(observer) {
return !!~this._observers.indexOf(observer);
};
get: function get() {
return this._isCycleContinuous;
},
/**
* Updates every observer from observers list and
* notifies them of queued entries.
* Enables or disables continuous updates.
*
* @private
* @returns {Boolean} Returns "true" if any observer
* has detected changes in dimensions of its' elements.
* @param {Boolean} useContinuous - Whether to enable or disable continuous
* updates. Note that the value won't be applied if MutationObserver is
* not supported.
*/
ResizeObserverController.prototype._updateObservers = function _updateObservers() {
var hasChanges = false;
set: function set(useContinuous) {
// The state of continuous updates should not be modified if
// MutationObserver is not supported.
if (!mutationsSupported) {
return;
}
for (var _iterator = this._observers, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
this._isCycleContinuous = useContinuous;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
// Immediately start the update cycle in order not to wait for a possible
// event that might initiate it.
if (this._listenersEnabled && useContinuous) {
this.refresh();
}
}
}]);
return ResizeObserverController;
}();
var observer = _ref;
// Placeholder of an empty content rectangle.
var emptyRect = createContentRect(0, 0, 0, 0);
observer.gatherActive();
/**
* Extracts computed styles of provided element.
*
* @param {Element} target
* @returns {CSSStyleDeclaration}
*/
function getStyles(target) {
return window.getComputedStyle(target);
}
if (observer.hasActive()) {
hasChanges = true;
/**
* Converts provided string defined in q form of '{{value}}px' to number.
*
* @param {String} value
* @returns {Number}
*/
function pixelsToNumber(value) {
return parseFloat(value) || 0;
}
observer.broadcastActive();
}
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...String} positions - Borders positions (top, right, ...)
* @returns {Number}
*/
function getBordersSize(styles) {
for (var _len = arguments.length, positions = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
positions[_key - 1] = arguments[_key];
}
return hasChanges;
};
return positions.reduce(function (size, pos) {
var value = styles['border-' + pos + '-width'];
/**
* Starts the update cycle which runs either
* until it detects changes in the dimensions of
* elements or the idle timeout is reached.
*/
ResizeObserverController.prototype.runUpdates = function runUpdates() {
this._cycleStartTime = (0, _performance2.default)();
this._isCycleActive = true;
return size + pixelsToNumber(value);
}, 0);
}
this.scheduleUpdate();
};
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var boxKeys = ['top', 'right', 'bottom', 'left'];
var paddings = {};
/**
* Schedules the update of observers.
*/
ResizeObserverController.prototype.scheduleUpdate = function scheduleUpdate() {
// Schedule new update if it
// hasn't been scheduled already.
if (!this._isUpdateScheduled) {
this._isUpdateScheduled = true;
for (var _iterator = boxKeys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
(0, _requestAnimationFrame2.default)(this._resolveScheduled);
}
};
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
/**
* Invokes the update of observers. It may re-run the
* cycle if changes in observers have been detected.
*
* @private
*/
ResizeObserverController.prototype._resolveScheduled = function _resolveScheduled() {
var hasChanges = this._updateObservers();
var key = _ref;
this._isUpdateScheduled = false;
var value = styles['padding-' + key];
// Do nothing if cycle wasn't started,
// i.e. a single update was requested.
if (!this._isCycleActive) {
return;
}
paddings[key] = pixelsToNumber(value);
}
// Re-start cycle so that we can catch future changes,
// e.g. when there are active CSS transitions.
if (hasChanges) {
this.runUpdates();
} else if (this._hasRemainingTime()) {
// Keep running updates if idle timeout isn't reached yet.
// This way we make it possible to adjust to delayed transitions.
this.scheduleUpdate();
} else {
// Finish update cycle.
this._endUpdates();
}
};
return paddings;
}
/**
* Tells whether the update cycle has time remaining.
*
* @private
* @returns {Boolean}
*/
ResizeObserverController.prototype._hasRemainingTime = function _hasRemainingTime() {
var timePassed = (0, _performance2.default)() - this._cycleStartTime;
/**
* Creates content rectangle based on the provided dimensions
* and the top/left positions.
*
* @param {Number} width - Width of rectangle.
* @param {Number} height - Height of rectangle.
* @param {Number} top - Top position.
* @param {Number} left - Left position.
* @returns {ClientRect}
*/
function createContentRect(width, height, top, left) {
return {
width: width, height: height, top: top,
right: width + left,
bottom: height + top,
left: left
};
}
return this._idleTimeout - timePassed > 0;
};
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGElement} target - Element whose content
* rectangle needs to be calculated.
* @returns {ClientRect}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
/**
* Callback which is invoked when update cycle
* is finished. It may start a new cycle if continuous
* updates are enabled.
*
* @private
*/
ResizeObserverController.prototype._endUpdates = function _endUpdates() {
this._isCycleActive = false;
return createContentRect(bbox.width, bbox.height, 0, 0);
}
// Automatically repeat cycle if it's necessary.
if (this._isCycleContinuous && this._listenersEnabled) {
this._continuousCycleHandler();
}
};
/**
* Calculates content rectangle of a root element.
*
* @returns {ClientRect}
*/
function getDocElementRect() {
// Neither scroll[Width/Height] nor offset[Width/Height] can be used to
// define content dimensions as they give inconsistent results across
// different browsers. E.g. in the Internet Explorer 10 and lower value of
// these properties can't be less than the client dimensions (same thing
// with the "getBoundingClientRect" method). And Firefox has the same
// behavior with its "scroll" properties.
var styles = getStyles(document.documentElement);
/**
* Initializes DOM listeners.
*
* @private
*/
ResizeObserverController.prototype._addListeners = function _addListeners() {
// Do nothing if listeners have been already added.
if (this._listenersEnabled) {
return;
}
var width = pixelsToNumber(styles.width);
var height = pixelsToNumber(styles.height);
this._listenersEnabled = true;
return createContentRect(width, height, 0, 0);
}
// Repeatable cycle is used here because the resize event may
// lead to continuous changes, e.g. when width or height of an element
// are controlled by CSS transitions.
window.addEventListener('resize', this.runUpdates);
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element whose content
* rectangle needs to be calculated.
* @returns {ClientRect}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth;
var clientHeight = target.clientHeight;
// Subscribe to DOM mutations if it's possible as they may lead to
// changes in the dimensions of elements.
if (mutationsSupported) {
this._mutationsObserver = new MutationObserver(this._onMutation);
// By this condition we can catch all non-replaced inline, hidden and detached
// elements. Though elements with width & height properties less than 0.5 will
// be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuerys' ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
this._mutationsObserver.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
var styles = getStyles(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Don't wait for a possible event that might trigger the
// update of observers and manually initiate the update cycle.
if (this._isCycleContinuous) {
this.runUpdates();
}
};
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize getBoundingClientRect if only its' data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = pixelsToNumber(styles.width),
height = pixelsToNumber(styles.height);
/**
* Removes DOM listeners.
*
* @private
*/
ResizeObserverController.prototype._removeListeners = function _removeListeners() {
// Do nothing if listeners have been already removed.
if (!this._listenersEnabled) {
return;
}
// Width & height include paddings and borders
// when 'border-box' box model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
window.removeEventListener('resize', this.runUpdates);
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
if (this._mutationsObserver) {
this._mutationsObserver.disconnect();
}
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll bars
// are the only difference between rounded dimensions + paddings and "client"
// properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
this._mutationsObserver = null;
this._listenersEnabled = false;
};
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives the
// client width of 315px and for the width of 314.7px it may give 314px.
// And it doesn't happen all the time. Such difference needs to be ignored.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
/**
* DOM mutations handler.
*
* @private
* @param {Array<MutationRecord>} entries - An array of mutation records.
*/
ResizeObserverController.prototype._onMutation = function _onMutation(entries) {
// Check if at least one entry
// contains attributes changes.
var attrsChanged = entries.some(function (entry) {
return entry.type === 'attributes';
});
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
// It's expected that animations may start only
// after some attribute changes its' value.
attrsChanged ? this.runUpdates() : this.scheduleUpdate();
};
return createContentRect(width, height, paddings.top, paddings.left);
}
_createClass(ResizeObserverController, [{
/**
* Checks whether provided element is an instance of SVGElement.
*
* @param {Element} target - Element to be checked.
* @returns {Boolean}
*/
function isSVGElement(target) {
return target instanceof window.SVGElement;
}
/**
* Returns current idle timeout value.
*
* @returns {Number}
*/
key: 'idleTimeout',
get: function get() {
return this._idleTimeout;
},
/**
* Checks whether provided element is a document element (root element of a document).
*
* @param {Element} target - Element to be checked.
* @returns {Boolean}
*/
function isDocumentElement(target) {
return target === document.documentElement;
}
/**
* Sets up new idle timeout value.
*
* @param {Number} value - New timeout value.
*/
set: function set(value) {
this._idleTimeout = value;
}
}, {
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element whose content rectangle
* needs to be calculated.
* @returns {ClientRect}
*/
function getContentRect(target) {
if (isSVGElement(target)) {
return getSVGContentRect(target);
}
/**
* Tells whether continuous updates are enabled.
*
* @returns {Boolean}
*/
key: 'continuousUpdates',
get: function get() {
return this._isCycleContinuous;
},
if (isDocumentElement(target)) {
return getDocElementRect();
}
/**
* Enables or disables continuous updates.
*
* @param {Boolean} useContinuous - Whether to enable or disable
* continuous updates. Note that the value won't be applied
* if MutationObserver is not supported.
*/
set: function set(useContinuous) {
// The state of continuous updates should not be modified
// if MutationObserver is not supported.
if (!mutationsSupported) {
return;
}
return getHTMLElementContentRect(target);
}
this._isCycleContinuous = useContinuous;
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of its' changes.
*/
var ResizeObservation = function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
classCallCheck(this, ResizeObservation);
// Immediately start the update cycle in order not to
// wait for a possible event that will initiate it.
if (this._listenersEnabled && useContinuous) {
this.runUpdates();
}
}
}]);
this.target = target;
return ResizeObserverController;
}();
// Keeps reference to the last observed content rectangle.
this._contentRect = emptyRect;
exports.default = ResizeObserverController;
module.exports = exports['default'];
}, function (module, exports) {
'use strict';
// Broadcasted width of content rectangle.
this.broadcastWidth = 0;
exports.__esModule = true;
// Broadcasted height of content rectangle.
this.broadcastHeight = 0;
}
/**
* A shim for performance.now method which falls back
* to Date.now if the first one is not supported.
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {Timestamp}
* @returns {ClientRect} Last observed content rectangle.
*/
exports.default = function () {
if (window.performance && typeof window.performance.now === 'function') {
return function () {
return window.performance.now();
};
}
ResizeObservation.prototype.broadcastRect = function broadcastRect() {
var rect = this._contentRect;
return function () {
return Date.now();
};
}();
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
module.exports = exports['default'];
}, function (module, exports) {
'use strict';
return rect;
};
exports.__esModule = true;
/**
* A shim for requestAnimationFrame which falls back
* to setTimeout if the first one is not supported.
* Updates content rectangle and tells whether its' width or height properties
* have changed since the last broadcast.
*
* @returns {Number} Requests' identifier.
* @returns {Boolean}
*/
exports.default = function () {
if (window.requestAnimationFrame && typeof window.requestAnimationFrame === 'function') {
return window.requestAnimationFrame;
}
ResizeObservation.prototype.isActive = function isActive() {
var rect = getContentRect(this.target);
return function (callback) {
return setTimeout(function () {
return callback(Date.now());
}, 1000 / 60);
};
}();
this._contentRect = rect;
module.exports = exports['default'];
}, function (module, exports, __webpack_require__) {
'use strict';
return rect.width !== this.broadcastWidth || rect.height !== this.broadcastHeight;
};
exports.__esModule = true;
return ResizeObservation;
}();
var _es6Collections = __webpack_require__(2);
/**
* Defines properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @param {Object} [descr = {}] - Properties descriptor.
* @returns {Object} Target object.
*/
function defineProperties(target, props) {
var descr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var _ResizeObservation = __webpack_require__(7);
var descriptor = {
configurable: descr.configurable || false,
writable: descr.writable || false,
enumerable: descr.enumerable || false
};
var _ResizeObservation2 = _interopRequireDefault(_ResizeObservation);
for (var _iterator = Object.keys(props), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
var _ResizeObserverEntry = __webpack_require__(8);
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var _ResizeObserverEntry2 = _interopRequireDefault(_ResizeObserverEntry);
var key = _ref;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
descriptor.value = props[key];
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
Object.defineProperty(target, key, descriptor);
}
var ResizeObserver = function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {Function} callback - Callback function which will be invoked
* when one of the observed elements changes its' content rectangle.
* @param {ResizeObsreverController} controller - Controller instance
* which is responsible for the updates of observer.
* @param {ResizeObserver} publicObserver - Reference
* to the public ResizeObserver instance which will be passed
* to callback function.
*/
function ResizeObserver(callback, controller, publicObserver) {
_classCallCheck(this, ResizeObserver);
return target;
}
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
var ResizeObserverEntry =
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {ClientRect} rectData - Data of the elements' content rectangle.
*/
function ResizeObserverEntry(target, rectData) {
classCallCheck(this, ResizeObserverEntry);
// Reference to the callback function.
this._callback = callback;
// Content rectangle needs to be an instance of ClientRect if it's
// available.
var rectInterface = window.ClientRect || Object;
var contentRect = Object.create(rectInterface.prototype);
// Registry of ResizeObservation instances.
this._targets = new _es6Collections.Map();
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineProperties(contentRect, rectData, { configurable: true });
// Collection of resize observations that have detected
// changes in dimensions of elements.
this._activeTargets = [];
defineProperties(this, {
target: target, contentRect: contentRect
}, { configurable: true });
};
// Reference to the associated ResizeObserverController.
this._controller = controller;
var ResizeObserver$2 = function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {Function} callback - Callback function that is invoked when one
* of the observed elements changes it's content rectangle.
* @param {ResizeObsreverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} publicObserver - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserver(callback, controller, publicObserver) {
classCallCheck(this, ResizeObserver);
// Public ResizeObserver instance which will be passed
// to callback function.
this._publicObserver = publicObserver;
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
*/
ResizeObserver.prototype.observe = function observe(target) {
// Throw the same errors as in a native implementation.
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Reference to the callback function.
this._callback = callback;
if (!(target instanceof Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
// Registry of ResizeObservation instances.
this._targets = new Map();
var targets = this._targets;
// Collection of resize observations that have detected changes in
// dimensions of elements.
this._activeTargets = [];
// Do nothing if element is already being observed.
if (targets.has(target)) {
return;
}
// Reference to the associated ResizeObserverController.
this._controller = controller;
targets.set(target, new _ResizeObservation2.default(target));
// Add observer to controller if
// it hasn't been connected yet.
if (!this._controller.isConnected(this)) {
this._controller.connect(this);
}
// Update observations.
this._controller.runUpdates();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
*/
ResizeObserver.prototype.unobserve = function unobserve(target) {
// Throw the same errors as in a native implementation.
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
if (!(target instanceof Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var targets = this._targets;
// Do nothing if element is not being observed.
if (!targets.has(target)) {
return;
}
// Remove element and associated with
// it ResizeObsrvation instance from registry.
targets.delete(target);
// Set back the initial state if
// there is nothing to observe.
if (!targets.size) {
this.disconnect();
}
};
/**
* Stops observing all elements and
* clears the observations list.
*/
ResizeObserver.prototype.disconnect = function disconnect() {
this.clearActive();
this._targets.clear();
this._controller.disconnect(this);
};
/**
* Invokes initial callback function with a list
* of ResizeObserverEntry instances collected from
* active resize observations.
*/
ResizeObserver.prototype.broadcastActive = function broadcastActive() {
// Do nothing if observer doesn't
// have active observations.
if (!this.hasActive()) {
return;
}
var publicObserver = this._publicObserver;
// Create ResizeObserverEntry instance
// for every active observation.
var entries = this._activeTargets.map(function (observation) {
return new _ResizeObserverEntry2.default(observation.target, observation.broadcastRect());
});
this.clearActive();
this._callback.call(publicObserver, entries, publicObserver);
};
/**
* Clears the collection of pending/active observations.
*/
ResizeObserver.prototype.clearActive = function clearActive() {
this._activeTargets.splice(0);
};
/**
* Tells whether the observer has
* pending observations.
*
* @returns {Boolean}
*/
ResizeObserver.prototype.hasActive = function hasActive() {
return !!this._activeTargets.length;
};
/**
* Clears an array of previously collected active observations
* and collects observation instances which associated element
* has changed its' content rectangle.
*/
ResizeObserver.prototype.gatherActive = function gatherActive() {
this.clearActive();
var activeTargets = this._activeTargets;
this._targets.forEach(function (observation) {
if (observation.isActive()) {
activeTargets.push(observation);
}
});
};
return ResizeObserver;
}();
exports.default = ResizeObserver;
module.exports = exports['default'];
}, function (module, exports) {
'use strict';
exports.__esModule = true;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
// Placeholder of an empty content rectangle.
var emptyRect = createContentRect(0, 0, 0, 0);
/**
* Extracts computed styles of provided element.
*
* @param {Element} target
* @returns {CSSStyleDeclaration}
*/
function getStyles(target) {
return window.getComputedStyle(target);
// Public ResizeObserver instance which will be passed to callback function.
this._publicObserver = publicObserver;
}
/**
* Converts provided string defined
* in q form of '{{value}}px' to number.
* Starts observing provided element.
*
* @param {String} value
* @returns {Number}
* @param {Element} target - Element to be observed.
*/
function pixelsToNumber(value) {
return parseFloat(value) || 0;
}
ResizeObserver.prototype.observe = function observe(target) {
// Throw the same errors as in a native implementation.
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...String} positions - Borders positions (top, right, ...)
* @returns {Number}
*/
function getBordersSize(styles) {
for (var _len = arguments.length, positions = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
positions[_key - 1] = arguments[_key];
if (!(target instanceof Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
return positions.reduce(function (size, pos) {
var value = styles['border-' + pos + '-width'];
var targets = this._targets;
return size + pixelsToNumber(value);
}, 0);
}
// Do nothing if element is already being observed.
if (targets.has(target)) {
return;
}
// Register new ResizeObservation instance.
targets.set(target, new ResizeObservation(target));
// Add observer to controller if it hasn't been connected yet.
if (!this._controller.isConnected(this)) {
this._controller.connect(this);
}
// Update observations.
this._controller.refresh();
};
/**
* Extracts paddings sizes from provided styles.
* Stops observing provided element.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
* @param {Element} target - Element to stop observing.
*/
function getPaddings(styles) {
var boxKeys = ['top', 'right', 'bottom', 'left'];
var paddings = {};
ResizeObserver.prototype.unobserve = function unobserve(target) {
// Throw the same errors as in a native implementation.
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
for (var _iterator = boxKeys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (!(target instanceof Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var targets = this._targets;
var key = _ref;
// Do nothing if element is not being observed.
if (!targets.has(target)) {
return;
}
var value = styles['padding-' + key];
// Remove element and associated with it ResizeObsrvation instance from
// registry.
targets.delete(target);
paddings[key] = pixelsToNumber(value);
// Set back the initial state if there is nothing to observe.
if (!targets.size) {
this.disconnect();
}
};
return paddings;
}
/**
* Creates content rectangle based on the provided dimensions
* and the top/left positions.
*
* @param {Number} width - Width of rectangle.
* @param {Number} height - Height of rectangle.
* @param {Number} top - Top position.
* @param {Number} left - Left position.
* @returns {ClientRect}
* Stops observing all elements and clears the observations list.
*/
function createContentRect(width, height, top, left) {
return {
width: width, height: height, top: top,
right: width + left,
bottom: height + top,
left: left
};
}
ResizeObserver.prototype.disconnect = function disconnect() {
this.clearActive();
this._targets.clear();
this._controller.disconnect(this);
};
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGElement} target - Element whose content
* rectangle needs to be calculated.
* @returns {ClientRect}
* Clears an array of previously collected active observations and collects
* observation instances which associated element has changed its' content
* rectangle.
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
ResizeObserver.prototype.gatherActive = function gatherActive() {
this.clearActive();
return createContentRect(bbox.width, bbox.height, 0, 0);
}
var activeTargets = this._activeTargets;
/**
* Calculates content rectangle of a root element.
*
* @returns {ClientRect}
*/
function getDocElementRect() {
// Neither scroll[Width/Height] nor offset[Width/Height] can be used to define
// content dimensions as they give inconsistent results across different browsers.
// E.g. in the Internet Explorer 10 and lower value of these properties can't be
// less than the client dimensions (same thing with the "getBoundingClientRect" method).
// And Firefox has the same behavior with its "scroll" properties.
var styles = getStyles(document.documentElement);
this._targets.forEach(function (observation) {
if (observation.isActive()) {
activeTargets.push(observation);
}
});
};
var width = pixelsToNumber(styles.width);
var height = pixelsToNumber(styles.height);
return createContentRect(width, height, 0, 0);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element whose content
* rectangle needs to be calculated.
* @returns {ClientRect}
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth;
var clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and detached
// elements. Though elements with width & height properties less than 0.5 will
// be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuerys' ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
ResizeObserver.prototype.broadcastActive = function broadcastActive() {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var styles = getStyles(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
var observer = this._publicObserver;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize getBoundingClientRect if only its' data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = pixelsToNumber(styles.width),
height = pixelsToNumber(styles.height);
// Create ResizeObserverEntry instance for every active observation.
var entries = this._activeTargets.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
// Width & height include paddings and borders
// when 'border-box' box model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client" properties
// then it's either IE, and thus we don't need to subtract anything, or
// an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
this.clearActive();
this._callback.call(observer, entries, observer);
};
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll bars
// are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element whose content width is 314.2px it sometimes
// gives the client width of 315px and for the width of 314.7px
// it may give 314px. And it doesn't happen all the time.
// This kind of difference needs to be ignored.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
return createContentRect(width, height, paddings.top, paddings.left);
}
/**
* Checks whether provided element
* is an instance of SVGElement.
*
* @param {Element} target - Element to be checked.
* @returns {Boolean}
* Clears the collection of pending/active observations.
*/
function isSVGElement(target) {
return target instanceof window.SVGElement;
}
ResizeObserver.prototype.clearActive = function clearActive() {
this._activeTargets.splice(0);
};
/**
* Checks whether provided element is
* a document element (root element of a document).
* Tells whether observer has pending observations.
*
* @param {Element} target - Element to be checked.
* @returns {Boolean}
*/
function isDocumentElement(target) {
return target === document.documentElement;
}
ResizeObserver.prototype.hasActive = function hasActive() {
return !!this._activeTargets.length;
};
/**
* Calculates an appropriate content rectangle
* for provided html or svg element.
*
* @param {Element} target - Element whose content rectangle
* needs to be calculated.
* @returns {ClientRect}
*/
function getContentRect(target) {
if (isSVGElement(target)) {
return getSVGContentRect(target);
}
return ResizeObserver;
}();
if (isDocumentElement(target)) {
return getDocElementRect();
}
// Controller that will be assigned to all instances of ResizeObserver.
var controller = new ResizeObserverController();
return getHTMLElementContentRect(target);
}
// Registry of the internal observers.
var observers = new WeakMap();
/**
* ResizeObservers' "Proxy" class which is meant to hide private properties and
* methods from public instances.
*
* Additionally implements the "continuousUpdates" static property accessor to
* give control over the behavior of the ResizeObserverController instance.
* Changes made to this property affect all future and existing observers.
*/
var ResizeObserver = function () {
/**
* Class that is responsible for computations of the
* content rectangle of provided DOM element and
* for keeping track of its' changes.
* Creates a new instance of ResizeObserver.
*
* @param {Function} callback - Callback that is invoked when dimensions of
* one of the observed elements change.
*/
var ResizeObservation = function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element whose content
* rectangle needs to be observed.
*/
function ResizeObservation(target) {
_classCallCheck(this, ResizeObservation);
function ResizeObserver(callback) {
classCallCheck(this, ResizeObserver);
this.target = target;
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Keeps reference to the last observed content rectangle.
this._contentRect = emptyRect;
// Create a new instance of the internal ResizeObserver.
var observer = new ResizeObserver$2(callback, controller, this);
// Broadcasted width of content rectangle.
this.broadcastWidth = 0;
// Register internal observer.
observers.set(this, observer);
}
// Broadcasted height of content rectangle.
this.broadcastHeight = 0;
}
createClass(ResizeObserver, null, [{
key: 'continuousUpdates',
/**
* Updates 'broadcastWidth' and 'broadcastHeight'
* properties with a data from the corresponding
* properties of the last observed content rectangle.
* Tells whether continuous updates are enabled.
*
* @returns {ClientRect} Last observed content rectangle.
* @returns {Boolean}
*/
ResizeObservation.prototype.broadcastRect = function broadcastRect() {
var rect = this._contentRect;
get: function get() {
return controller.continuousUpdates;
},
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
/**
* Updates content rectangle and tells whether its'
* width or height properties have changed since
* the last broadcast.
* Enables or disables continuous updates.
*
* @returns {Boolean}
* @param {Boolean} value - Whether to enable or disable continuous updates.
*/
ResizeObservation.prototype.isActive = function isActive() {
var rect = getContentRect(this.target);
this._contentRect = rect;
return rect.width !== this.broadcastWidth || rect.height !== this.broadcastHeight;
};
return ResizeObservation;
}();
exports.default = ResizeObservation;
module.exports = exports['default'];
}, function (module, exports) {
'use strict';
exports.__esModule = true;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Defines properties for the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @param {Object} [descr = {}] - Descriptor of the properties.
* @returns {Object} Target object.
*/
function defineProperties(target, props) {
var descr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var descriptor = {
configurable: descr.configurable || false,
writable: descr.writable || false,
enumerable: descr.enumerable || false
};
for (var _iterator = Object.keys(props), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
set: function set(value) {
if (typeof value !== 'boolean') {
throw new TypeError('type of "continuousUpdates" value must be boolean.');
}
var key = _ref;
descriptor.value = props[key];
Object.defineProperty(target, key, descriptor);
controller.continuousUpdates = value;
}
}]);
return ResizeObserver;
}();
return target;
}
// Expose public methods of ResizeObserver.
['observe', 'unobserve', 'disconnect'].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _observers$get;
var ResizeObserverEntry =
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {ClientRect} rectData - Data of the elements' content rectangle.
*/
function ResizeObserverEntry(target, rectData) {
_classCallCheck(this, ResizeObserverEntry);
return (_observers$get = observers.get(this))[method].apply(_observers$get, arguments);
};
});
// Content rectangle needs to be an instance
// of ClientRect if it's available.
var rectInterface = window.ClientRect ? ClientRect.prototype : Object.prototype;
if (typeof window.ResizeObserver !== 'function') {
// ResizeObserver host property is not enumerable
// in the native implementation.
Object.defineProperty(window, 'ResizeObserver', {
value: ResizeObserver,
writable: true,
configurable: true
});
}
var contentRect = Object.create(rectInterface);
// Still export the constructor as for me it seems
// awkward when a module doesn't export anything.
var index_global = window.ResizeObserver;
// According to the specification following properties
// are not writable and are also not enumerable in the
// native implementation.
defineProperties(contentRect, {
top: rectData.top,
right: rectData.right,
bottom: rectData.bottom,
left: rectData.left,
width: rectData.width,
height: rectData.height
}, { configurable: true });
defineProperties(this, {
target: target, contentRect: contentRect
}, { configurable: true });
};
exports.default = ResizeObserverEntry;
module.exports = exports["default"];
}])});
return index_global;
})));

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

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ResizeObserver=e():t.ResizeObserver=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return t[r].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var i=n(1),o=r(i);"function"!=typeof window.ResizeObserver&&Object.defineProperty(window,"ResizeObserver",{value:o["default"],writable:!0,configurable:!0}),e["default"]=window.ResizeObserver,t.exports=e["default"]},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}e.__esModule=!0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),u=n(2),a=n(3),c=r(a),f=n(6),l=r(f),h=new c["default"],d=new u.WeakMap,ResizeObserver=function(){function ResizeObserver(t){if(i(this,ResizeObserver),!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var e=new l["default"](t,h,this);d.set(this,e)}return s(ResizeObserver,null,[{key:"idleTimeout",get:function(){return h.idleTimeout},set:function(t){if("number"!=typeof t)throw new TypeError('type of "idleTimeout" value must be number.');if(("undefined"==typeof t?"undefined":o(t))<0)throw new TypeError('"idleTimeout" value must be greater than 0.');h.idleTimeout=t}},{key:"continuousUpdates",get:function(){return h.continuousUpdates},set:function(t){if("boolean"!=typeof t)throw new TypeError('type of "continuousUpdates" value must be boolean.');h.continuousUpdates=t}}]),ResizeObserver}();["observe","unobserve","disconnect"].forEach(function(t){ResizeObserver.prototype[t]=function(){var e;return(e=d.get(this))[t].apply(e,arguments)}}),e["default"]=ResizeObserver,t.exports=e["default"]},function(t,e){"use strict";function n(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}e.__esModule=!0;var o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),s="function"==typeof window.WeakMap&&"function"==typeof window.Map,u=function(){function t(t,e){var n=-1;return t.some(function(t,r){var i=t[0]===e;return i&&(n=r),i}),n}return s?window.WeakMap:function(){function e(){i(this,e),this.__entries__=[]}return e.prototype.get=function(e){var n=t(this.__entries__,e);return this.__entries__[n][1]},e.prototype.set=function(e,n){var r=t(this.__entries__,e);~r?this.__entries__[r][1]=n:this.__entries__.push([e,n])},e.prototype["delete"]=function(e){var n=this.__entries__,r=t(n,e);~r&&n.splice(r,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e}()}(),a=function(){return s?window.Map:function(t){function e(){return i(this,e),n(this,t.apply(this,arguments))}return r(e,t),e.prototype.clear=function(){this.__entries__.splice(0,this.__entries__.length)},e.prototype.entries=function(){return this.__entries__.slice()},e.prototype.keys=function(){return this.__entries__.map(function(t){return t[0]})},e.prototype.values=function(){return this.__entries__.map(function(t){return t[1]})},e.prototype.forEach=function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=this.__entries__,r=Array.isArray(n),i=0,n=r?n:n[Symbol.iterator]();;){var o;if(r){if(i>=n.length)break;o=n[i++]}else{if(i=n.next(),i.done)break;o=i.value}var s=o;t.call(e,s[1],s[0])}},o(e,[{key:"size",get:function(){return this.__entries__.length}}]),e}(u)}();e.Map=a,e.WeakMap=u},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=!1;return function(){for(var r=this,i=arguments.length,o=Array(i),s=0;s<i;s++)o[s]=arguments[s];n!==!1&&clearTimeout(n),n=setTimeout(function(){n=!1,t.apply(r,o)},e)}}e.__esModule=!0;var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),u=n(4),a=r(u),c=n(5),f=r(c),l="function"==typeof window.MutationObserver,h=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:50,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];i(this,t),this._idleTimeout=e,this._isCycleContinuous=!l||n,this._cycleStartTime=0,this._isCycleActive=!1,this._isUpdateScheduled=!1,this._listenersEnabled=!1,this._mutationsObserver=null,this._observers=[],this.runUpdates=this.runUpdates.bind(this),this._onMutation=this._onMutation.bind(this),this._resolveScheduled=this._resolveScheduled.bind(this),this._continuousCycleHandler=o(this.runUpdates,100)}return t.prototype.connect=function(t){this.isConnected(t)||this._observers.push(t),this._listenersEnabled||this._addListeners()},t.prototype.disconnect=function(t){var e=this._observers,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this._listenersEnabled&&this._removeListeners()},t.prototype.isConnected=function(t){return!!~this._observers.indexOf(t)},t.prototype._updateObservers=function(){for(var t=!1,e=this._observers,n=Array.isArray(e),r=0,e=n?e:e[Symbol.iterator]();;){var i;if(n){if(r>=e.length)break;i=e[r++]}else{if(r=e.next(),r.done)break;i=r.value}var o=i;o.gatherActive(),o.hasActive()&&(t=!0,o.broadcastActive())}return t},t.prototype.runUpdates=function(){this._cycleStartTime=(0,a["default"])(),this._isCycleActive=!0,this.scheduleUpdate()},t.prototype.scheduleUpdate=function(){this._isUpdateScheduled||(this._isUpdateScheduled=!0,(0,f["default"])(this._resolveScheduled))},t.prototype._resolveScheduled=function(){var t=this._updateObservers();this._isUpdateScheduled=!1,this._isCycleActive&&(t?this.runUpdates():this._hasRemainingTime()?this.scheduleUpdate():this._endUpdates())},t.prototype._hasRemainingTime=function(){var t=(0,a["default"])()-this._cycleStartTime;return this._idleTimeout-t>0},t.prototype._endUpdates=function(){this._isCycleActive=!1,this._isCycleContinuous&&this._listenersEnabled&&this._continuousCycleHandler()},t.prototype._addListeners=function(){this._listenersEnabled||(this._listenersEnabled=!0,window.addEventListener("resize",this.runUpdates),l&&(this._mutationsObserver=new MutationObserver(this._onMutation),this._mutationsObserver.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._isCycleContinuous&&this.runUpdates())},t.prototype._removeListeners=function(){this._listenersEnabled&&(window.removeEventListener("resize",this.runUpdates),this._mutationsObserver&&this._mutationsObserver.disconnect(),this._mutationsObserver=null,this._listenersEnabled=!1)},t.prototype._onMutation=function(t){var e=t.some(function(t){return"attributes"===t.type});e?this.runUpdates():this.scheduleUpdate()},s(t,[{key:"idleTimeout",get:function(){return this._idleTimeout},set:function(t){this._idleTimeout=t}},{key:"continuousUpdates",get:function(){return this._isCycleContinuous},set:function(t){l&&(this._isCycleContinuous=t,this._listenersEnabled&&t&&this.runUpdates())}}]),t}();e["default"]=h,t.exports=e["default"]},function(t,e){"use strict";e.__esModule=!0,e["default"]=function(){return window.performance&&"function"==typeof window.performance.now?function(){return window.performance.now()}:function(){return Date.now()}}(),t.exports=e["default"]},function(t,e){"use strict";e.__esModule=!0,e["default"]=function(){return window.requestAnimationFrame&&"function"==typeof window.requestAnimationFrame?window.requestAnimationFrame:function(t){return setTimeout(function(){return t(Date.now())},1e3/60)}}(),t.exports=e["default"]},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}e.__esModule=!0;var o=n(2),s=n(7),u=r(s),a=n(8),c=r(a),ResizeObserver=function(){function ResizeObserver(t,e,n){if(i(this,ResizeObserver),"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this._callback=t,this._targets=new o.Map,this._activeTargets=[],this._controller=e,this._publicObserver=n}return ResizeObserver.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if(!(t instanceof Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this._targets;e.has(t)||(e.set(t,new u["default"](t)),this._controller.isConnected(this)||this._controller.connect(this),this._controller.runUpdates())},ResizeObserver.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if(!(t instanceof Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this._targets;e.has(t)&&(e["delete"](t),e.size||this.disconnect())},ResizeObserver.prototype.disconnect=function(){this.clearActive(),this._targets.clear(),this._controller.disconnect(this)},ResizeObserver.prototype.broadcastActive=function(){if(this.hasActive()){var t=this._publicObserver,e=this._activeTargets.map(function(t){return new c["default"](t.target,t.broadcastRect())});this.clearActive(),this._callback.call(t,e,t)}},ResizeObserver.prototype.clearActive=function(){this._activeTargets.splice(0)},ResizeObserver.prototype.hasActive=function(){return!!this._activeTargets.length},ResizeObserver.prototype.gatherActive=function(){this.clearActive();var t=this._activeTargets;this._targets.forEach(function(e){e.isActive()&&t.push(e)})},ResizeObserver}();e["default"]=ResizeObserver,t.exports=e["default"]},function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t){return window.getComputedStyle(t)}function i(t){return parseFloat(t)||0}function o(t){for(var e=arguments.length,n=Array(e>1?e-1:0),r=1;r<e;r++)n[r-1]=arguments[r];return n.reduce(function(e,n){var r=t["border-"+n+"-width"];return e+i(r)},0)}function s(t){for(var e=["top","right","bottom","left"],n={},r=e,o=Array.isArray(r),s=0,r=o?r:r[Symbol.iterator]();;){var u;if(o){if(s>=r.length)break;u=r[s++]}else{if(s=r.next(),s.done)break;u=s.value}var a=u,c=t["padding-"+a];n[a]=i(c)}return n}function u(t,e,n,r){return{width:t,height:e,top:n,right:t+r,bottom:e+n,left:r}}function a(t){var e=t.getBBox();return u(e.width,e.height,0,0)}function c(){var t=r(document.documentElement),e=i(t.width),n=i(t.height);return u(e,n,0,0)}function f(t){var e=t.clientWidth,n=t.clientHeight;if(!e&&!n)return p;var a=r(t),c=s(a),f=c.left+c.right,l=c.top+c.bottom,h=i(a.width),d=i(a.height);"border-box"===a.boxSizing&&(Math.round(h+f)!==e&&(h-=o(a,"left","right")+f),Math.round(d+l)!==n&&(d-=o(a,"top","bottom")+l));var _=Math.round(h+f)-e,y=Math.round(d+l)-n;return 1!==Math.abs(_)&&(h-=_),1!==Math.abs(y)&&(d-=y),u(h,d,c.top,c.left)}function l(t){return t instanceof window.SVGElement}function h(t){return t===document.documentElement}function d(t){return l(t)?a(t):h(t)?c():f(t)}e.__esModule=!0;var p=u(0,0,0,0),_=function(){function t(e){n(this,t),this.target=e,this._contentRect=p,this.broadcastWidth=0,this.broadcastHeight=0}return t.prototype.broadcastRect=function(){var t=this._contentRect;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t.prototype.isActive=function(){var t=d(this.target);return this._contentRect=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t}();e["default"]=_,t.exports=e["default"]},function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r={configurable:n.configurable||!1,writable:n.writable||!1,enumerable:n.enumerable||!1},i=Object.keys(e),o=Array.isArray(i),s=0,i=o?i:i[Symbol.iterator]();;){var u;if(o){if(s>=i.length)break;u=i[s++]}else{if(s=i.next(),s.done)break;u=s.value}var a=u;r.value=e[a],Object.defineProperty(t,a,r)}return t}e.__esModule=!0;var ResizeObserverEntry=function ResizeObserverEntry(t,e){n(this,ResizeObserverEntry);var i=window.ClientRect?ClientRect.prototype:Object.prototype,o=Object.create(i);r(o,{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.width,height:e.height},{configurable:!0}),r(this,{target:t,contentRect:o},{configurable:!0})};e["default"]=ResizeObserverEntry,t.exports=e["default"]}])});
//# sourceMappingURL=ResizeObserver.global.min.js.map
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.ResizeObserver=e()}(this,function(){"use strict";function t(t){return window.getComputedStyle(t)}function e(t){return parseFloat(t)||0}function n(t){for(var n=arguments.length,r=Array(n>1?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];return r.reduce(function(n,r){var i=t["border-"+r+"-width"];return n+e(i)},0)}function r(t){for(var n=["top","right","bottom","left"],r={},i=n,o=Array.isArray(i),s=0,i=o?i:i[Symbol.iterator]();;){var a;if(o){if(s>=i.length)break;a=i[s++]}else{if(s=i.next(),s.done)break;a=s.value}var u=a,c=t["padding-"+u];r[u]=e(c)}return r}function i(t,e,n,r){return{width:t,height:e,top:n,right:t+r,bottom:e+n,left:r}}function o(t){var e=t.getBBox();return i(e.width,e.height,0,0)}function s(){var n=t(document.documentElement),r=e(n.width),o=e(n.height);return i(r,o,0,0)}function a(o){var s=o.clientWidth,a=o.clientHeight;if(!s&&!a)return O;var u=t(o),c=r(u),h=c.left+c.right,f=c.top+c.bottom,l=e(u.width),p=e(u.height);"border-box"===u.boxSizing&&(Math.round(l+h)!==s&&(l-=n(u,"left","right")+h),Math.round(p+f)!==a&&(p-=n(u,"top","bottom")+f));var d=Math.round(l+h)-s,_=Math.round(p+f)-a;return 1!==Math.abs(d)&&(l-=d),1!==Math.abs(_)&&(p-=_),i(l,p,c.top,c.left)}function u(t){return t instanceof window.SVGElement}function c(t){return t===document.documentElement}function h(t){return u(t)?o(t):c(t)?s():a(t)}function f(t,e){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r={configurable:n.configurable||!1,writable:n.writable||!1,enumerable:n.enumerable||!1},i=Object.keys(e),o=Array.isArray(i),s=0,i=o?i:i[Symbol.iterator]();;){var a;if(o){if(s>=i.length)break;a=i[s++]}else{if(s=i.next(),s.done)break;a=s.value}var u=a;r.value=e[u],Object.defineProperty(t,u,r)}return t}var l=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},p=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),d=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},_=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},b="function"==typeof window.WeakMap&&"function"==typeof window.Map,v=function(){function t(t,e){var n=-1;return t.some(function(t,r){var i=t[0]===e;return i&&(n=r),i}),n}return b?window.WeakMap:function(){function e(){l(this,e),this.__entries__=[]}return e.prototype.get=function(e){var n=t(this.__entries__,e);return this.__entries__[n][1]},e.prototype.set=function(e,n){var r=t(this.__entries__,e);~r?this.__entries__[r][1]=n:this.__entries__.push([e,n])},e.prototype.delete=function(e){var n=this.__entries__,r=t(n,e);~r&&n.splice(r,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e}()}(),y=function(){return b?window.Map:function(t){function e(){return l(this,e),_(this,t.apply(this,arguments))}return d(e,t),e.prototype.clear=function(){this.__entries__.splice(0,this.__entries__.length)},e.prototype.entries=function(){return this.__entries__.slice()},e.prototype.keys=function(){return this.__entries__.map(function(t){return t[0]})},e.prototype.values=function(){return this.__entries__.map(function(t){return t[1]})},e.prototype.forEach=function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=this.__entries__,r=Array.isArray(n),i=0,n=r?n:n[Symbol.iterator]();;){var o;if(r){if(i>=n.length)break;o=n[i++]}else{if(i=n.next(),i.done)break;o=i.value}var s=o;t.call(e,s[1],s[0])}},p(e,[{key:"size",get:function(){return this.__entries__.length}}]),e}(v)}(),w=function(){return"function"==typeof window.requestAnimationFrame?window.requestAnimationFrame:function(t){return setTimeout(function(){return t(Date.now())},1e3/60)}}(),g=function(t){function e(){t.apply.apply(t,s),s=null,a&&(r.apply.apply(r,a),a=null)}function n(){o?w(e):e()}function r(){for(var t=arguments.length,e=Array(t),r=0;r<t;r++)e[r]=arguments[r];var o=[this,e];s?a=o:(s=o,setTimeout(n,i))}var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,o=arguments.length>2&&void 0!==arguments[2]&&arguments[2],s=null,a=null;return r},m="function"==typeof window.MutationObserver,E=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];l(this,t),this._isCycleContinuous=!m||e,this._listenersEnabled=!1,this._mutationsObserver=null,this._observers=[],this.refresh=g(this.refresh.bind(this),30,!0),this._continuousUpdateHandler=g(this.refresh,70)}return t.prototype.connect=function(t){this.isConnected(t)||this._observers.push(t),this._listenersEnabled||this._addListeners()},t.prototype.disconnect=function(t){var e=this._observers,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this._listenersEnabled&&this._removeListeners()},t.prototype.isConnected=function(t){return!!~this._observers.indexOf(t)},t.prototype.refresh=function(){var t=this._updateObservers();t?this.refresh():this._isCycleContinuous&&this._listenersEnabled&&this._continuousUpdateHandler()},t.prototype._updateObservers=function(){for(var t=!1,e=this._observers,n=Array.isArray(e),r=0,e=n?e:e[Symbol.iterator]();;){var i;if(n){if(r>=e.length)break;i=e[r++]}else{if(r=e.next(),r.done)break;i=r.value}var o=i;o.gatherActive(),o.hasActive()&&(t=!0,o.broadcastActive())}return t},t.prototype._addListeners=function(){this._listenersEnabled||(window.addEventListener("resize",this.refresh),m&&(this._mutationsObserver=new MutationObserver(this.refresh),this._mutationsObserver.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._listenersEnabled=!0,this._isCycleContinuous&&this.refresh())},t.prototype._removeListeners=function(){this._listenersEnabled&&(window.removeEventListener("resize",this.refresh),this._mutationsObserver&&this._mutationsObserver.disconnect(),this._mutationsObserver=null,this._listenersEnabled=!1)},p(t,[{key:"continuousUpdates",get:function(){return this._isCycleContinuous},set:function(t){m&&(this._isCycleContinuous=t,this._listenersEnabled&&t&&this.refresh())}}]),t}(),O=i(0,0,0,0),A=function(){function t(e){l(this,t),this.target=e,this._contentRect=O,this.broadcastWidth=0,this.broadcastHeight=0}return t.prototype.broadcastRect=function(){var t=this._contentRect;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t.prototype.isActive=function(){var t=h(this.target);return this._contentRect=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t}(),ResizeObserverEntry=function ResizeObserverEntry(t,e){l(this,ResizeObserverEntry);var n=window.ClientRect||Object,r=Object.create(n.prototype);f(r,e,{configurable:!0}),f(this,{target:t,contentRect:r},{configurable:!0})},k=function(){function ResizeObserver(t,e,n){if(l(this,ResizeObserver),"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this._callback=t,this._targets=new y,this._activeTargets=[],this._controller=e,this._publicObserver=n}return ResizeObserver.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if(!(t instanceof Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this._targets;e.has(t)||(e.set(t,new A(t)),this._controller.isConnected(this)||this._controller.connect(this),this._controller.refresh())},ResizeObserver.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if(!(t instanceof Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this._targets;e.has(t)&&(e.delete(t),e.size||this.disconnect())},ResizeObserver.prototype.disconnect=function(){this.clearActive(),this._targets.clear(),this._controller.disconnect(this)},ResizeObserver.prototype.gatherActive=function(){this.clearActive();var t=this._activeTargets;this._targets.forEach(function(e){e.isActive()&&t.push(e)})},ResizeObserver.prototype.broadcastActive=function(){if(this.hasActive()){var t=this._publicObserver,e=this._activeTargets.map(function(t){return new ResizeObserverEntry(t.target,t.broadcastRect())});this.clearActive(),this._callback.call(t,e,t)}},ResizeObserver.prototype.clearActive=function(){this._activeTargets.splice(0)},ResizeObserver.prototype.hasActive=function(){return!!this._activeTargets.length},ResizeObserver}(),T=new E,C=new v,ResizeObserver=function(){function ResizeObserver(t){if(l(this,ResizeObserver),!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var e=new k(t,T,this);C.set(this,e)}return p(ResizeObserver,null,[{key:"continuousUpdates",get:function(){return T.continuousUpdates},set:function(t){if("boolean"!=typeof t)throw new TypeError('type of "continuousUpdates" value must be boolean.');T.continuousUpdates=t}}]),ResizeObserver}();["observe","unobserve","disconnect"].forEach(function(t){ResizeObserver.prototype[t]=function(){var e;return(e=C.get(this))[t].apply(e,arguments)}}),"function"!=typeof window.ResizeObserver&&Object.defineProperty(window,"ResizeObserver",{value:ResizeObserver,writable:!0,configurable:!0});var x=window.ResizeObserver;return x});
//# sourceMappingURL=ResizeObserver.global.min.js.map

@@ -1,1409 +0,1137 @@

(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object') {
module.exports = factory();
} else if(typeof define === 'function' && define.amd) {
define([], factory);
} else if(typeof exports === 'object') {
exports["ResizeObserver"] = factory();
} else {
root["ResizeObserver"] = factory();
(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';
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
})(this, function () {
// webpackBootstrap
return (function (modules) {
// The module cache
var installedModules = {};
};
// The require function
function __webpack_require__(moduleId) {
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
// Check if module is in cache
if(installedModules[moduleId])
return installedModules[moduleId].exports;
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
exports: {},
id: moduleId,
loaded: false
};
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
// Flag the module as loaded
module.loaded = true;
// Return the exports of the module
return module.exports;
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules;
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
// expose the module cache
__webpack_require__.c = installedModules;
/**
* A collection of shims that provides minimal
* support of WeakMap and Map classes.
*
* These implementations are not meant to be used outside of
* ResizeObserver modules as they cover only a limited range
* of use cases.
*//* eslint-disable require-jsdoc */
var hasNativeCollections = typeof window.WeakMap === 'function' && typeof window.Map === 'function';
// __webpack_public_path__
__webpack_require__.p = "";
var WeakMap = function () {
if (hasNativeCollections) {
return window.WeakMap;
}
// Load entry module and return exports
return __webpack_require__(0);
})([function (module, exports, __webpack_require__) {
'use strict';
function getIndex(arr, key) {
var result = -1;
exports.__esModule = true;
arr.some(function (entry, index) {
var matches = entry[0] === key;
var _ResizeObserver = __webpack_require__(1);
if (matches) {
result = index;
}
var _ResizeObserver2 = _interopRequireDefault(_ResizeObserver);
return matches;
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ResizeObserver = _ResizeObserver2.default;
// Export existing implementation if it's available.
if (typeof window.ResizeObserver === 'function') {
ResizeObserver = window.ResizeObserver;
return result;
}
exports.default = ResizeObserver;
module.exports = exports['default'];
}, function (module, exports, __webpack_require__) {
'use strict';
return function () {
function _class() {
classCallCheck(this, _class);
exports.__esModule = true;
this.__entries__ = [];
}
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
_class.prototype.get = function get(key) {
var index = getIndex(this.__entries__, key);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
return this.__entries__[index][1];
};
var _es6Collections = __webpack_require__(2);
_class.prototype.set = function set(key, value) {
var index = getIndex(this.__entries__, key);
var _ResizeObserverController = __webpack_require__(3);
if (~index) {
this.__entries__[index][1] = value;
} else {
this.__entries__.push([key, value]);
}
};
var _ResizeObserverController2 = _interopRequireDefault(_ResizeObserverController);
_class.prototype.delete = function _delete(key) {
var entries = this.__entries__,
index = getIndex(entries, key);
var _ResizeObserver2 = __webpack_require__(6);
if (~index) {
entries.splice(index, 1);
}
};
var _ResizeObserver3 = _interopRequireDefault(_ResizeObserver2);
_class.prototype.has = function has(key) {
return !!~getIndex(this.__entries__, key);
};
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
return _class;
}();
}();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Map = function () {
if (hasNativeCollections) {
return window.Map;
}
// Controller that will be assigned to all instances of ResizeObserver.
var controller = new _ResizeObserverController2.default();
return function (_WeakMap) {
inherits(_class2, _WeakMap);
// Registry of the internal observers.
var observers = new _es6Collections.WeakMap();
function _class2() {
classCallCheck(this, _class2);
return possibleConstructorReturn(this, _WeakMap.apply(this, arguments));
}
/**
* ResizeObservers' "Proxy" class which is meant to hide private
* properties and methods from public instances.
*
* Additionally it implements "idleTimeout" and "continuousUpdates" static property
* accessors to give control over the behavior of the ResizeObserverController
* instance. Changes made to these properties affect all future and
* existing observers.
*/
var ResizeObserver = function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {Function} callback - Callback that will
* be invoked when dimensions of one of the
* observed elements have been changed.
*/
function ResizeObserver(callback) {
_classCallCheck(this, ResizeObserver);
_class2.prototype.clear = function clear() {
this.__entries__.splice(0, this.__entries__.length);
};
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
_class2.prototype.entries = function entries() {
return this.__entries__.slice();
};
var observer = new _ResizeObserver3.default(callback, controller, this);
_class2.prototype.keys = function keys() {
return this.__entries__.map(function (entry) {
return entry[0];
});
};
// Register an internal observer.
observers.set(this, observer);
}
_class2.prototype.values = function values() {
return this.__entries__.map(function (entry) {
return entry[1];
});
};
_createClass(ResizeObserver, null, [{
_class2.prototype.forEach = function forEach(callback) {
var ctx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
/**
* Extracts controllers' idle timeout value.
*
* @returns {Number}
*/
key: 'idleTimeout',
get: function get() {
return controller.idleTimeout;
},
for (var _iterator = this.__entries__, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
/**
* Sets up new idle timeout.
*
* @param {Number} value - New timeout value.
*/
set: function set(value) {
if (typeof value !== 'number') {
throw new TypeError('type of "idleTimeout" value must be number.');
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) < 0) {
throw new TypeError('"idleTimeout" value must be greater than 0.');
}
var entry = _ref;
controller.idleTimeout = value;
callback.call(ctx, entry[1], entry[0]);
}
}, {
};
/**
* Tells whether continuous updates are enabled.
*
* @returns {Boolean}
*/
key: 'continuousUpdates',
createClass(_class2, [{
key: 'size',
get: function get() {
return controller.continuousUpdates;
},
/**
* Enables or disables continuous updates.
*
* @param {Boolean} value - Whether to enable or disable
* continuous updates.
*/
set: function set(value) {
if (typeof value !== 'boolean') {
throw new TypeError('type of "continuousUpdates" value must be boolean.');
}
controller.continuousUpdates = value;
return this.__entries__.length;
}
}]);
return _class2;
}(WeakMap);
}();
return ResizeObserver;
}();
/**
* A shim for requestAnimationFrame which falls back
* to setTimeout if the first one is not supported.
*
* @returns {Number} Requests' identifier.
*/
var reqAnimFrame = (function () {
if (typeof window.requestAnimationFrame === 'function') {
return window.requestAnimationFrame;
}
// Expose public methods of ResizeObserver.
['observe', 'unobserve', 'disconnect'].forEach(function (method) {
ResizeObserver.prototype[method] = function () {
var _observers$get;
return function (callback) {
return setTimeout(function () {
return callback(Date.now());
}, 1000 / 60);
};
})();
return (_observers$get = observers.get(this))[method].apply(_observers$get, arguments);
};
});
/**
* Creates a wrapper function that ensures that provided callback will
* be invoked only once during the specified delay period. It caches the last
* call and re-invokes it after pending activation is resolved.
*
* @param {Function} callback - Function to be invoked after the delay period.
* @param {Number} [delay = 0] - Delay after which to invoke callback.
* @param {Boolean} [afterRAF = false] - Whether function needs to be invoked as
* a requestAnimationFrame callback.
* @returns {Function}
*/
var throttle = function (callback) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var afterRAF = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
exports.default = ResizeObserver;
module.exports = exports['default'];
}, function (module, exports) {
'use strict';
var leadCall = null,
edgeCall = null;
exports.__esModule = true;
/**
* Invokes the original callback function and schedules a new invocation if
* the wrapper was called during current request.
*/
function invokeCallback() {
// Invoke original function.
callback.apply.apply(callback, leadCall);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
leadCall = null;
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
// Schedule new invocation if there was a call during delay period.
if (edgeCall) {
proxy.apply.apply(proxy, edgeCall);
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
edgeCall = null;
}
}
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Callback that will be invoked after the specified delay period. It will
* delegate invocation of the original function to the requestAnimationFrame
* if "afterRAF" parameter is set to "true".
*/
function timeoutCallback() {
afterRAF ? reqAnimFrame(invokeCallback) : invokeCallback();
}
/**
* A collection of shims that provides minimal
* support of WeakMap and Map classes.
*
* These implementations are not meant to be used outside of
* ResizeObserver modules as they cover only a limited range
* of use cases.
* Schedules invocation of the initial function.
*/
/* eslint-disable require-jsdoc */
var hasNativeCollections = typeof window.WeakMap === 'function' && typeof window.Map === 'function';
var WeakMap = function () {
if (hasNativeCollections) {
return window.WeakMap;
function proxy() {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
function getIndex(arr, key) {
var result = -1;
// eslint-disable-next-line no-invalid-this
var callData = [this, args];
arr.some(function (entry, index) {
var matches = entry[0] === key;
// Cache current call to be re-invoked later if there is already a
// pending call.
if (leadCall) {
edgeCall = callData;
} else {
leadCall = callData;
if (matches) {
result = index;
}
return matches;
});
return result;
// Schedule new invocation.
setTimeout(timeoutCallback, delay);
}
}
return function () {
function _class() {
_classCallCheck(this, _class);
return proxy;
};
this.__entries__ = [];
}
// Define whether the MutationObserver is supported.
var mutationsSupported = typeof window.MutationObserver === 'function';
_class.prototype.get = function get(key) {
var index = getIndex(this.__entries__, key);
/**
* Controller class which handles updates of ResizeObserver instances.
* It decides when and for how long it's necessary to run updates by listening
* to the windows "resize" event along with a tracking of DOM mutations
* (nodes removal, changes of attributes, etc.).
*
* Transitions and animations are handled by running a repeatable update cycle
* until the dimensions of observed elements are changing.
*
* Continuous update cycle will be used automatically in case MutationObserver
* is not supported.
*/
var ResizeObserverController = function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @param {Boolean} [continuousUpdates = false] - Whether to use a continuous
* update cycle.
*/
function ResizeObserverController() {
var continuousUpdates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
classCallCheck(this, ResizeObserverController);
return this.__entries__[index][1];
};
// Continuous updates must be enabled if MutationObserver is not supported.
this._isCycleContinuous = !mutationsSupported || continuousUpdates;
_class.prototype.set = function set(key, value) {
var index = getIndex(this.__entries__, key);
// Indicates whether DOM listeners have been added.
this._listenersEnabled = false;
if (~index) {
this.__entries__[index][1] = value;
} else {
this.__entries__.push([key, value]);
}
};
// Keeps reference to the instance of MutationObserver.
this._mutationsObserver = null;
_class.prototype.delete = function _delete(key) {
var entries = this.__entries__,
index = getIndex(entries, key);
// A list of connected observers.
this._observers = [];
if (~index) {
entries.splice(index, 1);
}
};
// Make sure that the "refresh" method is invoked as a RAF callback and
// that it happens only once during the period of 30 milliseconds.
this.refresh = throttle(this.refresh.bind(this), 30, true);
_class.prototype.has = function has(key) {
return !!~getIndex(this.__entries__, key);
};
// Additionally postpone invocation of the continuous updates.
this._continuousUpdateHandler = throttle(this.refresh, 70);
}
return _class;
}();
}();
/**
* Adds observer to observers list.
*
* @param {ResizeObserver} observer - Observer to be added.
*/
ResizeObserverController.prototype.connect = function connect(observer) {
if (!this.isConnected(observer)) {
this._observers.push(observer);
}
var Map = function () {
if (hasNativeCollections) {
return window.Map;
// Add listeners if they haven't been added yet.
if (!this._listenersEnabled) {
this._addListeners();
}
};
return function (_WeakMap) {
_inherits(_class2, _WeakMap);
/**
* Removes observer from observers list.
*
* @param {ResizeObserver} observer - Observer to be removed.
*/
ResizeObserverController.prototype.disconnect = function disconnect(observer) {
var observers = this._observers;
var index = observers.indexOf(observer);
function _class2() {
_classCallCheck(this, _class2);
// Remove observer if it's present in registry.
if (~index) {
observers.splice(index, 1);
}
return _possibleConstructorReturn(this, _WeakMap.apply(this, arguments));
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this._listenersEnabled) {
this._removeListeners();
}
};
_class2.prototype.clear = function clear() {
this.__entries__.splice(0, this.__entries__.length);
};
/**
* Tells whether the provided observer is connected to controller.
*
* @param {ResizeObserver} observer - Observer to be checked.
* @returns {Boolean}
*/
ResizeObserverController.prototype.isConnected = function isConnected(observer) {
return !!~this._observers.indexOf(observer);
};
_class2.prototype.entries = function entries() {
return this.__entries__.slice();
};
/**
* Invokes the update of observers. It will continue running updates insofar
* it detects changes or if continuous updates are enabled.
*/
ResizeObserverController.prototype.refresh = function refresh() {
var hasChanges = this._updateObservers();
_class2.prototype.keys = function keys() {
return this.__entries__.map(function (entry) {
return entry[0];
});
};
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (hasChanges) {
this.refresh();
} else if (this._isCycleContinuous && this._listenersEnabled) {
// Automatically repeat cycle if it's necessary.
this._continuousUpdateHandler();
}
};
_class2.prototype.values = function values() {
return this.__entries__.map(function (entry) {
return entry[1];
});
};
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {Boolean} Returns "true" if any observer has detected changes in
* dimensions of its' elements.
*/
ResizeObserverController.prototype._updateObservers = function _updateObservers() {
var hasChanges = false;
_class2.prototype.forEach = function forEach(callback) {
var ctx = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
for (var _iterator = this._observers, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
for (var _iterator = this.__entries__, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var observer = _ref;
var entry = _ref;
// Collect active observations.
observer.gatherActive();
callback.call(ctx, entry[1], entry[0]);
}
};
// Broadcast active observations and set the flag that changes have
// been detected.
if (observer.hasActive()) {
hasChanges = true;
_createClass(_class2, [{
key: 'size',
get: function get() {
return this.__entries__.length;
}
}]);
observer.broadcastActive();
}
}
return _class2;
}(WeakMap);
}();
return hasChanges;
};
exports.Map = Map;
exports.WeakMap = WeakMap;
}, function (module, exports, __webpack_require__) {
'use strict';
exports.__esModule = true;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _performance = __webpack_require__(4);
var _performance2 = _interopRequireDefault(_performance);
var _requestAnimationFrame = __webpack_require__(5);
var _requestAnimationFrame2 = _interopRequireDefault(_requestAnimationFrame);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var mutationsSupported = typeof window.MutationObserver === 'function';
/**
* Creates a wrapper function which ensures only one
* invocation of provided callback during the specified delay.
* Initializes DOM listeners.
*
* @param {Function} callback - Function to be invoked.
* @param {Number} [delay = 0] - Delay after which to invoke callback.
* @returns {Function}
* @private
*/
function debounce(callback) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
ResizeObserverController.prototype._addListeners = function _addListeners() {
// Do nothing if listeners have been already added.
if (this._listenersEnabled) {
return;
}
var timeoutID = false;
window.addEventListener('resize', this.refresh);
return function () {
var _this = this;
// Subscribe to DOM mutations if it's possible as they may lead to
// changes in the dimensions of elements.
if (mutationsSupported) {
this._mutationsObserver = new MutationObserver(this.refresh);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
this._mutationsObserver.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
if (timeoutID !== false) {
clearTimeout(timeoutID);
}
this._listenersEnabled = true;
timeoutID = setTimeout(function () {
timeoutID = false;
// Don't wait for a possible event that might trigger the update of
// observers and manually initiate the update process.
if (this._isCycleContinuous) {
this.refresh();
}
};
/* eslint-disable no-invalid-this */
callback.apply(_this, args);
/* eslint-enable no-invalid-this */
}, delay);
};
}
/**
* Controller class which handles updates of ResizeObserver instances.
* It's meant to decide when and for how long it's necessary to run updates by listening to the windows
* "resize" event along with a tracking of DOM mutations (nodes removal, changes of attributes, etc.).
* Removes DOM listeners.
*
* Transitions and animations are handled by running a repeatable update cycle either until the dimensions
* of observed elements are changing or the timeout is reached (default timeout is 50 milliseconds).
* Timeout value can be manually increased if transitions have a delay.
*
* Continuous update cycle will be used automatically in case if MutationObserver is not supported.
* @private
*/
var ResizeObserverController = function () {
/**
* Creates a new instance of ResizeObserverController.
*
* @param {Number} [idleTimeout = 0] - Idle timeout value.
* @param {Boolean} [continuousUpdates = false] - Whether to use a continuous update cycle.
*/
function ResizeObserverController() {
var idleTimeout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
var continuousUpdates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
ResizeObserverController.prototype._removeListeners = function _removeListeners() {
// Do nothing if listeners have been already removed.
if (!this._listenersEnabled) {
return;
}
_classCallCheck(this, ResizeObserverController);
window.removeEventListener('resize', this.refresh);
this._idleTimeout = idleTimeout;
this._isCycleContinuous = !mutationsSupported || continuousUpdates;
this._cycleStartTime = 0;
// Indicates whether the update cycle is currently running.
this._isCycleActive = false;
// Indicates whether the update of observers is scheduled.
this._isUpdateScheduled = false;
// Indicates whether DOM listeners have been added.
this._listenersEnabled = false;
// Keeps reference to the instance of MutationObserver.
this._mutationsObserver = null;
// A list of connected observers.
this._observers = [];
// Fix value of "this" binding for the following methods.
this.runUpdates = this.runUpdates.bind(this);
this._onMutation = this._onMutation.bind(this);
this._resolveScheduled = this._resolveScheduled.bind(this);
// Function that will be invoked to re-run the
// update cycle if continuous cycles are enabled.
this._continuousCycleHandler = debounce(this.runUpdates, 100);
if (this._mutationsObserver) {
this._mutationsObserver.disconnect();
}
/**
* Adds observer to observers list.
*
* @param {ResizeObserver} observer - Observer to be added.
*/
ResizeObserverController.prototype.connect = function connect(observer) {
if (!this.isConnected(observer)) {
this._observers.push(observer);
}
this._mutationsObserver = null;
this._listenersEnabled = false;
};
// Add listeners if they haven't been added yet.
if (!this._listenersEnabled) {
this._addListeners();
}
};
createClass(ResizeObserverController, [{
key: 'continuousUpdates',
/**
* Removes observer from observers list.
* Tells whether continuous updates are enabled.
*
* @param {ResizeObserver} observer - Observer to be removed.
*/
ResizeObserverController.prototype.disconnect = function disconnect(observer) {
var observers = this._observers,
index = observers.indexOf(observer);
if (~index) {
observers.splice(index, 1);
}
// Remove listeners if controller has no connected observers.
if (!observers.length && this._listenersEnabled) {
this._removeListeners();
}
};
/**
* Tells whether provided observer is connected to controller.
*
* @param {ResizeObserver} observer - Observer to be checked.
* @returns {Boolean}
*/
ResizeObserverController.prototype.isConnected = function isConnected(observer) {
return !!~this._observers.indexOf(observer);
};
get: function get() {
return this._isCycleContinuous;
},
/**
* Updates every observer from observers list and
* notifies them of queued entries.
* Enables or disables continuous updates.
*
* @private
* @returns {Boolean} Returns "true" if any observer
* has detected changes in dimensions of its' elements.
* @param {Boolean} useContinuous - Whether to enable or disable continuous
* updates. Note that the value won't be applied if MutationObserver is
* not supported.
*/
ResizeObserverController.prototype._updateObservers = function _updateObservers() {
var hasChanges = false;
set: function set(useContinuous) {
// The state of continuous updates should not be modified if
// MutationObserver is not supported.
if (!mutationsSupported) {
return;
}
for (var _iterator = this._observers, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
this._isCycleContinuous = useContinuous;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
// Immediately start the update cycle in order not to wait for a possible
// event that might initiate it.
if (this._listenersEnabled && useContinuous) {
this.refresh();
}
}
}]);
return ResizeObserverController;
}();
var observer = _ref;
// Placeholder of an empty content rectangle.
var emptyRect = createContentRect(0, 0, 0, 0);
observer.gatherActive();
/**
* Extracts computed styles of provided element.
*
* @param {Element} target
* @returns {CSSStyleDeclaration}
*/
function getStyles(target) {
return window.getComputedStyle(target);
}
if (observer.hasActive()) {
hasChanges = true;
/**
* Converts provided string defined in q form of '{{value}}px' to number.
*
* @param {String} value
* @returns {Number}
*/
function pixelsToNumber(value) {
return parseFloat(value) || 0;
}
observer.broadcastActive();
}
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...String} positions - Borders positions (top, right, ...)
* @returns {Number}
*/
function getBordersSize(styles) {
for (var _len = arguments.length, positions = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
positions[_key - 1] = arguments[_key];
}
return hasChanges;
};
return positions.reduce(function (size, pos) {
var value = styles['border-' + pos + '-width'];
/**
* Starts the update cycle which runs either
* until it detects changes in the dimensions of
* elements or the idle timeout is reached.
*/
ResizeObserverController.prototype.runUpdates = function runUpdates() {
this._cycleStartTime = (0, _performance2.default)();
this._isCycleActive = true;
return size + pixelsToNumber(value);
}, 0);
}
this.scheduleUpdate();
};
/**
* Extracts paddings sizes from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
*/
function getPaddings(styles) {
var boxKeys = ['top', 'right', 'bottom', 'left'];
var paddings = {};
/**
* Schedules the update of observers.
*/
ResizeObserverController.prototype.scheduleUpdate = function scheduleUpdate() {
// Schedule new update if it
// hasn't been scheduled already.
if (!this._isUpdateScheduled) {
this._isUpdateScheduled = true;
for (var _iterator = boxKeys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
(0, _requestAnimationFrame2.default)(this._resolveScheduled);
}
};
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
/**
* Invokes the update of observers. It may re-run the
* cycle if changes in observers have been detected.
*
* @private
*/
ResizeObserverController.prototype._resolveScheduled = function _resolveScheduled() {
var hasChanges = this._updateObservers();
var key = _ref;
this._isUpdateScheduled = false;
var value = styles['padding-' + key];
// Do nothing if cycle wasn't started,
// i.e. a single update was requested.
if (!this._isCycleActive) {
return;
}
paddings[key] = pixelsToNumber(value);
}
// Re-start cycle so that we can catch future changes,
// e.g. when there are active CSS transitions.
if (hasChanges) {
this.runUpdates();
} else if (this._hasRemainingTime()) {
// Keep running updates if idle timeout isn't reached yet.
// This way we make it possible to adjust to delayed transitions.
this.scheduleUpdate();
} else {
// Finish update cycle.
this._endUpdates();
}
};
return paddings;
}
/**
* Tells whether the update cycle has time remaining.
*
* @private
* @returns {Boolean}
*/
ResizeObserverController.prototype._hasRemainingTime = function _hasRemainingTime() {
var timePassed = (0, _performance2.default)() - this._cycleStartTime;
/**
* Creates content rectangle based on the provided dimensions
* and the top/left positions.
*
* @param {Number} width - Width of rectangle.
* @param {Number} height - Height of rectangle.
* @param {Number} top - Top position.
* @param {Number} left - Left position.
* @returns {ClientRect}
*/
function createContentRect(width, height, top, left) {
return {
width: width, height: height, top: top,
right: width + left,
bottom: height + top,
left: left
};
}
return this._idleTimeout - timePassed > 0;
};
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGElement} target - Element whose content
* rectangle needs to be calculated.
* @returns {ClientRect}
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
/**
* Callback which is invoked when update cycle
* is finished. It may start a new cycle if continuous
* updates are enabled.
*
* @private
*/
ResizeObserverController.prototype._endUpdates = function _endUpdates() {
this._isCycleActive = false;
return createContentRect(bbox.width, bbox.height, 0, 0);
}
// Automatically repeat cycle if it's necessary.
if (this._isCycleContinuous && this._listenersEnabled) {
this._continuousCycleHandler();
}
};
/**
* Calculates content rectangle of a root element.
*
* @returns {ClientRect}
*/
function getDocElementRect() {
// Neither scroll[Width/Height] nor offset[Width/Height] can be used to
// define content dimensions as they give inconsistent results across
// different browsers. E.g. in the Internet Explorer 10 and lower value of
// these properties can't be less than the client dimensions (same thing
// with the "getBoundingClientRect" method). And Firefox has the same
// behavior with its "scroll" properties.
var styles = getStyles(document.documentElement);
/**
* Initializes DOM listeners.
*
* @private
*/
ResizeObserverController.prototype._addListeners = function _addListeners() {
// Do nothing if listeners have been already added.
if (this._listenersEnabled) {
return;
}
var width = pixelsToNumber(styles.width);
var height = pixelsToNumber(styles.height);
this._listenersEnabled = true;
return createContentRect(width, height, 0, 0);
}
// Repeatable cycle is used here because the resize event may
// lead to continuous changes, e.g. when width or height of an element
// are controlled by CSS transitions.
window.addEventListener('resize', this.runUpdates);
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element whose content
* rectangle needs to be calculated.
* @returns {ClientRect}
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth;
var clientHeight = target.clientHeight;
// Subscribe to DOM mutations if it's possible as they may lead to
// changes in the dimensions of elements.
if (mutationsSupported) {
this._mutationsObserver = new MutationObserver(this._onMutation);
// By this condition we can catch all non-replaced inline, hidden and detached
// elements. Though elements with width & height properties less than 0.5 will
// be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuerys' ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
}
this._mutationsObserver.observe(document, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
}
var styles = getStyles(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
// Don't wait for a possible event that might trigger the
// update of observers and manually initiate the update cycle.
if (this._isCycleContinuous) {
this.runUpdates();
}
};
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize getBoundingClientRect if only its' data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = pixelsToNumber(styles.width),
height = pixelsToNumber(styles.height);
/**
* Removes DOM listeners.
*
* @private
*/
ResizeObserverController.prototype._removeListeners = function _removeListeners() {
// Do nothing if listeners have been already removed.
if (!this._listenersEnabled) {
return;
}
// Width & height include paddings and borders
// when 'border-box' box model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
window.removeEventListener('resize', this.runUpdates);
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
if (this._mutationsObserver) {
this._mutationsObserver.disconnect();
}
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll bars
// are the only difference between rounded dimensions + paddings and "client"
// properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
this._mutationsObserver = null;
this._listenersEnabled = false;
};
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element with content width of 314.2px it sometimes gives the
// client width of 315px and for the width of 314.7px it may give 314px.
// And it doesn't happen all the time. Such difference needs to be ignored.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
/**
* DOM mutations handler.
*
* @private
* @param {Array<MutationRecord>} entries - An array of mutation records.
*/
ResizeObserverController.prototype._onMutation = function _onMutation(entries) {
// Check if at least one entry
// contains attributes changes.
var attrsChanged = entries.some(function (entry) {
return entry.type === 'attributes';
});
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
// It's expected that animations may start only
// after some attribute changes its' value.
attrsChanged ? this.runUpdates() : this.scheduleUpdate();
};
return createContentRect(width, height, paddings.top, paddings.left);
}
_createClass(ResizeObserverController, [{
/**
* Checks whether provided element is an instance of SVGElement.
*
* @param {Element} target - Element to be checked.
* @returns {Boolean}
*/
function isSVGElement(target) {
return target instanceof window.SVGElement;
}
/**
* Returns current idle timeout value.
*
* @returns {Number}
*/
key: 'idleTimeout',
get: function get() {
return this._idleTimeout;
},
/**
* Checks whether provided element is a document element (root element of a document).
*
* @param {Element} target - Element to be checked.
* @returns {Boolean}
*/
function isDocumentElement(target) {
return target === document.documentElement;
}
/**
* Sets up new idle timeout value.
*
* @param {Number} value - New timeout value.
*/
set: function set(value) {
this._idleTimeout = value;
}
}, {
/**
* Calculates an appropriate content rectangle for provided html or svg element.
*
* @param {Element} target - Element whose content rectangle
* needs to be calculated.
* @returns {ClientRect}
*/
function getContentRect(target) {
if (isSVGElement(target)) {
return getSVGContentRect(target);
}
/**
* Tells whether continuous updates are enabled.
*
* @returns {Boolean}
*/
key: 'continuousUpdates',
get: function get() {
return this._isCycleContinuous;
},
if (isDocumentElement(target)) {
return getDocElementRect();
}
/**
* Enables or disables continuous updates.
*
* @param {Boolean} useContinuous - Whether to enable or disable
* continuous updates. Note that the value won't be applied
* if MutationObserver is not supported.
*/
set: function set(useContinuous) {
// The state of continuous updates should not be modified
// if MutationObserver is not supported.
if (!mutationsSupported) {
return;
}
return getHTMLElementContentRect(target);
}
this._isCycleContinuous = useContinuous;
/**
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of its' changes.
*/
var ResizeObservation = function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element to be observed.
*/
function ResizeObservation(target) {
classCallCheck(this, ResizeObservation);
// Immediately start the update cycle in order not to
// wait for a possible event that will initiate it.
if (this._listenersEnabled && useContinuous) {
this.runUpdates();
}
}
}]);
this.target = target;
return ResizeObserverController;
}();
// Keeps reference to the last observed content rectangle.
this._contentRect = emptyRect;
exports.default = ResizeObserverController;
module.exports = exports['default'];
}, function (module, exports) {
'use strict';
// Broadcasted width of content rectangle.
this.broadcastWidth = 0;
exports.__esModule = true;
// Broadcasted height of content rectangle.
this.broadcastHeight = 0;
}
/**
* A shim for performance.now method which falls back
* to Date.now if the first one is not supported.
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*
* @returns {Timestamp}
* @returns {ClientRect} Last observed content rectangle.
*/
exports.default = function () {
if (window.performance && typeof window.performance.now === 'function') {
return function () {
return window.performance.now();
};
}
ResizeObservation.prototype.broadcastRect = function broadcastRect() {
var rect = this._contentRect;
return function () {
return Date.now();
};
}();
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
module.exports = exports['default'];
}, function (module, exports) {
'use strict';
return rect;
};
exports.__esModule = true;
/**
* A shim for requestAnimationFrame which falls back
* to setTimeout if the first one is not supported.
* Updates content rectangle and tells whether its' width or height properties
* have changed since the last broadcast.
*
* @returns {Number} Requests' identifier.
* @returns {Boolean}
*/
exports.default = function () {
if (window.requestAnimationFrame && typeof window.requestAnimationFrame === 'function') {
return window.requestAnimationFrame;
}
ResizeObservation.prototype.isActive = function isActive() {
var rect = getContentRect(this.target);
return function (callback) {
return setTimeout(function () {
return callback(Date.now());
}, 1000 / 60);
};
}();
this._contentRect = rect;
module.exports = exports['default'];
}, function (module, exports, __webpack_require__) {
'use strict';
return rect.width !== this.broadcastWidth || rect.height !== this.broadcastHeight;
};
exports.__esModule = true;
return ResizeObservation;
}();
var _es6Collections = __webpack_require__(2);
/**
* Defines properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @param {Object} [descr = {}] - Properties descriptor.
* @returns {Object} Target object.
*/
function defineProperties(target, props) {
var descr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var _ResizeObservation = __webpack_require__(7);
var descriptor = {
configurable: descr.configurable || false,
writable: descr.writable || false,
enumerable: descr.enumerable || false
};
var _ResizeObservation2 = _interopRequireDefault(_ResizeObservation);
for (var _iterator = Object.keys(props), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
var _ResizeObserverEntry = __webpack_require__(8);
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var _ResizeObserverEntry2 = _interopRequireDefault(_ResizeObserverEntry);
var key = _ref;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
descriptor.value = props[key];
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
Object.defineProperty(target, key, descriptor);
}
var ResizeObserver = function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {Function} callback - Callback function which will be invoked
* when one of the observed elements changes its' content rectangle.
* @param {ResizeObsreverController} controller - Controller instance
* which is responsible for the updates of observer.
* @param {ResizeObserver} publicObserver - Reference
* to the public ResizeObserver instance which will be passed
* to callback function.
*/
function ResizeObserver(callback, controller, publicObserver) {
_classCallCheck(this, ResizeObserver);
return target;
}
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
var ResizeObserverEntry =
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {ClientRect} rectData - Data of the elements' content rectangle.
*/
function ResizeObserverEntry(target, rectData) {
classCallCheck(this, ResizeObserverEntry);
// Reference to the callback function.
this._callback = callback;
// Content rectangle needs to be an instance of ClientRect if it's
// available.
var rectInterface = window.ClientRect || Object;
var contentRect = Object.create(rectInterface.prototype);
// Registry of ResizeObservation instances.
this._targets = new _es6Collections.Map();
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineProperties(contentRect, rectData, { configurable: true });
// Collection of resize observations that have detected
// changes in dimensions of elements.
this._activeTargets = [];
defineProperties(this, {
target: target, contentRect: contentRect
}, { configurable: true });
};
// Reference to the associated ResizeObserverController.
this._controller = controller;
var ResizeObserver$3 = function () {
/**
* Creates a new instance of ResizeObserver.
*
* @param {Function} callback - Callback function that is invoked when one
* of the observed elements changes it's content rectangle.
* @param {ResizeObsreverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} publicObserver - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/
function ResizeObserver(callback, controller, publicObserver) {
classCallCheck(this, ResizeObserver);
// Public ResizeObserver instance which will be passed
// to callback function.
this._publicObserver = publicObserver;
if (typeof callback !== 'function') {
throw new TypeError('The callback provided as parameter 1 is not a function.');
}
/**
* Starts observing provided element.
*
* @param {Element} target - Element to be observed.
*/
ResizeObserver.prototype.observe = function observe(target) {
// Throw the same errors as in a native implementation.
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Reference to the callback function.
this._callback = callback;
if (!(target instanceof Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
// Registry of ResizeObservation instances.
this._targets = new Map();
var targets = this._targets;
// Collection of resize observations that have detected changes in
// dimensions of elements.
this._activeTargets = [];
// Do nothing if element is already being observed.
if (targets.has(target)) {
return;
}
// Reference to the associated ResizeObserverController.
this._controller = controller;
targets.set(target, new _ResizeObservation2.default(target));
// Add observer to controller if
// it hasn't been connected yet.
if (!this._controller.isConnected(this)) {
this._controller.connect(this);
}
// Update observations.
this._controller.runUpdates();
};
/**
* Stops observing provided element.
*
* @param {Element} target - Element to stop observing.
*/
ResizeObserver.prototype.unobserve = function unobserve(target) {
// Throw the same errors as in a native implementation.
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
if (!(target instanceof Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
var targets = this._targets;
// Do nothing if element is not being observed.
if (!targets.has(target)) {
return;
}
// Remove element and associated with
// it ResizeObsrvation instance from registry.
targets.delete(target);
// Set back the initial state if
// there is nothing to observe.
if (!targets.size) {
this.disconnect();
}
};
/**
* Stops observing all elements and
* clears the observations list.
*/
ResizeObserver.prototype.disconnect = function disconnect() {
this.clearActive();
this._targets.clear();
this._controller.disconnect(this);
};
/**
* Invokes initial callback function with a list
* of ResizeObserverEntry instances collected from
* active resize observations.
*/
ResizeObserver.prototype.broadcastActive = function broadcastActive() {
// Do nothing if observer doesn't
// have active observations.
if (!this.hasActive()) {
return;
}
var publicObserver = this._publicObserver;
// Create ResizeObserverEntry instance
// for every active observation.
var entries = this._activeTargets.map(function (observation) {
return new _ResizeObserverEntry2.default(observation.target, observation.broadcastRect());
});
this.clearActive();
this._callback.call(publicObserver, entries, publicObserver);
};
/**
* Clears the collection of pending/active observations.
*/
ResizeObserver.prototype.clearActive = function clearActive() {
this._activeTargets.splice(0);
};
/**
* Tells whether the observer has
* pending observations.
*
* @returns {Boolean}
*/
ResizeObserver.prototype.hasActive = function hasActive() {
return !!this._activeTargets.length;
};
/**
* Clears an array of previously collected active observations
* and collects observation instances which associated element
* has changed its' content rectangle.
*/
ResizeObserver.prototype.gatherActive = function gatherActive() {
this.clearActive();
var activeTargets = this._activeTargets;
this._targets.forEach(function (observation) {
if (observation.isActive()) {
activeTargets.push(observation);
}
});
};
return ResizeObserver;
}();
exports.default = ResizeObserver;
module.exports = exports['default'];
}, function (module, exports) {
'use strict';
exports.__esModule = true;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
// Placeholder of an empty content rectangle.
var emptyRect = createContentRect(0, 0, 0, 0);
/**
* Extracts computed styles of provided element.
*
* @param {Element} target
* @returns {CSSStyleDeclaration}
*/
function getStyles(target) {
return window.getComputedStyle(target);
// Public ResizeObserver instance which will be passed to callback function.
this._publicObserver = publicObserver;
}
/**
* Converts provided string defined
* in q form of '{{value}}px' to number.
* Starts observing provided element.
*
* @param {String} value
* @returns {Number}
* @param {Element} target - Element to be observed.
*/
function pixelsToNumber(value) {
return parseFloat(value) || 0;
}
ResizeObserver.prototype.observe = function observe(target) {
// Throw the same errors as in a native implementation.
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
/**
* Extracts borders size from provided styles.
*
* @param {CSSStyleDeclaration} styles
* @param {...String} positions - Borders positions (top, right, ...)
* @returns {Number}
*/
function getBordersSize(styles) {
for (var _len = arguments.length, positions = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
positions[_key - 1] = arguments[_key];
if (!(target instanceof Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
return positions.reduce(function (size, pos) {
var value = styles['border-' + pos + '-width'];
var targets = this._targets;
return size + pixelsToNumber(value);
}, 0);
}
// Do nothing if element is already being observed.
if (targets.has(target)) {
return;
}
// Register new ResizeObservation instance.
targets.set(target, new ResizeObservation(target));
// Add observer to controller if it hasn't been connected yet.
if (!this._controller.isConnected(this)) {
this._controller.connect(this);
}
// Update observations.
this._controller.refresh();
};
/**
* Extracts paddings sizes from provided styles.
* Stops observing provided element.
*
* @param {CSSStyleDeclaration} styles
* @returns {Object} Paddings box.
* @param {Element} target - Element to stop observing.
*/
function getPaddings(styles) {
var boxKeys = ['top', 'right', 'bottom', 'left'];
var paddings = {};
ResizeObserver.prototype.unobserve = function unobserve(target) {
// Throw the same errors as in a native implementation.
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
for (var _iterator = boxKeys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (!(target instanceof Element)) {
throw new TypeError('parameter 1 is not of type "Element".');
}
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var targets = this._targets;
var key = _ref;
// Do nothing if element is not being observed.
if (!targets.has(target)) {
return;
}
var value = styles['padding-' + key];
// Remove element and associated with it ResizeObsrvation instance from
// registry.
targets.delete(target);
paddings[key] = pixelsToNumber(value);
// Set back the initial state if there is nothing to observe.
if (!targets.size) {
this.disconnect();
}
};
return paddings;
}
/**
* Creates content rectangle based on the provided dimensions
* and the top/left positions.
*
* @param {Number} width - Width of rectangle.
* @param {Number} height - Height of rectangle.
* @param {Number} top - Top position.
* @param {Number} left - Left position.
* @returns {ClientRect}
* Stops observing all elements and clears the observations list.
*/
function createContentRect(width, height, top, left) {
return {
width: width, height: height, top: top,
right: width + left,
bottom: height + top,
left: left
};
}
ResizeObserver.prototype.disconnect = function disconnect() {
this.clearActive();
this._targets.clear();
this._controller.disconnect(this);
};
/**
* Calculates content rectangle of provided SVG element.
*
* @param {SVGElement} target - Element whose content
* rectangle needs to be calculated.
* @returns {ClientRect}
* Clears an array of previously collected active observations and collects
* observation instances which associated element has changed its' content
* rectangle.
*/
function getSVGContentRect(target) {
var bbox = target.getBBox();
ResizeObserver.prototype.gatherActive = function gatherActive() {
this.clearActive();
return createContentRect(bbox.width, bbox.height, 0, 0);
}
var activeTargets = this._activeTargets;
/**
* Calculates content rectangle of a root element.
*
* @returns {ClientRect}
*/
function getDocElementRect() {
// Neither scroll[Width/Height] nor offset[Width/Height] can be used to define
// content dimensions as they give inconsistent results across different browsers.
// E.g. in the Internet Explorer 10 and lower value of these properties can't be
// less than the client dimensions (same thing with the "getBoundingClientRect" method).
// And Firefox has the same behavior with its "scroll" properties.
var styles = getStyles(document.documentElement);
this._targets.forEach(function (observation) {
if (observation.isActive()) {
activeTargets.push(observation);
}
});
};
var width = pixelsToNumber(styles.width);
var height = pixelsToNumber(styles.height);
return createContentRect(width, height, 0, 0);
}
/**
* Calculates content rectangle of provided HTMLElement.
*
* @param {HTMLElement} target - Element whose content
* rectangle needs to be calculated.
* @returns {ClientRect}
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*/
function getHTMLElementContentRect(target) {
// Client width & height properties can't be
// used exclusively as they provide rounded values.
var clientWidth = target.clientWidth;
var clientHeight = target.clientHeight;
// By this condition we can catch all non-replaced inline, hidden and detached
// elements. Though elements with width & height properties less than 0.5 will
// be discarded as well.
//
// Without it we would need to implement separate methods for each of
// those cases and it's not possible to perform a precise and performance
// effective test for hidden elements. E.g. even jQuerys' ':visible' filter
// gives wrong results for elements with width & height less than 0.5.
if (!clientWidth && !clientHeight) {
return emptyRect;
ResizeObserver.prototype.broadcastActive = function broadcastActive() {
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {
return;
}
var styles = getStyles(target);
var paddings = getPaddings(styles);
var horizPad = paddings.left + paddings.right;
var vertPad = paddings.top + paddings.bottom;
var observer = this._publicObserver;
// Computed styles of width & height are being used because they are the
// only dimensions available to JS that contain non-rounded values. It could
// be possible to utilize getBoundingClientRect if only its' data wasn't
// affected by CSS transformations let alone paddings, borders and scroll bars.
var width = pixelsToNumber(styles.width),
height = pixelsToNumber(styles.height);
// Create ResizeObserverEntry instance for every active observation.
var entries = this._activeTargets.map(function (observation) {
return new ResizeObserverEntry(observation.target, observation.broadcastRect());
});
// Width & height include paddings and borders
// when 'border-box' box model is applied (except for IE).
if (styles.boxSizing === 'border-box') {
// Following conditions are required to handle Internet Explorer which
// doesn't include paddings and borders to computed CSS dimensions.
//
// We can say that if CSS dimensions + paddings are equal to the "client" properties
// then it's either IE, and thus we don't need to subtract anything, or
// an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {
width -= getBordersSize(styles, 'left', 'right') + horizPad;
}
this.clearActive();
this._callback.call(observer, entries, observer);
};
if (Math.round(height + vertPad) !== clientHeight) {
height -= getBordersSize(styles, 'top', 'bottom') + vertPad;
}
}
// In some browsers (only in Firefox, actually) CSS width & height
// include scroll bars size which can be removed at this step as scroll bars
// are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
var vertScrollbar = Math.round(width + horizPad) - clientWidth;
var horizScrollbar = Math.round(height + vertPad) - clientHeight;
// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element whose content width is 314.2px it sometimes
// gives the client width of 315px and for the width of 314.7px
// it may give 314px. And it doesn't happen all the time.
// This kind of difference needs to be ignored.
if (Math.abs(vertScrollbar) !== 1) {
width -= vertScrollbar;
}
if (Math.abs(horizScrollbar) !== 1) {
height -= horizScrollbar;
}
return createContentRect(width, height, paddings.top, paddings.left);
}
/**
* Checks whether provided element
* is an instance of SVGElement.
*
* @param {Element} target - Element to be checked.
* @returns {Boolean}
* Clears the collection of pending/active observations.
*/
function isSVGElement(target) {
return target instanceof window.SVGElement;
}
ResizeObserver.prototype.clearActive = function clearActive() {
this._activeTargets.splice(0);
};
/**
* Checks whether provided element is
* a document element (root element of a document).
* Tells whether observer has pending observations.
*
* @param {Element} target - Element to be checked.
* @returns {Boolean}
*/
function isDocumentElement(target) {
return target === document.documentElement;
}
ResizeObserver.prototype.hasActive = function hasActive() {
return !!this._activeTargets.length;
};
/**
* Calculates an appropriate content rectangle
* for provided html or svg element.
*
* @param {Element} target - Element whose content rectangle
* needs to be calculated.
* @returns {ClientRect}
*/
function getContentRect(target) {
if (isSVGElement(target)) {
return getSVGContentRect(target);
}
return ResizeObserver;
}();
if (isDocumentElement(target)) {
return getDocElementRect();
}
// Controller that will be assigned to all instances of ResizeObserver.
var controller = new ResizeObserverController();
return getHTMLElementContentRect(target);
}
// Registry of the internal observers.
var observers = new WeakMap();
/**
* ResizeObservers' "Proxy" class which is meant to hide private properties and
* methods from public instances.
*
* Additionally implements the "continuousUpdates" static property accessor to
* give control over the behavior of the ResizeObserverController instance.
* Changes made to this property affect all future and existing observers.
*/
var ResizeObserver$2 = function () {
/**
* Class that is responsible for computations of the
* content rectangle of provided DOM element and
* for keeping track of its' changes.
* Creates a new instance of ResizeObserver.
*
* @param {Function} callback - Callback that is invoked when dimensions of
* one of the observed elements change.
*/
var ResizeObservation = function () {
/**
* Creates an instance of ResizeObservation.
*
* @param {Element} target - Element whose content
* rectangle needs to be observed.
*/
function ResizeObservation(target) {
_classCallCheck(this, ResizeObservation);
function ResizeObserver(callback) {
classCallCheck(this, ResizeObserver);
this.target = target;
if (!arguments.length) {
throw new TypeError('1 argument required, but only 0 present.');
}
// Keeps reference to the last observed content rectangle.
this._contentRect = emptyRect;
// Create a new instance of the internal ResizeObserver.
var observer = new ResizeObserver$3(callback, controller, this);
// Broadcasted width of content rectangle.
this.broadcastWidth = 0;
// Register internal observer.
observers.set(this, observer);
}
// Broadcasted height of content rectangle.
this.broadcastHeight = 0;
}
createClass(ResizeObserver, null, [{
key: 'continuousUpdates',
/**
* Updates 'broadcastWidth' and 'broadcastHeight'
* properties with a data from the corresponding
* properties of the last observed content rectangle.
* Tells whether continuous updates are enabled.
*
* @returns {ClientRect} Last observed content rectangle.
* @returns {Boolean}
*/
ResizeObservation.prototype.broadcastRect = function broadcastRect() {
var rect = this._contentRect;
get: function get() {
return controller.continuousUpdates;
},
this.broadcastWidth = rect.width;
this.broadcastHeight = rect.height;
return rect;
};
/**
* Updates content rectangle and tells whether its'
* width or height properties have changed since
* the last broadcast.
* Enables or disables continuous updates.
*
* @returns {Boolean}
* @param {Boolean} value - Whether to enable or disable continuous updates.
*/
ResizeObservation.prototype.isActive = function isActive() {
var rect = getContentRect(this.target);
this._contentRect = rect;
return rect.width !== this.broadcastWidth || rect.height !== this.broadcastHeight;
};
return ResizeObservation;
}();
exports.default = ResizeObservation;
module.exports = exports['default'];
}, function (module, exports) {
'use strict';
exports.__esModule = true;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
/**
* Defines properties for the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @param {Object} [descr = {}] - Descriptor of the properties.
* @returns {Object} Target object.
*/
function defineProperties(target, props) {
var descr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var descriptor = {
configurable: descr.configurable || false,
writable: descr.writable || false,
enumerable: descr.enumerable || false
};
for (var _iterator = Object.keys(props), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
set: function set(value) {
if (typeof value !== 'boolean') {
throw new TypeError('type of "continuousUpdates" value must be boolean.');
}
var key = _ref;
descriptor.value = props[key];
Object.defineProperty(target, key, descriptor);
controller.continuousUpdates = value;
}
}]);
return ResizeObserver;
}();
return target;
}
// Expose public methods of ResizeObserver.
['observe', 'unobserve', 'disconnect'].forEach(function (method) {
ResizeObserver$2.prototype[method] = function () {
var _observers$get;
var ResizeObserverEntry =
/**
* Creates an instance of ResizeObserverEntry.
*
* @param {Element} target - Element that is being observed.
* @param {ClientRect} rectData - Data of the elements' content rectangle.
*/
function ResizeObserverEntry(target, rectData) {
_classCallCheck(this, ResizeObserverEntry);
return (_observers$get = observers.get(this))[method].apply(_observers$get, arguments);
};
});
// Content rectangle needs to be an instance
// of ClientRect if it's available.
var rectInterface = window.ClientRect ? ClientRect.prototype : Object.prototype;
var ResizeObserver = ResizeObserver$2;
var contentRect = Object.create(rectInterface);
// Export existing implementation if it's available.
if (typeof window.ResizeObserver === 'function') {
ResizeObserver = window.ResizeObserver;
}
// According to the specification following properties
// are not writable and are also not enumerable in the
// native implementation.
defineProperties(contentRect, {
top: rectData.top,
right: rectData.right,
bottom: rectData.bottom,
left: rectData.left,
width: rectData.width,
height: rectData.height
}, { configurable: true });
var ResizeObserver$1 = ResizeObserver;
defineProperties(this, {
target: target, contentRect: contentRect
}, { configurable: true });
};
exports.default = ResizeObserverEntry;
module.exports = exports["default"];
}])});
return ResizeObserver$1;
})));

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

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ResizeObserver=e():t.ResizeObserver=e()}(this,function(){return function(t){function e(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return t[r].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var i=n(1),o=r(i),ResizeObserver=o["default"];"function"==typeof window.ResizeObserver&&(ResizeObserver=window.ResizeObserver),e["default"]=ResizeObserver,t.exports=e["default"]},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}e.__esModule=!0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},s=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),u=n(2),a=n(3),c=r(a),f=n(6),l=r(f),h=new c["default"],d=new u.WeakMap,ResizeObserver=function(){function ResizeObserver(t){if(i(this,ResizeObserver),!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var e=new l["default"](t,h,this);d.set(this,e)}return s(ResizeObserver,null,[{key:"idleTimeout",get:function(){return h.idleTimeout},set:function(t){if("number"!=typeof t)throw new TypeError('type of "idleTimeout" value must be number.');if(("undefined"==typeof t?"undefined":o(t))<0)throw new TypeError('"idleTimeout" value must be greater than 0.');h.idleTimeout=t}},{key:"continuousUpdates",get:function(){return h.continuousUpdates},set:function(t){if("boolean"!=typeof t)throw new TypeError('type of "continuousUpdates" value must be boolean.');h.continuousUpdates=t}}]),ResizeObserver}();["observe","unobserve","disconnect"].forEach(function(t){ResizeObserver.prototype[t]=function(){var e;return(e=d.get(this))[t].apply(e,arguments)}}),e["default"]=ResizeObserver,t.exports=e["default"]},function(t,e){"use strict";function n(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function r(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}e.__esModule=!0;var o=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),s="function"==typeof window.WeakMap&&"function"==typeof window.Map,u=function(){function t(t,e){var n=-1;return t.some(function(t,r){var i=t[0]===e;return i&&(n=r),i}),n}return s?window.WeakMap:function(){function e(){i(this,e),this.__entries__=[]}return e.prototype.get=function(e){var n=t(this.__entries__,e);return this.__entries__[n][1]},e.prototype.set=function(e,n){var r=t(this.__entries__,e);~r?this.__entries__[r][1]=n:this.__entries__.push([e,n])},e.prototype["delete"]=function(e){var n=this.__entries__,r=t(n,e);~r&&n.splice(r,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e}()}(),a=function(){return s?window.Map:function(t){function e(){return i(this,e),n(this,t.apply(this,arguments))}return r(e,t),e.prototype.clear=function(){this.__entries__.splice(0,this.__entries__.length)},e.prototype.entries=function(){return this.__entries__.slice()},e.prototype.keys=function(){return this.__entries__.map(function(t){return t[0]})},e.prototype.values=function(){return this.__entries__.map(function(t){return t[1]})},e.prototype.forEach=function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=this.__entries__,r=Array.isArray(n),i=0,n=r?n:n[Symbol.iterator]();;){var o;if(r){if(i>=n.length)break;o=n[i++]}else{if(i=n.next(),i.done)break;o=i.value}var s=o;t.call(e,s[1],s[0])}},o(e,[{key:"size",get:function(){return this.__entries__.length}}]),e}(u)}();e.Map=a,e.WeakMap=u},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=!1;return function(){for(var r=this,i=arguments.length,o=Array(i),s=0;s<i;s++)o[s]=arguments[s];n!==!1&&clearTimeout(n),n=setTimeout(function(){n=!1,t.apply(r,o)},e)}}e.__esModule=!0;var s=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),u=n(4),a=r(u),c=n(5),f=r(c),l="function"==typeof window.MutationObserver,h=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:50,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];i(this,t),this._idleTimeout=e,this._isCycleContinuous=!l||n,this._cycleStartTime=0,this._isCycleActive=!1,this._isUpdateScheduled=!1,this._listenersEnabled=!1,this._mutationsObserver=null,this._observers=[],this.runUpdates=this.runUpdates.bind(this),this._onMutation=this._onMutation.bind(this),this._resolveScheduled=this._resolveScheduled.bind(this),this._continuousCycleHandler=o(this.runUpdates,100)}return t.prototype.connect=function(t){this.isConnected(t)||this._observers.push(t),this._listenersEnabled||this._addListeners()},t.prototype.disconnect=function(t){var e=this._observers,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this._listenersEnabled&&this._removeListeners()},t.prototype.isConnected=function(t){return!!~this._observers.indexOf(t)},t.prototype._updateObservers=function(){for(var t=!1,e=this._observers,n=Array.isArray(e),r=0,e=n?e:e[Symbol.iterator]();;){var i;if(n){if(r>=e.length)break;i=e[r++]}else{if(r=e.next(),r.done)break;i=r.value}var o=i;o.gatherActive(),o.hasActive()&&(t=!0,o.broadcastActive())}return t},t.prototype.runUpdates=function(){this._cycleStartTime=(0,a["default"])(),this._isCycleActive=!0,this.scheduleUpdate()},t.prototype.scheduleUpdate=function(){this._isUpdateScheduled||(this._isUpdateScheduled=!0,(0,f["default"])(this._resolveScheduled))},t.prototype._resolveScheduled=function(){var t=this._updateObservers();this._isUpdateScheduled=!1,this._isCycleActive&&(t?this.runUpdates():this._hasRemainingTime()?this.scheduleUpdate():this._endUpdates())},t.prototype._hasRemainingTime=function(){var t=(0,a["default"])()-this._cycleStartTime;return this._idleTimeout-t>0},t.prototype._endUpdates=function(){this._isCycleActive=!1,this._isCycleContinuous&&this._listenersEnabled&&this._continuousCycleHandler()},t.prototype._addListeners=function(){this._listenersEnabled||(this._listenersEnabled=!0,window.addEventListener("resize",this.runUpdates),l&&(this._mutationsObserver=new MutationObserver(this._onMutation),this._mutationsObserver.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._isCycleContinuous&&this.runUpdates())},t.prototype._removeListeners=function(){this._listenersEnabled&&(window.removeEventListener("resize",this.runUpdates),this._mutationsObserver&&this._mutationsObserver.disconnect(),this._mutationsObserver=null,this._listenersEnabled=!1)},t.prototype._onMutation=function(t){var e=t.some(function(t){return"attributes"===t.type});e?this.runUpdates():this.scheduleUpdate()},s(t,[{key:"idleTimeout",get:function(){return this._idleTimeout},set:function(t){this._idleTimeout=t}},{key:"continuousUpdates",get:function(){return this._isCycleContinuous},set:function(t){l&&(this._isCycleContinuous=t,this._listenersEnabled&&t&&this.runUpdates())}}]),t}();e["default"]=h,t.exports=e["default"]},function(t,e){"use strict";e.__esModule=!0,e["default"]=function(){return window.performance&&"function"==typeof window.performance.now?function(){return window.performance.now()}:function(){return Date.now()}}(),t.exports=e["default"]},function(t,e){"use strict";e.__esModule=!0,e["default"]=function(){return window.requestAnimationFrame&&"function"==typeof window.requestAnimationFrame?window.requestAnimationFrame:function(t){return setTimeout(function(){return t(Date.now())},1e3/60)}}(),t.exports=e["default"]},function(t,e,n){"use strict";function r(t){return t&&t.__esModule?t:{"default":t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}e.__esModule=!0;var o=n(2),s=n(7),u=r(s),a=n(8),c=r(a),ResizeObserver=function(){function ResizeObserver(t,e,n){if(i(this,ResizeObserver),"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this._callback=t,this._targets=new o.Map,this._activeTargets=[],this._controller=e,this._publicObserver=n}return ResizeObserver.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if(!(t instanceof Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this._targets;e.has(t)||(e.set(t,new u["default"](t)),this._controller.isConnected(this)||this._controller.connect(this),this._controller.runUpdates())},ResizeObserver.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if(!(t instanceof Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this._targets;e.has(t)&&(e["delete"](t),e.size||this.disconnect())},ResizeObserver.prototype.disconnect=function(){this.clearActive(),this._targets.clear(),this._controller.disconnect(this)},ResizeObserver.prototype.broadcastActive=function(){if(this.hasActive()){var t=this._publicObserver,e=this._activeTargets.map(function(t){return new c["default"](t.target,t.broadcastRect())});this.clearActive(),this._callback.call(t,e,t)}},ResizeObserver.prototype.clearActive=function(){this._activeTargets.splice(0)},ResizeObserver.prototype.hasActive=function(){return!!this._activeTargets.length},ResizeObserver.prototype.gatherActive=function(){this.clearActive();var t=this._activeTargets;this._targets.forEach(function(e){e.isActive()&&t.push(e)})},ResizeObserver}();e["default"]=ResizeObserver,t.exports=e["default"]},function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t){return window.getComputedStyle(t)}function i(t){return parseFloat(t)||0}function o(t){for(var e=arguments.length,n=Array(e>1?e-1:0),r=1;r<e;r++)n[r-1]=arguments[r];return n.reduce(function(e,n){var r=t["border-"+n+"-width"];return e+i(r)},0)}function s(t){for(var e=["top","right","bottom","left"],n={},r=e,o=Array.isArray(r),s=0,r=o?r:r[Symbol.iterator]();;){var u;if(o){if(s>=r.length)break;u=r[s++]}else{if(s=r.next(),s.done)break;u=s.value}var a=u,c=t["padding-"+a];n[a]=i(c)}return n}function u(t,e,n,r){return{width:t,height:e,top:n,right:t+r,bottom:e+n,left:r}}function a(t){var e=t.getBBox();return u(e.width,e.height,0,0)}function c(){var t=r(document.documentElement),e=i(t.width),n=i(t.height);return u(e,n,0,0)}function f(t){var e=t.clientWidth,n=t.clientHeight;if(!e&&!n)return p;var a=r(t),c=s(a),f=c.left+c.right,l=c.top+c.bottom,h=i(a.width),d=i(a.height);"border-box"===a.boxSizing&&(Math.round(h+f)!==e&&(h-=o(a,"left","right")+f),Math.round(d+l)!==n&&(d-=o(a,"top","bottom")+l));var _=Math.round(h+f)-e,y=Math.round(d+l)-n;return 1!==Math.abs(_)&&(h-=_),1!==Math.abs(y)&&(d-=y),u(h,d,c.top,c.left)}function l(t){return t instanceof window.SVGElement}function h(t){return t===document.documentElement}function d(t){return l(t)?a(t):h(t)?c():f(t)}e.__esModule=!0;var p=u(0,0,0,0),_=function(){function t(e){n(this,t),this.target=e,this._contentRect=p,this.broadcastWidth=0,this.broadcastHeight=0}return t.prototype.broadcastRect=function(){var t=this._contentRect;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t.prototype.isActive=function(){var t=d(this.target);return this._contentRect=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t}();e["default"]=_,t.exports=e["default"]},function(t,e){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r={configurable:n.configurable||!1,writable:n.writable||!1,enumerable:n.enumerable||!1},i=Object.keys(e),o=Array.isArray(i),s=0,i=o?i:i[Symbol.iterator]();;){var u;if(o){if(s>=i.length)break;u=i[s++]}else{if(s=i.next(),s.done)break;u=s.value}var a=u;r.value=e[a],Object.defineProperty(t,a,r)}return t}e.__esModule=!0;var ResizeObserverEntry=function ResizeObserverEntry(t,e){n(this,ResizeObserverEntry);var i=window.ClientRect?ClientRect.prototype:Object.prototype,o=Object.create(i);r(o,{top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.width,height:e.height},{configurable:!0}),r(this,{target:t,contentRect:o},{configurable:!0})};e["default"]=ResizeObserverEntry,t.exports=e["default"]}])});
//# sourceMappingURL=ResizeObserver.min.js.map
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.ResizeObserver=e()}(this,function(){"use strict";function t(t){return window.getComputedStyle(t)}function e(t){return parseFloat(t)||0}function n(t){for(var n=arguments.length,r=Array(n>1?n-1:0),i=1;i<n;i++)r[i-1]=arguments[i];return r.reduce(function(n,r){var i=t["border-"+r+"-width"];return n+e(i)},0)}function r(t){for(var n=["top","right","bottom","left"],r={},i=n,o=Array.isArray(i),s=0,i=o?i:i[Symbol.iterator]();;){var a;if(o){if(s>=i.length)break;a=i[s++]}else{if(s=i.next(),s.done)break;a=s.value}var u=a,c=t["padding-"+u];r[u]=e(c)}return r}function i(t,e,n,r){return{width:t,height:e,top:n,right:t+r,bottom:e+n,left:r}}function o(t){var e=t.getBBox();return i(e.width,e.height,0,0)}function s(){var n=t(document.documentElement),r=e(n.width),o=e(n.height);return i(r,o,0,0)}function a(o){var s=o.clientWidth,a=o.clientHeight;if(!s&&!a)return O;var u=t(o),c=r(u),h=c.left+c.right,f=c.top+c.bottom,l=e(u.width),p=e(u.height);"border-box"===u.boxSizing&&(Math.round(l+h)!==s&&(l-=n(u,"left","right")+h),Math.round(p+f)!==a&&(p-=n(u,"top","bottom")+f));var _=Math.round(l+h)-s,d=Math.round(p+f)-a;return 1!==Math.abs(_)&&(l-=_),1!==Math.abs(d)&&(p-=d),i(l,p,c.top,c.left)}function u(t){return t instanceof window.SVGElement}function c(t){return t===document.documentElement}function h(t){return u(t)?o(t):c(t)?s():a(t)}function f(t,e){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r={configurable:n.configurable||!1,writable:n.writable||!1,enumerable:n.enumerable||!1},i=Object.keys(e),o=Array.isArray(i),s=0,i=o?i:i[Symbol.iterator]();;){var a;if(o){if(s>=i.length)break;a=i[s++]}else{if(s=i.next(),s.done)break;a=s.value}var u=a;r.value=e[u],Object.defineProperty(t,u,r)}return t}var l=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},p=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),_=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},d=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},b="function"==typeof window.WeakMap&&"function"==typeof window.Map,v=function(){function t(t,e){var n=-1;return t.some(function(t,r){var i=t[0]===e;return i&&(n=r),i}),n}return b?window.WeakMap:function(){function e(){l(this,e),this.__entries__=[]}return e.prototype.get=function(e){var n=t(this.__entries__,e);return this.__entries__[n][1]},e.prototype.set=function(e,n){var r=t(this.__entries__,e);~r?this.__entries__[r][1]=n:this.__entries__.push([e,n])},e.prototype.delete=function(e){var n=this.__entries__,r=t(n,e);~r&&n.splice(r,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e}()}(),y=function(){return b?window.Map:function(t){function e(){return l(this,e),d(this,t.apply(this,arguments))}return _(e,t),e.prototype.clear=function(){this.__entries__.splice(0,this.__entries__.length)},e.prototype.entries=function(){return this.__entries__.slice()},e.prototype.keys=function(){return this.__entries__.map(function(t){return t[0]})},e.prototype.values=function(){return this.__entries__.map(function(t){return t[1]})},e.prototype.forEach=function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=this.__entries__,r=Array.isArray(n),i=0,n=r?n:n[Symbol.iterator]();;){var o;if(r){if(i>=n.length)break;o=n[i++]}else{if(i=n.next(),i.done)break;o=i.value}var s=o;t.call(e,s[1],s[0])}},p(e,[{key:"size",get:function(){return this.__entries__.length}}]),e}(v)}(),g=function(){return"function"==typeof window.requestAnimationFrame?window.requestAnimationFrame:function(t){return setTimeout(function(){return t(Date.now())},1e3/60)}}(),w=function(t){function e(){t.apply.apply(t,s),s=null,a&&(r.apply.apply(r,a),a=null)}function n(){o?g(e):e()}function r(){for(var t=arguments.length,e=Array(t),r=0;r<t;r++)e[r]=arguments[r];var o=[this,e];s?a=o:(s=o,setTimeout(n,i))}var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,o=arguments.length>2&&void 0!==arguments[2]&&arguments[2],s=null,a=null;return r},m="function"==typeof window.MutationObserver,E=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];l(this,t),this._isCycleContinuous=!m||e,this._listenersEnabled=!1,this._mutationsObserver=null,this._observers=[],this.refresh=w(this.refresh.bind(this),30,!0),this._continuousUpdateHandler=w(this.refresh,70)}return t.prototype.connect=function(t){this.isConnected(t)||this._observers.push(t),this._listenersEnabled||this._addListeners()},t.prototype.disconnect=function(t){var e=this._observers,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this._listenersEnabled&&this._removeListeners()},t.prototype.isConnected=function(t){return!!~this._observers.indexOf(t)},t.prototype.refresh=function(){var t=this._updateObservers();t?this.refresh():this._isCycleContinuous&&this._listenersEnabled&&this._continuousUpdateHandler()},t.prototype._updateObservers=function(){for(var t=!1,e=this._observers,n=Array.isArray(e),r=0,e=n?e:e[Symbol.iterator]();;){var i;if(n){if(r>=e.length)break;i=e[r++]}else{if(r=e.next(),r.done)break;i=r.value}var o=i;o.gatherActive(),o.hasActive()&&(t=!0,o.broadcastActive())}return t},t.prototype._addListeners=function(){this._listenersEnabled||(window.addEventListener("resize",this.refresh),m&&(this._mutationsObserver=new MutationObserver(this.refresh),this._mutationsObserver.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._listenersEnabled=!0,this._isCycleContinuous&&this.refresh())},t.prototype._removeListeners=function(){this._listenersEnabled&&(window.removeEventListener("resize",this.refresh),this._mutationsObserver&&this._mutationsObserver.disconnect(),this._mutationsObserver=null,this._listenersEnabled=!1)},p(t,[{key:"continuousUpdates",get:function(){return this._isCycleContinuous},set:function(t){m&&(this._isCycleContinuous=t,this._listenersEnabled&&t&&this.refresh())}}]),t}(),O=i(0,0,0,0),A=function(){function t(e){l(this,t),this.target=e,this._contentRect=O,this.broadcastWidth=0,this.broadcastHeight=0}return t.prototype.broadcastRect=function(){var t=this._contentRect;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t.prototype.isActive=function(){var t=h(this.target);return this._contentRect=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t}(),ResizeObserverEntry=function ResizeObserverEntry(t,e){l(this,ResizeObserverEntry);var n=window.ClientRect||Object,r=Object.create(n.prototype);f(r,e,{configurable:!0}),f(this,{target:t,contentRect:r},{configurable:!0})},k=function(){function ResizeObserver(t,e,n){if(l(this,ResizeObserver),"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this._callback=t,this._targets=new y,this._activeTargets=[],this._controller=e,this._publicObserver=n}return ResizeObserver.prototype.observe=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if(!(t instanceof Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this._targets;e.has(t)||(e.set(t,new A(t)),this._controller.isConnected(this)||this._controller.connect(this),this._controller.refresh())},ResizeObserver.prototype.unobserve=function(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if(!(t instanceof Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this._targets;e.has(t)&&(e.delete(t),e.size||this.disconnect())},ResizeObserver.prototype.disconnect=function(){this.clearActive(),this._targets.clear(),this._controller.disconnect(this)},ResizeObserver.prototype.gatherActive=function(){this.clearActive();var t=this._activeTargets;this._targets.forEach(function(e){e.isActive()&&t.push(e)})},ResizeObserver.prototype.broadcastActive=function(){if(this.hasActive()){var t=this._publicObserver,e=this._activeTargets.map(function(t){return new ResizeObserverEntry(t.target,t.broadcastRect())});this.clearActive(),this._callback.call(t,e,t)}},ResizeObserver.prototype.clearActive=function(){this._activeTargets.splice(0)},ResizeObserver.prototype.hasActive=function(){return!!this._activeTargets.length},ResizeObserver}(),T=new E,C=new v,x=function(){function ResizeObserver(t){if(l(this,ResizeObserver),!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var e=new k(t,T,this);C.set(this,e)}return p(ResizeObserver,null,[{key:"continuousUpdates",get:function(){return T.continuousUpdates},set:function(t){if("boolean"!=typeof t)throw new TypeError('type of "continuousUpdates" value must be boolean.');T.continuousUpdates=t}}]),ResizeObserver}();["observe","unobserve","disconnect"].forEach(function(t){x.prototype[t]=function(){var e;return(e=C.get(this))[t].apply(e,arguments)}});var ResizeObserver=x;"function"==typeof window.ResizeObserver&&(ResizeObserver=window.ResizeObserver);var M=ResizeObserver;return M});
//# sourceMappingURL=ResizeObserver.min.js.map
{
"name": "resize-observer-polyfill",
"author": "Denis Rul <que.etc@bgmail.com>",
"version": "1.1.5",
"version": "1.2.0",
"description": "A polyfill for the Resize Observer API",

@@ -38,6 +38,11 @@ "main": "index.js",

"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-eslint": "^7.0.0",
"babel-plugin-external-helpers": "^6.18.0",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.9.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-latest": "^6.16.0",
"eslint": "^3.8.1",
"gulp": "^3.9.1",
"gulp-eslint": "^3.0.1",
"jasmine-core": "^2.4.0",
"karma": "^1.2.0",

@@ -48,17 +53,11 @@ "karma-chrome-launcher": "^2.0.0",

"karma-jasmine": "^1.0.2",
"karma-spec-reporter": "0.0.26",
"karma-jasmine-html-reporter": "^0.2.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.7.0",
"jasmine-core": "^2.4.1",
"webpack": "^1.13.1",
"karma-rollup-plugin": "^0.2.4",
"karma-spec-reporter": "0.0.26",
"lodash": "^4.13.1",
"gulp": "^3.9.1",
"gulp-util": "^3.0.7",
"gulp-eslint": "^3.0.1",
"eslint": "^3.4.0"
"rollup": "^0.36.3",
"rollup-plugin-babel": "^2.6.1",
"rollup-plugin-uglify": "^1.0.1"
}
}

@@ -9,5 +9,5 @@ ResizeObserver Polyfill

Implements event based tracking of changes in the content dimensions of elements, i.e. no polling (in the general case) unless DOM is mutated or the `resize` event is triggered. Uses MutationsObserver and falls back to an infinite dirty checking cycle if the first one is not supported. Handles long running CSS transitions/animations and can optionally observe resizing of a `<textarea>` element along with changes caused by the `:hover` pseudo-class.
Implementation is based on the MutationObserver (no polling unless DOM changes) with a fall back to a continuous dirty checking cycle if the latter one is not supported. Handles non-delayed CSS transitions/animations and can optionally observe resizing of a `<textarea>` element along with changes caused by the `:hover` pseudo-class.
Compliant with the [spec](http://rawgit.com/WICG/ResizeObserver/master/index.html) and the native implementation. Doesn't contain any publicly available methods except for those described in the spec. The size is _3.6kb_ when minified and gzipped.
Compliant with the [spec](http://rawgit.com/WICG/ResizeObserver/master/index.html) and the native implementation. Doesn't contain any publicly available methods except for those described in spec. The size is _3.0kb_ when minified and gzipped.

@@ -21,3 +21,3 @@ [Live demo](http://que-etc.github.io/resize-observer-polyfill) (has style problems in IE10 and lower).

```sh
npm install --save resize-observer-polyfill
npm install resize-observer-polyfill --save-dev
```

@@ -28,3 +28,3 @@

```sh
bower install --save resize-observer-polyfill
bower install resize-observer-polyfill --save-dev
```

@@ -38,3 +38,3 @@

* Chrome 40+
* Chrome 40+ , _native since v54_
* Firefox 37+

@@ -50,2 +50,3 @@ * Safari 9+, _including mobile_

### Local export
It's recommended to use this library in the form of the [ponyfill](https://github.com/sindresorhus/ponyfill), which doesn't inflict modifications of the global object.

@@ -59,8 +60,9 @@

const ro = new ResizeObserver((entries, observer) => {
const entry = entries[0];
const cr = entry.contentRect;
for (const entry of entries) {
const cr = entry.contentRect;
console.log('Element:', entry.target);
console.log(`Element size: ${cr.width}px x ${cr.height}px`);
console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
console.log('Element:', entry.target);
console.log(`Element's size: ${cr.width}px x ${cr.height}px`);
console.log(`Element's paddings: ${cr.top}px ; ${cr.left}px`);
}
});

@@ -71,37 +73,10 @@

As a pre-built ES5 UMD module.
As a pre-built ES5 [UMD](https://github.com/umdjs/umd) version if ES6 is not your thing: `resize-observer-polyfill/dist/ResizeObserver`.
AMD:
### Global export
Use following versions if you want polyfill to extend global object.
```javascript
define([
'resize-observer-polyfill/dist/ResizeObserver'
], function (ResizeObserver) {
// ...
});
```
ES6 module:
CommonJS:
```javascript
var ResizeObserver = require('resize-observer-polyfill/dist/ResizeObserver');
```
As a browsers' global object:
```xml
<script src="resize-observer-polyfill/dist/ResizeObserver.js"></script>
<script>
(function () {
var ro = new ResizeObserver(function () {});
})();
</script>
```
### Global exports
Use following versions in case if you need to export polyfill globally.
With ES6 modules:
```javascript
import 'resize-observer-polyfill/index.global';

@@ -112,23 +87,15 @@

As UMD module: `resize-observer-polyfill/dist/ResizeObserver.global`.
UMD version: `resize-observer-polyfill/dist/ResizeObserver.global`.
You can also take the minified bundles: `ResizeObserver.min.js` or `ResizeObserver.global.min.js`.
You can also take minified bundles: `ResizeObserver.min.js` or `ResizeObserver.global.min.js`.
## Configuration
`ResizeObserver` class additionally implements following static accessor properties:
`ResizeObserver` class additionally implements following static accessor property:
### idleTimeout
After the mutations of DOM attributes, like `class` or `style`, the update cycle will be started which will run either until the dimensions of observed elements keep changing or the `idleTimeout` is reached. This approach is used to handle transitions and animations.
Default timeout value is `50` milliseconds and you can increase it to match the delay of transitions, e.g. if the delay is `500` milliseconds you can set `ResizeObserver.idleTimeout = 500` to the corresponding value.
Note that even if transitions are meant to start "immediately" it's still better to leave this value as it is. And you can set this property to zero if you don't need transitions to be tracked.
### continuousUpdates
By default resizing of a `<textarea>` element and changes caused by the CSS `:hover` pseudo-class are not tracked. To handle them you can set `ResizeObserver.continuousUpdtaes = true` which in turn will start a continuous update cycle with the interval of `100` milliseconds (using RAF, of course). Keep in mind that this is going to affect the performance.
By default things like resizing of a `<textarea>` element, changes caused by the CSS `:hover` pseudo-class and delayed CSS transitions are not tracked. To handle them you can set `ResizeObserver.continuousUpdtaes = true` which in turn will start a continuous update cycle which runs every `100` milliseconds (as a RAF callback, of course). Keep in mind that this is going to affect the performance.
**NOTE:** changes made to these properties will affect all existing and future instances of ResizeObserver.
**NOTE:** changes made to this property affect all existing and future instances of ResizeObserver.

@@ -150,4 +117,3 @@ ## Building and testing

Functional tests for all available browsers that are
defined in `karma.config.js` file:
Functional tests for all available browsers defined in `karma.config.js` file:
```sh

@@ -171,2 +137,1 @@ gulp test:spec

[travis-url]: https://travis-ci.org/que-etc/resize-observer-polyfill

@@ -9,9 +9,8 @@ import {Map} from './shims/es6-collections';

*
* @param {Function} callback - Callback function which will be invoked
* when one of the observed elements changes its' content rectangle.
* @param {ResizeObsreverController} controller - Controller instance
* which is responsible for the updates of observer.
* @param {ResizeObserver} publicObserver - Reference
* to the public ResizeObserver instance which will be passed
* to callback function.
* @param {Function} callback - Callback function that is invoked when one
* of the observed elements changes it's content rectangle.
* @param {ResizeObsreverController} controller - Controller instance which
* is responsible for the updates of observer.
* @param {ResizeObserver} publicObserver - Reference to the public
* ResizeObserver instance which will be passed to callback function.
*/

@@ -29,4 +28,4 @@ constructor(callback, controller, publicObserver) {

// Collection of resize observations that have detected
// changes in dimensions of elements.
// Collection of resize observations that have detected changes in
// dimensions of elements.
this._activeTargets = [];

@@ -37,4 +36,3 @@

// Public ResizeObserver instance which will be passed
// to callback function.
// Public ResizeObserver instance which will be passed to callback function.
this._publicObserver = publicObserver;

@@ -65,6 +63,6 @@ }

// Register new ResizeObservation instance.
targets.set(target, new ResizeObservation(target));
// Add observer to controller if
// it hasn't been connected yet.
// Add observer to controller if it hasn't been connected yet.
if (!this._controller.isConnected(this)) {

@@ -75,3 +73,3 @@ this._controller.connect(this);

// Update observations.
this._controller.runUpdates();
this._controller.refresh();
}

@@ -101,8 +99,7 @@

// Remove element and associated with
// it ResizeObsrvation instance from registry.
// Remove element and associated with it ResizeObsrvation instance from
// registry.
targets.delete(target);
// Set back the initial state if
// there is nothing to observe.
// Set back the initial state if there is nothing to observe.
if (!targets.size) {

@@ -114,4 +111,3 @@ this.disconnect();

/**
* Stops observing all elements and
* clears the observations list.
* Stops observing all elements and clears the observations list.
*/

@@ -125,9 +121,24 @@ disconnect() {

/**
* Invokes initial callback function with a list
* of ResizeObserverEntry instances collected from
* active resize observations.
* Clears an array of previously collected active observations and collects
* observation instances which associated element has changed its' content
* rectangle.
*/
gatherActive() {
this.clearActive();
const activeTargets = this._activeTargets;
this._targets.forEach(observation => {
if (observation.isActive()) {
activeTargets.push(observation);
}
});
}
/**
* Invokes initial callback function with a list of ResizeObserverEntry
* instances collected from active resize observations.
*/
broadcastActive() {
// Do nothing if observer doesn't
// have active observations.
// Do nothing if observer doesn't have active observations.
if (!this.hasActive()) {

@@ -137,6 +148,5 @@ return;

const publicObserver = this._publicObserver;
const observer = this._publicObserver;
// Create ResizeObserverEntry instance
// for every active observation.
// Create ResizeObserverEntry instance for every active observation.
const entries = this._activeTargets.map(observation => {

@@ -150,4 +160,3 @@ return new ResizeObserverEntry(

this.clearActive();
this._callback.call(publicObserver, entries, publicObserver);
this._callback.call(observer, entries, observer);
}

@@ -163,4 +172,3 @@

/**
* Tells whether the observer has
* pending observations.
* Tells whether observer has pending observations.
*

@@ -172,19 +180,2 @@ * @returns {Boolean}

}
/**
* Clears an array of previously collected active observations
* and collects observation instances which associated element
* has changed its' content rectangle.
*/
gatherActive() {
this.clearActive();
const activeTargets = this._activeTargets;
this._targets.forEach(observation => {
if (observation.isActive()) {
activeTargets.push(observation);
}
});
}
}

@@ -15,4 +15,3 @@ // Placeholder of an empty content rectangle.

/**
* Converts provided string defined
* in q form of '{{value}}px' to number.
* Converts provided string defined in q form of '{{value}}px' to number.
*

@@ -98,7 +97,8 @@ * @param {String} value

function getDocElementRect() {
// Neither scroll[Width/Height] nor offset[Width/Height] can be used to define
// content dimensions as they give inconsistent results across different browsers.
// E.g. in the Internet Explorer 10 and lower value of these properties can't be
// less than the client dimensions (same thing with the "getBoundingClientRect" method).
// And Firefox has the same behavior with its "scroll" properties.
// Neither scroll[Width/Height] nor offset[Width/Height] can be used to
// define content dimensions as they give inconsistent results across
// different browsers. E.g. in the Internet Explorer 10 and lower value of
// these properties can't be less than the client dimensions (same thing
// with the "getBoundingClientRect" method). And Firefox has the same
// behavior with its "scroll" properties.
const styles = getStyles(document.documentElement);

@@ -155,5 +155,5 @@

//
// We can say that if CSS dimensions + paddings are equal to the "client" properties
// then it's either IE, and thus we don't need to subtract anything, or
// an element merely doesn't have paddings/borders styles.
// We can say that if CSS dimensions + paddings are equal to the "client"
// properties then it's either IE, and thus we don't need to subtract
// anything, or an element merely doesn't have paddings/borders styles.
if (Math.round(width + horizPad) !== clientWidth) {

@@ -170,4 +170,4 @@ width -= getBordersSize(styles, 'left', 'right') + horizPad;

// include scroll bars size which can be removed at this step as scroll bars
// are the only difference between rounded dimensions + paddings
// and "client" properties, though that is not always true in Chrome.
// are the only difference between rounded dimensions + paddings and "client"
// properties, though that is not always true in Chrome.
const vertScrollbar = Math.round(width + horizPad) - clientWidth;

@@ -177,6 +177,5 @@ const horizScrollbar = Math.round(height + vertPad) - clientHeight;

// Chrome has a rather weird rounding of "client" properties.
// E.g. for an element whose content width is 314.2px it sometimes
// gives the client width of 315px and for the width of 314.7px
// it may give 314px. And it doesn't happen all the time.
// This kind of difference needs to be ignored.
// E.g. for an element with content width of 314.2px it sometimes gives the
// client width of 315px and for the width of 314.7px it may give 314px.
// And it doesn't happen all the time. Such difference needs to be ignored.
if (Math.abs(vertScrollbar) !== 1) {

@@ -194,4 +193,3 @@ width -= vertScrollbar;

/**
* Checks whether provided element
* is an instance of SVGElement.
* Checks whether provided element is an instance of SVGElement.
*

@@ -206,4 +204,3 @@ * @param {Element} target - Element to be checked.

/**
* Checks whether provided element is
* a document element (root element of a document).
* Checks whether provided element is a document element (root element of a document).
*

@@ -218,4 +215,3 @@ * @param {Element} target - Element to be checked.

/**
* Calculates an appropriate content rectangle
* for provided html or svg element.
* Calculates an appropriate content rectangle for provided html or svg element.
*

@@ -239,5 +235,4 @@ * @param {Element} target - Element whose content rectangle

/**
* Class that is responsible for computations of the
* content rectangle of provided DOM element and
* for keeping track of its' changes.
* Class that is responsible for computations of the content rectangle of
* provided DOM element and for keeping track of its' changes.
*/

@@ -248,4 +243,3 @@ export default class ResizeObservation {

*
* @param {Element} target - Element whose content
* rectangle needs to be observed.
* @param {Element} target - Element to be observed.
*/

@@ -266,5 +260,4 @@ constructor(target) {

/**
* Updates 'broadcastWidth' and 'broadcastHeight'
* properties with a data from the corresponding
* properties of the last observed content rectangle.
* Updates 'broadcastWidth' and 'broadcastHeight' properties with a data
* from the corresponding properties of the last observed content rectangle.
*

@@ -283,5 +276,4 @@ * @returns {ClientRect} Last observed content rectangle.

/**
* Updates content rectangle and tells whether its'
* width or height properties have changed since
* the last broadcast.
* Updates content rectangle and tells whether its' width or height properties
* have changed since the last broadcast.
*

@@ -288,0 +280,0 @@ * @returns {Boolean}

@@ -12,9 +12,8 @@ import {WeakMap} from './shims/es6-collections';

/**
* ResizeObservers' "Proxy" class which is meant to hide private
* properties and methods from public instances.
* ResizeObservers' "Proxy" class which is meant to hide private properties and
* methods from public instances.
*
* Additionally it implements "idleTimeout" and "continuousUpdates" static property
* accessors to give control over the behavior of the ResizeObserverController
* instance. Changes made to these properties affect all future and
* existing observers.
* Additionally implements the "continuousUpdates" static property accessor to
* give control over the behavior of the ResizeObserverController instance.
* Changes made to this property affect all future and existing observers.
*/

@@ -25,5 +24,4 @@ class ResizeObserver {

*
* @param {Function} callback - Callback that will
* be invoked when dimensions of one of the
* observed elements have been changed.
* @param {Function} callback - Callback that is invoked when dimensions of
* one of the observed elements change.
*/

@@ -35,5 +33,6 @@ constructor(callback) {

// Create a new instance of the internal ResizeObserver.
const observer = new _ResizeObserver(callback, controller, this);
// Register an internal observer.
// Register internal observer.
observers.set(this, observer);

@@ -43,28 +42,2 @@ }

/**
* Extracts controllers' idle timeout value.
*
* @returns {Number}
*/
static get idleTimeout() {
return controller.idleTimeout;
}
/**
* Sets up new idle timeout.
*
* @param {Number} value - New timeout value.
*/
static set idleTimeout(value) {
if (typeof value !== 'number') {
throw new TypeError('type of "idleTimeout" value must be number.');
}
if (typeof value < 0) {
throw new TypeError('"idleTimeout" value must be greater than 0.');
}
controller.idleTimeout = value;
}
/**
* Tells whether continuous updates are enabled.

@@ -81,4 +54,3 @@ *

*
* @param {Boolean} value - Whether to enable or disable
* continuous updates.
* @param {Boolean} value - Whether to enable or disable continuous updates.
*/

@@ -85,0 +57,0 @@ static set continuousUpdates(value) {

@@ -1,43 +0,17 @@

import now from './shims/performance.now';
import requestAnimFrame from './shims/requestAnimationFrame';
import throttle from './throttle';
// Define whether the MutationObserver is supported.
const mutationsSupported = typeof window.MutationObserver === 'function';
/**
* Creates a wrapper function which ensures only one
* invocation of provided callback during the specified delay.
*
* @param {Function} callback - Function to be invoked.
* @param {Number} [delay = 0] - Delay after which to invoke callback.
* @returns {Function}
*/
function debounce(callback, delay = 0) {
let timeoutID = false;
return function (...args) {
if (timeoutID !== false) {
clearTimeout(timeoutID);
}
timeoutID = setTimeout(() => {
timeoutID = false;
/* eslint-disable no-invalid-this */
callback.apply(this, args);
/* eslint-enable no-invalid-this */
}, delay);
};
}
/**
* Controller class which handles updates of ResizeObserver instances.
* It's meant to decide when and for how long it's necessary to run updates by listening to the windows
* "resize" event along with a tracking of DOM mutations (nodes removal, changes of attributes, etc.).
* It decides when and for how long it's necessary to run updates by listening
* to the windows "resize" event along with a tracking of DOM mutations
* (nodes removal, changes of attributes, etc.).
*
* Transitions and animations are handled by running a repeatable update cycle either until the dimensions
* of observed elements are changing or the timeout is reached (default timeout is 50 milliseconds).
* Timeout value can be manually increased if transitions have a delay.
* Transitions and animations are handled by running a repeatable update cycle
* until the dimensions of observed elements are changing.
*
* Continuous update cycle will be used automatically in case if MutationObserver is not supported.
* Continuous update cycle will be used automatically in case MutationObserver
* is not supported.
*/

@@ -48,17 +22,9 @@ export default class ResizeObserverController {

*
* @param {Number} [idleTimeout = 0] - Idle timeout value.
* @param {Boolean} [continuousUpdates = false] - Whether to use a continuous update cycle.
* @param {Boolean} [continuousUpdates = false] - Whether to use a continuous
* update cycle.
*/
constructor(idleTimeout = 50, continuousUpdates = false) {
this._idleTimeout = idleTimeout;
constructor(continuousUpdates = false) {
// Continuous updates must be enabled if MutationObserver is not supported.
this._isCycleContinuous = !mutationsSupported || continuousUpdates;
this._cycleStartTime = 0;
// Indicates whether the update cycle is currently running.
this._isCycleActive = false;
// Indicates whether the update of observers is scheduled.
this._isUpdateScheduled = false;
// Indicates whether DOM listeners have been added.

@@ -73,31 +39,11 @@ this._listenersEnabled = false;

// Fix value of "this" binding for the following methods.
this.runUpdates = this.runUpdates.bind(this);
this._onMutation = this._onMutation.bind(this);
this._resolveScheduled = this._resolveScheduled.bind(this);
// Make sure that the "refresh" method is invoked as a RAF callback and
// that it happens only once during the period of 30 milliseconds.
this.refresh = throttle(this.refresh.bind(this), 30, true);
// Function that will be invoked to re-run the
// update cycle if continuous cycles are enabled.
this._continuousCycleHandler = debounce(this.runUpdates, 100);
// Additionally postpone invocation of the continuous updates.
this._continuousUpdateHandler = throttle(this.refresh, 70);
}
/**
* Returns current idle timeout value.
*
* @returns {Number}
*/
get idleTimeout() {
return this._idleTimeout;
}
/**
* Sets up new idle timeout value.
*
* @param {Number} value - New timeout value.
*/
set idleTimeout(value) {
this._idleTimeout = value;
}
/**
* Tells whether continuous updates are enabled.

@@ -114,9 +60,9 @@ *

*
* @param {Boolean} useContinuous - Whether to enable or disable
* continuous updates. Note that the value won't be applied
* if MutationObserver is not supported.
* @param {Boolean} useContinuous - Whether to enable or disable continuous
* updates. Note that the value won't be applied if MutationObserver is
* not supported.
*/
set continuousUpdates(useContinuous) {
// The state of continuous updates should not be modified
// if MutationObserver is not supported.
// The state of continuous updates should not be modified if
// MutationObserver is not supported.
if (!mutationsSupported) {

@@ -128,6 +74,6 @@ return;

// Immediately start the update cycle in order not to
// wait for a possible event that will initiate it.
// Immediately start the update cycle in order not to wait for a possible
// event that might initiate it.
if (this._listenersEnabled && useContinuous) {
this.runUpdates();
this.refresh();
}

@@ -158,5 +104,6 @@ }

disconnect(observer) {
let observers = this._observers,
index = observers.indexOf(observer);
const observers = this._observers;
const index = observers.indexOf(observer);
// Remove observer if it's present in registry.
if (~index) {

@@ -173,3 +120,3 @@ observers.splice(index, 1);

/**
* Tells whether provided observer is connected to controller.
* Tells whether the provided observer is connected to controller.
*

@@ -184,8 +131,25 @@ * @param {ResizeObserver} observer - Observer to be checked.

/**
* Updates every observer from observers list and
* notifies them of queued entries.
* Invokes the update of observers. It will continue running updates insofar
* it detects changes or if continuous updates are enabled.
*/
refresh() {
const hasChanges = this._updateObservers();
// Continue running updates if changes have been detected as there might
// be future ones caused by CSS transitions.
if (hasChanges) {
this.refresh();
} else if (this._isCycleContinuous && this._listenersEnabled) {
// Automatically repeat cycle if it's necessary.
this._continuousUpdateHandler();
}
}
/**
* Updates every observer from observers list and notifies them of queued
* entries.
*
* @private
* @returns {Boolean} Returns "true" if any observer
* has detected changes in dimensions of its' elements.
* @returns {Boolean} Returns "true" if any observer has detected changes in
* dimensions of its' elements.
*/

@@ -196,4 +160,7 @@ _updateObservers() {

for (const observer of this._observers) {
// Collect active observations.
observer.gatherActive();
// Broadcast active observations and set the flag that changes have
// been detected.
if (observer.hasActive()) {

@@ -210,86 +177,2 @@ hasChanges = true;

/**
* Starts the update cycle which runs either
* until it detects changes in the dimensions of
* elements or the idle timeout is reached.
*/
runUpdates() {
this._cycleStartTime = now();
this._isCycleActive = true;
this.scheduleUpdate();
}
/**
* Schedules the update of observers.
*/
scheduleUpdate() {
// Schedule new update if it
// hasn't been scheduled already.
if (!this._isUpdateScheduled) {
this._isUpdateScheduled = true;
requestAnimFrame(this._resolveScheduled);
}
}
/**
* Invokes the update of observers. It may re-run the
* cycle if changes in observers have been detected.
*
* @private
*/
_resolveScheduled() {
const hasChanges = this._updateObservers();
this._isUpdateScheduled = false;
// Do nothing if cycle wasn't started,
// i.e. a single update was requested.
if (!this._isCycleActive) {
return;
}
// Re-start cycle so that we can catch future changes,
// e.g. when there are active CSS transitions.
if (hasChanges) {
this.runUpdates();
} else if (this._hasRemainingTime()) {
// Keep running updates if idle timeout isn't reached yet.
// This way we make it possible to adjust to delayed transitions.
this.scheduleUpdate();
} else {
// Finish update cycle.
this._endUpdates();
}
}
/**
* Tells whether the update cycle has time remaining.
*
* @private
* @returns {Boolean}
*/
_hasRemainingTime() {
const timePassed = now() - this._cycleStartTime;
return this._idleTimeout - timePassed > 0;
}
/**
* Callback which is invoked when update cycle
* is finished. It may start a new cycle if continuous
* updates are enabled.
*
* @private
*/
_endUpdates() {
this._isCycleActive = false;
// Automatically repeat cycle if it's necessary.
if (this._isCycleContinuous && this._listenersEnabled) {
this._continuousCycleHandler();
}
}
/**
* Initializes DOM listeners.

@@ -305,13 +188,8 @@ *

this._listenersEnabled = true;
window.addEventListener('resize', this.refresh);
// Repeatable cycle is used here because the resize event may
// lead to continuous changes, e.g. when width or height of an element
// are controlled by CSS transitions.
window.addEventListener('resize', this.runUpdates);
// Subscribe to DOM mutations if it's possible as they may lead to
// changes in the dimensions of elements.
if (mutationsSupported) {
this._mutationsObserver = new MutationObserver(this._onMutation);
this._mutationsObserver = new MutationObserver(this.refresh);

@@ -326,6 +204,8 @@ this._mutationsObserver.observe(document, {

// Don't wait for a possible event that might trigger the
// update of observers and manually initiate the update cycle.
this._listenersEnabled = true;
// Don't wait for a possible event that might trigger the update of
// observers and manually initiate the update process.
if (this._isCycleContinuous) {
this.runUpdates();
this.refresh();
}

@@ -345,3 +225,3 @@ }

window.removeEventListener('resize', this.runUpdates);
window.removeEventListener('resize', this.refresh);

@@ -355,22 +235,2 @@ if (this._mutationsObserver) {

}
/**
* DOM mutations handler.
*
* @private
* @param {Array<MutationRecord>} entries - An array of mutation records.
*/
_onMutation(entries) {
// Check if at least one entry
// contains attributes changes.
const attrsChanged = entries.some(entry => {
return entry.type === 'attributes';
});
// It's expected that animations may start only
// after some attribute changes its' value.
attrsChanged ?
this.runUpdates() :
this.scheduleUpdate();
}
}
/**
* Defines properties for the provided target object.
* Defines properties of the provided target object.
*
* @param {Object} target - Object for which to define properties.
* @param {Object} props - Properties to be defined.
* @param {Object} [descr = {}] - Descriptor of the properties.
* @param {Object} [descr = {}] - Properties descriptor.
* @returns {Object} Target object.

@@ -33,22 +33,15 @@ */

constructor(target, rectData) {
// Content rectangle needs to be an instance
// of ClientRect if it's available.
const rectInterface = window.ClientRect ?
ClientRect.prototype :
Object.prototype;
// Content rectangle needs to be an instance of ClientRect if it's
// available.
const rectInterface = window.ClientRect || Object;
const contentRect = Object.create(rectInterface.prototype);
const contentRect = Object.create(rectInterface);
// According to the specification following properties are not writable
// and are also not enumerable in the native implementation.
//
// Property accessors are not being used as they'd require to define a
// private WeakMap storage which may cause memory leaks in browsers that
// don't support this type of collections.
defineProperties(contentRect, rectData, {configurable: true});
// According to the specification following properties
// are not writable and are also not enumerable in the
// native implementation.
defineProperties(contentRect, {
top: rectData.top,
right: rectData.right,
bottom: rectData.bottom,
left: rectData.left,
width: rectData.width,
height: rectData.height
}, {configurable: true});
defineProperties(this, {

@@ -55,0 +48,0 @@ target, contentRect

@@ -8,6 +8,3 @@ /**

export default (() => {
if (
window.requestAnimationFrame &&
typeof window.requestAnimationFrame === 'function'
) {
if (typeof window.requestAnimationFrame === 'function') {
return window.requestAnimationFrame;

@@ -14,0 +11,0 @@ }

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

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