Socket
Socket
Sign inDemoInstall

dynamic-marquee

Package Overview
Dependencies
0
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.3 to 1.3.0

dist/dynamic-marquee.d.ts

214

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 @@ }

{
"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",

@@ -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 @@ });

SocketSocket SOC 2 Logo

Product

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc