dynamic-marquee - npm Package Compare versions

Comparing version 2.1.3 to 2.1.4

dist/dynamic-marquee.js

@@ -31,2 +31,5 @@ (function (global, factory) {
     if (staticProps) _defineProperties(Constructor, staticProps);
+    Object.defineProperty(Constructor, 'prototype', {
+      writable: false,
+    });
     return Constructor;
@@ -40,30 +43,65 @@ }
 
-  function size($el, direction) {
-    return $el[direction === DIRECTION.RIGHT ? 'offsetWidth' : 'offsetHeight'];
-  }
-  function defer(fn) {
-    window.setTimeout(function () {
-      return fn();
-    }, 0);
-  }
-  function deferException(cb) {
-    try {
-      return cb();
-    } catch (e) {
-      defer(function () {
-        throw e;
-      });
+  var SizeWatcher = /*#__PURE__*/ (function () {
+    function SizeWatcher($el) {
+      var _this = this,
+        _this$_observer;
+
+      _classCallCheck(this, SizeWatcher);
+
+      this._$el = $el;
+      this._width = null;
+      this._height = null;
+      this._observer =
+        'ResizeObserver' in window
+          ? new ResizeObserver(function (entries) {
+              var entry = entries[entries.length - 1];
+              var size = entry.borderBoxSize[0] || entry.borderBoxSize;
+              _this._width = size.inlineSize;
+              _this._height = size.blockSize;
+            })
+          : null;
+      (_this$_observer = this._observer) === null || _this$_observer === void 0
+        ? void 0
+        : _this$_observer.observe($el);
     }
-  }
-  function toDomEl($el) {
-    if (typeof $el === 'string' || typeof $el === 'number') {
-      // helper. convert string to div
-      var $div = document.createElement('div');
-      $div.textContent = $el + '';
-      return $div;
-    }
 
-    return $el;
-  }
+    _createClass(SizeWatcher, [
+      {
+        key: 'getWidth',
+        value: function getWidth() {
+          var _this$_width;
 
+          return (_this$_width = this._width) !== null &&
+            _this$_width !== void 0
+            ? _this$_width
+            : this._$el.offsetWidth;
+        },
+      },
+      {
+        key: 'getHeight',
+        value: function getHeight() {
+          var _this$_height;
+
+          return (_this$_height = this._height) !== null &&
+            _this$_height !== void 0
+            ? _this$_height
+            : this._$el.offsetHeight;
+        },
+      },
+      {
+        key: 'tearDown',
+        value: function tearDown() {
+          var _this$_observer2;
+
+          (_this$_observer2 = this._observer) === null ||
+          _this$_observer2 === void 0
+            ? void 0
+            : _this$_observer2.disconnect();
+        },
+      },
+    ]);
+
+    return SizeWatcher;
+  })();
+
   var transitionDuration = 60000;
@@ -85,2 +123,3 @@ var Item = /*#__PURE__*/ (function () {
       $container.style.willChange = 'auto';
+      this._sizeWatcher = new SizeWatcher($container);
       $container.appendChild($el);
@@ -110,3 +149,5 @@ this._$container = $container;
 
-          return size(this._$container, dir);
+          return dir === DIRECTION.RIGHT
+            ? this._sizeWatcher.getWidth()
+            : this._sizeWatcher.getHeight();
         },
@@ -181,3 +222,5 @@ },
         value: function remove() {
-          this._$container.remove();
+          this._sizeWatcher.tearDown();
+
+          this._$container.parentNode.removeChild(this._$container);
         },
@@ -243,2 +286,27 @@ },
 
+  function defer(fn) {
+    window.setTimeout(function () {
+      return fn();
+    }, 0);
+  }
+  function deferException(cb) {
+    try {
+      return cb();
+    } catch (e) {
+      defer(function () {
+        throw e;
+      });
+    }
+  }
+  function toDomEl($el) {
+    if (typeof $el === 'string' || typeof $el === 'number') {
+      // helper. convert string to div
+      var $div = document.createElement('div');
+      $div.textContent = $el + '';
+      return $div;
+    }
+
+    return $el;
+  }
+
   var Marquee = /*#__PURE__*/ (function () {
@@ -264,6 +332,5 @@ function Marquee($container) {
       this._rate = rate;
+      this._lastRate = 0;
       this._lastEffectiveRate = rate;
       this._justReversedRate = false;
-      this._windowWidth = window.innerWidth;
-      this._windowHeight = window.innerHeight;
       this._direction = upDown ? DIRECTION.DOWN : DIRECTION.RIGHT;
@@ -275,2 +342,4 @@ this._onItemRequired = [];
       this._containerSize = 0;
+      this._previousContainerSize = null;
+      this._containerSizeWatcher = null;
       this._items = [];
@@ -292,4 +361,2 @@ this._pendingItem = null;
       $container.appendChild($innerContainer);
-
-      this._scheduleRender();
     } // called when there's room for a new item.
@@ -337,3 +404,3 @@ // You can return the item to append next
             if (rate) {
-              this._scheduleRender();
+              this._scheduleRender(true);
             }
@@ -421,3 +488,3 @@ }
           } else {
-            this._scheduleRender();
+            this._scheduleRender(true);
           }
@@ -488,11 +555,21 @@ },
         key: '_scheduleRender',
