@json-editor/json-editor 1.3.5 → 1.17.0

package/src/editors/upload.js

@@ -1,158 +1,324 @@
-JSONEditor.defaults.editors.upload = JSONEditor.AbstractEditor.extend({
-  getNumColumns: function() {
-    return 4;
-  },
-  build: function() {    
-    var self = this;
-    this.title = this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
-
-    // 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(!this.jsoneditor.options.upload) throw "Upload handler required for upload editor";
-
-      // File uploader
-      this.uploader = this.theme.getFormInputField('file');
-      
-      this.uploader.addEventListener('change',function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        
-        if(this.files && this.files.length) {
-          var fr = new FileReader();
-          fr.onload = function(evt) {
-            self.preview_value = evt.target.result;
-            self.refreshPreview();
-            self.onChange(true);
-            fr = null;
-          };
-          fr.readAsDataURL(this.files[0]);
+import { AbstractEditor } from '../editor.js'
+import { extend } from '../utilities.js'
+
+export class UploadEditor extends AbstractEditor {
+  getNumColumns () {
+    return 4
+  }
+
+  build () {
+    if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
+    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
+    if (this.options.infoText) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
+    if (this.options.hidden) this.container.style.display = 'none'
+
+    /* Editor options */
+    this.options = this.expandCallbacks('upload', extend({}, {
+      title: 'Browse',
+      icon: '',
+      auto_upload: false, /* Trigger file upload button automatically */
+      hide_input: false, /* Hide the Browse button and name display (Only works if 'enable_drag_drop' is true) */
+      enable_drag_drop: false, /* Enable Drag&Drop uploading */
+      drop_zone_text: 'Drag & Drop file here', /* Text displayed in dropzone box */
+      drop_zone_top: false, /* Position of dropzone. true=before button input, false=after button input */
+      alt_drop_zone: '', /* Alternate DropZone DOM selector (Can be created inside another property) */
+      mime_type: '', /* If set, restricts to mime type(s). Can be either a string or an array */
+      max_upload_size: 0, /* Maximum file size allowed. 0 = no limit */
+      upload_handler: (jseditor, type, file, cbs) => {
+        /* Default dummy test upload handler */
+        window.alert(`No upload_handler defined for "${jseditor.path}". You must create your own handler to enable upload to server`)
+      }
+    }, this.defaults.options.upload || {}, this.options.upload || {}))
+
+    this.options.mime_type = this.options.mime_type ? [].concat(this.options.mime_type) : []
+
+    /* 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 (typeof this.options.upload_handler !== 'function') throw new Error('Upload handler required for upload editor')
+
+      /* File uploader */
+      this.uploader = this.theme.getFormInputField('file')
+      this.uploader.style.display = 'none'
+      if (this.options.mime_type.length) this.uploader.setAttribute('accept', this.options.mime_type)
+
+      if (!(this.options.enable_drag_drop === true && this.options.hide_input === true)) {
+        /* Pass click to this.uploader element */
+        this.clickHandler = (e) => {
+          this.uploader.dispatchEvent(new window.MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: false
+          }))
         }
-      });
-    }
 
-    var description = this.schema.description;
-    if (!description) description = '';
-
-    this.preview = this.theme.getFormInputDescription(description);
-    this.container.appendChild(this.preview);
-
-    this.control = this.theme.getFormControl(this.label, this.uploader||this.input, this.preview);
-    this.container.appendChild(this.control);
-
-    window.requestAnimationFrame(function() {
-      if (self.value) {
-        var img = document.createElement('img');
-        img.style.maxWidth = '100%';
-        img.style.maxHeight = '100px';
-        img.onload = function (event) {
-          self.preview.appendChild(img);
-        };
-        img.onerror = function(error) {
-          console.error('upload error', error);
-        };
-        img.src = self.container.querySelector('a').href;
+        /* Browse button */
+        this.browseButton = this.getButton(this.options.title, this.options.icon, this.options.title)
+        this.browseButton.addEventListener('click', this.clickHandler)
+
+        /* Display field */
+        this.fileDisplay = this.theme.getFormInputField('input')
+        this.fileDisplay.setAttribute('readonly', true)
+        this.fileDisplay.value = 'No file selected.'
+        this.fileDisplay.addEventListener('dblclick', this.clickHandler)
+
+        this.fileUploadGroup = this.theme.getInputGroup(this.fileDisplay, [this.browseButton])
+        if (!this.fileUploadGroup) {
+          /* Themes that doesn't support input grouping */
+          this.fileUploadGroup = document.createElement('div')
+          this.fileUploadGroup.appendChild(this.fileDisplay)
+          this.fileUploadGroup.appendChild(this.browseButton)
+        }
       }
-    });
 
-  },
-  refreshPreview: function() {
-    if(this.last_preview === this.preview_value) return;
-    this.last_preview = this.preview_value;
+      /* Drag&Drop upload enabled */
+      if (this.options.enable_drag_drop === true) {
+        /* Alternate DropZone defined */
+        if (this.options.alt_drop_zone !== '') {
+          this.altDropZone = document.querySelector(this.options.alt_drop_zone)
+          if (this.altDropZone) this.dropZone = this.altDropZone
+          else throw new Error(`Error: alt_drop_zone selector "${this.options.alt_drop_zone}" not found!`)
+        } else this.dropZone = this.theme.getDropZone(this.options.drop_zone_text)
 
-    this.preview.innerHTML = '';
-    
-    if(!this.preview_value) return;
+        if (this.dropZone) {
+          this.dropZone.classList.add('upload-dropzone')
+          this.dropZone.addEventListener('dblclick', this.clickHandler)
+        }
+      }
 
-    var self = this;
+      /* Triggered after file have been selected */
+      this.uploadHandler = (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        const files = e.target.files || e.dataTransfer.files
+        if (files && files.length) {
+          if (this.options.max_upload_size !== 0 && files[0].size > this.options.max_upload_size) {
+            this.theme.addInputError(this.uploader, `${this.translate('upload_max_size')} ${this.options.max_upload_size}`)
+          } else if (this.options.mime_type.length !== 0 && !this.isValidMimeType(files[0].type, this.options.mime_type)) {
+            this.theme.addInputError(this.uploader, `${this.translate('upload_wrong_file_format')} ${this.options.mime_type.toString()}`)
+          } else {
+            if (this.fileDisplay) this.fileDisplay.value = files[0].name
+            let fr = new window.FileReader()
+            fr.onload = (evt) => {
+              this.preview_value = evt.target.result
+              this.refreshPreview(files)
+              this.onChange(true)
+              fr = null
+            }
+            fr.readAsDataURL(files[0])
+          }
+        }
+      }
 
-    var mime = this.preview_value.match(/^data:([^;,]+)[;,]/);
-    if(mime) mime = mime[1];
-    if(!mime) mime = 'unknown';
+      this.uploader.addEventListener('change', this.uploadHandler)
 
-    var file = this.uploader.files[0];
+      /* Drag&Drop Event Handler */
+      this.dragHandler = e => {
+        const files = e.dataTransfer.items || e.dataTransfer.files
+        const validType = files && files.length && (this.options.mime_type.length === 0 || this.isValidMimeType(files[0].type, this.options.mime_type))
+        const validZone = e.currentTarget.classList && e.currentTarget.classList.contains('upload-dropzone') && validType
+        switch ((e.currentTarget === window ? 'w_' : 'e_') + e.type) {
+          case 'w_drop':
+          case 'w_dragover':
+            /* prevent default browser action if dropped outside dropzone */
+            if (!validZone) e.dataTransfer.dropEffect = 'none'
+            break
+          case 'e_dragenter': {
+            if (validZone) {
+              this.dropZone.classList.add('valid-dropzone')
+              e.dataTransfer.dropEffect = 'copy'
+            } else this.dropZone.classList.add('invalid-dropzone')
+            break
+          }
+          case 'e_dragover': {
+            if (validZone) e.dataTransfer.dropEffect = 'copy'
+            break
+          }
+          case 'e_dragleave':
+            this.dropZone.classList.remove('valid-dropzone', 'invalid-dropzone')
+            break
+          case 'e_drop': {
+            this.dropZone.classList.remove('valid-dropzone', 'invalid-dropzone')
+            if (validZone) this.uploadHandler(e)
+            break
+          }
+        }
+        if (!validZone) e.preventDefault()
+      }
 
-    this.preview.innerHTML = '<strong>Type:</strong> '+mime+', <strong>Size:</strong> '+file.size+' 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.preview_value;
-      this.preview.appendChild(img);
+      /* Set Drag'n'Drop handlers */
+      if (this.options.enable_drag_drop === true) {
+        ['dragover', 'drop'].forEach((ev) => {
+          window.addEventListener(ev, this.dragHandler, true)
+        });
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((ev) => {
+          this.dropZone.addEventListener(ev, this.dragHandler, true)
+        })
+      }
     }
 
-    this.preview.innerHTML += '<br>';
-    var uploadButton = this.getButton('Upload', 'upload', 'Upload');
-    this.preview.appendChild(uploadButton);
-    uploadButton.addEventListener('click',function(event) {
-      event.preventDefault();
+    this.preview = document.createElement('div')
+
+    this.control = this.input.controlgroup = this.theme.getFormControl(this.label, this.uploader || this.input, this.description, this.infoButton)
+    if (this.uploader) this.uploader.controlgroup = this.control
+    const inputNode = this.uploader || this.input
+    const elements = document.createElement('div')
+
+    if (this.dropZone && !this.altDropZone && this.options.drop_zone_top === true) elements.appendChild(this.dropZone)
+    if (this.fileUploadGroup) elements.appendChild(this.fileUploadGroup)
+    if (this.dropZone && !this.altDropZone && this.options.drop_zone_top !== true) elements.appendChild(this.dropZone)
+    elements.appendChild(this.preview)
+    inputNode.parentNode.insertBefore(elements, inputNode.nextSibling)
 
-      uploadButton.setAttribute("disabled", "disabled");
-      self.theme.removeInputError(self.uploader);
+    this.container.appendChild(this.control)
 
-      if (self.theme.getProgressBar) {
-        self.progressBar = self.theme.getProgressBar();
-        self.preview.appendChild(self.progressBar);
+    /* Any special formatting that needs to happen after the input is added to the dom */
+    window.requestAnimationFrame(() => {
+      this.afterInputReady()
+    })
+  }
+
+  afterInputReady () {
+    if (this.value) {
+      const img = document.createElement('img')
+      img.style.maxWidth = '100%'
+      img.style.maxHeight = '100px'
+      img.onload = (event) => {
+        this.preview.appendChild(img)
+      }
+      img.onerror = error => {
+        // eslint-disable-next-line no-console
+        console.error('upload error', error, error.currentTarget)
       }
+      img.src = this.container.querySelector('a').href
+    }
+    this.theme.afterInputReady(this.input)
+  }
+
+  refreshPreview (files) {
+    if (this.last_preview === this.preview_value) return
+    this.last_preview = this.preview_value
+
+    this.preview.innerHTML = ''
+
+    if (!this.preview_value) return
+
+    const file = files[0]
+
+    /* mime type extracted from file data. More exact than the one in the file object */
+    const mime = this.preview_value.match(/^data:([^;,]+)[;,]/)
+    file.mimeType = mime ? mime[1] : 'unknown'
+
+    if (file.size > 0) {
+      /* Format bytes as KB/MB etc. with 2 decimals */
+      const i = Math.floor(Math.log(file.size) / Math.log(1024))
+      file.formattedSize = `${parseFloat((file.size / (1024 ** i)).toFixed(2))} ${['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'][i]}`
+    } else file.formattedSize = '0 Bytes'
 
-      self.jsoneditor.options.upload(self.path, file, {
-        success: function(url) {
-          self.setValue(url);
+    const uploadButton = this.getButton('button_upload', 'upload', 'button_upload')
+    uploadButton.addEventListener('click', (event) => {
+      event.preventDefault()
 
-          if(self.parent) self.parent.onChildEditorChange(self);
-          else self.jsoneditor.onChange();
+      uploadButton.setAttribute('disabled', 'disabled')
+      this.theme.removeInputError(this.uploader)
 
-          if (self.progressBar) self.preview.removeChild(self.progressBar);
-          uploadButton.removeAttribute("disabled");
+      if (this.theme.getProgressBar) {
+        this.progressBar = this.theme.getProgressBar()
+        this.preview.appendChild(this.progressBar)
+      }
+
+      this.options.upload_handler(this.path, file, {
+        success: (url) => {
+          this.setValue(url)
+
+          if (this.parent) this.parent.onChildEditorChange(this)
+          else this.jsoneditor.onChange()
+
+          if (this.progressBar) this.preview.removeChild(this.progressBar)
+          uploadButton.removeAttribute('disabled')
         },
-        failure: function(error) {
-          self.theme.addInputError(self.uploader, error);
-          if (self.progressBar) self.preview.removeChild(self.progressBar);
-          uploadButton.removeAttribute("disabled");
+        failure: (error) => {
+          this.theme.addInputError(this.uploader, error)
+          if (this.progressBar) this.preview.removeChild(this.progressBar)
+          uploadButton.removeAttribute('disabled')
         },
-        updateProgress: function(progress) {
-          if (self.progressBar) {
-            if (progress) self.theme.updateProgressBar(self.progressBar, progress);
-            else self.theme.updateProgressBarUnknown(self.progressBar);
+        updateProgress: (progress) => {
+          if (this.progressBar) {
+            if (progress) this.theme.updateProgressBar(this.progressBar, progress)
+            else this.theme.updateProgressBarUnknown(this.progressBar)
           }
         }
+      })
+    })
+
+    this.preview.appendChild(this.theme.getUploadPreview(file, uploadButton, this.preview_value))
+
+    if (this.options.auto_upload) {
+      uploadButton.dispatchEvent(new window.MouseEvent('click'))
+      uploadButton.parentNode.removeChild(uploadButton)
+    }
+  }
+
+  enable () {
+    if (!this.always_disabled) {
+      if (this.uploader) this.uploader.disabled = false
+      super.enable()
+    }
+  }
+
+  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) {
+      this.value = val
+      this.input.value = this.value
+      this.onChange()
+    }
+  }
+
+  destroy () {
+    /* Remove Drag'n'Drop handlers */
+    if (this.options.enable_drag_drop === true) {
+      ['dragover', 'drop'].forEach((ev) => {
+        window.removeEventListener(ev, this.dragHandler, true)
       });
-    });
+      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((ev) => {
+        this.dropZone.removeEventListener(ev, this.dragHandler, true)
+      })
+      this.dropZone.removeEventListener('dblclick', this.clickHandler)
+      if (this.dropZone && this.dropZone.parentNode) this.dropZone.parentNode.removeChild(this.dropZone)
+    }
 
-    if(this.jsoneditor.options.auto_upload || this.schema.options.auto_upload) {
-      uploadButton.dispatchEvent(new MouseEvent('click'));
-      this.preview.removeChild(uploadButton);
+    if (this.uploader && this.uploader.parentNode) {
+      this.uploader.removeEventListener('change', this.uploadHandler)
+      this.uploader.parentNode.removeChild(this.uploader)
     }
-  },
-  enable: function() {
-    if(!this.always_disabled) {
-      if(this.uploader) this.uploader.disabled = false;
-      this._super();
+    if (this.browseButton && this.browseButton.parentNode) {
+      this.browseButton.removeEventListener('click', this.clickHandler)
+      this.browseButton.parentNode.removeChild(this.browseButton)
     }
-  },
-  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.onChange();
+    if (this.fileDisplay && this.fileDisplay.parentNode) {
+      this.fileDisplay.removeEventListener('dblclick', this.clickHandler)
+      this.fileDisplay.parentNode.removeChild(this.fileDisplay)
     }
-  },
-  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();
+    if (this.fileUploadGroup && this.fileUploadGroup.parentNode) this.fileUploadGroup.parentNode.removeChild(this.fileUploadGroup)
+    if (this.preview && this.preview.parentNode) this.preview.parentNode.removeChild(this.preview)
+    if (this.header && this.header.parentNode) this.header.parentNode.removeChild(this.header)
+    if (this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input)
+
+    super.destroy()
+  }
+
+  isValidMimeType (mimeType, mimeTypesList) {
+    return mimeTypesList.reduce((a, v) => a || new RegExp(v.replace(/\*/g, '.*'), 'gi').test(mimeType), false)
   }
-});
+}

package/src/editors/uuid.js

@@ -0,0 +1,49 @@
+import { generateUUID } from '../utilities.js'
+import { StringEditor } from './string.js'
+
+export class UuidEditor extends StringEditor {
+  preBuild () {
+    super.preBuild()
+
+    /* Use Schema "default" for setting autogenerated uuid */
+    this.schema.default = this.uuid = this.getUuid()
+
+    /* Set cleave options if no existing options is present */
+    if (!this.schema.options) this.schema.options = {}
+    if (!this.schema.options.cleave) {
+      this.schema.options.cleave = {
+        delimiters: ['-'],
+        blocks: [8, 4, 4, 4, 12]
+      }
+    }
+  }
+
+  build () {
+    super.build()
+    /* Set field to readonly */
+    this.disable(true)
+    this.input.setAttribute('readonly', 'true')
+  }
+
+  sanitize (value) {
+    value = this.purify(value)
+    if (!this.testUuid(value)) value = this.uuid
+    return value
+  }
+
+  setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
+    if (!this.testUuid(value)) value = this.uuid
+    this.uuid = value
+    super.setValue(value, initial, fromTemplate)
+  }
+
+  getUuid () {
+    return generateUUID()
+  }
+
+  testUuid (value) {
+    return (/^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(value))
+  }
+}

package/src/iconlib.js

@@ -1,28 +1,23 @@
-JSONEditor.AbstractIconLib = Class.extend({
-  mapping: {
-    collapse: '',
-    expand: '',
-    "delete": '',
-    edit: '',
-    add: '',
-    cancel: '',
-    save: '',
-    moveup: '',
-    movedown: ''
-  },
-  icon_prefix: '',
-  getIconClass: function(key) {
-    if(this.mapping[key]) return this.icon_prefix+this.mapping[key];
-    else return null;
-  },
-  getIcon: function(key) {
-    var iconclass = this.getIconClass(key);
-    
-    if(!iconclass) return null;
-    
-    var i = document.createElement('i');
-    i.classList.add.apply(i.classList, iconclass.split(' '));
-    
-    return i;
+const defaultMapping = { collapse: '', expand: '', delete: '', edit: '', add: '', cancel: '', save: '', moveup: '', movedown: '' }
+
+export class AbstractIconLib {
+  constructor (iconPrefix = '', mapping = defaultMapping) {
+    this.mapping = mapping
+    this.icon_prefix = iconPrefix
   }
-});
+
+  getIconClass (key) {
+    return this.mapping[key] ? this.icon_prefix + this.mapping[key] : this.icon_prefix + key
+  }
+
+  getIcon (key) {
+    const iconclass = this.getIconClass(key)
+
+    if (!iconclass) return null
+
+    const i = document.createElement('i')
+    i.classList.add(...iconclass.split(' '))
+
+    return i
+  }
+}

package/src/iconlibs/bootstrap.js

@@ -0,0 +1,28 @@
+import { AbstractIconLib } from '../iconlib.js'
+
+const iconPrefix = 'bi bi-'
+const mapping = {
+  collapse: 'chevron-down',
+  expand: 'chevron-right',
+  delete: 'trash',
+  edit: 'pencil',
+  add: 'plus',
+  subtract: 'dash',
+  cancel: 'x-circle',
+  save: 'save',
+  moveup: 'arrow-up',
+  moveright: 'arrow-right',
+  movedown: 'arrow-down',
+  moveleft: 'arrow-left',
+  copy: 'clipboard',
+  clear: 'x-circle',
+  time: 'clock',
+  calendar: 'calendar',
+  edit_properties: 'list-ul'
+}
+
+export class bootstrapIconlib extends AbstractIconLib {
+  constructor () {
+    super(iconPrefix, mapping)
+  }
+}

package/src/iconlibs/bootstrap2.js

@@ -1,17 +1,28 @@
-JSONEditor.defaults.iconlibs.bootstrap2 = JSONEditor.AbstractIconLib.extend({
-  mapping: {
-    collapse: 'chevron-down',
-    expand: 'chevron-up',
-    "delete": 'trash',
-    edit: 'pencil',
-    add: 'plus',
-    cancel: 'ban-circle',
-    save: 'ok',
-    moveup: 'arrow-up',
-    movedown: 'arrow-down',
-    clear: 'remove-circle',
-    time: 'time',
-    calendar: 'calendar'
-  },
-  icon_prefix: 'icon-'
-});
+import { AbstractIconLib } from '../iconlib.js'
+
+const iconPrefix = 'icon-'
+const mapping = {
+  collapse: 'chevron-down',
+  expand: 'chevron-up',
+  delete: 'trash',
+  edit: 'pencil',
+  add: 'plus',
+  subtract: 'minus',
+  cancel: 'ban-circle',
+  save: 'ok',
+  moveup: 'arrow-up',
+  moveright: 'arrow-right',
+  movedown: 'arrow-down',
+  moveleft: 'arrow-left',
+  copy: 'copy',
+  clear: 'remove-circle',
+  time: 'time',
+  calendar: 'calendar',
+  edit_properties: 'list'
+}
+
+export class bootstrap2Iconlib extends AbstractIconLib {
+  constructor () {
+    super(iconPrefix, mapping)
+  }
+}