dynamic-marquee - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/dynamic-marquee.js

@@ -79,3 +79,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 5);
+/******/ 	return __webpack_require__(__webpack_require__.s = 6);
 /******/ })
@@ -121,6 +121,6 @@ /************************************************************************/
 function toDomEl($el) {
-  if (typeof $el === 'string') {
+  if (typeof $el === 'string' || typeof $el === 'number') {
     // helper. convert string to div
     var $div = document.createElement('div');
-    $div.textContent = $el;
+    $div.textContent = $el + "";
     return $div;
@@ -153,2 +153,42 @@ }
 
+var indexMap = function indexMap(list) {
+  var map = {};
+  list.forEach(function (each, i) {
+    map[each] = map[each] || [];
+    map[each].push(i);
+  });
+  return map;
+};
+
+var longestCommonSubstring = function longestCommonSubstring(seq1, seq2) {
+  var result = { startString1: 0, startString2: 0, length: 0 };
+  var indexMapBefore = indexMap(seq1);
+  var previousOverlap = [];
+  seq2.forEach(function (eachAfter, indexAfter) {
+    var overlapLength;
+    var overlap = [];
+    var indexesBefore = indexMapBefore[eachAfter] || [];
+    indexesBefore.forEach(function (indexBefore) {
+      overlapLength = (indexBefore && previousOverlap[indexBefore - 1] || 0) + 1;
+      if (overlapLength > result.length) {
+        result.length = overlapLength;
+        result.startString1 = indexBefore - overlapLength + 1;
+        result.startString2 = indexAfter - overlapLength + 1;
+      }
+      overlap[indexBefore] = overlapLength;
+    });
+    previousOverlap = overlap;
+  });
+  return result;
+};
+
+module.exports = longestCommonSubstring;
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
 Object.defineProperty(exports, "__esModule", {
@@ -161,2 +201,8 @@ value: true
 
+var _longestCommonSubstring = __webpack_require__(2);
+
+var _longestCommonSubstring2 = _interopRequireDefault(_longestCommonSubstring);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function loop(marquee) {
@@ -168,2 +214,10 @@ var buildersIn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var builders = buildersIn.slice();
+
+  var getNextBuilder = function getNextBuilder() {
+    var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+
+    var nextIndex = (lastIndex + offset) % builders.length;
+    return { builder: builders[nextIndex], index: nextIndex };
+  };
+
   var appendItem = function appendItem(spaceJustAvailable) {
@@ -173,4 +227,9 @@ if (!builders.length || !marquee.isWaitingForItem()) {
     }
-    lastIndex = (lastIndex + 1) % builders.length;
-    var $item = (0, _helpers.toDomEl)(builders[lastIndex]());
+
+    var _getNextBuilder = getNextBuilder(),
+        builder = _getNextBuilder.builder,
+        index = _getNextBuilder.index;
+
+    lastIndex = index;
+    var $item = (0, _helpers.toDomEl)(builder());
     if (spaceJustAvailable && seperatorBuilder) {
@@ -193,2 +252,29 @@ var $seperator = (0, _helpers.toDomEl)(seperatorBuilder());
     update: function update(newBuilders) {
+
+      // try and start from somewhere that makes sense
+      var calculateNewIndex = function calculateNewIndex() {
+        // convert array of function references to array of ids
+        var buildersStructure = builders.map(function (b, i) {
+          var prevIndex = builders.indexOf(b);
+          // if already seen builder, give it the same number
+          return prevIndex < i ? prevIndex : i;
+        });
+        var newBuildersStructure = newBuilders.map(function (b, i) {
+          // matching indexes where they exist, and -1 for all unknown
+          return builders.indexOf(b);
+        });
+
+        var _longestSubstring = (0, _longestCommonSubstring2.default)(buildersStructure, newBuildersStructure),
+            startString1 = _longestSubstring.startString1,
+            startString2 = _longestSubstring.startString2,
+            length = _longestSubstring.length;
+
+        if (lastIndex >= startString1 && lastIndex < startString1 + length) {
+          // we are in the overlapping region
+          return lastIndex + (startString2 - startString1);
+        }
+        return -1;
+      };
+
+      lastIndex = calculateNewIndex();
       builders = newBuilders.slice();
@@ -201,3 +287,3 @@ appendItem(false);
 /***/ }),
-/* 3 */
+/* 4 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -297,2 +383,9 @@
     value: function getSize() {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref2$inverse = _ref2.inverse,
+          inverse = _ref2$inverse === undefined ? false : _ref2$inverse;
+
+      if (inverse) {
+        throw new Error('Inverse not supported on virtual item.');
+      }
       return this._size;
@@ -315,3 +408,3 @@ }
 /***/ }),
-/* 4 */
+/* 5 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -329,3 +422,3 @@
 
-var _item = __webpack_require__(3);
+var _item = __webpack_require__(4);
 
@@ -474,2 +567,5 @@ var _direction = __webpack_require__(1);
       var maxSize = this._items.reduce(function (size, item) {
+        if (item instanceof _item.VirtualItem) {
+          return size;
+        }
         var a = item.getSize({ inverse: true });
@@ -631,3 +727,3 @@ if (a > size) {
 /***/ }),
-/* 5 */
+/* 6 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -642,3 +738,3 @@
 
-var _marquee = __webpack_require__(4);
+var _marquee = __webpack_require__(5);
 
@@ -652,3 +748,3 @@ Object.defineProperty(exports, 'Marquee', {
 
-var _loop = __webpack_require__(2);
+var _loop = __webpack_require__(3);
 
@@ -655,0 +751,0 @@ Object.defineProperty(exports, 'loop', {

package.json

 {
   "name": "dynamic-marquee",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A small library for creating marquees.",
@@ -39,2 +39,3 @@ "main": "./dist/dynamic-marquee.js",
     "husky": "^0.14.3",
+    "longest-common-substring": "0.0.1",
     "webpack": "^4.6.0",
@@ -41,0 +42,0 @@ "webpack-cli": "^2.0.15"

README.md

 [![npm version](https://badge.fury.io/js/dynamic-marquee.svg)](https://badge.fury.io/js/dynamic-marquee)
 # Dynamic Marquee
-A small library for creating marquees. No dependencies!
+A small library for creating marquees.
 
@@ -52,2 +52,4 @@ Features:
 You can add DOM elements, or just a string (which will automatically be wrapped in a div).
+
+**Each DOM element is only allowed on the marquee at one time.**
 ```js
@@ -112,2 +114,4 @@ const $item = document.createElement('div');
 
+**When returning DOM elements each function should build the element from scratch, as the same DOM element is not allowed to appear on the marquee multiple times.**
+
 ```js
@@ -114,0 +118,0 @@ const $marquee = document.getElementById('marquee');

src/helpers.js

@@ -22,6 +22,6 @@ import { DIRECTION } from './direction.js';
 export function toDomEl($el) {
-  if (typeof $el === 'string') {
+  if (typeof $el === 'string' || typeof $el === 'number') {
     // helper. convert string to div
     const $div = document.createElement('div');
-    $div.textContent = $el;
+    $div.textContent = $el+"";
     return $div;
@@ -28,0 +28,0 @@ }

src/item.js

@@ -52,3 +52,6 @@ import { DIRECTION } from './direction.js';
   }
-  getSize() {
+  getSize({ inverse = false } = {}) {
+    if (inverse) {
+      throw new Error('Inverse not supported on virtual item.');
+    }
     return this._size;
@@ -55,0 +58,0 @@ }

src/loop.js

 import { toDomEl } from './helpers.js';
+import longestSubstring from 'longest-common-substring';
 
@@ -6,2 +7,8 @@ export function loop(marquee, buildersIn=[], seperatorBuilder=null) {
   let builders = buildersIn.slice();
+
+  const getNextBuilder = (offset = 1) => {
+    const nextIndex = (lastIndex+offset) % builders.length;
+    return { builder: builders[nextIndex], index: nextIndex };
+  }
+
   const appendItem = (spaceJustAvailable) => {
@@ -11,4 +18,5 @@ if (!builders.length || !marquee.isWaitingForItem()) {
     }
-    lastIndex = (lastIndex+1) % builders.length;
-    let $item = toDomEl(builders[lastIndex]());
+    const { builder, index } = getNextBuilder();
+    lastIndex = index;
+    let $item = toDomEl(builder());
     if (spaceJustAvailable && seperatorBuilder) {
@@ -29,2 +37,25 @@ const $seperator = toDomEl(seperatorBuilder());
     update: (newBuilders) => {
+
+      // try and start from somewhere that makes sense
+      const calculateNewIndex = () => {
+        // convert array of function references to array of ids
+        const buildersStructure = builders.map((b, i) => {
+          const prevIndex = builders.indexOf(b);
+          // if already seen builder, give it the same number
+          return prevIndex < i ? prevIndex : i;
+        });
+        const newBuildersStructure = newBuilders.map((b, i) => {
+          // matching indexes where they exist, and -1 for all unknown
+          return builders.indexOf(b);
+        });
+
+        const { startString1, startString2, length } = longestSubstring(buildersStructure, newBuildersStructure);
+        if (lastIndex >= startString1 && lastIndex < startString1 + length) {
+          // we are in the overlapping region
+          return lastIndex + (startString2 - startString1);
+        }
+        return -1;
+      };
+
+      lastIndex = calculateNewIndex();
       builders = newBuilders.slice();
@@ -31,0 +62,0 @@ appendItem(false);

src/marquee.js

@@ -112,2 +112,5 @@ import { Item, VirtualItem } from './item.js';
     const maxSize = this._items.reduce((size, item) => {
+      if (item instanceof VirtualItem) {
+        return size;
+      }
       const a = item.getSize({ inverse: true });
@@ -114,0 +117,0 @@ if (a > size) {

webpack.config.js

@@ -21,3 +21,2 @@ const path = require('path');
         test: /\.js$/,
-        exclude: /(node_modules)/,
         use: {
@@ -24,0 +23,0 @@ loader: 'babel-loader'

No alert changes

Improved metrics

Total package byte prevSize

53956

increased by10.59%

Lines of code

1057

increased by11.38%

Number of lines in readme file

129

increased by3.2%

Worsened metrics

Dev dependency count

8

increased by14.29%

No dependency changes