Merge remote-tracking branch 'origin/develop' into develop

josdejong · josdejong · commit 78558b7d34cb · 2022-05-31T11:03:09.000+02:00
diff --git a/docs/api.md b/docs/api.md
@@ -98,6 +98,20 @@ Constructs a new JSONEditor.
 
   In order to update css classes when they depend on external state, you can call `editor.refresh()`.
 
+- `{function} onExpand({ path, isExpand, recursive })`
+
+  Set a callback function to be invoked when a node is expanded/collapsed (not programtically via APIs). Only applicable when option `mode` is `tree`, `form`, or `view`.
+
+  The callback is invoked with an object containing `path`, `isExpand` and `recursive`:
+
+  ```
+  {
+    path: string[],
+    isExpand: boolean,
+    recursive: boolean
+  }
+  ```
+
 - `{function} onEditable({ path, field, value })`
 
   Set a callback function to determine whether individual nodes are editable or read-only. Only applicable when option `mode` is `tree`, `text`, or `code`.
@@ -679,6 +693,24 @@ Destroy the editor. Clean up DOM, event listeners, and web workers.
 
 Expand all fields. Only applicable for mode 'tree', 'view', and 'form'.
 
+#### `JSONEditor.expand(options)`
+
+Expand/collapse a given JSON node. Only applicable for mode 'tree', 'view' and 'form'.
+
+*`options` fields:*
+
+- `{Array.<String>} path`
+
+  Path for the node to expand/collapse
+
+- `{Boolean} isExpand`
+
+  Whether to expand the node (else collapse)
+
+- `{Boolean} recursive`
+
+  Whether to expand/collapse child nodes recursively
+
 #### `JSONEditor.focus()`
 
 Set focus to the JSONEditor.
diff --git a/examples/25_sync_node_expand.html b/examples/25_sync_node_expand.html
@@ -0,0 +1,87 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>JSONEditor | Sync Node Expand</title>
+
+  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
+  <script src="../dist/jsoneditor.js"></script>
+
+  <style type="text/css">
+    #jsoneditor-left {
+      width: 45%;
+      height: 90%;
+      float: left;
+      margin-left: 2%;
+    }
+    #jsoneditor-right {
+      width: 45%;
+      height: 90%;
+      float: right;
+      margin-right: 2%;
+    }
+  </style>
+</head>
+<body>
+
+<div>
+    <div id="jsoneditor-left"></div>
+    <div id="jsoneditor-right"></div>
+</div>
+
+<script>
+  const left_json = {
+    'student_details': {
+      'name': {
+        'first_name': 'foo',
+        'last_name': 'bar'
+      },
+      'school': {
+        'name': 'foo',
+        'address': 'bar'
+      },
+      'contact': '434343',
+      'age': '39'
+    },
+    'marks': [50, 49, 36]
+  }
+  
+  const right_json = {
+    'marks': [50, 49],
+    'student_details': {
+      'name': 'foo bar',
+      'address': {
+        'street': 'foo',
+        'city': 'bar',
+        'zip': '444444'
+      },
+      'school': {
+        'name': 'foo',
+        'address': 'bar'
+      },
+      'age': '39',
+      'contact': ['434355', '343433', '324343']
+    }
+  }
+
+  const editor_left = new JSONEditor(document.getElementById('jsoneditor-left'), {
+      mode: "tree",
+      onExpand: (options) => {
+          if (editor_right) {
+              editor_right.expand(options)
+          }
+      }
+  }, left_json)
+
+  const editor_right = new JSONEditor(document.getElementById('jsoneditor-right'), {
+      mode: "tree",
+      onExpand: (options) => {
+          if (editor_left) {
+            editor_left.expand(options)
+          }
+      }
+  }, right_json)
+</script>
+</body>
+</html>
diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js
@@ -177,7 +177,7 @@ JSONEditor.prototype.DEBOUNCE_INTERVAL = 150
 JSONEditor.VALID_OPTIONS = [
   'ajv', 'schema', 'schemaRefs', 'templates',
   'ace', 'theme', 'autocomplete',
-  'onChange', 'onChangeJSON', 'onChangeText',
+  'onChange', 'onChangeJSON', 'onChangeText', 'onExpand',
   'onEditable', 'onError', 'onEvent', 'onModeChange', 'onNodeName', 'onValidate', 'onCreateMenu',
   'onSelectionChange', 'onTextSelectionChange', 'onClassName',
   'onFocus', 'onBlur',
diff --git a/src/js/Node.js b/src/js/Node.js
@@ -3112,6 +3112,14 @@ export class Node {
       frame.appendChild(table)
       frame.scrollTop = scrollTop
     }
+
+    if (typeof this.editor.options.onExpand === 'function') {
+      this.editor.options.onExpand({
+        path: this.getPath(),
+        isExpand: this.expanded,
+        recursive: recurse
+      })
+    }
   }
 
   /**
diff --git a/src/js/treemode.js b/src/js/treemode.js
@@ -454,6 +454,26 @@ treemode.collapseAll = function () {
   }
 }
 
+/**
+ * Expand/collapse a given JSON node.
+ * @param {Object} [options] Available parameters:
+ *                         {Array<String>} [path] Path for the node to expand/collapse.
+ *                         {Boolean} [isExpand]  Whether to expand the node (else collapse).
+ *                         {Boolean} [recursive]  Whether to expand/collapse child nodes recursively.
+ */
+treemode.expand = function (options) {
+  if (!options) return
+
+  const node = this.node ? this.node.findNodeByPath(options.path) : null
+  if (!node) return
+
+  if (options.isExpand) {
+    node.expand(options.recursive)
+  } else {
+    node.collapse(options.recursive)
+  }
+}
+
 /**
  * The method onChange is called whenever a field or value is changed, created,
  * deleted, duplicated, etc.
@@ -988,6 +1008,13 @@ treemode._createFrame = function () {
     expandAll.title = translate('expandAll')
     expandAll.onclick = () => {
       editor.expandAll()
+      if (typeof this.options.onExpand === 'function') {
+        this.options.onExpand({
+          path: [],
+          isExpand: true,
+          recursive: true
+        })
+      }
     }
     this.menu.appendChild(expandAll)
 
@@ -998,6 +1025,13 @@ treemode._createFrame = function () {
     collapseAll.className = 'jsoneditor-collapse-all'
     collapseAll.onclick = () => {
       editor.collapseAll()
+      if (typeof this.options.onExpand === 'function') {
+        this.options.onExpand({
+          path: [],
+          isExpand: false,
+          recursive: true
+        })
+      }
     }
     this.menu.appendChild(collapseAll)
 

Original file line number	Diff line number	Diff line change
`@@ -3112,6 +3112,14 @@ export class Node {`
`3112`	`3112`	`frame.appendChild(table)`
`3113`	`3113`	`frame.scrollTop = scrollTop`
`3114`	`3114`	`}`
	`3115`	`+`
	`3116`	`+ if (typeof this.editor.options.onExpand === 'function') {`
	`3117`	`+ this.editor.options.onExpand({`
	`3118`	`+ path: this.getPath(),`
	`3119`	`+ isExpand: this.expanded,`
	`3120`	`+ recursive: recurse`
	`3121`	`+ })`
	`3122`	`+ }`
`3115`	`3123`	`}`
`3116`	`3124`
`3117`	`3125`	`/**`