Created
September 8, 2022 12:52
-
-
Save bassmanitram/6be057b947b12b3e6aea766c3d0eb292 to your computer and use it in GitHub Desktop.
JSON-Editor Categories example with Basic tab grid workaround
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 Basic tab grid workaround</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 | |
| * (unchanged from the original example - because this is what the backend tool requires) | |
| */ | |
| 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 MODIFIED schema of the backend tool configuration. | |
| * | |
| * IT NO LONGER VALIDATES THE BACKEND TOOL CONFIGURATION, but has a workaround in it to | |
| * allow the Basic tab to be displayed in "grid-strict" format. | |
| */ | |
| const schema = { | |
| "$schema": "http://json-schema.org/draft-06/schema#", | |
| "type": "object", | |
| "additionalProperties": false, | |
| "title": "Categories example with Basic tab grid workaround", | |
| "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" | |
| ***** | |
| ***** That would remove the need for the model transformation and the "Basic" | |
| ***** container object. | |
| *****/ | |
| "format": "categories", | |
| "additionalProperties": false, | |
| "properties": { | |
| /***** | |
| ***** THE WORKAROUND THAT BREAKS THE LINK WITH THE REAL FINAL OBJECT FORMAT | |
| *****/ | |
| "Basic": { | |
| "type": "object", | |
| "format": "grid-strict", | |
| "additionalProperties": false, | |
| "properties": { | |
| "label": { | |
| "type": "string", | |
| "minLength": 1, | |
| "title": "Label for the command", | |
| "options": { | |
| "grid_columns": 12, | |
| "grid_break": true | |
| } | |
| }, | |
| "command_line": { | |
| "type": "string", | |
| "minLength": 1, | |
| "title": "Command line to execute", | |
| "options": { | |
| "grid_columns": 12, | |
| "grid_break": true | |
| } | |
| }, | |
| "cwd": { | |
| "type": "string", | |
| "minLength": 1, | |
| "title": "Current working directory", | |
| "options": { | |
| "grid_columns": 6 | |
| } | |
| }, | |
| "use_shell": { | |
| "type": "boolean", | |
| "title": "Use shell", | |
| "options": { | |
| "grid_break": true, | |
| "grid_columns": 6 | |
| } | |
| }, | |
| "min_items": { | |
| "type": "integer", | |
| "minimum": 1, | |
| "title": "Min items", | |
| "format": "number", | |
| "default": 1, | |
| "options": { | |
| "grid_columns": 6, | |
| } | |
| }, | |
| "max_items": { | |
| "type": "integer", | |
| "minimum": 0, | |
| "title": "Max items", | |
| "format": "number", | |
| "default": 0, | |
| "options": { | |
| "grid_columns": 6, | |
| "grid_break": true | |
| } | |
| } | |
| }, | |
| "required": [ | |
| "label", | |
| "command_line" | |
| ] | |
| }, | |
| "mimetypes": { | |
| "type": "array", | |
| "uniqueItems": true, | |
| "format": "table", | |
| "items": { | |
| "type": "string", | |
| "pattern": "^(!?[A-Za-z0-9-]+\\/(([A-Za-z0-9-]+)|\\*))|(\\*)|(\\*\\/\\*)$", | |
| "title": "Mimetype" | |
| }, | |
| "title": "Mimetypes", | |
| "options": { | |
| "grid_columns": 3 | |
| } | |
| }, | |
| "filetypes": { | |
| "type": "array", | |
| "uniqueItems": true, | |
| "format": "table", | |
| "items": { | |
| "type": "string" | |
| }, | |
| "title": "File types", | |
| "options": { | |
| "grid_columns": 2 | |
| } | |
| }, | |
| "path_patterns": { | |
| "type": "array", | |
| "uniqueItems": true, | |
| "format": "table", | |
| "items": { | |
| "type": "string" | |
| }, | |
| "title": "Path patterns", | |
| "options": { | |
| "grid_columns": 2 | |
| } | |
| } | |
| }, | |
| "required": [ | |
| "Basic" | |
| ] | |
| }, | |
| "title": "Top Level Actions", | |
| "options": { | |
| } | |
| } | |
| }, | |
| "required": [ | |
| "actions" | |
| ] | |
| }; | |
| /* | |
| * The model transformation function required to convert the | |
| * backend config into an object that validates against the | |
| * tweaked schema and with which JSON Editor can work | |
| * | |
| * Normally there would be a model transformation function going | |
| * the other way too and called when saving, but we aren't saving | |
| * anything in this demo. | |
| */ | |
| const primitives = [ | |
| 'boolean', | |
| 'number', | |
| 'string' | |
| ] | |
| function translateBackendToFrontend(startval, nested) { | |
| const translatedStartval = {}; | |
| let basic; | |
| for (const [key, value] of Object.entries(startval)) { | |
| if (key == "actions") { | |
| translatedStartval.actions = value.map(action => translateBackendToFrontend(action, true)); | |
| } else if (nested && primitives.includes(typeof value)) { | |
| if (!basic) basic = translatedStartval.Basic = {}; | |
| basic[key] = value; | |
| } else { | |
| translatedStartval[key] = value; | |
| } | |
| } | |
| return translatedStartval; | |
| } | |
| /* | |
| * 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: translateBackendToFrontend(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