From 1f02eda866cf54356723d5a13701207289dba1aa Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" <23040076+greenkeeper[bot]@users.noreply.github.com> Date: Wed, 11 Dec 2019 17:37:48 +0100 Subject: [PATCH 01/12] =?UTF-8?q?Update=20jsoneditor=20in=20group=20defaul?= =?UTF-8?q?t=20to=20the=20latest=20version=20=F0=9F=9A=80=20(#868)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(package): update jsoneditor to version 8.0.0 * fix(package): update jsoneditor to version 8.0.0 * chore(package): update lockfile examples/react_demo/package-lock.json * chore(package): update lockfile examples/react_advanced_demo/package-lock.json --- examples/react_advanced_demo/package-lock.json | 6 +++--- examples/react_advanced_demo/package.json | 2 +- examples/react_demo/package-lock.json | 6 +++--- examples/react_demo/package.json | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/examples/react_advanced_demo/package-lock.json b/examples/react_advanced_demo/package-lock.json index 0999e3c..b92d245 100644 --- a/examples/react_advanced_demo/package-lock.json +++ b/examples/react_advanced_demo/package-lock.json @@ -7965,9 +7965,9 @@ } }, "jsoneditor": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/jsoneditor/-/jsoneditor-7.4.0.tgz", - "integrity": "sha512-Be0BkVhNoyHVOckyAkKc5MyoIIxSOzHneAGgS/VdKukK+CRRDO8WccYtO67cjeoahndtMHft4rjBl9p3r5tu0g==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/jsoneditor/-/jsoneditor-8.0.0.tgz", + "integrity": "sha512-uMR/LNBkdaMiX7kKNdqysoQoa7LDzclmguvFUAj89JHqBT84I+BhXHT4qF95BufRFwDP8nFFsjOmATEAtNe+pA==", "requires": { "ace-builds": "^1.4.7", "ajv": "^6.10.2", diff --git a/examples/react_advanced_demo/package.json b/examples/react_advanced_demo/package.json index 5b9a833..bcc8991 100644 --- a/examples/react_advanced_demo/package.json +++ b/examples/react_advanced_demo/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "jsoneditor": "^7.4.0", + "jsoneditor": "^8.0.0", "lodash": "4.17.15", "react": "16.12.0", "react-dom": "16.12.0", diff --git a/examples/react_demo/package-lock.json b/examples/react_demo/package-lock.json index 1b0cd85..0717120 100644 --- a/examples/react_demo/package-lock.json +++ b/examples/react_demo/package-lock.json @@ -7965,9 +7965,9 @@ } }, "jsoneditor": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/jsoneditor/-/jsoneditor-7.4.0.tgz", - "integrity": "sha512-Be0BkVhNoyHVOckyAkKc5MyoIIxSOzHneAGgS/VdKukK+CRRDO8WccYtO67cjeoahndtMHft4rjBl9p3r5tu0g==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/jsoneditor/-/jsoneditor-8.0.0.tgz", + "integrity": "sha512-uMR/LNBkdaMiX7kKNdqysoQoa7LDzclmguvFUAj89JHqBT84I+BhXHT4qF95BufRFwDP8nFFsjOmATEAtNe+pA==", "requires": { "ace-builds": "^1.4.7", "ajv": "^6.10.2", diff --git a/examples/react_demo/package.json b/examples/react_demo/package.json index ce1fdaf..0ae3fad 100644 --- a/examples/react_demo/package.json +++ b/examples/react_demo/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "jsoneditor": "^7.4.0", + "jsoneditor": "^8.0.0", "react": "16.12.0", "react-dom": "16.12.0", "react-scripts": "3.3.0" From 7c3695df4afa20073a767db09e636f7e5b95a123 Mon Sep 17 00:00:00 2001 From: jos Date: Mon, 16 Dec 2019 20:28:46 +0100 Subject: [PATCH 02/12] Fixed #502: CSS rule `* { font-family: ... }` resulting in Ace editor (`code` mode) not having a mono-space font anymore --- HISTORY.md | 6 ++++++ src/scss/jsoneditor.scss | 4 ++++ 2 files changed, 10 insertions(+) diff --git a/HISTORY.md b/HISTORY.md index 0684216..5715e4d 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -3,6 +3,12 @@ https://github.com/josdejong/jsoneditor +## not yet published, version 8.0.1 + +- Fixed #502: CSS rule `* { font-family: ... }` resulting in Ace editor (`code` + mode) not having a mono-space font anymore. + + ## 2019-12-11, version 8.0.0 - Implemented option `timestampFormat` which allows customizing the formatting diff --git a/src/scss/jsoneditor.scss b/src/scss/jsoneditor.scss index 8f6d67b..d17734f 100644 --- a/src/scss/jsoneditor.scss +++ b/src/scss/jsoneditor.scss @@ -325,6 +325,10 @@ div.jsoneditor-tree div.jsoneditor-show-more a:focus { textarea.jsoneditor-text, .ace-jsoneditor { min-height: 150px; + + * { + font-family: $jse-font-mono; + } } textarea { &.jsoneditor-text { From f86f3d4e1c0866fafe4996edf46d0e08bbb27a06 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 18 Dec 2019 17:26:16 +0100 Subject: [PATCH 03/12] Implemented `popupAnchor` allowing to select a custom anchor element. See #869 and #870. --- HISTORY.md | 4 +- docs/api.md | 11 +++ src/js/JSONEditor.js | 3 +- src/js/Node.js | 6 +- src/js/appendNodeFactory.js | 2 +- src/js/createAbsoluteAnchor.js | 6 +- src/js/treemode.js | 13 +-- test/test_tooltip_anchor.html | 146 +++++++++++++++++++++++++++++++++ 8 files changed, 177 insertions(+), 14 deletions(-) create mode 100644 test/test_tooltip_anchor.html diff --git a/HISTORY.md b/HISTORY.md index 5715e4d..910b054 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -3,8 +3,10 @@ https://github.com/josdejong/jsoneditor -## not yet published, version 8.0.1 +## not yet published, version 8.1.0 +- Implemented `popupAnchor` allowing to select a custom anchor element. + See #869 and #870. - Fixed #502: CSS rule `* { font-family: ... }` resulting in Ace editor (`code` mode) not having a mono-space font anymore. diff --git a/docs/api.md b/docs/api.md index 8e16c43..7cd79f3 100644 --- a/docs/api.md +++ b/docs/api.md @@ -567,6 +567,17 @@ Constructs a new JSONEditor. The container element where modals (like for sorting and filtering) are attached: an overlay will be created on top of this container, and the modal will be created in the center of this container. +- `{HTMLElement} popupAnchor` + + The container element where popups (for example drop down menus, for JSON Schema error + tooltips, and color pickers) will be absolutely positioned. + By default, this is the root DIV element of the editor itself. + + When the JSONEditor is inside a DIV element which hides overflowing contents + (CSS `overflow: auto` or `overflow: hidden`), tooltips will be visible only partly. + In this case, a `popupAnchor` outside of the element without hidden overflow will allow + the tooltips to be visible when overflowing the DIV element of the JSONEditor. + - `{boolean} enableSort` Enable sorting of arrays and object properties. Only applicable for mode 'tree'. `true` by default. diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js index f8fd63e..6fd4482 100644 --- a/src/js/JSONEditor.js +++ b/src/js/JSONEditor.js @@ -183,7 +183,8 @@ JSONEditor.VALID_OPTIONS = [ 'timestampTag', 'timestampFormat', 'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform', - 'maxVisibleChilds', 'onValidationError' + 'maxVisibleChilds', 'onValidationError', + 'modalAnchor', 'popupAnchor' ] /** diff --git a/src/js/Node.js b/src/js/Node.js index 6345a2e..49f2498 100644 --- a/src/js/Node.js +++ b/src/js/Node.js @@ -303,7 +303,7 @@ export class Node { const createPopup = (destroyOnMouseOut) => { const frame = this.editor.frame - this.dom.popupAnchor = createAbsoluteAnchor(button, frame, onDestroy, destroyOnMouseOut) + this.dom.popupAnchor = createAbsoluteAnchor(button, this.editor.getPopupAnchor(), onDestroy, destroyOnMouseOut) const popupWidth = 200 // must correspond to what's configured in the CSS const buttonRect = button.getBoundingClientRect() @@ -3021,7 +3021,7 @@ export class Node { node._deleteDomColor() node.updateDom() - const colorAnchor = createAbsoluteAnchor(this.dom.color, this.editor.frame) + const colorAnchor = createAbsoluteAnchor(this.dom.color, this.editor.getPopupAnchor()) this.editor.options.onColorPicker(colorAnchor, this.value, function onChange (value) { if (typeof value === 'string' && value !== node.value) { @@ -3835,7 +3835,7 @@ export class Node { } const menu = new ContextMenu(items, { close: onClose }) - menu.show(anchor, this.editor.frame) + menu.show(anchor, this.editor.getPopupAnchor()) } /** diff --git a/src/js/appendNodeFactory.js b/src/js/appendNodeFactory.js index 07cf7f4..a307a06 100644 --- a/src/js/appendNodeFactory.js +++ b/src/js/appendNodeFactory.js @@ -207,7 +207,7 @@ export function appendNodeFactory (Node) { } const menu = new ContextMenu(items, { close: onClose }) - menu.show(anchor, this.editor.frame) + menu.show(anchor, this.editor.getPopupAnchor()) } /** diff --git a/src/js/createAbsoluteAnchor.js b/src/js/createAbsoluteAnchor.js index a6ec62d..3963fb6 100644 --- a/src/js/createAbsoluteAnchor.js +++ b/src/js/createAbsoluteAnchor.js @@ -14,13 +14,13 @@ export function createAbsoluteAnchor (anchor, parent, onDestroy, destroyOnMouseO const eventListeners = {} const anchorRect = anchor.getBoundingClientRect() - const frameRect = parent.getBoundingClientRect() + const parentRect = parent.getBoundingClientRect() const absoluteAnchor = document.createElement('div') absoluteAnchor.className = 'jsoneditor-anchor' absoluteAnchor.style.position = 'absolute' - absoluteAnchor.style.left = (anchorRect.left - frameRect.left) + 'px' - absoluteAnchor.style.top = (anchorRect.top - frameRect.top) + 'px' + absoluteAnchor.style.left = (anchorRect.left - parentRect.left) + 'px' + absoluteAnchor.style.top = (anchorRect.top - parentRect.top) + 'px' absoluteAnchor.style.width = (anchorRect.width - 2) + 'px' absoluteAnchor.style.height = (anchorRect.height - 2) + 'px' absoluteAnchor.style.boxSizing = 'border-box' diff --git a/src/js/treemode.js b/src/js/treemode.js index 7cc4c8b..d8329dd 100644 --- a/src/js/treemode.js +++ b/src/js/treemode.js @@ -135,13 +135,12 @@ treemode._setOptions = function (options) { const pickerHeight = 300 // estimated height of the color picker const top = parent.getBoundingClientRect().top const windowHeight = window.innerHeight + const showOnTop = ((windowHeight - top) < pickerHeight && top > pickerHeight) new VanillaPicker({ parent: parent, color: color, - popup: ((windowHeight - top) < pickerHeight && top > pickerHeight) - ? 'top' - : 'bottom', + popup: showOnTop ? 'top' : 'bottom', onDone: function (color) { const alpha = color.rgba[3] const hex = (alpha === 1) @@ -1063,7 +1062,7 @@ treemode._createFrame = function () { this.navBar.className = 'jsoneditor-navigation-bar nav-bar-empty' this.frame.appendChild(this.navBar) - this.treePath = new TreePath(this.navBar, this.frame) + this.treePath = new TreePath(this.navBar, this.getPopupAnchor()) this.treePath.onSectionSelected(this._onTreePathSectionSelected.bind(this)) this.treePath.onContextMenuItemSelected(this._onTreePathMenuItemSelected.bind(this)) } @@ -1681,7 +1680,11 @@ treemode.showContextMenu = function (anchor, onClose) { } const menu = new ContextMenu(items, { close: onClose }) - menu.show(anchor, this.frame) + menu.show(anchor, this.getPopupAnchor()) +} + +treemode.getPopupAnchor = function () { + return this.options.popupAnchor || this.frame } /** diff --git a/test/test_tooltip_anchor.html b/test/test_tooltip_anchor.html new file mode 100644 index 0000000..08cfd74 --- /dev/null +++ b/test/test_tooltip_anchor.html @@ -0,0 +1,146 @@ + + + + JSONEditor | JSON schema validation + + + + + + + +

Test custom tooltip anchor

+

+ The JSON Schema error tooltips and the color picker should have correct placing and overflow the editor, also in combination with scrolling. +

+ +
+
+
+
+ + + + From 582e0b1fc1ef773ee759f0e2bc1987875b319f99 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 18 Dec 2019 17:37:25 +0100 Subject: [PATCH 04/12] Fix color picker positioning when `popupAnchor` is defined --- src/scss/jsoneditor.scss | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/scss/jsoneditor.scss b/src/scss/jsoneditor.scss index d17734f..15eb310 100644 --- a/src/scss/jsoneditor.scss +++ b/src/scss/jsoneditor.scss @@ -80,20 +80,6 @@ div { vertical-align: top; } } - div { - &.jsoneditor-anchor { - cursor: pointer; - - .picker_wrapper { - &.popup { - &.popup_bottom { - top: 28px; - left: -10px; - } - } - } - } - } &.busy { pre { &.jsoneditor-preview { @@ -554,6 +540,19 @@ pre.jsoneditor-preview, } } +.jsoneditor-anchor { + cursor: pointer; + + .picker_wrapper { + &.popup { + &.popup_bottom { + top: 28px; + left: -10px; + } + } + } +} + .fadein { -webkit-animation: fadein 0.3s; animation: fadein 0.3s; From d973464545894a6b6ebe6cd09b1f8330a6ea2090 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 18 Dec 2019 17:39:32 +0100 Subject: [PATCH 05/12] Rename test file --- test/{test_tooltip_anchor.html => test_popup_anchor.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/{test_tooltip_anchor.html => test_popup_anchor.html} (100%) diff --git a/test/test_tooltip_anchor.html b/test/test_popup_anchor.html similarity index 100% rename from test/test_tooltip_anchor.html rename to test/test_popup_anchor.html From 4937337147478e651394b781b9650e6d13a86a31 Mon Sep 17 00:00:00 2001 From: jos Date: Wed, 18 Dec 2019 17:42:00 +0100 Subject: [PATCH 06/12] Publish v8.1.0 --- HISTORY.md | 2 +- package-lock.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 910b054..78ff8dd 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -3,7 +3,7 @@ https://github.com/josdejong/jsoneditor -## not yet published, version 8.1.0 +## 2019-12-18, version 8.1.0 - Implemented `popupAnchor` allowing to select a custom anchor element. See #869 and #870. diff --git a/package-lock.json b/package-lock.json index 4c51138..865fb58 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "jsoneditor", - "version": "8.0.0", + "version": "8.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 6cbcffc..2428fca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jsoneditor", - "version": "8.0.0", + "version": "8.1.0", "main": "./index", "description": "A web-based tool to view, edit, format, and validate JSON", "tags": [ From c059fdb543ad866dc220f387576389a62de3789e Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 27 Dec 2019 22:31:01 +0100 Subject: [PATCH 07/12] Have the preview test file actually load `preview` mode --- test/test_preview_load_save.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/test/test_preview_load_save.html b/test/test_preview_load_save.html index d8be3c9..3015137 100644 --- a/test/test_preview_load_save.html +++ b/test/test_preview_load_save.html @@ -1,7 +1,7 @@ - JSONEditor | Load and save + JSONEditor | Preview mode load and save @@ -20,7 +20,7 @@ -

Load and save JSON documents

+

Load and save JSON documents in Preview mode

This examples uses HTML5 to load/save local files. Powered by FileReader.js and @@ -38,7 +38,9 @@