Socket
Socket
Sign inDemoInstall

dynamic-marquee

Package Overview
Dependencies
0
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.0 to 1.2.1

60

dist/dynamic-marquee.js

@@ -234,4 +234,9 @@ (function webpackUniversalModuleDefinition(root, factory) {

$item.style.display = 'inline';
$container.appendChild($seperator);
$container.appendChild($item);
if (marquee.getRate() <= 0) {
$container.appendChild($seperator);
$container.appendChild($item);
} else {
$container.appendChild($item);
$container.appendChild($seperator);
}
$item = $container;

@@ -248,3 +253,2 @@ }

update: function update(newBuilders) {
// try and start from somewhere that makes sense

@@ -303,3 +307,3 @@ var calculateNewIndex = function calculateNewIndex() {

var Item = exports.Item = function () {
function Item($el, direction) {
function Item($el, direction, rateWhenAppended) {
_classCallCheck(this, Item);

@@ -320,2 +324,3 @@

this._direction = direction;
this._rateWhenAppended = rateWhenAppended;
}

@@ -365,2 +370,7 @@

}
}, {
key: 'getRateWhenAppended',
value: function getRateWhenAppended() {
return this._rateWhenAppended;
}
}]);

@@ -447,4 +457,2 @@

this._items = [];
this._overflowsRight = false;
this._overflowsLeft = false;
this._pendingItem = null;

@@ -510,2 +518,7 @@ var $innerContainer = document.createElement('div');

}, {
key: 'getRate',
value: function getRate() {
return this._rate;
}
}, {
key: 'clear',

@@ -520,4 +533,2 @@ value: function clear() {

this._waitingForItem = true;
this._overflowsRight = false;
this._overflowsLeft = false;
this._updateContainerSize();

@@ -545,3 +556,3 @@ }

this._waitingForItem = false;
this._pendingItem = new _item.Item($el, this._direction);
this._pendingItem = new _item.Item($el, this._direction, this._rate);
this._pendingItem.enableAnimationHint(!!this._rate);

@@ -656,5 +667,2 @@ this._scheduleRender();

}
if (this._items[0] instanceof _item.VirtualItem) {
this._overflowsLeft = false;
}
}

@@ -677,5 +685,2 @@

});
if (this._items.length && this._items[this._items.length - 1] instanceof _item.VirtualItem) {
this._overflowsRight = false;
}

@@ -694,3 +699,2 @@ if (this._pendingItem) {

this._items.push(this._pendingItem);
this._overflowsRight = true;
} else {

@@ -705,3 +709,2 @@ if (!this._nextItemImmediatelyFollowsPrevious && this._items.length && this._leftItemOffset > 0) {

this._items.unshift(this._pendingItem);
this._overflowsLeft = true;
}

@@ -741,14 +744,20 @@ this._pendingItem = null;

this._waitingForItem = true;
// if all items have been cleared then make the next item start offscreen
var nextItemImmediatelyFollowsPrevious = this._nextItemImmediatelyFollowsPrevious = !!this._items.length && (this._rate <= 0 && this._overflowsRight || this._rate > 0 && this._overflowsLeft);
// 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
// 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;
if (this._rate <= 0) {
this._overflowsRight = false;
} else {
this._overflowsLeft = false;
}
var nextItem = void 0;
this._onItemRequired.some(function (cb) {
return (0, _helpers.deferException)(function () {
nextItem = cb({ immediatelyFollowsPrevious: nextItemImmediatelyFollowsPrevious });
nextItem = cb({ immediatelyFollowsPrevious: _this5._nextItemImmediatelyFollowsPrevious });
return !!nextItem;

@@ -762,2 +771,3 @@ });

}
this._nextItemImmediatelyFollowsPrevious = false;
}

@@ -764,0 +774,0 @@ }

2

