dynamic-marquee - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/dynamic-marquee.js

@@ -235,3 +235,11 @@ (function webpackUniversalModuleDefinition(root, factory) {
     value: function getSize() {
-      return (0, _helpers.size)(this._$container, this._direction);
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref$inverse = _ref.inverse,
+          inverse = _ref$inverse === undefined ? false : _ref$inverse;
+
+      var dir = this._direction;
+      if (inverse) {
+        dir = dir === _direction.DIRECTION.RIGHT ? _direction.DIRECTION.DOWN : _direction.DIRECTION.RIGHT;
+      }
+      return (0, _helpers.size)(this._$container, dir);
     }
@@ -341,7 +349,12 @@ }, {
     $innerContainer.style.position = 'relative';
-    $innerContainer.style.width = '100%';
-    $innerContainer.style.height = '100%';
+    $innerContainer.style.display = 'inline-block';
     this._$container = $innerContainer;
+    this._containerSize = null;
+    if (this._direction === _direction.DIRECTION.RIGHT) {
+      $innerContainer.style.width = '100%';
+    } else {
+      $innerContainer.style.height = '100%';
+    }
+    this._updateContainerSize();
     $container.appendChild($innerContainer);
-    this._lastUpdateTime = performance.now();
     this._scheduleRender();
@@ -443,3 +456,27 @@ }
     }
+
+    // update size of container so that the marquee items fit inside it.
+    // This is needed because the items are posisitioned absolutely, so not in normal flow.
+    // Without this, the height of the container would always be 0px, which is not useful
+
   }, {
+    key: '_updateContainerSize',
+    value: function _updateContainerSize() {
+      var maxSize = this._items.reduce(function (size, item) {
+        var a = item.getSize({ inverse: true });
+        if (a > size) {
+          return a;
+        }
+        return size;
+      }, 0);
+      if (this._containerSize !== maxSize) {
+        this._containerSize = maxSize;
+        if (this._direction === _direction.DIRECTION.RIGHT) {
+          this._$container.style.height = maxSize + 'px';
+        } else {
+          this._$container.style.width = maxSize + 'px';
+        }
+      }
+    }
+  }, {
     key: '_enableAnimationHint',
@@ -548,2 +585,3 @@ value: function _enableAnimationHint(enable) {
       });
+      this._updateContainerSize();
 
@@ -550,0 +588,0 @@ if (!this._items.length) {

package.json

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

README.md

@@ -0,1 +1,2 @@
+[![npm version](https://badge.fury.io/js/dynamic-marquee.svg)](https://badge.fury.io/js/dynamic-marquee)
 # Dynamic Marquee
@@ -8,6 +9,12 @@ A small library for creating marquees. No dependencies!
 - Width/height of items and container is allowed to change.
+- Container width/height is updated correctly to match maximum size of current items.
 - You can add an item at any time when space is available, and it will start off screen.
 
-A [`loop()`](#loop) helpers function is also provided which makes creating a carousel with looping content simple.
+A [`loop()`](#loop) helper function is also provided which makes creating a carousel with looping content simple.
 
+# Demo
+View the demo [here](https://tjenkinson.github.io/dynamic-marquee/demo.html).
+
+View the code at "[demo.html](./demo.html)".
+
 # Installation
@@ -119,4 +126,1 @@ ```
 ```
-
-# Demo
-See "[demo.html](./demo.html)".

src/item.js

@@ -20,4 +20,8 @@ import { DIRECTION } from './direction.js';
   }
-  getSize() {
-     return size(this._$container, this._direction);
+  getSize({ inverse = false } = {}) {
+    let dir = this._direction;
+    if (inverse) {
+      dir = dir === DIRECTION.RIGHT ? DIRECTION.DOWN : DIRECTION.RIGHT;
+    }
+    return size(this._$container, dir);
   }
@@ -24,0 +28,0 @@ setOffset(offset) {

src/marquee.js

@@ -26,7 +26,12 @@ import { Item, VirtualItem } from './item.js';
     $innerContainer.style.position = 'relative';
-    $innerContainer.style.width = '100%';
-    $innerContainer.style.height = '100%';
+    $innerContainer.style.display = 'inline-block';
     this._$container = $innerContainer;
+    this._containerSize = null;
+    if (this._direction === DIRECTION.RIGHT) {
+      $innerContainer.style.width = '100%';
+    } else {
+      $innerContainer.style.height = '100%';
+    }
+    this._updateContainerSize();
     $container.appendChild($innerContainer);
-    this._lastUpdateTime = performance.now();
     this._scheduleRender();
@@ -103,2 +108,23 @@ }
 
+  // update size of container so that the marquee items fit inside it.
+  // This is needed because the items are posisitioned absolutely, so not in normal flow.
+  // Without this, the height of the container would always be 0px, which is not useful
+  _updateContainerSize() {
+    const maxSize = this._items.reduce((size, item) => {
+      const a = item.getSize({ inverse: true });
+      if (a > size) {
+        return a;
+      }
+      return size;
+    }, 0);
+    if (this._containerSize !== maxSize) {
+      this._containerSize = maxSize;
+      if (this._direction === DIRECTION.RIGHT) {
+        this._$container.style.height = `${maxSize}px`;
+      } else {
+        this._$container.style.width = `${maxSize}px`;
+      }
+    }
+  }
+
   _enableAnimationHint(enable) {
@@ -192,2 +218,3 @@ this._items.forEach((item) => item.enableAnimationHint(enable));
     offsets.forEach((offset, i) => this._items[i].setOffset(offset));
+    this._updateContainerSize();
 
@@ -194,0 +221,0 @@ if (!this._items.length) {

No alert changes

Improved metrics

Total package byte prevSize

48788

increased by6.02%

Lines of code

949

increased by7.35%

Number of lines in readme file

125

increased by4.17%

No dependency changes