UNPKG

jsoneditor4code

Version:

JSON Editor for UML Diagrams developed with Javascript Code Templates based on JSON Editor of Jeremy Dorn

311 lines 17 kB
{ "data": { "classname": "JSONEditor4Code", "superclassname": "", "comment": "The class provides an constructor for a JSON Editor for Code Generation. The work is based on Jeremy Dorns great JSON editor. This class adds the HandleBars template engine for generation of source based on a UML class definition. The constructor must be called with document object as argument.\n var vJSONEditor4Code = new JSONEditor4Code() ", "reposinfo": { "repository": "https://www.github.com/author/NewClass", "require_classes": "yes", "author": "My Name", "email": "name@example.com", "created": "23.04.2018", "modified": "2018/05/07 12:44:24", "requirelist": [ "handlebars", "filesaver", "jquery" ] }, "attributes": [ { "visibility": "public", "name": "aEditor", "init": "new JSONEditor()", "class": "JSONEditor", "comment": "Contains the JSON Editor for handling the UML model for the class" }, { "visibility": "public", "name": "aJSON", "init": "null", "class": "Hash", "comment": "contains the data submitted to the JSON Editor (via URL parameter/query string - which includes the list of classes that can be used in this class definition" }, { "visibility": "public", "name": "aSchema", "init": "null", "class": "Hash", "comment": "This attribute contains the JSON Schema for the JSON Editor" }, { "visibility": "public", "name": "aOptions", "init": "{}", "class": "Hash", "comment": "This attribute stores the options of the editor, e.g. the DOM id in which ethe editor will be injected in the DOM, the filename id, validator result, ...." } ], "methods": [ { "visibility": "public", "name": "init", "parameter": [ { "name": "pJSON", "class": "Hash", "comment": "the parameter stores JSON definition for the class" }, { "name": "pOptions", "class": "Hash", "comment": "the parameter stores the options for the JSON editor (developed by Jeremy Dorn)" }, { "name": "pSchema", "class": "Hash", "comment": "the parameter contains the JSON Schema for JSON Editor" }, { "name": "pEditorID", "class": "String", "comment": "the parameter provide DOM ID in which the JSON editor will be injected." }, { "name": "pFilenameID", "class": "String", "comment": "the parameter provide the ID of a DOM element in which the JSON Editor will write the file name of the loaded UML Class. " } ], "return": "", "comment": "the method initializes the JSON editor with the defined schema, updates the class selector in the schema with the classlist in JSON data. ", "code": "this.aJSON = pJSON;\nthis.aSchema = pSchema;\nthis.aOptions = pOptions || {};\nif (this.aOptions.hasOwnProperty(\"editor_id\")) {\n console.log(\"Editor ID defined - [\"+this.aOptions.editor_id+\"]\")\n} else {\n this.aOptions[\"editor_id\"] = \"editor_holder\";\n};\nif (this.aOptions.hasOwnProperty(\"validator_id\")) {\n console.log(\"Validator ID defined - [\"+this.aOptions.validator_id+\"]\")\n} else {\n this.aOptions[\"validator_id\"] = \"valid_indicator\";\n};\nif (this.aOptions.hasOwnProperty(\"filename_id\")) {\n console.log(\"Filename ID defined - [\"+this.aOptions.filename_id+\"]\")\n} else {\n this.aOptions[\"filename_id\"] = \"load_filename\";\n};\nthis.update_schema();\nthis.create_editor();\n" }, { "visibility": "public", "name": "init_ask", "parameter": [ { "name": "pInitJSON", "class": "Hash", "comment": "the parameter provide the Hash for initialization of the JSON data in the editor" } ], "return": "", "comment": "the method ask the user if the JSON data should be initialized. The initial data can be provided via the paramater of the method", "code": "var vOK = confirm(\"Do you really want to initialize the UML-class '\"+this.aJSON.data.classname+\"'?\");\nif (vOK == true) {\n\t\tvar vSampleOK = confirm(\"Do you want to save the current UML-class '\"+this.aJSON.data.classname+\"' first?\");\n\t\tif (vSampleOK == true) {\n\t\t\tthis.saveJSON();\n\t\t\tconsole.log(\"JSON-DB initalized with UML class '\"+this.aJSON.data.classname+\"'!\");\n\t\t} else {\n\t\t\tconsole.log(\"JSON-DB for UML class '\"+this.aJSON.data.classname+\"' not saved - data deleted!\");\n\t\t};\n\t\tthis.aJSON = pInitJSON; // defined e.g. in /db/uml_default.js\n\t\tconsole.log(\"JSON-DB initalized with UML class '\"+this.aJSON.data.classname+\"'!\");\n\t\t//save changes to Local Storage\n\t\tthis.saveLS();\n\n} else {\n console.log(\"initialize JSON-DB cancelled\")\n};" }, { "visibility": "public", "name": "init_doc", "parameter": [ { "name": "pDocument", "class": "Document", "comment": "the parameter provides the document object as reference to the JSONEditor4Code" } ], "return": "", "comment": "the method initializes the this.aDoc reference to the underlying window.document object. \nThis is necessary to select DOM objects by document.getElementById('valid_indicator')", "code": "this.aDoc = pDocument || window.document;" }, { "visibility": "public", "name": "init_buttons", "parameter": [], "return": "", "comment": "the method sets the event handler for the onchange events and watch certain activities in the editor", "code": "this.set_button_click(\"submit\",function() {\n // Get the value from the editor\n var vContent = JSON.stringify(this.aEditor.getValue(),null,4);\n this.el(\"tJSON\")\n console.log(\"JSON Data:\\n\"+vContent);\n });\nthis.set_button_click(\"enable_disable\",function() {\n if (this.aEditor) {\n // Enable form\n if(!this.aEditor.isEnabled()) {\n this.aEditor.enable();\n }\n // Disable form\n else {\n this.aEditor.disable();\n }\n }\n });" }, { "visibility": "public", "name": "create_editor", "parameter": [], "return": "", "comment": "the method performs ...", "code": "if (this.aEditor) {\n // free some resources if the editor already exists\n this.aEditor.destroy();\n}\n\nthis.update_filename(); // updates the filename in the DOM e.g. with id \"load_filename\"\n\nconsole.log(\"Start Editor with JSON:\\n\"+JSON.stringify(this.aJSON,null,3));\nvar vEditorNode = this.el(this.aOptions.editor_id); \nthis.aEditor = new JSONEditor(vEditorNode,{\n // Enable fetching schemas via ajax\n ajax: true,\n\n // The schema for the editor\n schema: this.aSchema,\n\n // Seed the form with a starting value\n startval: this.aJSON,\n // Disable additional properties\n no_additional_properties: true,\n\n // Require all properties by default\n required_by_default: true\n });\n \nthis.init_buttons();" }, { "visibility": "public", "name": "el", "parameter": [ { "name": "pID", "class": "String", "comment": "the parameter provides the DOM id for returning the appropriate DOM node as return" } ], "return": "", "comment": "the method performs document.getElementById()-call with application of the reference in this.aDoc", "code": "return this.aDoc.getElementById(pID)" }, { "visibility": "public", "name": "set_button_click", "parameter": [ { "name": "pID", "class": "String", "comment": "the parameter stores the DOM id of the button" }, { "name": "pFunction", "class": "Function", "comment": "the parameter provides a references for the onclick handler" } ], "return": "", "comment": "the method assign an onclick handler to a button with the id pID", "code": "var vNode = this.el(pID);\nif (vNode) {\n vNode.addEventListener('click',pFunction);\n} else {\n console.log(\"DOM node [\"+pID+\"] does not exist. Could not assign\");\n}" }, { "visibility": "public", "name": "update_filename", "parameter": [], "return": "", "comment": "the method updates the filename in the DOM inner HTML of the DOM element with the ID 'load_filename'.\nThe update id in the DOM is defined by this.aOptions[\"filename_id\"]", "code": "var vNode = this.el(this.aOptions[\"filename_id\"]); // e.g. filename_id = \"load_filename\";\nif (vNode) {\n vNode.innerHTML = class2filename(this.aJSON.data.classname);\n} else {\n console.log(\"DOM node [\"+this.aOptions[\"filename_id\"]+\"] not found\");\n};\n\n " }, { "visibility": "public", "name": "update_schema", "parameter": [], "return": "Boolean", "comment": "User has update the list of classes and then the selector for classes in the editor must be updated. \nThis requires an update of the JSON editor and therefore a restart of the editor.", "code": "this.update_filename(); // update the filename in the DOM node with id \"load_filename\"\nvar s = this.aJSON.settings;\nvar vRequired_Classes = concat_array(s.remoteclasslist,s.localclasslist);\n//console.log(\"vRequired_Classes: \"+vRequired_Classes.join(\",\"));\ns.classlist = concat_array(s.baseclasslist,vRequired_Classes);\n//console.log(\"vRequired_Classes: ('\"+s.classlist.join(\"','\")+\"')\");\ns.classlist.sort();\n// update the class selector in the schema with classes submitted to the editor by pJSON.\nthis.aSchema.definitions.selectorclass.enum = s.classlist;\nthis.update(); // update the JSONeditor in this.aEditor\n" }, { "visibility": "public", "name": "validate_errors", "parameter": [], "return": "", "comment": "the method calls the validator of the JSON and stores the errors in the textarea \"tErrors\" ", "code": " // Get an array of errors from the validator\n var errors = this.aEditor.validate();\n\n var indicator = this.el(this.aOptions.validator_id);\n\n // Not valid\n if(errors.length) {\n indicator.style.color = 'red';\n indicator.textContent = \"not valid\";\n }\n // Valid\n else {\n indicator.style.color = 'green';\n indicator.textContent = \"valid\";\n };\n var vErrors = \"\";\n var vCR = \"\";\n for (var i = 0; i < errors.length; i++) {\n vErrors += vCR + errors[i].path + \" - \" +errors[i].property +\" - \"+errors[i].message;\n vCR = \"\\n\";\n };\n this.el(\"tErrors\").value = vErrors;" }, { "visibility": "public", "name": "saveFile2HDD", "parameter": [ { "name": "pFilename", "class": "String", "comment": "the parameter stores the filename, that is used for the download event (FileSaver.js)" }, { "name": "pContent", "class": "String", "comment": "the parameter stores the content of the saved file" } ], "return": "", "comment": "the method performs a FileSave within the browser by using the FileSaver.js library, that emulates file saving by a download event. ", "code": "var file = new File([pContent], {type: \"text/plain;charset=utf-8\"});\nsaveAs(file,pFilename);" }, { "visibility": "public", "name": "update", "parameter": [], "return": "", "comment": "the method destroys the editor in this.aEditor (if exists) to free some memory resources. Creates the JSONeditor with the updated JSON schema in this.aSchema", "code": "this.create_editor()" }, { "visibility": "public", "name": "loadJSON", "parameter": [], "return": "", "comment": "the method performs ...", "code": "// insert your code here" }, { "visibility": "public", "name": "saveJSON", "parameter": [], "return": "", "comment": "the method performs ...", "code": "// insert your code here" }, { "visibility": "public", "name": "saveDocumentation", "parameter": [], "return": "", "comment": "the method performs ...", "code": "// insert your code here" }, { "visibility": "public", "name": "saveCode", "parameter": [], "return": "", "comment": "the method performs ...", "code": "// insert your code here" } ] }, "settings": { "extension4code": ".js", "extension4json": "_uml.json", "localclasslist": [ { "name": "LoadFile4DOM", "initvalue": "new LoadFile4DOM()", "repo": "loadfile4dom" }, { "name": "LinkParam", "initvalue": "new LinkParam()", "repo": "linkparam" } ], "remoteclasslist": [ { "name": "JSONEditor", "initvalue": "new JSONEditor()", "repo": "jsoneditor" } ], "baseclasslist": [ { "name": "Array", "initvalue": "[]" }, { "name": "Boolean", "initvalue": "true" }, { "name": "Float", "initvalue": "0.0" }, { "name": "Function", "initvalue": "function my_fun() {}" }, { "name": "Document", "initvalue": "document" }, { "name": "Integer", "initvalue": "0" }, { "name": "String", "initvalue": "\"\"" }, { "name": "Hash", "initvalue": "{}" }, { "name": "Object", "initvalue": "null" }, { "name": "RegularExp", "initvalue": "/search/g" } ] } }