diff --git a/HISTORY.md b/HISTORY.md index e653c29..dbad01d 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -7,6 +7,8 @@ https://github.com/josdejong/jsoneditor - Implemented a color picker, and allow hooking in a custom color picker. new options are `colorPicker` and `onColorPicker`. +- Implemented a timestamp tag displayed right from timestamps, + with corresponding option `timestampTag`. ## 2018-08-17, version 5.23.1 diff --git a/docs/api.md b/docs/api.md index b92165e..c1534ac 100644 --- a/docs/api.md +++ b/docs/api.md @@ -330,8 +330,11 @@ Constructs a new JSONEditor. } ``` +- `{boolean} timestampTag` - + If true (default), a tag with the date/time of a timestamp is displayed + right from timestamps. A value is considered a timestamp when it + has a value larger than Jan 1th 2000, `946684800000`. - `{string} language` diff --git a/src/css/jsoneditor.css b/src/css/jsoneditor.css index 7d82fb7..217aab1 100644 --- a/src/css/jsoneditor.css +++ b/src/css/jsoneditor.css @@ -214,6 +214,15 @@ div.jsoneditor-tree div.jsoneditor-color .picker_wrapper.popup.popup_bottom { left: -10px; } +div.jsoneditor-tree div.jsoneditor-date { + background: #a1a1a1; + color: white; + font-family: arial, sans-serif; + border-radius: 3px; + display: inline-block; + padding: 3px; +} + div.jsoneditor { color: #1A1A1A; border: 1px solid #3883fa; diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js index 1a1d00c..5223f8f 100644 --- a/src/js/JSONEditor.js +++ b/src/js/JSONEditor.js @@ -160,6 +160,8 @@ JSONEditor.VALID_OPTIONS = [ 'onChange', 'onChangeJSON', 'onChangeText', 'onEditable', 'onError', 'onEvent', 'onModeChange', 'onValidate', 'onSelectionChange', 'onTextSelectionChange', + 'colorPicker', 'onColorPicker', + 'timestampTag', 'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language' ]; diff --git a/src/js/Node.js b/src/js/Node.js index f94346c..e7d7cf7 100644 --- a/src/js/Node.js +++ b/src/js/Node.js @@ -12,6 +12,8 @@ var translate = require('./i18n').translate; var DEFAULT_MODAL_ANCHOR = document.body; // TODO: this constant is defined twice +var YEAR_2000 = 946684800000; + /** * @constructor Node * Create a new Node @@ -1764,6 +1766,29 @@ Node.prototype._updateDomValue = function () { this._deleteDomColor(); } + // show date tag when value is a timestamp in milliseconds + if (this.editor.options.timestampTag && + typeof value === 'number' && + value > YEAR_2000 && + !isNaN(new Date(value).valueOf())) { + + if (!this.dom.date) { + this.dom.date = document.createElement('div'); + this.dom.date.className = 'jsoneditor-date' + this.dom.value.parentNode.appendChild(this.dom.date); + } + + this.dom.date.innerHTML = new Date(value).toISOString(); + this.dom.date.title = new Date(value).toString(); + } + else { + // cleanup date tag + if (this.dom.date) { + this.dom.date.parentNode.removeChild(this.dom.date); + delete this.dom.date; + } + } + // strip formatting from the contents of the editable div util.stripFormatting(domValue); } diff --git a/src/js/treemode.js b/src/js/treemode.js index 9b6d975..d127e9e 100644 --- a/src/js/treemode.js +++ b/src/js/treemode.js @@ -167,6 +167,7 @@ treemode._setOptions = function (options) { 'Either use the full bundle or implement your own color picker using `onColorPicker`.') } }, + timestampTag: true, onEvent: null }; diff --git a/test/test_build.html b/test/test_build.html index d58e4bd..b2a09d3 100644 --- a/test/test_build.html +++ b/test/test_build.html @@ -73,6 +73,7 @@ "number": 123, "object": {"a": "b", "c": "d"}, "string": "Hello World", + "timestamp": 1534952749890, "url": "http://jsoneditoronline.org" };