Created
September 8, 2022 12:51
-
-
Save bassmanitram/c9e0576201a9b826fff074dc36ed43e7 to your computer and use it in GitHub Desktop.
JSON-Editor Categories example with normal Basic tab
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8'> | |
| <title>JSON-Editor Categories example with normal Basic tab</title> | |
| <link rel='stylesheet' type='text/css' media='screen' | |
| href='https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/css/jsoneditor.min.css'> | |
| <link rel='stylesheet' type='text/css' media='screen' | |
| href='https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css'> | |
| <link rel='stylesheet' type='text/css' media='screen' | |
| href='https://use.fontawesome.com/releases/v5.6.3/css/all.css'> | |
| <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor@latest/dist/jsoneditor.js"></script> | |
| </head> | |
| <body> | |
| <div class='container col-md-12'> | |
| <div id='editor_holder'></div> | |
| </div> | |
| <script> | |
| /* | |
| * The startval - the backend tool configuration expressed in JSON normally read from the server | |
| */ | |
| const startval = { | |
| "actions": [ | |
| { | |
| "label": "Run in node", | |
| "mimetypes": [ | |
| "application/javascript" | |
| ], | |
| "command_line": "gnome-terminal -t \"Running Node %b\" --profile \"No Close\" -- node %b", | |
| "cwd": "%d", | |
| "max_items": 1 | |
| }, | |
| { | |
| "label": "Test all place holders", | |
| "command_line": "%O printf '%%s\n' '#b' %b '#B' %B '#c' %c '#d' %d '#D' %D '#f' %f '#F' %F '#h' %h '#m' %m '#M' %M '#n' %n '#o' %o '#O' %O '#p' %p '#s' %s '#u' %u '#U' %U '#w' %w '#W' %W '#x' %x '#X' %X" | |
| } | |
| ] | |
| } | |
| /* | |
| * The schema of the backend too configuration | |
| * | |
| * This validates the JSON obtained from the backend, but cannot render the Basic tab in | |
| * a "grid" or "grid-strict" format. | |
| */ | |
| const schema = { | |
| "$schema": "http://json-schema.org/draft-06/schema#", | |
| "type": "object", | |
| "additionalProperties": false, | |
| "title": "Categories example with normal Basic tab", | |
| "properties": { | |
| "actions": { | |
| "type": "array", | |
| "format": "tabs", | |
| "items": { | |
| "type": "object", | |
| /***** | |
| ***** THIS IS WHERE I AM SUGGESTING A CHANGE... PERHAPS WITH THE ADDITION OF | |
| ***** AN OPTION NAMED, SAY, basicCategoryFormat - allowable values being "grid" | |
| ***** AND "grid-strict", | |
| *****/ | |
| "format": "categories", | |
| "additionalProperties": false, | |
| "properties": { | |
| "label": { | |
| "type": "string", | |
| "minLength": 1, | |
| "title": "Label for the command" | |
| }, | |
| "command_line": { | |
| "type": "string", | |
| "minLength": 1, | |
| "title": "Command line to execute" | |
| }, | |
| "use_shell": { | |
| "type": "boolean", | |
| "title": "Use shell" | |
| }, | |
| "cwd": { | |
| "type": "string", | |
| "minLength": 1, | |
| "title": "Current working directory" | |
| }, | |
| "min_items": { | |
| "type": "integer", | |
| "minimum": 1, | |
| "title": "Min items", | |
| "format": "number", | |
| "default": 1 | |
| }, | |
| "max_items": { | |
| "type": "integer", | |
| "minimum": 0, | |
| "title": "Max items", | |
| "format": "number", | |
| "default": 0 | |
| }, | |
| "mimetypes": { | |
| "type": "array", | |
| "uniqueItems": true, | |
| "format": "table", | |
| "items": { | |
| "type": "string", | |
| "pattern": "^(!?[A-Za-z0-9-]+\\/(([A-Za-z0-9-]+)|\\*))|(\\*)|(\\*\\/\\*)$", | |
| "title": "Mimetype" | |
| }, | |
| "title": "Mimetypes" | |
| }, | |
| "filetypes": { | |
| "type": "array", | |
| "uniqueItems": true, | |
| "format": "table", | |
| "items": { | |
| "type": "string" | |
| }, | |
| "title": "File types" | |
| }, | |
| "path_patterns": { | |
| "type": "array", | |
| "uniqueItems": true, | |
| "format": "table", | |
| "items": { | |
| "type": "string" | |
| }, | |
| "title": "Path patterns" | |
| } | |
| }, | |
| "required": [ | |
| "label", | |
| "command_line" | |
| ] | |
| }, | |
| "title": "Top Level Actions", | |
| } | |
| }, | |
| "required": [ | |
| "actions" | |
| ] | |
| }; | |
| /* | |
| * The editor configuration | |
| */ | |
| const editorConfig = { | |
| /* | |
| * Editor options | |
| */ | |
| "array_controls_top": true, | |
| "disable_array_delete_last_row": true, | |
| "disable_collapse": true, | |
| "disable_edit_json": true, | |
| "iconlib": "fontawesome5", | |
| "no_additional_properties": true, | |
| "theme": "bootstrap4", | |
| "keep_oneof_values": false, | |
| "display_required_only": false, | |
| "use_default_values": true, | |
| "disable_properties": true, | |
| "show_opt_in": true, | |
| /* | |
| * Bootstrap4 theme options | |
| */ | |
| "tooltip": "browser", | |
| "object_indent": false, | |
| "table_zebrastyle": false, | |
| "table_border": false, | |
| /* | |
| * Plugin the schema and startval | |
| */ | |
| startval, | |
| schema | |
| }; | |
| /* | |
| * Wiring it all up | |
| */ | |
| editor = new window.JSONEditor(document.querySelector("#editor_holder"), editorConfig); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment