From 463276a3d96c214c922ae31d29d1f19e10e88323 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Wed, 20 Jun 2018 20:27:36 +0200
Subject: [PATCH] Implemented `modalAnchor`

---
 HISTORY.md           |  8 ++++++++
 docs/api.md          |  5 +++++
 src/js/JSONEditor.js |  5 ++++-
 src/js/Node.js       | 11 +++++++++--
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index a4ceb9f..bb6cfb8 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -3,6 +3,14 @@
 https://github.com/josdejong/jsoneditor
 
 
+## not yet released, version 5.18.0
+
+- Implemented a new option `modalAnchor` to control at which part of the
+  screen the modals are displayed.
+- Integrated JMESPath for advanced filtering, sorting, and transforming
+  of JSON documents.
+
+
 ## 2018-06-03, version 5.17.1
 
 - Fixed a bug in a translation text.
diff --git a/docs/api.md b/docs/api.md
index a641d4e..f4fe59d 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -249,6 +249,11 @@ Constructs a new JSONEditor.
 
   All available fields for translation can be found in the source file `src/js/i18n.js`.
 
+- `{HTMLElement} modalAnchor`
+
+  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.
+
 
 ### Methods
 
diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js
index 9a4a56f..f6d15b6 100644
--- a/src/js/JSONEditor.js
+++ b/src/js/JSONEditor.js
@@ -51,7 +51,10 @@ var util = require('./util');
  *                               {function} onTextSelectionChange Callback method, 
  *                                                                triggered on text selection change
  *                                                                Only applicable for modes
- *                                                                'text' and 'code'
+ *                               {HTMLElement} modalAnchor        The anchor element to apply an
+ *                                                                overlay and display the modals in a
+ *                                                                centered location.
+ *                                                                Defaults to document.body
  * @param {Object | undefined} json JSON object
  */
 function JSONEditor (container, options, json) {
diff --git a/src/js/Node.js b/src/js/Node.js
index cc6bc55..0a94691 100644
--- a/src/js/Node.js
+++ b/src/js/Node.js
@@ -10,6 +10,8 @@ var showTransformModal = require('./showTransformModal');
 var util = require('./util');
 var translate = require('./i18n').translate;
 
+var DEFAULT_MODAL_ANCHOR = document.body;
+
 /**
  * @constructor Node
  * Create a new Node
@@ -3141,6 +3143,7 @@ Node.prototype.transform = function (query) {
   this.hideChilds(); // sorting is faster when the childs are not attached to the dom
 
   // copy the childs array (the old one will be kept for an undo action
+  var oldType = this.type;
   var oldChilds = this.childs;
   this.childs = this.childs.concat();
 
@@ -3153,6 +3156,8 @@ Node.prototype.transform = function (query) {
 
     this.editor._onAction('transform', {
       node: this,
+      oldType: oldType,
+      newType: this.type,
       oldValue: oldValue,
       newValue: newValue,
       oldChilds: oldChilds,
@@ -3599,7 +3604,8 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
       title: translate('sortTitle', {type: this.type}),
       className: 'jsoneditor-sort-asc',
       click: function () {
-        showSortModal(node, node.editor.frame)
+        var anchor = node.editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR;
+        showSortModal(node, anchor)
       }
     });
 
@@ -3608,7 +3614,8 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
       title: translate('transformTitle', {type: this.type}),
       className: 'jsoneditor-transform',
       click: function () {
-        showTransformModal(node, node.editor.frame)
+        var anchor = node.editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR;
+        showTransformModal(node, anchor)
       }
     });
   }