Implemented `modalAnchor`

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.

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
 

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) {

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)
       }
     });
   }