Create util function `limitCharacters`, tweak limiting of preview texts

src/js/Node.js

@@ -10,8 +10,7 @@ var showSortModal = require('./showSortModal');
 var showTransformModal = require('./showTransformModal');
 var util = require('./util');
 var translate = require('./i18n').translate;
-
-var DEFAULT_MODAL_ANCHOR = document.body; // TODO: this constant is defined twice
+var DEFAULT_MODAL_ANCHOR = require('./constants').DEFAULT_MODAL_ANCHOR;
 
 var YEAR_2000 = 946684800000;
 

src/js/constants.js

@@ -0,0 +1,5 @@
+
+exports.DEFAULT_MODAL_ANCHOR = document.body;
+exports.SIZE_LARGE = 10 * 1024 * 1024; // 10 MB
+
+exports.MAX_PREVIEW_CHARACTERS = 20000;

src/js/jsonUtils.js

@@ -38,7 +38,9 @@ function stringifyPartial(value, space, limit) {
 
   var output = stringifyValue(value, _space, '', limit);
 
-  return slice(output, limit);
+  return output.length > limit
+      ? (slice(output, limit) + '...')
+      : output;
 }
 
 /**
@@ -104,7 +106,7 @@ function stringifyArray(array, space, indent, limit) {
 
     // stop as soon as we're exceeding the limit
     if (str.length > limit) {
-      return str;
+      return str + '...';
     }
   }
 
@@ -148,7 +150,7 @@ function stringifyObject(object, space, indent, limit) {
 
       // stop as soon as we're exceeding the limit
       if (str.length > limit) {
-        return str;
+        return str + '...';
       }
     }
   }

src/js/previewmode.js

@@ -5,15 +5,14 @@ var translate = require('./i18n').translate;
 var ModeSwitcher = require('./ModeSwitcher');
 var showSortModal = require('./showSortModal');
 var showTransformModal = require('./showTransformModal');
+var MAX_PREVIEW_CHARACTERS = require('./constants').MAX_PREVIEW_CHARACTERS;
+var DEFAULT_MODAL_ANCHOR = require('./constants').DEFAULT_MODAL_ANCHOR;
+var SIZE_LARGE = require('./constants').SIZE_LARGE;
 var util = require('./util');
 
 // create a mixin with the functions for text mode
 var previewmode = {};
 
-var DEFAULT_MODAL_ANCHOR = document.body; // TODO: this constant is defined multiple times
-var MAX_PREVIEW_CHARACTERS = 100000; // should be enough to fill the editor window
-var SIZE_LARGE = 10 * 1024 * 1024; // 10 MB
-
 /**
  * Create a JSON document preview, suitable for processing of large documents
  * @param {Element} container
@@ -221,9 +220,7 @@ previewmode.create = function (container, options) {
 previewmode.renderPreview = function () {
   var text = this.getText();
 
-  this.dom.previewText.nodeValue = (text.length > MAX_PREVIEW_CHARACTERS)
-    ? (text.slice(0, MAX_PREVIEW_CHARACTERS) + '...')
-    : text;
+  this.dom.previewText.nodeValue = util.limitCharacters(text, MAX_PREVIEW_CHARACTERS);
 
   if (this.dom.sizeInfo) {
     this.dom.sizeInfo.innerText = 'Size: ' + util.formatSize(text.length);

src/js/showTransformModal.js

@@ -4,10 +4,9 @@ var Selectr = require('./assets/selectr/selectr');
 var translate = require('./i18n').translate;
 var stringifyPartial = require('./jsonUtils').stringifyPartial;
 var util = require('./util');
+var MAX_PREVIEW_CHARACTERS = require('./constants').MAX_PREVIEW_CHARACTERS
 var debounce = util.debounce;
 
-var MAX_PREVIEW_LINES = 100;
-
 /**
  * Show advanced filter and transform modal using JMESPath
  * @param {HTMLElement} container   The container where to center
@@ -258,17 +257,10 @@ function showTransformModal (container, json, onTransform) {
             console.timeEnd('transform') // TODO: cleanup
 
             console.time('stringify') // TODO: cleanup
-            var lines = stringifyPartial(transformed, 2, 10000);
+            preview.className = 'jsoneditor-transform-preview';
+            preview.value = stringifyPartial(transformed, 2, MAX_PREVIEW_CHARACTERS);
             console.timeEnd('stringify') // TODO: cleanup
 
-            // TODO: create a more efficient way to limit to a max number of lines, move this in a util function
-            lines = lines.split('\n');
-            if (lines.length > MAX_PREVIEW_LINES) {
-              lines = lines.slice(0, MAX_PREVIEW_LINES).concat(['...'])
-            }
-
-            preview.className = 'jsoneditor-transform-preview';
-            preview.value = lines.join('\n');
             ok.disabled = false;
           }
           catch (err) {

src/js/textmode.js

@@ -7,12 +7,12 @@ var ModeSwitcher = require('./ModeSwitcher');
 var showSortModal = require('./showSortModal');
 var showTransformModal = require('./showTransformModal');
 var util = require('./util');
+var DEFAULT_MODAL_ANCHOR = require('./constants').DEFAULT_MODAL_ANCHOR;
 
 // create a mixin with the functions for text mode
 var textmode = {};
 
 var DEFAULT_THEME = 'ace/theme/jsoneditor';
-var DEFAULT_MODAL_ANCHOR = document.body; // TODO: this constant is defined multiple times
 
 /**
  * Create a text editor

src/js/util.js

@@ -1330,6 +1330,21 @@ exports.formatSize = function (size) {
   return TiB.toFixed(1) + ' TiB';
 }
 
+/**
+ * Limit text to a maximum number of characters
+ * @param {string} text
+ * @param {number} maxCharacterCount
+ * @return {string} Returns the limited text,
+ *                  ending with '...' if the max was exceeded
+ */
+exports.limitCharacters = function (text, maxCharacterCount) {
+  if (text.length <= maxCharacterCount) {
+    return text;
+  }
+
+  return text.slice(0, maxCharacterCount) + '...';
+}
+
 /**
  * Test whether a value is an Object
  * @param {*} value

test/jsonUtils.test.js

@@ -72,10 +72,14 @@ describe('jsonUtils', function () {
     var limit = 20;
 
     assert.strictEqual(stringifyPartial(json, undefined, limit),
-        all.slice(0, limit));
+        all.slice(0, limit) + '...');
+
+    assert.strictEqual(stringifyPartial(json, undefined, all.length), all);
 
     assert.strictEqual(stringifyPartial([1,2,3,4,5,6,7,8,9,10], undefined, 10),
-        '[1,2,3,4,5');
+        '[1,2,3,4,5...');
+
+    assert.strictEqual(stringifyPartial(12345678, undefined, 4),'1234...');
   });
 
 });

test/util.test.js

@@ -418,5 +418,11 @@ describe('util', function () {
     assert.strictEqual(util.formatSize(1024  * 1024 * 1024 * 1024), '1.0 TiB');
   });
 
+  it ('should limit characters', function () {
+    assert.strictEqual(util.limitCharacters('hello world', 11), 'hello world');
+    assert.strictEqual(util.limitCharacters('hello world', 5), 'hello...');
+    assert.strictEqual(util.limitCharacters('hello world', 100), 'hello world');
+  })
+
   // TODO: thoroughly test all util methods
 });