@json-editor/json-editor 1.4.0-beta.0 → 1.17.0

package/src/editors/autocomplete.js

@@ -0,0 +1,59 @@
+import { StringEditor } from './string.js'
+import { extend } from '../utilities.js'
+
+export class AutocompleteEditor extends StringEditor {
+  postBuild () {
+    if (window.Autocomplete) {
+      /* create wrapper container */
+      this.autocomplete_wrapper = document.createElement('div')
+
+      /* insert wrapper after this.input in the DOM tree */
+      this.input.parentNode.insertBefore(this.autocomplete_wrapper, this.input.nextSibling)
+
+      /* move this.input into wrapper */
+      this.autocomplete_wrapper.appendChild(this.input)
+
+      /* create dropdown container */
+      this.autocomplete_dropdown = document.createElement('ul')
+
+      /* insert dropdown after this.input in the DOM tree */
+      this.input.parentNode.insertBefore(this.autocomplete_dropdown, this.input.nextSibling)
+    }
+    super.postBuild()
+  }
+
+  afterInputReady () {
+    let options
+
+    if (window.Autocomplete && !this.autocomplete_instance) {
+      /* Get options, either global options from "this.defaults.options.autocomplete" or */
+      /* single property options from schema "options.autocomplete" */
+      options = this.expandCallbacks('autocomplete', extend({}, {
+        search: (jseditor) => {
+          // eslint-disable-next-line no-console
+          console.log(`No "search" callback defined for autocomplete in property "${jseditor.key}"`)
+          return []
+        },
+        onSubmit: () => {
+          this.input.blur()
+        },
+        baseClass: 'autocomplete'
+      }, this.defaults.options.autocomplete || {}, this.options.autocomplete || {}))
+
+      this.autocomplete_wrapper.classList.add(options.baseClass)
+      this.autocomplete_dropdown.classList.add(`${options.baseClass}-result-list`)
+      this.autocomplete_instance = new window.Autocomplete(this.autocomplete_wrapper, options)
+    }
+    super.afterInputReady()
+  }
+
+  destroy () {
+    if (this.autocomplete_instance) {
+      if (this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input)
+      if (this.autocomplete_dropdown && this.autocomplete_dropdown.parentNode) this.autocomplete_dropdown.parentNode.removeChild(this.autocomplete_dropdown)
+      if (this.autocomplete_wrapper && this.autocomplete_wrapper.parentNode) this.autocomplete_wrapper.parentNode.removeChild(this.autocomplete_wrapper)
+      this.autocomplete_instance = null
+    }
+    super.destroy()
+  }
+}

package/src/editors/base64.js

