updated tutorial: son-editor-customizations

guide/tutorials/json-editor-customizations.md

@@ -3,52 +3,98 @@
 In example a date picker editor that needs (as a dependency) the jquery datepicker.
 
     JSONEditor.defaults.editors.datepicker = JSONEditor.AbstractEditor.extend({
-    	build: function () {
-    		// fixes my scope problems :)
-    		var self = this;
-    
-    		// form-group element (bootstrap friendly)
-    		var formGroup = document.createElement('div');
-    		formGroup.classList.add('form-group');
-    		
-    		// form-label element (bootstrap friendly)
-    		var label = document.createElement('label');
-    		label.classList.add('control-label');
-    		if (self.schema.title) {
-    			label.innerText = self.schema.title;
-    		}
-    		
-    		// form control element (bootstrap friendly)
-    		var input = document.createElement('input');
-    		input.type = 'text';
-    		input.name = self.formname;
-    		input.classList.add('form-control');
-    
-    		// datepicker options
-    		if (self.schema.datepickerOptions) {
-    			var datepickerOptions = self.schema.datepickerOptions;
-    		} else {
-    			var datepickerOptions = {};
-    		}
-    		
-    		// the min date will be ALWAYS today
-    		datepickerOptions.minDate = new Date();
-    		// event that triggers editor update
-    		datepickerOptions.onClose = function(selectedDate) {
-    			// update the editor value
-    	    	self.value = selectedDate;
-    	    	// tells JSONEditor that the values has changed
-    	    	self.onChange(true);
-    	    }
-    
-    	    // transforms the input in a date picker
-    		$(input).datepicker(datepickerOptions);
-    
-    		// append form group to the editor container
-    		formGroup.appendChild(label);
-    		formGroup.appendChild(input);
-    		self.container.appendChild(formGroup);
-    	}
+        build: function () {
+            var self = this;
+    
+            // form-group element (bootstrap friendly)
+            self.customFormGroup = document.createElement('div');
+            self.customFormGroup.classList.add('form-group');
+    
+            // form-label element and stores a reference(bootstrap friendly)
+            self.customLabel = document.createElement('label');
+            self.customLabel.classList.add('control-label');
+            if (self.schema.title) {
+                self.customLabel.innerText = self.schema.title;
+            }
+    
+            // form control element (bootstrap friendly)
+            self.customInput = document.createElement('input');
+            self.customInput.type = 'text';
+            self.customInput.name = self.formname;
+            self.customInput.classList.add('form-control');
+    
+            // creates a paragraph for error messages and stores reference
+            self.customErrorMessage = document.createElement('p');
+            self.customErrorMessage.setAttribute('style', 'color: #a94442;');
+    
+            // datepicker options
+            self.customDatepickerOptions;
+            if (self.schema.datepickerOptions) {
+                 self.customDatepickerOptions = self.schema.datepickerOptions;
+            } else {
+                 self.customDatepickerOptions = {};
+            }
+    
+            // the min date will be ALWAYS today
+            self.customDatepickerOptions.minDate = new Date();
+    
+            // event that triggers editor update
+            self.customDatepickerOptions.onClose = function(selectedDate) {
+                // update the editor value
+                self.value = selectedDate;
+                // tells JSONEditor that the values has changed
+                self.onChange(true);
+    
+                // wait that the JSONEditor change event completed. Mr jdord wanted
+                //to use a requestAnimationFrame for this job. So i had to use it to.
+                window.requestAnimationFrame(function() {
+                    if (self.validate()) {
+                        self.displayErrorMessages();
+                    }  
+                });
+            };
+    
+            // transforms the input in a date picker
+            $(self.customInput).datepicker(self.customDatepickerOptions);
+    
+            // append form group to the editor container
+            self.customFormGroup.appendChild(self.customLabel);
+            self.customFormGroup.appendChild(self.customInput);
+            self.container.appendChild(self.customFormGroup);
+            self.container.appendChild(self.customErrorMessage);
+        },
+    
+        validate: function () {
+            // get this editor error
+            var self = this;
+            self.customErrorMessages = '';
+            self.jsoneditor.validation_results.forEach(function (error) {
+                if (error.property === self.schema.format) {
+                    self.customErrorMessages = error.message;
+                    console.log('validate', self.customErrorMessages)
+                }
+            });
+            // return error messages if any
+            if (self.customErrorMessages) {
+                return self.customErrorMessages;
+            } else {
+                self.hideErrorMessages();
+            }
+        },
+    
+        displayErrorMessages: function () {
+            var self = this;
+            self.customErrorMessage.innerText = self.customErrorMessages;
+            self.customLabel.setAttribute('style', 'color: #a94442;');
+        },
+    
+        hideErrorMessages: function () {
+            console.log('hide errors');
+            var self = this;
+            self.customErrorMessage.innerText = '';
+            self.customLabel.setAttribute('style', 'color: #000;');
+        }
+    
     });
 
 # Add the editor resolver
@@ -56,31 +102,31 @@ In example a date picker editor that needs (as a dependency) the jquery datepick
 In order to use a custom editor you have to register it, like this
 
     JSONEditor.defaults.resolvers.unshift(function(schema) {
-      if(schema.format === 'datepicker') {
-        return 'datepicker'
-      }
+        if(schema.format === 'datepicker') {
+            return 'datepicker'
+        }
     });
     
 after registration you can add something like this in your schema
 
-    "Date": {
-        "title": 'Date',
-        "type": "string",
-        "format": "datepicker",
-        "datepickerOptions": {
-            "dateFormat": "dd-mm-yy",
-            "constrainInput": false,
-            "monthNames": [ "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember" ],
-            "dayNamesMin": [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
-            "hideIfNoPrevNext": true,
-            "firstDay": 1
-        },
-        "minLength": 1,
-        "propertyOrder": 1,
-        "options": {
-            "grid_columns": 3
-        }
-    }
+   "Datum": {
+       "title": 'Date',
+       "type": "string",
+       "format": "datepicker",
+       "datepickerOptions": {
+           "dateFormat": "dd-mm-yy",
+           "constrainInput": false,
+           "monthNames": [ "Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember" ],
+           "dayNamesMin": [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
+           "hideIfNoPrevNext": true,
+           "firstDay": 1
+       },
+       "propertyOrder": 1,
+       "required": true,
+       "options": {
+           "grid_columns": 3
+       }
+   }
 
 # custom validator
 
@@ -88,16 +134,13 @@ In example a custo validator that will be applied to schemas that have `format =
 
     JSONEditor.defaults.custom_validators.push(function(schema, value, path) {
       var errors = [];
-      if(schema.format === "datepicker") {
+      if(schema.format === "datepicker" && schema.required === true) {
     
-        console.log('datepicker validator');
-        
-        if(value !== 'banane') {
-            console.log('error');
+        if(typeof value === 'undefined' || value === '') {
             errors.push({
                 path: path,
-                property: 'format',
-                message: 'Datum not be banana'
+                property: 'datepicker', // IMPORTANT! this must be the name of the editor
+                message: this.translate("error_notset")
             });
         }