Created
October 10, 2020 08:30
-
-
Save SteffenPL/b2d1b1c205063ceb06e85d5982820d85 to your computer and use it in GitHub Desktop.
Pluto with json editor (draft)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ### A Pluto.jl notebook ### | |
| # v0.12.2 | |
| using Markdown | |
| using InteractiveUtils | |
| # This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error). | |
| macro bind(def, element) | |
| quote | |
| local el = $(esc(element)) | |
| global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : missing | |
| el | |
| end | |
| end | |
| # ╔═╡ ca36f1e0-0abc-11eb-1cac-d53f4924ecdb | |
| # note: for better integration into Pluto, bootstrap should be scoped, s.t. the Pluto CSS is not overwritten. Anyway, to keep everything in one file I just include a non-scoped bootstrap | |
| html""" | |
| <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.min.js"></script> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> | |
| <!-- Optional theme --> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"> | |
| <!-- Latest compiled and minified JavaScript --> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> | |
| """ | |
| # ╔═╡ 419cabb0-0abf-11eb-1735-8b0aab19f427 | |
| @bind param_dict html""" | |
| <span id="editor_holder_span"> | |
| <div id="editor_holder"></div> | |
| </span> | |
| <script> | |
| const element = document.getElementById('editor_holder'); | |
| const editor = new JSONEditor(element, { | |
| schema: { | |
| type: "object", | |
| title: "Car", | |
| properties: { | |
| make: { | |
| type: "string", | |
| enum: [ | |
| "Toyota", | |
| "BMW", | |
| "Honda", | |
| "Ford", | |
| "Chevy", | |
| "VW" | |
| ] | |
| }, | |
| model: { | |
| type: "string" | |
| }, | |
| year: { | |
| type: "integer", | |
| enum: [ | |
| 1995,1996,1997,1998,1999, | |
| 2000,2001,2002,2003,2004, | |
| 2005,2006,2007,2008,2009, | |
| 2010,2011,2012,2013,2014 | |
| ], | |
| default: 2008 | |
| }, | |
| safety: { | |
| type: "integer", | |
| format: "rating", | |
| maximum: "5", | |
| exclusiveMaximum: false, | |
| readonly: false | |
| } | |
| } | |
| }, | |
| theme: 'bootstrap4'}); | |
| const span = document.getElementById('editor_holder_span'); | |
| editor.on('change',() => { | |
| span.value = editor.getValue(); | |
| span.dispatchEvent(new CustomEvent("input")); | |
| }); | |
| span.value = editor.getValue(); | |
| span.dispatchEvent(new CustomEvent("input")); | |
| </script> | |
| """ | |
| # ╔═╡ ec6deb30-0abf-11eb-05a9-3f6db254a7f6 | |
| param_dict | |
| # ╔═╡ Cell order: | |
| # ╟─ca36f1e0-0abc-11eb-1cac-d53f4924ecdb | |
| # ╟─419cabb0-0abf-11eb-1735-8b0aab19f427 | |
| # ╠═ec6deb30-0abf-11eb-05a9-3f6db254a7f6 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment