dynamic-marquee - npm Package Compare versions

Comparing version 2.3.6 to 2.3.7

dist/dynamic-marquee.js

@@ -18,3 +18,3 @@ (function (global, factory) {
       if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
+      Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
     }
@@ -55,2 +55,16 @@ }
   }
+  function _toPrimitive(input, hint) {
+    if (typeof input !== "object" || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+      var res = prim.call(input, hint || "default");
+      if (typeof res !== "object") return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return typeof key === "symbol" ? key : String(key);
+  }
 
@@ -177,3 +191,3 @@ /**
   var SizeWatcher = /*#__PURE__*/function () {
-    function SizeWatcher($el) {
+    function SizeWatcher($el, onChange) {
       var _this = this,
@@ -190,2 +204,3 @@ _this$_observer;
         _this._height = size.blockSize;
+        onChange();
       }) : null;
@@ -226,3 +241,3 @@ (_this$_observer = this._observer) === null || _this$_observer === void 0 ? void 0 : _this$_observer.observe($el);
   var Item = /*#__PURE__*/function () {
-    function Item($el, direction, metadata) {
+    function Item($el, direction, metadata, onSizeChange) {
       _classCallCheck(this, Item);
@@ -241,3 +256,3 @@ var $container = document.createElement('div');
       }
-      this._sizeWatcher = new SizeWatcher($container);
+      this._sizeWatcher = new SizeWatcher($container, onSizeChange);
       $container.appendChild($el);
@@ -420,2 +435,3 @@ this._$container = $container;
       this._visible = !!document.hidden;
+      this._waitingForRaf = false;
       var $window = document.createElement('div');
@@ -535,3 +551,5 @@ $window.style.display = 'block';
           _this2._waitingForItem = false;
-          _this2._pendingItem = new Item($el, _this2._direction, metadata);
+          _this2._pendingItem = new Item($el, _this2._direction, metadata, function () {
+            return _this2._tickOnRaf();
+          });
           _this2._tick();
@@ -601,90 +619,103 @@ });
     }, {
+      key: "_tickOnRaf",
+      value: function _tickOnRaf() {
+        var _this5 = this;
+        if (!window.requestAnimationFrame || this._waitingForRaf) return;
+        this._waitingForRaf = true;
+        window.requestAnimationFrame(function () {
+          _this5._waitingForRaf = false;
+          _this5._tick();
+        });
+      }
+    }, {
       key: "_tick",
       value: function _tick() {
-        var _this5 = this;
+        var _this6 = this;
         var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
         this._boundary.enter(function (_ref8) {
           var callbacks = _ref8.callbacks;
-          _this5._renderTimer && clearTimeout(_this5._renderTimer);
-          _this5._renderTimer = null;
-          if (!force && !_this5._items.length && !_this5._pendingItem) {
-            _this5._cleanup();
+          _this6._renderTimer && clearTimeout(_this6._renderTimer);
+          _this6._renderTimer = null;
+          if (!force && !_this6._items.length && !_this6._pendingItem) {
+            _this6._cleanup();
             return;
           }
-          _this5._scheduleRender();
-          if (!_this5._$window.isConnected) {
+          _this6._scheduleRender();
+          if (!_this6._$window.isConnected) {
             // pause if we've been removed from the dom
-            _this5._correlation = null;
+            _this6._correlation = null;
             return;
           }
-          if (!_this5._containerSizeWatcher) {
-            _this5._containerSizeWatcher = new SizeWatcher(_this5._$window);
+          if (!_this6._containerSizeWatcher) {
+            _this6._containerSizeWatcher = new SizeWatcher(_this6._$window, function () {
+              return _this6._tickOnRaf();
+            });
           }
           var now = performance.now();
           var resynced = false;
-          if (_this5._correlation) {
-            var timePassed = now - _this5._correlation.time;
-            _this5._windowOffset = _this5._correlation.offset + _this5._correlation.rate * -1 * (timePassed / 1000);
+          if (_this6._correlation) {
+            var timePassed = now - _this6._correlation.time;
+            _this6._windowOffset = _this6._correlation.offset + _this6._correlation.rate * -1 * (timePassed / 1000);
           } else {
             resynced = true;
           }
-          if (Math.abs(_this5._windowOffset) > maxTranslateDistance) {
+          if (Math.abs(_this6._windowOffset) > maxTranslateDistance) {
             // resync so that the number of pixels we are translating doesn't get too big
             resynced = true;
-            var shiftAmount = _this5._windowOffset;
-            _this5._items.forEach(function (item) {
+            var shiftAmount = _this6._windowOffset;
+            _this6._items.forEach(function (item) {
               return item.offset -= shiftAmount;
             });
-            _this5._correlation = null;
-            _this5._windowOffset = 0;
+            _this6._correlation = null;
+            _this6._windowOffset = 0;
           }
           var visible = !document.hidden;
-          var goneVisible = visible && _this5._visible !== visible;
-          _this5._visible = visible;
-          _this5._slider.setOffset(_this5._windowOffset * -1, _this5._rate, resynced || goneVisible);
-          if (!_this5._correlation || _this5._correlation.rate !== _this5._rate) {
-            _this5._correlation = {
+          var goneVisible = visible && _this6._visible !== visible;
+          _this6._visible = visible;
+          _this6._slider.setOffset(_this6._windowOffset * -1, _this6._rate, resynced || goneVisible);
+          if (!_this6._correlation || _this6._correlation.rate !== _this6._rate) {
+            _this6._correlation = {
               time: now,
-              offset: _this5._windowOffset,
-              rate: _this5._rate
+              offset: _this6._windowOffset,
+              rate: _this6._rate
             };
           }
-          _this5._containerSize = _this5._direction === DIRECTION.RIGHT ? _this5._containerSizeWatcher.getWidth() : _this5._containerSizeWatcher.getHeight();
+          _this6._containerSize = _this6._direction === DIRECTION.RIGHT ? _this6._containerSizeWatcher.getWidth() : _this6._containerSizeWatcher.getHeight();
 
           // if container has size 0 pretend it is 1 to prevent infinite loop
           // of adding items that are instantly removed
-          var containerSize = Math.max(_this5._containerSize, 1);
-          var justReversedRate = _this5._justReversedRate;
-          _this5._justReversedRate = false;
-          var newItemWouldBeTouching = _this5._nextItemWouldBeTouching;
-          _this5._nextItemWouldBeTouching = null;
+          var containerSize = Math.max(_this6._containerSize, 1);
+          var justReversedRate = _this6._justReversedRate;
+          _this6._justReversedRate = false;
+          var newItemWouldBeTouching = _this6._nextItemWouldBeTouching;
+          _this6._nextItemWouldBeTouching = null;
           var nextItemTouching = null;
-          if (_this5._pendingItem) {
-            _this5._$moving.appendChild(_this5._pendingItem.getContainer());
-            var touching = _this5._rate <= 0 ? last(_this5._items) : first(_this5._items);
-            if (_this5._rate <= 0) {
-              _this5._items = [].concat(_toConsumableArray(_this5._items), [{
-                item: _this5._pendingItem,
-                appendRate: _this5._rate,
-                offset: newItemWouldBeTouching ? touching ? touching.offset + touching.item.getSize() : _this5._windowOffset : _this5._windowOffset + containerSize
+          if (_this6._pendingItem) {
+            _this6._$moving.appendChild(_this6._pendingItem.getContainer());
+            var touching = _this6._rate <= 0 ? last(_this6._items) : first(_this6._items);
+            if (_this6._rate <= 0) {
+              _this6._items = [].concat(_toConsumableArray(_this6._items), [{
+                item: _this6._pendingItem,
+                appendRate: _this6._rate,
+                offset: newItemWouldBeTouching ? touching ? touching.offset + touching.item.getSize() : _this6._windowOffset : _this6._windowOffset + containerSize
               }]);
             } else {
-              _this5._items = [{
-                item: _this5._pendingItem,
-                appendRate: _this5._rate,
-                offset: newItemWouldBeTouching ? touching ? touching.offset - _this5._pendingItem.getSize() : _this5._windowOffset + containerSize - _this5._pendingItem.getSize() : _this5._windowOffset - _this5._pendingItem.getSize()
-              }].concat(_toConsumableArray(_this5._items));
+              _this6._items = [{
+                item: _this6._pendingItem,
+                appendRate: _this6._rate,
+                offset: newItemWouldBeTouching ? touching ? touching.offset - _this6._pendingItem.getSize() : _this6._windowOffset + containerSize - _this6._pendingItem.getSize() : _this6._windowOffset - _this6._pendingItem.getSize()
+              }].concat(_toConsumableArray(_this6._items));
             }
-            _this5._pendingItem = null;
+            _this6._pendingItem = null;
           }
 
           // add a buffer on the side to make sure that new elements are added before they would actually be on screen
-          var buffer = renderInterval / 1000 * Math.abs(_this5._rate);
-          var requireNewItem = _this5._waitingForItem;
-          if (!_this5._waitingForItem && _this5._items.length /* there should always be items at this point */) {
-            var firstItem = first(_this5._items);
-            var lastItem = last(_this5._items);
-            var _touching = _this5._rate <= 0 ? lastItem : firstItem;
-            if (_this5._rate <= 0 && lastItem.offset + _touching.item.getSize() - _this5._windowOffset <= containerSize + buffer || _this5._rate > 0 && _touching.offset - _this5._windowOffset > -1 * buffer) {
-              _this5._waitingForItem = requireNewItem = true;
+          var buffer = renderInterval / 1000 * Math.abs(_this6._rate);
+          var requireNewItem = _this6._waitingForItem;
+          if (!_this6._waitingForItem && _this6._items.length /* there should always be items at this point */) {
+            var firstItem = first(_this6._items);
+            var lastItem = last(_this6._items);
+            var _touching = _this6._rate <= 0 ? lastItem : firstItem;
+            if (_this6._rate <= 0 && lastItem.offset + _touching.item.getSize() - _this6._windowOffset <= containerSize + buffer || _this6._rate > 0 && _touching.offset - _this6._windowOffset > -1 * buffer) {
+              _this6._waitingForItem = requireNewItem = true;
               // if an item is appended immediately below, it would be considered touching
@@ -701,17 +732,17 @@ // the previous if we haven't just changed direction.
           if (nextItemTouching) {
-            _this5._nextItemWouldBeTouching = true;
+            _this6._nextItemWouldBeTouching = true;
           }
-          _this5._items = _toConsumableArray(_this5._items).filter(function (_ref9) {
+          _this6._items = _toConsumableArray(_this6._items).filter(function (_ref9) {
             var item = _ref9.item,
               offset = _ref9.offset;
-            var keep = _this5._rate < 0 ? offset + item.getSize() > _this5._windowOffset : offset < _this5._windowOffset + containerSize;
-            if (!keep) _this5._removeItem(item);
+            var keep = _this6._rate < 0 ? offset + item.getSize() > _this6._windowOffset : offset < _this6._windowOffset + containerSize;
+            if (!keep) _this6._removeItem(item);
             return keep;
           });
-          if (!_this5._items.length) {
-            _this5._onAllItemsRemoved.forEach(function (cb) {
+          if (!_this6._items.length) {
+            _this6._onAllItemsRemoved.forEach(function (cb) {
               return callbacks.push(cb);
             });
           }
-          _this5._items.reduce(function (newOffset, item) {
+          _this6._items.reduce(function (newOffset, item) {
             if (newOffset !== null && item.offset < newOffset) {
@@ -725,6 +756,6 @@ // the size of the item before has increased and would now be overlapping
           }, null);
-          _this5._updateWindowInverseSize();
+          _this6._updateWindowInverseSize();
           if (requireNewItem) {
             var nextItem;
-            _this5._onItemRequired.some(function (cb) {
+            _this6._onItemRequired.some(function (cb) {
               return deferException(function () {
@@ -741,5 +772,5 @@ nextItem = cb({
               // Note appendItem() will call _tick() synchronously again
-              _this5.appendItem(nextItem);
+              _this6.appendItem(nextItem);
             }
-            _this5._nextItemWouldBeTouching = false;
+            _this6._nextItemWouldBeTouching = false;
           }
@@ -746,0 +777,0 @@ });

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

51729

increased by2.27%

Lines of code

894

increased by3.59%

No dependency changes