package.json
{
"name": "dynamic-marquee",
"version": "1.2.0",
"version": "1.2.1",
"description": "A small library for creating marquees.",

@@ -5,0 +5,0 @@ "main": "./dist/dynamic-marquee.js",

6

README.md

@@ -69,5 +69,9 @@ [![npm version](https://badge.fury.io/js/dynamic-marquee.svg)](https://badge.fury.io/js/dynamic-marquee)

```js
marquee.onItemRequired(() => {
marquee.onItemRequired(({ immediatelyFollowsPrevious }) => {
// for convenience if you have an item ready to go you can just return it
// in place of `marquee.appendItem($item);`
// if `immediatelyFollowsPrevious` is `true`, this would be a good time to add
// a seperator on the side that is entering the screen first. See loop.js
// for an example.
return $item;

@@ -74,0 +78,0 @@ });

6

src/item.js

@@ -5,3 +5,3 @@ import { DIRECTION } from './direction.js';

export class Item {
constructor($el, direction) {
constructor($el, direction, rateWhenAppended) {
const $container = document.createElement('div');

@@ -20,2 +20,3 @@ $container.style.display = 'block';

this._direction = direction;
this._rateWhenAppended = rateWhenAppended;
}

@@ -48,2 +49,5 @@ getSize({ inverse = false } = {}) {

}
getRateWhenAppended() {
return this._rateWhenAppended;
}
}

@@ -50,0 +54,0 @@

10

src/loop.js

@@ -25,4 +25,9 @@ import { toDomEl } from './helpers.js';

$item.style.display = 'inline';
$container.appendChild($seperator);
$container.appendChild($item);
if (marquee.getRate() <= 0) {
$container.appendChild($seperator);
$container.appendChild($item);
} else {
$container.appendChild($item);
$container.appendChild($seperator);
}
$item = $container;

@@ -36,3 +41,2 @@ }

update: (newBuilders) => {
// try and start from somewhere that makes sense

@@ -39,0 +43,0 @@ const calculateNewIndex = () => {

45

src/marquee.js

@@ -26,4 +26,2 @@ import { Item, VirtualItem } from './item.js';

this._items = [];
this._overflowsRight = false;
this._overflowsLeft = false;
this._pendingItem = null;

@@ -75,2 +73,6 @@ const $innerContainer = document.createElement('div');

getRate() {
return this._rate;
}
clear() {

@@ -80,4 +82,2 @@ this._items.forEach(($a) => this._removeItem($a));

this._waitingForItem = true;
this._overflowsRight = false;
this._overflowsLeft = false;
this._updateContainerSize();

@@ -103,3 +103,3 @@ }

this._waitingForItem = false;
this._pendingItem = new Item($el, this._direction);
this._pendingItem = new Item($el, this._direction, this._rate);
this._pendingItem.enableAnimationHint(!!this._rate);

@@ -190,5 +190,2 @@ this._scheduleRender();

}
if (this._items[0] instanceof VirtualItem) {
this._overflowsLeft = false;
}
}

@@ -209,5 +206,2 @@

});
if (this._items.length && this._items[this._items.length - 1] instanceof VirtualItem) {
this._overflowsRight = false;
}

@@ -226,3 +220,2 @@ if (this._pendingItem) {

this._items.push(this._pendingItem);
this._overflowsRight = true;
} else {

@@ -237,3 +230,2 @@ if (!this._nextItemImmediatelyFollowsPrevious && this._items.length && this._leftItemOffset > 0) {

this._items.unshift(this._pendingItem);
this._overflowsLeft = true;
}

@@ -274,18 +266,20 @@ this._pendingItem = null;

this._waitingForItem = true;
// if all items have been cleared then make the next item start offscreen
const nextItemImmediatelyFollowsPrevious = this._nextItemImmediatelyFollowsPrevious =
!!this._items.length && (
(this._rate <= 0 && this._overflowsRight) ||
(this._rate > 0 && this._overflowsLeft)
);
// 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
// This is useful when deciding whether to add a separator on the side that enters the
// screen first or not
let 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;
if (this._rate <= 0) {
this._overflowsRight = false;
} else {
this._overflowsLeft = false;
}
let nextItem;
this._onItemRequired.some((cb) => {
return deferException(() => {
nextItem = cb({ immediatelyFollowsPrevious: nextItemImmediatelyFollowsPrevious });
nextItem = cb({ immediatelyFollowsPrevious: this._nextItemImmediatelyFollowsPrevious });
return !!nextItem;

@@ -299,4 +293,5 @@ });

}
this._nextItemImmediatelyFollowsPrevious = false;
}
}
}
SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc