dynamic-marquee - npm Package Compare versions

Comparing version 1.2.3 to 1.3.0

dist/dynamic-marquee.js

@@ -67,4 +67,5 @@ (function (global, factory) {
 
+  var transitionDuration = 60000;
   var Item = /*#__PURE__*/ (function () {
-    function Item($el, direction, rateWhenAppended) {
+    function Item($el, direction) {
       _classCallCheck(this, Item);
@@ -83,3 +84,3 @@
       this._direction = direction;
-      this._rateWhenAppended = rateWhenAppended;
+      this._transitionState = null;
     }
@@ -109,6 +110,38 @@
         key: 'setOffset',
-        value: function setOffset(offset) {
+        value: function setOffset(offset, rate, force) {
+          var transitionState = this._transitionState;
+
+          if (transitionState && !force) {
+            var timePassed = performance.now() - transitionState.time;
+
+            if (
+              timePassed < transitionDuration - 10000 &&
+              transitionState.rate === rate
+            ) {
+              return;
+            }
+          }
+
+          if (!transitionState || force) {
+            if (this._direction === DIRECTION.RIGHT) {
+              this._$container.style.transform = 'translateX('.concat(
+                offset,
+                'px)'
+              );
+            } else {
+              this._$container.style.transform = 'translateY('.concat(
+                offset,
+                'px)'
+              );
+            }
+
+            this._$container.style.transition = '';
+            this._$container.offsetLeft;
+          }
+
+          var futureOffset = offset + (rate / 1000) * transitionDuration;
+
           if (this._direction === DIRECTION.RIGHT) {
             this._$container.style.transform = 'translateX('.concat(
-              offset,
+              futureOffset,
               'px)'
@@ -118,6 +151,15 @@ );
             this._$container.style.transform = 'translateY('.concat(
-              offset,
+              futureOffset,
               'px)'
             );
           }
+
+          this._$container.style.transition = 'transform '.concat(
+            transitionDuration,
+            'ms linear'
+          );
+          this._transitionState = {
+            time: performance.now(),
+            rate: rate,
+          };
         },
@@ -149,8 +191,2 @@ },
       },
-      {
-        key: 'getRateWhenAppended',
-        value: function getRateWhenAppended() {
-          return this._rateWhenAppended;
-        },
-      },
     ]);
@@ -219,2 +255,6 @@
       this._rate = rate;
+      this._lastEffectiveRate = rate;
+      this._justReversedRate = false;
+      this._windowWidth = window.innerWidth;
+      this._windowHeight = window.innerHeight;
       this._direction = upDown ? DIRECTION.DOWN : DIRECTION.RIGHT;
@@ -270,3 +310,4 @@ this._onItemRequired = [];
         value: function getNumItems() {
-          return this._items.filter(function (item) {
+          return this._items.filter(function (_ref2) {
+            var item = _ref2.item;
             return item instanceof Item;
@@ -287,3 +328,12 @@ }).length;
 
+          if (rate * this._lastEffectiveRate < 0) {
+            this._justReversedRate = true;
+            this._waitingForItem = false;
+          }
+
           this._rate = rate;
+
+          if (rate) {
+            this._lastEffectiveRate = rate;
+          }
         },
@@ -302,4 +352,5 @@ },
 
-          this._items.forEach(function ($a) {
-            return _this._removeItem($a);
+          this._items.forEach(function (_ref3) {
+            var item = _ref3.item;
+            return _this._removeItem(item);
           });
@@ -328,3 +379,4 @@
 
-          var itemAlreadyExists = this._items.some(function (item) {
+          var itemAlreadyExists = this._items.some(function (_ref4) {
+            var item = _ref4.item;
             return item instanceof Item && item.getOriginalEl() === $el;
@@ -338,7 +390,11 @@ });
           this._waitingForItem = false;
-          this._pendingItem = new Item($el, this._direction, this._rate);
+          this._pendingItem = new Item($el, this._direction);
 
           this._pendingItem.enableAnimationHint(!!this._rate);
 
-          this._scheduleRender();
+          if (this._rendering) {
+            this._render(0);
+          } else {
+            this._scheduleRender();
+          }
         },
@@ -348,5 +404,6 @@ },
         key: '_removeItem',
-        value: function _removeItem(item) {
+        value: function _removeItem(_ref5) {
           var _this2 = this;
 
+          var item = _ref5.item;
           defer(function () {
@@ -370,3 +427,5 @@ item.remove();
         value: function _updateContainerSize() {
-          var maxSize = this._items.reduce(function (size, item) {
+          var maxSize = this._items.reduce(function (size, _ref6) {
+            var item = _ref6.item;
+
             if (item instanceof VirtualItem) {
@@ -401,3 +460,4 @@ return size;
         value: function _enableAnimationHint(enable) {
-          this._items.forEach(function (item) {
+          this._items.forEach(function (_ref7) {
+            var item = _ref7.item;
             return item.enableAnimationHint(enable);
@@ -412,14 +472,9 @@ });
 
-          if (this._rendering) {
-            // we are already rendering, so call the render method synchronously
-            this._render();
-          } else {
-            if (!this._requestAnimationID) {
-              this._lastUpdateTime = performance.now();
-              this._requestAnimationID = window.requestAnimationFrame(
-                function () {
-                  return _this3._onRequestAnimationFrame();
-                }
-              );
-            }
+          if (!this._requestAnimationID) {
+            this._lastUpdateTime = performance.now();
+            this._requestAnimationID = window.requestAnimationFrame(
+              function () {
+                return _this3._onRequestAnimationFrame();
+              }
+            );
           }
@@ -435,3 +490,3 @@ },
 
-          if (!this._rate || (!this._items.length && !this._pendingItem)) {
+          if (!this._items.length && !this._pendingItem) {
             return;
@@ -443,10 +498,11 @@ }
 
-          this._scheduleRender();
+          if (this._rate) {
+            this._scheduleRender();
+          }
 
           this._rendering = true;
           var shiftAmount = this._rate * (timePassed / 1000);
-          this._leftItemOffset += shiftAmount;
           this._containerSize = size(this._$container, this._direction);
           deferException(function () {
-            return _this4._render();
+            return _this4._render(shiftAmount);
           });
@@ -458,5 +514,6 @@ this._rendering = false;
         key: '_render',
-        value: function _render() {
+        value: function _render(shiftAmount) {
           var _this5 = this;
 
+          this._leftItemOffset += shiftAmount;
           var containerSize = this._containerSize;
@@ -466,3 +523,3 @@
             while (this._items.length) {
-              var item = this._items[0];
+              var item = this._items[0].item;
 
@@ -486,3 +543,5 @@ var _size = item.getSize();
 
-          this._items.some(function (item, i) {
+          this._items.some(function (_ref8, i) {
+            var item = _ref8.item;
+
             if (nextOffset >= containerSize) {
@@ -493,5 +552,5 @@ if (_this5._rate > 0) {
                 });
+
+                return true;
               }
-
-              return true;
             }
@@ -510,5 +569,8 @@
                 // insert virtual item so that it starts off screen
-                this._items.push(
-                  new VirtualItem(Math.max(0, containerSize - nextOffset))
-                );
+                this._items.push({
+                  item: new VirtualItem(
+                    Math.max(0, containerSize - nextOffset)
+                  ),
+                  offset: nextOffset,
+                });
 
@@ -519,6 +581,9 @@ offsets.push(nextOffset);
 
+              this._items.push({
+                item: this._pendingItem,
+                offset: nextOffset,
+              });
+
               offsets.push(nextOffset);
               nextOffset += this._pendingItem.getSize();
-
-              this._items.push(this._pendingItem);
             } else {
@@ -530,3 +595,6 @@ if (
               ) {
-                this._items.unshift(new VirtualItem(this._leftItemOffset));
+                this._items.unshift({
+                  item: new VirtualItem(this._leftItemOffset),
+                  offset: 0,
+                });
 
@@ -540,3 +608,6 @@ offsets.unshift(0);
 
-              this._items.unshift(this._pendingItem);
+              this._items.unshift({
+                item: this._pendingItem,
+                offset: this._leftItemOffset,
+              });
             }
@@ -547,3 +618,6 @@
 
-          while (this._items[0] instanceof VirtualItem) {
+          while (
+            this._items.length &&
+            this._items[0].item instanceof VirtualItem
+          ) {
             offsets.shift();
@@ -556,3 +630,6 @@
 
-          while (this._items[this._items.length - 1] instanceof VirtualItem) {
+          while (
+            this._items.length &&
+            this._items[this._items.length - 1].item instanceof VirtualItem
+          ) {
             offsets.pop();
@@ -563,4 +640,18 @@
 
+          var windowWidth = window.innerWidth;
+          var windowHeight = window.innerHeight;
+          var windowResized =
+            windowWidth !== this._windowWidth ||
+            windowHeight !== this._windowHeight;
+          this._windowWidth = windowWidth;
+          this._windowHeight = windowHeight;
           offsets.forEach(function (offset, i) {
-            return _this5._items[i].setOffset(offset);
+            var item = _this5._items[i];
+            var hasJumped = item.offset + shiftAmount !== offset;
+            item.item.setOffset(
+              offset,
+              _this5._rate,
+              windowResized || hasJumped
+            );
+            item.offset = offset;
           });
@@ -582,2 +673,4 @@
           this._nextItemImmediatelyFollowsPrevious = false;
+          var justReversedRate = this._justReversedRate;
+          this._justReversedRate = false;
 
@@ -590,19 +683,7 @@ if (
             this._waitingForItem = true; // if an item is appended immediately below, it would be considered immediately following
-            // the previous if the item it would follow was appended from the same side
+            // the previous if we haven't just changed direction.
             // This is useful when deciding whether to add a separator on the side that enters the
             // screen first or not
 
-            var previousItem = null;
-
-            if (this._items.length) {
-              if (this._rate <= 0) {
-                previousItem = this._items[this._items.length - 1];
-              } else {
-                previousItem = this._items[0];
-              }
-            }
-
-            this._nextItemImmediatelyFollowsPrevious =
-              previousItem &&
-              previousItem.getRateWhenAppended() * this._rate >= 0;
+            this._nextItemImmediatelyFollowsPrevious = !justReversedRate;
             var nextItem;
@@ -621,4 +702,3 @@
             if (nextItem) {
-              // Note appendItem() will call _scheduleRender(), which will synchronously call
-              // _render() again
+              // Note appendItem() will call _render() synchronously again
               this.appendItem(nextItem);
@@ -625,0 +705,0 @@ }

package.json

 {
   "name": "dynamic-marquee",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "A small library for creating marquees.",
   "main": "./dist/dynamic-marquee.js",
+  "types": "./dist/dynamic-marquee.d.ts",
   "scripts": {
@@ -7,0 +8,0 @@ "build": "rollup --config rollup.config.js",

README.md

@@ -112,2 +112,4 @@ [![npm version](https://badge.fury.io/js/dynamic-marquee.svg)](https://badge.fury.io/js/dynamic-marquee)
 
+Note if you change the direction, `isWaitingForItem()` will change to `false`, and `onItemRequired()` will be called again when needed.
+
 ## Reset
@@ -126,3 +128,3 @@
 ```js
-marquee.onItemRemove(($el) => {
+marquee.onItemRemoved(($el) => {
   // $el has just been removed
@@ -129,0 +131,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

41105

increased by8.78%

Number of package files

5

increased by25%

Lines of code

728

increased by15.74%

Number of lines in readme file

164

increased by1.23%

No dependency changes