-        value: function _scheduleRender() {
+        value: function _scheduleRender(immediate) {
           var _this3 = this;
 
-          if (!this._requestAnimationID) {
-            this._lastUpdateTime = performance.now();
-            this._requestAnimationID = window.requestAnimationFrame(
+          if (immediate) {
+            if (this._renderTimer) window.clearTimeout(this._renderTimer);
+            this._renderTimer = null;
+          }
+
+          if (!this._renderTimer) {
+            // ideally we'd use requestAnimationFrame here but there's a bug in
+            // chrome which means when the callback is called it triggers a style
+            // recalculation even when nothing changes, which is not efficient
+            // see https://bugs.chromium.org/p/chromium/issues/detail?id=1252311
+            // and https://stackoverflow.com/q/69293778/1048589
+            this._renderTimer = window.setTimeout(
               function () {
-                return _this3._onRequestAnimationFrame();
-              }
+                return _this3._tick();
+              },
+              immediate ? 0 : 100
             );
@@ -503,14 +580,22 @@ }
       {
-        key: '_onRequestAnimationFrame',
-        value: function _onRequestAnimationFrame() {
+        key: '_tick',
+        value: function _tick() {
           var _this4 = this;
 
-          this._requestAnimationID = null;
+          this._renderTimer = null;
 
           if (!this._items.length && !this._pendingItem) {
+            this._containerSizeWatcher.tearDown();
+
+            this._containerSizeWatcher = null;
             return;
           }
 
+          if (!this._containerSizeWatcher) {
+            this._containerSizeWatcher = new SizeWatcher(this._$container);
+          }
+
           var now = performance.now();
           var timePassed = now - this._lastUpdateTime;
+          this._lastUpdateTime = now;
 
@@ -522,4 +607,8 @@ if (this._rate) {
           this._rendering = true;
-          var shiftAmount = this._rate * (timePassed / 1000);
-          this._containerSize = size(this._$container, this._direction);
+          var shiftAmount = this._lastRate * (timePassed / 1000);
+          this._lastRate = this._rate;
+          this._containerSize =
+            this._direction === DIRECTION.RIGHT
+              ? this._containerSizeWatcher.getWidth()
+              : this._containerSizeWatcher.getHeight();
           deferException(function () {
@@ -542,6 +631,5 @@ return _this4._render(shiftAmount);
               var item = this._items[0].item;
+              var size = item.getSize();
 
-              var _size = item.getSize();
-
-              if (this._leftItemOffset + _size > 0) {
+              if (this._leftItemOffset + size > 0) {
                 break;
@@ -554,3 +642,3 @@ }
 
-              this._leftItemOffset += _size;
+              this._leftItemOffset += size;
             }
@@ -663,9 +751,5 @@ }
 
-          var windowWidth = window.innerWidth;
-          var windowHeight = window.innerHeight;
-          var windowResized =
-            windowWidth !== this._windowWidth ||
-            windowHeight !== this._windowHeight;
-          this._windowWidth = windowWidth;
-          this._windowHeight = windowHeight;
+          var containerSizeChanged =
+            this._containerSize !== this._previousContainerSize;
+          this._previousContainerSize = this._containerSize;
           offsets.forEach(function (offset, i) {
@@ -677,3 +761,3 @@ var item = _this5._items[i];
               _this5._rate,
-              windowResized || hasJumped
+              containerSizeChanged || hasJumped
             );
@@ -680,0 +764,0 @@ item.offset = offset;

package.json

 {
   "name": "dynamic-marquee",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "A small library for creating marquees.",
@@ -5,0 +5,0 @@ "main": "./dist/dynamic-marquee.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44801

increased by6.1%

Lines of code

826

increased by9.84%

No dependency changes