@@ -1,152 +1,171 @@
-JSONEditor.defaults.editors.base64 = JSONEditor.AbstractEditor.extend({
-  getNumColumns: function() {
-    return 4;
-  },
-  setFileReaderListener: function (fr_multiple) {
-    var self = this;
-    fr_multiple.addEventListener("load", function(event) {
-      if (self.count == self.current_item_index) {
-        // Overwrite existing file by default, leave other properties unchanged
-        self.value[self.count][self.key] = event.target.result;
+import { AbstractEditor } from '../editor.js'
+
+export class Base64Editor extends AbstractEditor {
+  getNumColumns () {
+    return 4
+  }
+
+  setFileReaderListener (frMultiple) {
+    frMultiple.addEventListener('load', (event) => {
+      if (this.count === this.current_item_index) {
+        /* Overwrite existing file by default, leave other properties unchanged */
+        this.value[this.count][this.key] = event.target.result
       } else {
-        var temp_object = {};
-        // Create empty object
-        for (var key in self.parent.schema.properties) {
-          temp_object[key] = "";
+        const tempObject = {}
+        /* Create empty object */
+        for (const key in this.parent.schema.properties) {
+          tempObject[key] = ''
         }
-        // Set object media file
-        temp_object[self.key] = event.target.result;
-        self.value.splice(self.count, 0, temp_object); // insert new file object
+        /* Set object media file */
+        tempObject[this.key] = event.target.result
+        this.value.splice(this.count, 0, tempObject) /* insert new file object */
       }
 
-      // Increment using the listener and not the 'for' loop as the listener will be processed asynchronously
-      self.count += 1;
-      // When all files have been processed, update the value of the editor
-      if (self.count == (self.total+self.current_item_index)) {
-        self.arrayEditor.setValue(self.value);
+      /* Increment using the listener and not the 'for' loop as the listener will be processed asynchronously */
+      this.count += 1
+      /* When all files have been processed, update the value of the editor */
+      if (this.count === (this.total + this.current_item_index)) {
+        this.arrayEditor.setValue(this.value)
       }
-    });
-  },
-  build: function() {
-    var self = this;
-    this.title = this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
-    if(this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText);
-
-    // Input that holds the base64 string
-    this.input = this.theme.getFormInputField('hidden');
-    this.container.appendChild(this.input);
-
-    // Don't show uploader if this is readonly
-    if(!this.schema.readOnly && !this.schema.readonly) {
-      if(!window.FileReader) throw "FileReader required for base64 editor";
-
-      // File uploader
-      this.uploader = this.theme.getFormInputField('file');
-
-      // Set attribute of file input field to 'multiple' if:
-      // 'multiple' key has been set to 'true' in the schema
-      // and the parent object is of type 'object'
-      // and the parent of the parent type has been set to 'array'
-      if (self.schema.options && self.schema.options.multiple && self.schema.options.multiple == true && self.parent && self.parent.schema.type == 'object' && self.parent.parent && self.parent.parent.schema.type == 'array') {
-        this.uploader.setAttribute('multiple', '');
+    })
+  }
+
+  build () {
+    if (!this.options.compact) this.title = this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
+    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
+
+    /* Input that holds the base64 string */
+    this.input = this.theme.getFormInputField('hidden')
+    this.container.appendChild(this.input)
+
+    /* Don't show uploader if this is readonly */
+    if (!this.schema.readOnly && !this.schema.readonly) {
+      if (!window.FileReader) throw new Error('FileReader required for base64 editor')
+
+      /* File uploader */
+      this.uploader = this.theme.getFormInputField('file')
+      this.uploader.style.display = 'none'
+
+      /* Set attribute of file input field to 'multiple' if: */
+      /* 'multiple' key has been set to 'true' in the schema */
+      /* and the parent object is of type 'object' */
+      /* and the parent of the parent type has been set to 'array' */
+      if (this.schema.options && this.schema.options.multiple && this.schema.options.multiple === true && this.parent && this.parent.schema.type === 'object' && this.parent.parent && this.parent.parent.schema.type === 'array') {
+        this.uploader.setAttribute('multiple', '')
       }
 
-      this.uploader.addEventListener('change',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if(this.files && this.files.length) {
-
-          // Check the amount of files uploaded.
-          // If 1, use the regular upload, otherwise use the multiple upload method
-          if (this.files.length>1 && self.schema.options && self.schema.options.multiple && self.schema.options.multiple == true && self.parent && self.parent.schema.type == 'object' && self.parent.parent && self.parent.parent.schema.type == 'array') {
-
-            // Load editor of parent.parent to get the array
-            self.arrayEditor = self.jsoneditor.getEditor(self.parent.parent.path);
-            // Check the current value of this editor
-            self.value = self.arrayEditor.getValue();
-            // Set variables for amount of files, index of current array item and
-            // count value containing current status of processed files
-            self.total = this.files.length;
-            self.current_item_index = parseInt(self.parent.key);
-            self.count = self.current_item_index;
-
-            for (var i = 0; i < self.total; i++) {
-              var fr_multiple = new FileReader();
-              self.setFileReaderListener(fr_multiple);
-              fr_multiple.readAsDataURL(this.files[i]);
+      this.uploader.addEventListener('change', e => {
+        e.preventDefault()
+        e.stopPropagation()
+
+        if (e.currentTarget.files && e.currentTarget.files.length) {
+          /* Check the amount of files uploaded. */
+          /* If 1, use the regular upload, otherwise use the multiple upload method */
+          if (e.currentTarget.files.length > 1 && this.schema.options && this.schema.options.multiple && this.schema.options.multiple === true && this.parent && this.parent.schema.type === 'object' && this.parent.parent && this.parent.parent.schema.type === 'array') {
+            /* Load editor of parent.parent to get the array */
+            this.arrayEditor = this.jsoneditor.getEditor(this.parent.parent.path)
+            /* Check the current value of this editor */
+            this.value = this.arrayEditor.getValue()
+            /* Set variables for amount of files, index of current array item and */
+            /* count value containing current status of processed files */
+            this.total = e.currentTarget.files.length
+            this.current_item_index = parseInt(this.parent.key)
+            this.count = this.current_item_index
+
+            for (let i = 0; i < this.total; i++) {
+              const frMultiple = new FileReader()
+              this.setFileReaderListener(frMultiple)
+              frMultiple.readAsDataURL(e.currentTarget.files[i])
             }
           } else {
-            var fr = new FileReader();
-            fr.onload = function(evt) {
-              self.value = evt.target.result;
-              self.refreshPreview();
-              self.onChange(true);
-              fr = null;
-            };
-            fr.readAsDataURL(this.files[0]);
+            let fr = new FileReader()
+            fr.onload = (evt) => {
+              this.value = evt.target.result
+              this.refreshPreview()
+              this.onChange(true)
+              fr = null
+            }
+            fr.readAsDataURL(e.currentTarget.files[0])
           }
         }
-      });
+      })
     }
 
-    this.preview = this.theme.getFormInputDescription(this.schema.description);
-    this.container.appendChild(this.preview);
+    this.preview = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
+    this.container.appendChild(this.preview)
 
-    this.control = this.theme.getFormControl(this.label, this.uploader||this.input, this.preview, this.infoButton);
-    this.container.appendChild(this.control);
-  },
-  refreshPreview: function() {
-    if(this.last_preview === this.value) return;
-    this.last_preview = this.value;
+    this.control = this.theme.getFormControl(this.label, this.uploader || this.input, this.preview, this.infoButton)
+    this.container.appendChild(this.control)
 
-    this.preview.innerHTML = '';
+    const uploadButton = this.getButton('button_upload', 'upload', 'button_upload')
 
-    if(!this.value) return;
+    uploadButton.addEventListener('click', () => {
+      this.uploader.click()
+    })
 
-    var mime = this.value.match(/^data:([^;,]+)[;,]/);
-    if(mime) mime = mime[1];
+    this.control.appendChild(uploadButton)
 
-    if(!mime) {
-      this.preview.innerHTML = '<em>Invalid data URI</em>';
-    }
-    else {
-      this.preview.innerHTML = '<strong>Type:</strong> '+mime+', <strong>Size:</strong> '+Math.floor((this.value.length-this.value.split(',')[0].length-1)/1.33333)+' bytes';
-      if(mime.substr(0,5)==="image") {
-        this.preview.innerHTML += '<br>';
-        var img = document.createElement('img');
-        img.style.maxWidth = '100%';
-        img.style.maxHeight = '100px';
-        img.src = this.value;
-        this.preview.appendChild(img);
+    /* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */
+    this.setInputAttributes(['multiple'], uploadButton)
+  }
+
+  refreshPreview () {
+    if (this.last_preview === this.value) return
+    this.last_preview = this.value
+
+    this.preview.innerHTML = ''
+
+    if (!this.value) return
+
+    let mime = this.value.match(/^data:([^;,]+)[;,]/)
+    if (mime) mime = mime[1]
+
+    if (!mime) {
+      this.preview.innerHTML = '<em>Invalid data URI</em>'
+    } else {
+      this.preview.innerHTML = `<strong>Type:</strong> ${mime}, <strong>Size:</strong> ${Math.floor((this.value.length - this.value.split(',')[0].length - 1) / 1.33333)} bytes`
+      if (mime.substr(0, 5) === 'image') {
+        this.preview.innerHTML += '<br>'
+        const img = document.createElement('img')
+        img.style.maxWidth = '100%'
+        img.style.maxHeight = '100px'
+        img.src = this.value
+        this.preview.appendChild(img)
       }
     }
-  },
-  enable: function() {
-    if(!this.always_disabled) {
-      if(this.uploader) this.uploader.disabled = false;
-      this._super();
+  }
+
+  enable () {
+    if (!this.always_disabled) {
+      if (this.uploader) this.uploader.disabled = false
+      super.enable()
     }
-  },
-  disable: function(always_disabled) {
-    if(always_disabled) this.always_disabled = true;
-    if(this.uploader) this.uploader.disabled = true;
-    this._super();
-  },
-  setValue: function(val) {
-    if(this.value !== val) {
-      this.value = val;
-      this.input.value = this.value;
-      this.refreshPreview();
-      this.onChange();
+  }
+
+  disable (alwaysDisabled) {
+    if (alwaysDisabled) this.always_disabled = true
+    if (this.uploader) this.uploader.disabled = true
+    super.disable()
+  }
+
+  setValue (val) {
+    val = this.applyConstFilter(val)
+
+    if (this.value !== val) {
+      if (this.schema.readOnly && this.schema.enum && !this.schema.enum.includes(val)) this.value = this.schema.enum[0]
+      else this.value = val
+      this.input.value = this.value
+      this.refreshPreview()
+      this.onChange()
     }
-  },
-  destroy: function() {
-    if(this.preview && this.preview.parentNode) this.preview.parentNode.removeChild(this.preview);
-    if(this.title && this.title.parentNode) this.title.parentNode.removeChild(this.title);
-    if(this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input);
-    if(this.uploader && this.uploader.parentNode) this.uploader.parentNode.removeChild(this.uploader);
-
-    this._super();
   }
-});
+
+  destroy () {
+    if (this.preview && this.preview.parentNode) this.preview.parentNode.removeChild(this.preview)
+    if (this.title && this.title.parentNode) this.title.parentNode.removeChild(this.title)
+    if (this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input)
+    if (this.uploader && this.uploader.parentNode) this.uploader.parentNode.removeChild(this.uploader)
+
+    super.destroy()
+  }
+}

package/src/editors/button.js

@@ -0,0 +1,104 @@
+/* Non-Active editor for displaying buttons in form */
+import { AbstractEditor } from '../editor.js'
+import { extend } from '../utilities.js'
+
+export class ButtonEditor extends AbstractEditor {
+  constructor (options, defaults) {
+    super(options, defaults)
+    this.active = false
+    this.isUiOnly = true
+
+    /* Set field to required in schema otherwise it will not be displayed */
+    if (this.parent && this.parent.schema) {
+      if (Array.isArray(this.parent.schema.required)) {
+        if (!this.parent.schema.required.includes(this.key)) {
+          this.parent.schema.required.push(this.key)
+        }
+      } else {
+        this.parent.schema.required = [this.key]
+      }
+    }
+  }
+
+  build () {
+    this.options.compact = true
+
+    /* Get options, either global options from "this.defaults.options.button" or */
+    /* single property options from schema "options.button" */
+    const options = this.expandCallbacks('button', extend({}, {
+      icon: '',
+      validated: false,
+      align: 'left',
+      action: (jseditor, e) => {
+        window.alert(`No button action defined for "${jseditor.path}"`)
+      }
+    }, this.defaults.options.button || {}, this.options.button || {}))
+
+    const title = this.translateProperty(options.text || this.schema.title) || this.key
+
+    this.input = this.getButton(title, options.icon, title)
+
+    if (typeof options.action !== 'function') {
+      window.alert(`No button action defined for "${this.path}"`)
+    } else {
+      this.input.addEventListener('click', options.action, false)
+    }
+
+    if (this.schema.readOnly || this.schema.readonly || this.schema.template) {
+      this.disable(true)
+      this.input.setAttribute('readonly', 'true')
+    }
+
+    /* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */
+    this.setInputAttributes(['readonly'])
+
+    this.control = this.theme.getFormButtonHolder(options.align)
+    this.control.appendChild(this.input)
+
+    this.container.appendChild(this.control)
+
+    this.changeHandler = () => {
+      if (this.jsoneditor.validate(this.jsoneditor.getValue()).length > 0) this.disable()
+      else this.enable()
+    }
+
+    /* Enable/disable the button depending on form validation */
+    if (options.validated) this.jsoneditor.on('change', this.changeHandler)
+  }
+
+  enable () {
+    if (!this.always_disabled) {
+      this.input.disabled = false
+      super.enable()
+    }
+  }
+
+  disable (alwaysDisabled) {
+    if (alwaysDisabled) this.always_disabled = true
+    this.input.disabled = true
+    super.disable()
+  }
+
+  getNumColumns () {
+    return 2
+  }
+
+  activate () {
+    this.active = false
+    this.enable()
+  }
+
+  deactivate () {
+    /* only non required properties can be deactivated. */
+    if (!this.isRequired()) {
+      this.active = false
+      this.disable()
+    }
+  }
+
+  destroy () {
+    this.jsoneditor.off('change', this.changeHandler)
+    this.changeHandler = null
+    super.destroy()
+  }
+}