feat: implement method editor.updateProps(props) to change properti…

…es after creation
josdejong · Aug 11, 2021 · b596155 · b596155
1 parent c92310a
commit b596155
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -149,7 +149,7 @@ Svelte component:
 JavasScript class:
 
 ```js
-import { JSONEditor } from 'svelte-jsoneditor'
+import { JSONEditor } from 'svelte-jsoneditor/dist/jsoneditor.js'
 
 const editor = new JSONEditor({
   target: document.getElementById('jsoneditor'),
@@ -235,6 +235,14 @@ const editor = new JSONEditor({
 - `update(json: JSON)` Update the loaded JSON document, keeping the state of the editor (like expanded objects).
 - `updateText(text: string)` Update the loaded JSON document, keeping the state of the editor (like expanded objects).
 - `patch(operations: JSONPatchDocument)` Apply a JSON patch document to update the contents of the JSON document. A JSON patch document is a list with JSON Patch operations.
+- `updateProps(props: Object)` update some or all of the properties. Updated `json` or `text` can be passed too; this is equivalent to calling `update(json)` and `updateText(text)`. Example:
+
+  ```js
+  editor.updateProps({
+    readOnly: true
+  })
+  ```
+
 - `expand([callback: (path: Path) => boolean])` Expand or collapse paths in the editor. The `callback` determines which paths will be expanded. If no `callback` is provided, all paths will be expanded. It is only possible to expand a path when all of its parent paths are expanded too. Examples:
   - `editor.expand(path => true)` expand all
   - `editor.expand(path => false)` collapse all

diff --git a/examples/browser/toggle_options.html b/examples/browser/toggle_options.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>JSONEditor | Toggle options</title>
+
+    <style>
+      body,
+      input,
+      label {
+        font-family: verdana, serif;
+        font-size: 12pt;
+      }
+
+      #jsoneditor {
+        width: 600px;
+        height: 500px;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      <label> <input type="checkbox" id="mainMenuBar" checked /> Show main menu bar </label>
+      <label> <input type="checkbox" id="navigationBar" checked /> Show navigation bar </label>
+      <label> <input type="checkbox" id="readOnly" /> Read only </label>
+    </p>
+    <div id="jsoneditor"></div>
+
+    <script type="module">
+      import { JSONEditor } from '../../package/dist/jsoneditor.js'
+
+      // create the editor
+      const editor = new JSONEditor({
+        target: document.getElementById('jsoneditor'),
+        props: {
+          json: {
+            array: [1, 2, 3],
+            boolean: true,
+            color: '#82b92c',
+            null: null,
+            number: 123,
+            object: { a: 'b', c: 'd' },
+            time: 1575599819000,
+            string: 'Hello World'
+          }
+        }
+      })
+
+      document.getElementById('mainMenuBar').onchange = (event) => {
+        editor.updateProps({
+          mainMenuBar: event.target.checked
+        })
+      }
+
+      document.getElementById('navigationBar').onchange = (event) => {
+        editor.updateProps({
+          navigationBar: event.target.checked
+        })
+      }
+
+      document.getElementById('readOnly').onchange = (event) => {
+        editor.updateProps({
+          readOnly: event.target.checked
+        })
+      }
+
+      window.editor = editor
+    </script>
+  </body>
+</html>
diff --git a/src/lib/components/JSONEditor.svelte b/src/lib/components/JSONEditor.svelte
@@ -159,38 +159,6 @@
     }
   }
 
-  export function setValidator(newValidator) {
-    validator = newValidator
-  }
-
-  export function getValidator() {
-    return validator
-  }
-
-  export function setMainMenuBar(newMainMenuBar) {
-    mainMenuBar = newMainMenuBar
-  }
-
-  export function getMainMenuBar() {
-    return mainMenuBar
-  }
-
-  export function setNavigationBar(newNavigationBar) {
-    navigationBar = newNavigationBar
-  }
-
-  export function getNavigationBar() {
-    return navigationBar
-  }
-
-  export function setMode(newMode) {
-    mode = newMode
-  }
-
-  export function getMode() {
-    return mode
-  }
-
   export function focus() {
     if (refCodeMode) {
       refCodeMode.focus()
@@ -199,6 +167,10 @@
     }
   }
 
+  export function updateProps(props) {
+    this.$set(props)
+  }
+
   export function destroy() {
     this.$destroy()
   }