From dd4b19dff786b82a09ebf97cf182bc1bf75334fa Mon Sep 17 00:00:00 2001
From: fefescript84 <106695387+fefescript84@users.noreply.github.com>
Date: Wed, 1 Jun 2022 20:29:19 +0200
Subject: [PATCH] Update JSONedtr.js
update on reset and default
added type language keys
---
src/JSONedtr.js | 702 ++++++++++++++++++++++++++++++++++--------------
1 file changed, 493 insertions(+), 209 deletions(-)
diff --git a/src/JSONedtr.js b/src/JSONedtr.js
index 9d829a0..e258a2a 100755
--- a/src/JSONedtr.js
+++ b/src/JSONedtr.js
@@ -1,213 +1,497 @@
-function JSONedtr( data, outputElement, config = {} ){
-
- if (! window.jQuery) {
+/**
+ * https://github.com/LorincJuraj/JSONedtr
+ * https://www.jqueryscript.net/demo/visual-json-editor-jsonedtr/
+ *
+ * Usage:
+ var editor = new JSONedtr(
+ '{"Number":1,"Array":[1,2,3,"four"],"Object":{"aa":11,"bb":22.22},"String":"Hello World!","Boolean":true}',
+ '#id-of-el',
+ {
+ runFunctionOnUpdate: function (editor) {
+ //console.log('JSONedtr', editor);
+ console.log('JSONedtr', editor.getDataString());
+ //console.log('JSONedtr', editor.getData());
+ },
+ instantChange: true,
+ labelSave: 'Mentés',
+ labelCancel: 'Mégsem',
+ labelKey: 'kulcs',
+ labelValue: 'érték',
+ labelDefault: 'Alapállás',
+ labelClearAll: 'Mind töröl',
+ label_type_string: 'Szöveg',
+ label_type_number: 'Szám',
+ label_type_boolean: 'Igaz/Hamis',
+ label_type_array: 'Tömb',
+ label_type_object: 'Objektum',
+ arrayAdditionDisabled: false,
+ objectAdditionDisabled: false
+ });
+
+ *
+ * @type {type}
+ */
+
+function JSONedtr(data, outputElement, config = {}){
+
+ if (!window.jQuery) {
console.error("JSONedtr requires jQuery");
return;
}
- var JSONedtr = {};
-
- JSONedtr.config = config;
-
- if( JSONedtr.config.instantChange == null )
- JSONedtr.config.instantChange = true ;
-
- JSONedtr.level = function ( node, lvl=0 ) {
- var output = '';
-
- $.each( node , function( key, value ) {
- JSONedtr.i++;
-
- if( typeof key == 'string' )
- key = key.replace(/\"/g,""");
-
- if( typeof value == 'object' ) {
- var type = typeof value;
-
- if( Array.isArray( value ) )
- type = 'array';
-
- output += ' :
(' + type + ')';
- output += JSONedtr.level( value, lvl+1 );
- output += '
✖
✖
' );
-
- $( row ).find( '.jse--delete' ).click(function( e ){
- JSONedtr.deleteRow( e.currentTarget.parentElement );
- })
-
- $( row ).children( '.jse--save, .jse--cancel' ).remove();
- $( row ).after( '' );
- $( row ).parent().find( '.jse--row.jse--add .jse--plus' ).click( function(e){ JSONedtr.addRowForm( e.currentTarget.parentElement ) });
-
- $( row ).find( 'input' ).on( 'change input', function( e ){
- if ( JSONedtr.config.runFunctionOnUpdate ) {
- if( JSONedtr.config.instantChange || 'change' == e.type )
- JSONedtr.executeFunctionByName( JSONedtr.config.runFunctionOnUpdate , window, JSONedtr);
- }
- });
-
- if ( JSONedtr.config.runFunctionOnUpdate ) {
- JSONedtr.executeFunctionByName( JSONedtr.config.runFunctionOnUpdate , window, JSONedtr);
- }
-
- }
-
- JSONedtr.deleteRow = function( row ) {
- $( row ).remove();
- if ( JSONedtr.config.runFunctionOnUpdate ) {
- JSONedtr.executeFunctionByName( JSONedtr.config.runFunctionOnUpdate , window, JSONedtr);
- }
- }
-
- JSONedtr.executeFunctionByName = function(functionName, context /*, args */) {
- var args = Array.prototype.slice.call(arguments, 2);
- var namespaces = functionName.split(".");
- var func = namespaces.pop();
- for(var i = 0; i < namespaces.length; i++) {
- context = context[namespaces[i]];
- }
- return context[func].apply(context, args);
- }
-
- JSONedtr.init = function( data, outputElement ) {
- data = JSON.parse( data );
- JSONedtr.i = 0;
- JSONedtr.outputElement = outputElement;
- var html = JSONedtr.level( data );
-
- $( outputElement ).addClass('jse--output').html( html ).data('i', JSONedtr.i);
-
- $( outputElement + ' .jse--row.jse--add .jse--plus' ).click(function( e ){
- JSONedtr.addRowForm( e.currentTarget.parentElement );
- })
-
- $( outputElement + ' .jse--row .jse--delete' ).click(function( e ){
- JSONedtr.deleteRow( e.currentTarget.parentElement );
- })
-
- $( outputElement + ' .jse--row input' ).on( 'change input', function( e ){
- if ( JSONedtr.config.runFunctionOnUpdate ) {
- if( JSONedtr.config.instantChange || 'change' == e.type )
- JSONedtr.executeFunctionByName( JSONedtr.config.runFunctionOnUpdate , window, JSONedtr);
- }
- });
- }
-
- JSONedtr.init( data, outputElement );
-
- return JSONedtr;
-};
+ var JSONedtr = {};
+
+ JSONedtr.saveData = data; /* SAVE DEFAULT */
+
+ //Default values
+ JSONedtr.config = $.extend(
+ {
+ instantChange: true, /* True: call runFunctionOnUpdate on INPUT && CHANGE event, False: call runFunctionOnUpdate on CHANGE event */
+ runFunctionOnUpdate: null, /* call on update string || function */
+ labelSave: 'Save',
+ labelCancel: 'Cancel',
+ labelKey: 'key',
+ labelValue: 'value',
+ labelDefault: 'Default',
+ labelClearAll: 'Clear all',
+ label_type_string: 'String',
+ label_type_number: 'Number',
+ label_type_boolean: 'Boolean',
+ label_type_array: 'Array',
+ label_type_object: 'Object',
+ arrayAdditionDisabled: false, /* True: Can't add new Array */
+ objectAdditionDisabled: false /* True: Can't add new Object */
+ }, config);
+
+ JSONedtr.getConfigValue = function (key, def = null) {
+ if (
+ typeof JSONedtr.config === 'object' &&
+ typeof JSONedtr.config[key] !== 'undefined'
+ ) {
+ return JSONedtr.config[key];
+ }
+ return def;
+ }
+
+ JSONedtr.setConfigValue = function (key, value) {
+ if (typeof JSONedtr.config !== 'object') {
+ JSONedtr.config = {};
+ }
+ JSONedtr.config[key] = value;
+ }
+
+ if (JSONedtr.getConfigValue('instantChange') === null) {
+ JSONedtr.setConfigValue('instantChange', true);
+ }
+
+ JSONedtr.level = function (node, lvl = 0, isArrayParam ) {
+ var output = '';
+
+ var isArray = false;
+ if ( typeof isArrayParam !== 'undefined' && isArrayParam !== null ) {
+ isArray = (isArrayParam? true:false);
+ }
+
+ var lblKey = JSONedtr.getConfigValue('labelKey', 'key');
+ var lblValue = JSONedtr.getConfigValue('labelValue', 'value');
+
+ $.each(node, function (key, value) {
+ JSONedtr.i++;
+
+ if (typeof key === 'string' && key) {
+ key = key.replace(/\"/g, """);
+ }
+
+ var type = typeof value;
+ var typeKey = 'label_type_' + type;
+//console.log('key', key, 'value', value, 'type', type);
+ if (type === 'object') { /* Object || Array */
+ if (Array.isArray(value)) {
+ type = 'array';
+ }
+ typeKey = 'label_type_' + type;
+
+ var labelText = JSONedtr.getConfigValue(typeKey, '?');
+
+ var rowClass = 'jse--row-' + type;
+
+ output += ' :
(' + labelText + ')';
+ //output += JSONedtr.level(value, lvl + 1);
+ output += JSONedtr.level(value, lvl + 1, (type=='array'? true:false));
+ output += '
✖
✖
');
+
+ $(row).find('.jse--delete').click(function (e) {
+ JSONedtr.deleteRow(e.currentTarget.parentElement);
+ });
+
+ $(row).children('.jse--save, .jse--cancel').remove();
+ $(row).after('');
+ $(row).parent().find('.jse--row.jse--add .jse--plus').click(function (e) {
+ JSONedtr.addRowForm(e.currentTarget.parentElement)
+ });
+
+ if (JSONedtr.getConfigValue('runFunctionOnUpdate')) {
+ $(row).find('input').on('change input', function (e) {
+ if (
+ JSONedtr.getConfigValue('instantChange') ||
+ 'change' == e.type
+ ) {
+ JSONedtr.executeFunction(JSONedtr.config.runFunctionOnUpdate, window, JSONedtr);
+ }
+ });
+
+ JSONedtr.executeFunction(JSONedtr.config.runFunctionOnUpdate, window, JSONedtr);
+ }
+
+ }
+
+ JSONedtr.deleteRow = function (row) {
+ var oRow = $(row);
+ if ( oRow.hasClass('jse--row') ) {
+ var pRow = oRow.parent();
+ oRow.remove();
+ if ( pRow.hasClass('jse--row') && pRow.hasClass('jse--row-array') ) {
+ var rows = pRow.find('> [id].jse--row:not(.jse--add)');
+ rows.each(function (id, el) {
+ var o = $(this);
+ o.find('> .jse--key').first().val(id).prop('readonly', true);
+ });
+ }
+ if (JSONedtr.getConfigValue('runFunctionOnUpdate')) {
+ JSONedtr.executeFunction(JSONedtr.config.runFunctionOnUpdate, window, JSONedtr);
+ }
+ }
+ }
+
+ /**
+ * functionName can be function type
+ * @param {type} functionName
+ * @param {type} context
+ * @return {unresolved}
+ */
+ JSONedtr.executeFunction = function (functionName, context /*, args */) {
+ var args = Array.prototype.slice.call(arguments, 2);
+ //console.log('args' ,args );
+ if (typeof functionName === 'function') {
+ //return functionName.apply(null, args);
+ return functionName.apply(context, args);
+ } else if (typeof functionName === 'string') {
+ var namespaces = functionName.split(".");
+ var func = namespaces.pop();
+ for (var i = 0; i < namespaces.length; i++) {
+ context = context[namespaces[i]];
+ }
+ return context[func].apply(context, args);
+ }
+ return null;
+ }
+
+ JSONedtr.reset = function () {
+ var lblClearAll = JSONedtr.getConfigValue('labelClearAll', 'Clear all');
+ var cRet = confirm(lblClearAll);
+ if (
+ cRet &&
+ JSONedtr.outputElement
+ ) {
+ JSONedtr.init('{}', JSONedtr.outputElement, true);
+ }
+ return false;
+ }
+
+ JSONedtr.default = function () {
+ var lblDefault = JSONedtr.getConfigValue('labelDefault', 'Default');
+ var cRet = confirm(lblDefault);
+ if (
+ cRet &&
+ JSONedtr.outputElement &&
+ typeof JSONedtr.saveData !== 'undefined'
+ ) {
+ JSONedtr.init( JSONedtr.saveData, JSONedtr.outputElement, true );
+ }
+ return false;
+ }
+
+ JSONedtr.init = function (data, outputElement, update) {
+ if (data === null || !data) {
+ data = '{}';
+ }
+ data = JSON.parse(data);
+ JSONedtr.i = 0;
+ JSONedtr.outputElement = outputElement;
+ //var html = JSONedtr.level(data, 0, (Array.isArray(data)? true:false));
+ var html = JSONedtr.level(data, 0, false);
+
+ var lblClearAll = JSONedtr.getConfigValue('labelClearAll', 'Clear all');
+ var lblDefault = JSONedtr.getConfigValue('labelDefault', 'Default');
+ html += '
';
+
+ $(outputElement).addClass('jse--output').html(html).data('i', JSONedtr.i);
+
+ $(outputElement + ' .jse--row.jse--add .jse--plus').click(function (e) {
+ JSONedtr.addRowForm(e.currentTarget.parentElement);
+ });
+
+ $(outputElement + ' .jse--row .jse--delete').click(function (e) {
+ JSONedtr.deleteRow(e.currentTarget.parentElement);
+ });
+
+ $(outputElement + ' .jse--reset').click(function (e) {
+ JSONedtr.reset(e);
+ e.preventDefault();
+ return false;
+ });
+
+ $(outputElement + ' .jse--default').click(function (e) {
+ JSONedtr.default(e);
+ e.preventDefault();
+ return false;
+ });
+
+ if (JSONedtr.getConfigValue('runFunctionOnUpdate')) {
+ $(outputElement + ' .jse--row input').on('change input', function (e) {
+ //console.log($(this), e);
+ if (
+ JSONedtr.getConfigValue('instantChange') ||
+ 'change' == e.type
+ ) {
+ JSONedtr.executeFunction(JSONedtr.config.runFunctionOnUpdate, window, JSONedtr);
+ }
+ });
+
+ if ( typeof update !== 'undefined' && update ) {
+ JSONedtr.executeFunction(JSONedtr.config.runFunctionOnUpdate, window, JSONedtr);
+ }
+ }
+ }
+
+ JSONedtr.init(data, outputElement);
+
+ return JSONedtr;
+}
+;