From abc242c873bf58836eb0964e269d41c32c266e18 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 3 Jul 2019 13:10:00 +0200 Subject: [PATCH] Implement array size in status bar --- src/css/statusbar.css | 6 ++++- src/js/jsonUtils.js | 11 ++++++++ src/js/previewmode.js | 57 +++++++++++++++++++++++++++++++++++++----- test/jsonUtils.test.js | 13 ++++++++++ 4 files changed, 80 insertions(+), 7 deletions(-) diff --git a/src/css/statusbar.css b/src/css/statusbar.css index 909b378..36fcdd6 100644 --- a/src/css/statusbar.css +++ b/src/css/statusbar.css @@ -13,7 +13,7 @@ div.jsoneditor-statusbar { div.jsoneditor-statusbar > .jsoneditor-curserinfo-label, div.jsoneditor-statusbar > .jsoneditor-size-info { - margin: 0 2px 0 4px; + margin: 0 4px; } div.jsoneditor-statusbar > .jsoneditor-curserinfo-val { @@ -45,3 +45,7 @@ div.jsoneditor-statusbar > .jsoneditor-parse-error-icon { margin: 1px; background: url("img/jsoneditor-icons.svg") -25px 0px; } + +div.jsoneditor-statusbar .jsoneditor-array-info a { + color: inherit; +} \ No newline at end of file diff --git a/src/js/jsonUtils.js b/src/js/jsonUtils.js index fcd794f..52b9e67 100644 --- a/src/js/jsonUtils.js +++ b/src/js/jsonUtils.js @@ -186,4 +186,15 @@ function slice(text, limit) { : text; } +/** + * Test whether some text contains a JSON array, i.e. the first + * non-white space character is a [ + * @param {string} jsonText + * @return {boolean} + */ +function containsArray (jsonText) { + return /^\s*\[/.test(jsonText) +} + exports.stringifyPartial = stringifyPartial; +exports.containsArray = containsArray; diff --git a/src/js/previewmode.js b/src/js/previewmode.js index d057e6e..b3be549 100644 --- a/src/js/previewmode.js +++ b/src/js/previewmode.js @@ -9,6 +9,7 @@ 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'); +var jsonUtils = require('./jsonUtils'); // create a mixin with the functions for text mode var previewmode = {}; @@ -205,11 +206,15 @@ previewmode.create = function (container, options) { statusBar.className = 'jsoneditor-statusbar'; this.frame.appendChild(statusBar); - this.dom.sizeInfo = document.createElement('span'); - this.dom.sizeInfo.className = 'jsoneditor-size-info'; - this.dom.sizeInfo.innerText = ''; + this.dom.fileSizeInfo = document.createElement('span'); + this.dom.fileSizeInfo.className = 'jsoneditor-size-info'; + this.dom.fileSizeInfo.innerText = ''; + statusBar.appendChild(this.dom.fileSizeInfo); - statusBar.appendChild(this.dom.sizeInfo); + this.dom.arrayInfo = document.createElement('span'); + this.dom.arrayInfo.className = 'jsoneditor-size-info'; + this.dom.arrayInfo.innerText = ''; + statusBar.appendChild(this.dom.arrayInfo); } this.renderPreview(); @@ -222,8 +227,42 @@ previewmode.renderPreview = function () { this.dom.previewText.nodeValue = util.limitCharacters(text, MAX_PREVIEW_CHARACTERS); - if (this.dom.sizeInfo) { - this.dom.sizeInfo.innerText = 'Size: ' + util.formatSize(text.length); + if (this.dom.fileSizeInfo) { + this.dom.fileSizeInfo.innerText = 'Size: ' + util.formatSize(text.length); + } + + if (this.dom.arrayInfo) { + if (Array.isArray(this.json)) { + this.dom.arrayInfo.innerText = ('Array: ' + this.json.length + ' items'); + } + else if (jsonUtils.containsArray(this.text)) { + var info = document.createElement('span'); + info.className = 'jsoneditor-array-info'; + var calculate = document.createElement('a'); + var me = this; + calculate.appendChild(document.createTextNode('calculate number of items')); + calculate.href = '#'; + calculate.onclick = function () { + me.executeWithBusyMessage(function () { + try { + me.get(); + me.renderPreview(); + } + catch (err) { + me._onError(err); + } + }, 'parsing...'); + } + info.appendChild(document.createTextNode('Array: ')); + info.appendChild(calculate); + + this.dom.arrayInfo.innerHTML = ''; + this.dom.arrayInfo.appendChild(info); + } + else { + this.dom.arrayInfo.innerText = ''; + } + } }; @@ -288,6 +327,7 @@ previewmode._showSortModal = function () { this.executeWithBusyMessage(function () { var container = me.options.modalAnchor || DEFAULT_MODAL_ANCHOR; var json = me.get(); + me.renderPreview(); // update array count showSortModal(container, json, function (sortedBy) { me.executeWithBusyMessage(function () { @@ -307,6 +347,7 @@ previewmode._showTransformModal = function () { this.executeWithBusyMessage(function () { var anchor = me.options.modalAnchor || DEFAULT_MODAL_ANCHOR; var json = me.get(); + me.renderPreview(); // update array count showTransformModal(anchor, json, function (query) { me.executeWithBusyMessage(function () { @@ -343,6 +384,8 @@ previewmode.compact = function () { // we know that in this case the json is still the same this.json = json; + + this.renderPreview(); }; /** @@ -355,6 +398,8 @@ previewmode.format = function () { // we know that in this case the json is still the same this.json = json; + + this.renderPreview(); }; /** diff --git a/test/jsonUtils.test.js b/test/jsonUtils.test.js index 961b3c4..acc3de1 100644 --- a/test/jsonUtils.test.js +++ b/test/jsonUtils.test.js @@ -1,5 +1,6 @@ var assert = require('assert'); var stringifyPartial = require('../src/js/jsonUtils').stringifyPartial; +var containsArray = require('../src/js/jsonUtils').containsArray; describe('jsonUtils', function () { @@ -82,4 +83,16 @@ describe('jsonUtils', function () { assert.strictEqual(stringifyPartial(12345678, undefined, 4),'1234...'); }); + it('should count array items', function () { + // assert.strictEqual(countArrayItems('[1,2,3]'), 3) + assert.strictEqual(containsArray('[]'), true) + assert.strictEqual(containsArray(' []'), true) + assert.strictEqual(containsArray(' \t []'), true) + assert.strictEqual(containsArray(' \t\n []'), true) + assert.strictEqual(containsArray('"["'), false) + assert.strictEqual(containsArray('2'), false) + assert.strictEqual(containsArray('null'), false) + assert.strictEqual(containsArray('{}'), false) + }); + }); \ No newline at end of file