diff --git a/examples/23_custom_query_language.html b/examples/23_custom_query_language.html index f0d6d21..3043d09 100644 --- a/examples/23_custom_query_language.html +++ b/examples/23_custom_query_language.html @@ -75,7 +75,9 @@ const execute = new Function('data', 'return ' + query) return execute(json) - } + }, + queryDescription: 'Enter a JavaScript query to filter, sort, or transform the JSON data.
' + + 'The Lodash library is available via _ to facilitate this.' } const json = [] for (let i = 0; i < 100; i++) { diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js index 1294c56..305b3a3 100644 --- a/src/js/JSONEditor.js +++ b/src/js/JSONEditor.js @@ -185,7 +185,7 @@ JSONEditor.VALID_OPTIONS = [ 'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform', 'maxVisibleChilds', 'onValidationError', 'modalAnchor', 'popupAnchor', - 'createQuery', 'executeQuery' + 'createQuery', 'executeQuery', 'queryDescription' ] /** diff --git a/src/js/Node.js b/src/js/Node.js index a2b357a..a16be77 100644 --- a/src/js/Node.js +++ b/src/js/Node.js @@ -3860,17 +3860,16 @@ export class Node { * Show transform modal */ showTransformModal () { - const node = this + const { modalAnchor, createQuery, executeQuery, queryDescription } = this.editor.options + const json = this.getValue() - const anchor = this.editor.options.modalAnchor || DEFAULT_MODAL_ANCHOR - const json = node.getValue() - const { createQuery, executeQuery } = this.editor.options showTransformModal({ - anchor, + anchor: modalAnchor || DEFAULT_MODAL_ANCHOR, json, + queryDescription, // can be undefined createQuery, executeQuery, - onTransform: query => { node.transform(query) } + onTransform: query => { this.transform(query) } }) } diff --git a/src/js/previewmode.js b/src/js/previewmode.js index 4694d42..4041255 100644 --- a/src/js/previewmode.js +++ b/src/js/previewmode.js @@ -388,20 +388,20 @@ previewmode._showSortModal = function () { */ previewmode._showTransformModal = function () { this.executeWithBusyMessage(() => { - const anchor = this.options.modalAnchor || DEFAULT_MODAL_ANCHOR + const { createQuery, executeQuery, modalAnchor, queryDescription } = this.options const json = this.get() - const { createQuery, executeQuery } = this.options this._renderPreview() // update array count showTransformModal({ - anchor, + anchor: modalAnchor || DEFAULT_MODAL_ANCHOR, json, + queryDescription, // can be undefined createQuery, executeQuery, onTransform: query => { this.executeWithBusyMessage(() => { - const updatedJson = this.options.executeQuery(json, query) + const updatedJson = executeQuery(json, query) this._setAndFireOnChange(updatedJson) }, 'transforming...') } diff --git a/src/js/showTransformModal.js b/src/js/showTransformModal.js index 20b8cb8..8d07e14 100644 --- a/src/js/showTransformModal.js +++ b/src/js/showTransformModal.js @@ -5,27 +5,39 @@ import { stringifyPartial } from './jsonUtils' import { getChildPaths, debounce } from './util' import { MAX_PREVIEW_CHARACTERS } from './constants' +const DEFAULT_DESCRIPTION = + 'Enter a JMESPath query to filter, sort, or transform the JSON data.
' + + 'To learn JMESPath, go to the interactive tutorial.' + /** * Show advanced filter and transform modal using JMESPath * @param {Object} params * @property {HTMLElement} container The container where to center * the modal and create an overlay * @property {JSON} json The json data to be transformed + * @property {string} [queryDescription] Optional custom description explaining + * the transform functionality * @property {function} createQuery Function called to create a query * from the wizard form * @property {function} executeQuery Execute a query for the preview pane * @property {function} onTransform Callback invoked with the created * query as callback */ -export function showTransformModal ({ container, json, createQuery, executeQuery, onTransform }) { +export function showTransformModal ( + { + container, + json, + queryDescription = DEFAULT_DESCRIPTION, + createQuery, + executeQuery, + onTransform + } +) { const value = json const content = '