@wirenboard/json-editor 2.5.3-wb13

package/src/editors/autocomplete.js

@@ -0,0 +1,58 @@
+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, input) => {
+          // eslint-disable-next-line no-console
+          console.log(`No "search" callback defined for autocomplete in property "${jseditor.key}"`)
+          return []
+        },
+        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.input.classList.add(options.baseClass + '-input'); */
+
+      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

@@ -0,0 +1,157 @@
+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 {
+        const tempObject = {}
+        /* Create empty object */
+        for (const key in this.parent.schema.properties) {
+          tempObject[key] = ''
+        }
+        /* 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 */
+      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 () {
+    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')
+
+      /* 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', 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 {
+            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.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 () {
+    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 () {
+    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) {
+    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 () {
+    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,97 @@
+/* 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
+
+    /* 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 title = this.translateProperty(this.schema.title) || this.key
+    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 || {}))
+
+    this.input = this.theme.getFormButton(title, options.icon, title)
+    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()
+  }
+}

package/src/editors/checkbox.js

@@ -0,0 +1,95 @@
+import { AbstractEditor } from '../editor.js'
+
+export class CheckboxEditor extends AbstractEditor {
+  setValue (value, initial) {
+    value = !!value
+    const changed = this.getValue() !== value
+    this.value = value
+    this.input.checked = this.value
+    this.onChange(changed)
+  }
+
+  register () {
+    super.register()
+    if (!this.input) return
+    this.input.setAttribute('name', this.formname)
+  }
+
+  unregister () {
+    super.unregister()
+    if (!this.input) return
+    this.input.removeAttribute('name')
+  }
+
+  getNumColumns () {
+    return Math.min(12, Math.max(Math.ceil(this.getTitle().length / 7), 2))
+  }
+
+  build () {
+    if (!this.parent.options.table_row) {
+      this.label = this.header = this.theme.getCheckboxLabel(this.getTitle(), this.isRequired())
+      this.label.htmlFor = this.formname
+    }
+
+    if (this.schema.description) this.description = this.theme.getFormInputDescription(this.translateProperty(this.schema.description))
+    if (this.options.infoText && !this.options.compact) this.infoButton = this.theme.getInfoButton(this.translateProperty(this.options.infoText))
+    if (this.options.compact) this.container.classList.add('compact')
+
+    this.input = this.theme.getCheckbox()
+    this.input.id = this.formname
+    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
+
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable(true)
+      this.input.disabled = true
+    }
+
+    this.input.addEventListener('change', e => {
+      e.preventDefault()
+      e.stopPropagation()
+      this.value = e.currentTarget.checked
+      this.onChange(true)
+    })
+
+    this.container.appendChild(this.control)
+  }
+
+  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()
+  }
+
+  destroy () {
+    if (this.label && this.label.parentNode) this.label.parentNode.removeChild(this.label)
+    if (this.description && this.description.parentNode) this.description.parentNode.removeChild(this.description)
+    if (this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input)
+    super.destroy()
+  }
+
+  showValidationErrors (errors) {
+    this.previous_error_setting = this.jsoneditor.options.show_errors
+
+    const addMessage = (messages, error) => {
+      if (error.path === this.path) {
+        messages.push(error.message)
+      }
+      return messages
+    }
+    const messages = errors.reduce(addMessage, [])
+    this.input.controlgroup = this.control
+
+    if (messages.length) {
+      this.theme.addInputError(this.input, `${messages.join('. ')}.`)
+    } else {
+      this.theme.removeInputError(this.input)
+    }
+  }
+}

package/src/editors/choices.css

@@ -0,0 +1,3 @@
+.choices > * {
+  box-sizing: border-box;
+}

package/src/editors/choices.css.js

@@ -0,0 +1,3 @@
+/* eslint-disable */
+export default {".choices > *":"box-sizing:border-box"}
+/* eslint-enable */

package/src/editors/choices.js

@@ -0,0 +1,69 @@
+import { SelectEditor } from './select.js'
+import { extend } from '../utilities.js'
+import rules from './choices.css.js'
+
+export class ChoicesEditor extends SelectEditor {
+  setValue (value, initial) {
+    if (this.choices_instance) {
+      /* Sanitize value before setting it */
+      let sanitized = this.typecast(value || '')
+
+      if (!this.enum_values.includes(sanitized)) sanitized = this.enum_values[0]
+
+      if (this.value === sanitized) return
+
+      if (initial) this.is_dirty = false
+      else if (this.jsoneditor.options.show_errors === 'change') this.is_dirty = true
+
+      this.input.value = this.enum_options[this.enum_values.indexOf(sanitized)]
+
+      this.choices_instance.setChoiceByValue(this.input.value)
+
+      this.value = sanitized
+      this.onChange()
+    } else super.setValue(value, initial)
+  }
+
+  afterInputReady () {
+    if (window.Choices && !this.choices_instance) {
+      /* Get options, either global options from "this.defaults.options.choices" or */
+      /* single property options from schema "options.choices" */
+      const options = this.expandCallbacks('choices', extend({}, this.defaults.options.choices || {}, this.options.choices || {}))
+
+      this.choices_instance = new window.Choices(this.input, options)
+    }
+    super.afterInputReady()
+  }
+
+  onWatchedFieldChange () {
+    super.onWatchedFieldChange()
+    if (this.choices_instance) {
+      const choicesList = this.enum_options.map((v, i) => ({
+        value: v,
+        label: this.enum_display[i]
+      }))
+      this.choices_instance.setChoices(choicesList, 'value', 'label', true)
+      this.choices_instance.setChoiceByValue(`${this.value}`) /* Set new selection */
+    }
+  }
+
+  enable () {
+    if (!this.always_disabled && this.choices_instance) this.choices_instance.enable()
+    super.enable()
+  }
+
+  disable (alwaysDisabled) {
+    if (this.choices_instance) this.choices_instance.disable()
+    super.disable(alwaysDisabled)
+  }
+
+  destroy () {
+    if (this.choices_instance) {
+      this.choices_instance.destroy()
+      this.choices_instance = null
+    }
+    super.destroy()
+  }
+}
+
+ChoicesEditor.rules = rules

package/src/editors/colorpicker.js

@@ -0,0 +1,103 @@
+/*
+
+Edtended handling of  oolor type fields.
+
+Has optional support for using https://github.com/Sphinxxxx/vanilla-picker.
+
+*/
+import { StringEditor } from './string.js'
+import { extend } from '../utilities.js'
+
+export class ColorEditor extends StringEditor {
+  postBuild () {
+    if (window.Picker) {
+      this.input.type = 'text'
+    }
+    this.input.style.padding = '3px'
+  }
+
+  setValue (value, initial, fromTemplate) {
+    const res = super.setValue(value, initial, fromTemplate)
+    if (this.picker_instance && this.picker_instance.domElement && res && res.changed) {
+      this.picker_instance.setColor(res.value, true)
+    }
+    return res
+  }
+
+  getNumColumns () {
+    return 2
+  }
+
+  afterInputReady () {
+    super.afterInputReady()
+    this.createPicker(true)
+  }
+
+  disable () {
+    super.disable()
+    if (this.picker_instance && this.picker_instance.domElement) {
+      /* Disable picker cursor dragging */
+      this.picker_instance.domElement.style.pointerEvents = 'none'
+      /* Disable picker buttons */
+      const buttons = this.picker_instance.domElement.querySelectorAll('button')
+      for (let i = 0; i < buttons.length; i++) {
+        buttons[i].disabled = true
+      }
+    }
+  }
+
+  enable () {
+    super.enable()
+    if (this.picker_instance && this.picker_instance.domElement) {
+      /* Enable picker cursor dragging */
+      this.picker_instance.domElement.style.pointerEvents = 'auto'
+      /* Enable picker buttons */
+      const buttons = this.picker_instance.domElement.querySelectorAll('button')
+      for (let i = 0; i < buttons.length; i++) {
+        buttons[i].disabled = false
+      }
+    }
+  }
+
+  destroy () {
+    this.createPicker(false)
+    super.destroy()
+  }
+
+  /* helper functions */
+  createPicker (create) {
+    if (create) { /* create vanilla-picker */
+      if (window.Picker && !this.picker_instance) { /* do when vanilla-picker loaded */
+        const options = this.expandCallbacks('colorpicker', extend({}, {
+          editor: false, /* default no editor */
+          alpha: false, /* default no alpha */
+          color: this.value,
+          popup: 'bottom' /* show in the bottom */
+        }, this.defaults.options.colorpicker || {}, this.options.colorpicker || {}, {
+          parent: this.container
+        }))
+
+        const updateHandler = color => {
+          const format = this.picker_instance.settings.editorFormat
+          const isAlpha = this.picker_instance.settings.alpha
+          this.setValue(format === 'hex' ? (isAlpha ? color.hex : color.hex.slice(0, 7)) : color[`${format + (isAlpha ? 'a' : '')}String`])
+        }
+        if (!options.popup && typeof options.onChange !== 'function') options.onChange = updateHandler
+        else if (options.popup && typeof options.onDone !== 'function') options.onDone = updateHandler
+
+        this.picker_instance = new window.Picker(options)
+        /* this.picker_instance.openHandler() */
+        if (!options.popup) { /* use inline colorPicker */
+          this.input.style.display = 'none'
+          this.theme.afterInputReady(this.picker_instance.domElement)
+        }
+      }
+    } else { /* destroy vanilla-picker */
+      if (this.picker_instance) {
+        this.picker_instance.destroy()
+        this.picker_instance = null
+        this.input.style.display = ''
+      }
+    }
+  }
+}