@wirenboard/json-editor 2.5.3-wb13

package/src/editors/radio.js

@@ -0,0 +1,111 @@
+import { SelectEditor } from './select.js'
+
+export class RadioEditor extends SelectEditor {
+  preBuild () {
+    this.schema.required = true /* force editor into required mode to prevent creation of empty radio button */
+    super.preBuild()
+  }
+
+  build () {
+    this.label = ''
+    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.compact) this.container.classList.add('compact')
+
+    this.radioContainer = document.createElement('div')
+
+    this.radioGroup = []
+
+    const radioInputEventhandler = e => {
+      this.setValue(e.currentTarget.value)
+      this.onChange(true)
+    }
+
+    for (let i = 0; i < this.enum_values.length; i++) {
+      /* form radio elements */
+      this.input = this.theme.getFormRadio({
+        name: this.formname,
+        id: `${this.formname}[${i}]`,
+        value: this.enum_values[i]
+      })
+
+      /* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */
+      this.setInputAttributes(['id', 'value', 'name'])
+
+      this.input.addEventListener('change', radioInputEventhandler, false)
+      this.radioGroup.push(this.input)
+
+      /* form-label for radio elements */
+      const radioLabel = this.theme.getFormRadioLabel(this.enum_display[i])
+      radioLabel.htmlFor = this.input.id
+
+      const control = this.theme.getFormRadioControl(radioLabel, this.input, !!(this.options.layout === 'horizontal' || this.options.compact))
+
+      this.radioContainer.appendChild(control)
+    }
+
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable(true)
+      for (let j = 0; j < this.radioGroup.length; j++) {
+        this.radioGroup[j].disabled = true
+      }
+      this.radioContainer.classList.add('readonly')
+    }
+
+    const radioContainerWrapper = this.theme.getContainer()
+    radioContainerWrapper.appendChild(this.radioContainer)
+    radioContainerWrapper.dataset.containerFor = 'radio'
+
+    this.input = radioContainerWrapper
+
+    this.control = this.theme.getFormControl(this.label, radioContainerWrapper, this.description, this.infoButton)
+    this.container.appendChild(this.control)
+
+    /* Any special formatting that needs to happen after the input is added to the dom */
+    window.requestAnimationFrame(() => {
+      if (this.input.parentNode) this.afterInputReady()
+    })
+  }
+
+  enable () {
+    if (!this.always_disabled) {
+      for (let i = 0; i < this.radioGroup.length; i++) {
+        this.radioGroup[i].disabled = false
+      }
+      this.radioContainer.classList.remove('readonly')
+      super.enable()
+    }
+  }
+
+  disable (alwaysDisabled) {
+    if (alwaysDisabled) this.always_disabled = true
+    for (let i = 0; i < this.radioGroup.length; i++) {
+      this.radioGroup[i].disabled = true
+    }
+    this.radioContainer.classList.add('readonly')
+    super.disable()
+  }
+
+  destroy () {
+    if (this.radioContainer.parentNode && this.radioContainer.parentNode.parentNode) this.radioContainer.parentNode.parentNode.removeChild(this.radioContainer.parentNode)
+    if (this.label && this.label.parentNode) this.label.parentNode.removeChild(this.label)
+    if (this.description && this.description.parentNode) this.description.parentNode.removeChild(this.description)
+    super.destroy()
+  }
+
+  getNumColumns () {
+    return 2
+  }
+
+  setValue (val) {
+    for (let i = 0; i < this.radioGroup.length; i++) {
+      if (this.radioGroup[i].value === val) {
+        this.radioGroup[i].checked = true
+        this.value = val
+        this.onChange()
+        break
+      }
+    }
+  }
+}

package/src/editors/sceditor.js

@@ -0,0 +1,72 @@
+import { StringEditor } from './string.js'
+import { extend } from '../utilities.js'
+
+export class ScEditor extends StringEditor {
+  setValue (value, initial, fromTemplate) {
+    const res = super.setValue(value, initial, fromTemplate)
+    if (res !== undefined && res.changed && this.sceditor_instance) this.sceditor_instance.val(res.value)
+  }
+
+  build () {
+    this.options.format = 'textarea' /* Force format into "textarea" */
+    super.build()
+    this.input_type = this.schema.format /* Restore original format */
+    this.input.setAttribute('data-schemaformat', this.input_type)
+  }
+
+  afterInputReady () {
+    if (window.sceditor) {
+      /* Get options, either global options from "this.defaults.options.sceditor" or */
+      /* single property options from schema "options.sceditor" */
+      const options = this.expandCallbacks('sceditor', extend({}, {
+        format: this.input_type,
+        emoticonsEnabled: false,
+        width: '100%',
+        height: 300,
+        readOnly: this.schema.readOnly || this.schema.readonly || this.schema.template
+      }, this.defaults.options.sceditor || {}, this.options.sceditor || {}, {
+        element: this.input
+      }))
+
+      const instance = window.sceditor.instance(this.input)
+
+      if (instance === undefined) {
+        window.sceditor.create(this.input, options) /* Create doesn't return instance. */
+      }
+
+      this.sceditor_instance = instance || window.sceditor.instance(this.input)
+
+      /* Listen for changes */
+      this.sceditor_instance.blur(() => {
+        this.value = this.sceditor_instance.val()
+        this.sceditor_instance.updateOriginal()
+        this.is_dirty = true
+        this.onChange(true)
+      })
+
+      this.theme.afterInputReady(this.input)
+    } else super.afterInputReady() /* Library not loaded, so just treat this as a string */
+  }
+
+  getNumColumns () {
+    return 6
+  }
+
+  enable () {
+    if (!this.always_disabled && this.sceditor_instance) this.sceditor_instance.readOnly(false)
+    super.enable()
+  }
+
+  disable (alwaysDisabled) {
+    if (this.sceditor_instance) this.sceditor_instance.readOnly(true)
+    super.disable(alwaysDisabled)
+  }
+
+  destroy () {
+    if (this.sceditor_instance) {
+      this.sceditor_instance.destroy()
+      this.sceditor_instance = null
+    }
+    super.destroy()
+  }
+}

package/src/editors/select.js

@@ -0,0 +1,370 @@
+import { AbstractEditor } from '../editor.js'
+import { extend } from '../utilities.js'
+
+export class SelectEditor extends AbstractEditor {
+  setValue (value, initial) {
+    /* Sanitize value before setting it */
+    let sanitized = this.typecast(value)
+
+    const haveToUseDefaultValue = !!this.jsoneditor.options.use_default_values || typeof this.schema.default !== 'undefined'
+
+    if (
+      (this.enum_options.length > 0 && !this.enum_values.includes(sanitized)) ||
+      (initial && !this.isRequired() && !haveToUseDefaultValue)
+    ) {
+      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.value = sanitized
+    this.onChange()
+    this.change()
+  }
+
+  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 () {
+    if (!this.enum_options) return 3
+    let longestText = this.getTitle().length
+    for (let i = 0; i < this.enum_options.length; i++) {
+      longestText = Math.max(longestText, this.enum_options[i].length + 4)
+    }
+    return Math.min(12, Math.max(Math.ceil(longestText / 7), 2))
+  }
+
+  typecast (value) {
+    if (this.schema.enum && value === undefined) return undefined
+    else if (this.schema.type === 'boolean') return value === 'undefined' || value === undefined ? undefined : !!value
+    else if (this.schema.type === 'number') return 1 * value || 0
+    else if (this.schema.type === 'integer') return Math.floor(value * 1 || 0)
+    return `${value}`
+  }
+
+  getValue () {
+    if (!this.dependenciesFulfilled) {
+      return undefined
+    }
+    return this.typecast(this.value)
+  }
+
+  preBuild () {
+    this.input_type = 'select'
+    this.enum_options = []
+    this.enum_values = []
+    this.enum_display = []
+    let i
+    let callback
+
+    /* Enum options enumerated */
+    if (this.schema.enum) {
+      const display = (this.schema.options && this.schema.options.enum_titles) || []
+
+      this.schema.enum.forEach((option, i) => {
+        this.enum_options[i] = `${option}`
+        this.enum_display[i] = `${this.translateProperty(display[i]) || option}`
+        this.enum_values[i] = this.typecast(option)
+      })
+
+      if (!this.isRequired() && !(this.schema.options && this.schema.options.show_opt_in)) {
+        this.enum_display.unshift(' ')
+        this.enum_options.unshift('undefined')
+        this.enum_values.unshift(undefined)
+      }
+      /* Boolean */
+    } else if (this.schema.type === 'boolean') {
+      this.enum_display = (this.schema.options && this.schema.options.enum_titles) || ['true', 'false']
+      this.enum_options = ['1', '']
+      this.enum_values = [true, false]
+
+      if (!this.isRequired()) {
+        this.enum_display.unshift(' ')
+        this.enum_options.unshift('undefined')
+        this.enum_values.unshift(undefined)
+      }
+      /* Dynamic Enum */
+    } else if (this.schema.enumSource) {
+      this.enumSource = []
+      this.enum_display = []
+      this.enum_options = []
+      this.enum_values = []
+
+      /* Shortcut declaration for using a single array */
+      if (!(Array.isArray(this.schema.enumSource))) {
+        if (this.schema.enumValue) {
+          this.enumSource = [
+            {
+              source: this.schema.enumSource,
+              value: this.schema.enumValue
+            }
+          ]
+        } else {
+          this.enumSource = [
+            {
+              source: this.schema.enumSource
+            }
+          ]
+        }
+      } else {
+        for (i = 0; i < this.schema.enumSource.length; i++) {
+          /* Shorthand for watched variable */
+          if (typeof this.schema.enumSource[i] === 'string') {
+            this.enumSource[i] = {
+              source: this.schema.enumSource[i]
+            }
+            /* Make a copy of the schema */
+          } else if (!(Array.isArray(this.schema.enumSource[i]))) {
+            this.enumSource[i] = extend({}, this.schema.enumSource[i])
+          } else {
+            this.enumSource[i] = this.schema.enumSource[i]
+          }
+        }
+      }
+      /* Now, enumSource is an array of sources */
+      /* Walk through this array and fix up the values */
+      for (i = 0; i < this.enumSource.length; i++) {
+        if (this.enumSource[i].value) {
+          callback = this.expandCallbacks('template', { template: this.enumSource[i].value })
+          if (typeof callback.template === 'function') this.enumSource[i].value = callback.template
+          else this.enumSource[i].value = this.jsoneditor.compileTemplate(this.enumSource[i].value, this.template_engine)
+        }
+        if (this.enumSource[i].title) {
+          callback = this.expandCallbacks('template', { template: this.enumSource[i].title })
+          if (typeof callback.template === 'function') this.enumSource[i].title = callback.template
+          else this.enumSource[i].title = this.jsoneditor.compileTemplate(this.enumSource[i].title, this.template_engine)
+        }
+        if (this.enumSource[i].filter && this.enumSource[i].value) {
+          callback = this.expandCallbacks('template', { template: this.enumSource[i].filter })
+          if (typeof callback.template === 'function') this.enumSource[i].filter = callback.template
+          else this.enumSource[i].filter = this.jsoneditor.compileTemplate(this.enumSource[i].filter, this.template_engine)
+        }
+      }
+      /* Other, not supported */
+    } else {
+      throw new Error("'select' editor requires the enum property to be set.")
+    }
+  }
+
+  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.compact) this.container.classList.add('compact')
+
+    this.input = this.theme.getSelectInput(this.enum_options, false)
+    this.theme.setSelectOptions(this.input, this.enum_options, this.enum_display)
+
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable(true)
+      this.input.disabled = true
+    }
+
+    /* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */
+    this.setInputAttributes([])
+
+    this.input.addEventListener('change', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      this.onInputChange()
+    })
+
+    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
+    this.container.appendChild(this.control)
+
+    this.value = this.enum_values[0]
+
+    /* Any special formatting that needs to happen after the input is added to the dom */
+    window.requestAnimationFrame(() => {
+      if (this.input.parentNode) this.afterInputReady()
+    })
+  }
+
+  afterInputReady () {
+    this.theme.afterInputReady(this.input)
+  }
+
+  onInputChange () {
+    const val = this.typecast(this.input.value)
+
+    let newVal
+    /* Invalid option, use first option instead */
+    if (!this.enum_values.includes(val)) {
+      newVal = this.enum_values[0]
+    } else {
+      newVal = this.enum_values[this.enum_values.indexOf(val)]
+    }
+
+    /* If valid hasn't changed */
+    if (newVal === this.value) return
+
+    this.is_dirty = true
+
+    /* Store new value and propogate change event */
+    this.value = newVal
+    this.onChange(true)
+  }
+
+  onWatchedFieldChange () {
+    let vars; let j
+    let selectOptions = []; let selectTitles = []
+
+    /* If this editor uses a dynamic select box */
+    if (this.enumSource) {
+      vars = this.getWatchedFieldValues()
+
+      for (let i = 0; i < this.enumSource.length; i++) {
+        /* Constant values */
+        if (Array.isArray(this.enumSource[i])) {
+          selectOptions = selectOptions.concat(this.enumSource[i])
+          selectTitles = selectTitles.concat(this.enumSource[i])
+        } else {
+          let items = []
+          /* Static list of items */
+          if (Array.isArray(this.enumSource[i].source)) {
+            items = this.enumSource[i].source
+            /* A watched field */
+          } else {
+            items = vars[this.enumSource[i].source]
+          }
+
+          if (items) {
+            /* Only use a predefined part of the array */
+            if (this.enumSource[i].slice) {
+              items = Array.prototype.slice.apply(items, this.enumSource[i].slice)
+            }
+            /* Filter the items */
+            if (this.enumSource[i].filter) {
+              const newItems = []
+              for (j = 0; j < items.length; j++) {
+                if (this.enumSource[i].filter({ i: j, item: items[j], watched: vars })) newItems.push(items[j])
+              }
+              items = newItems
+            }
+
+            const itemTitles = []
+            const itemValues = []
+            for (j = 0; j < items.length; j++) {
+              const item = items[j]
+
+              /* Rendered value */
+              if (this.enumSource[i].value) {
+                itemValues[j] = this.typecast(this.enumSource[i].value({
+                  i: j,
+                  item
+                }))
+                /* Use value directly */
+              } else {
+                itemValues[j] = items[j]
+              }
+
+              /* Rendered title */
+              if (this.enumSource[i].title) {
+                itemTitles[j] = this.enumSource[i].title({
+                  i: j,
+                  item
+                })
+                /* Use value as the title also */
+              } else {
+                itemTitles[j] = itemValues[j]
+              }
+            }
+
+            if (this.enumSource[i].sort) {
+              (((itemValues, itemTitles, order) => {
+                itemValues.map((v, i) => ({
+                  v,
+                  t: itemTitles[i]
+                })).sort((a, b) => (a.v < b.v) ? -order : ((a.v === b.v) ? 0 : order)).forEach((v, i) => {
+                  itemValues[i] = v.v
+                  itemTitles[i] = v.t
+                })
+              }).bind(null, itemValues, itemTitles, this.enumSource[i].sort === 'desc' ? 1 : -1))()
+            }
+
+            selectOptions = selectOptions.concat(itemValues)
+            selectTitles = selectTitles.concat(itemTitles)
+          }
+        }
+      }
+
+      selectTitles = selectTitles.map(title => this.translateProperty(title))
+
+      const prevValue = this.value
+
+      this.theme.setSelectOptions(this.input, selectOptions, selectTitles)
+      this.enum_options = selectOptions
+      this.enum_display = selectTitles
+      this.enum_values = selectOptions
+
+      /* If the previous value is still in the new select options */
+      /* or if global option "enum_source_value_auto_select" is true, stick with it */
+      if (selectOptions.includes(prevValue) || this.jsoneditor.options.enum_source_value_auto_select !== false) {
+        this.input.value = prevValue
+        this.value = prevValue
+        /* Otherwise, set the value to the first select option */
+      } else {
+        this.input.value = selectOptions[0]
+        this.value = this.typecast(selectOptions[0] || '')
+        if (this.parent && !this.watchLoop) this.parent.onChildEditorChange(this)
+        else this.jsoneditor.onChange()
+        this.jsoneditor.notifyWatchers(this.path)
+      }
+    }
+
+    super.onWatchedFieldChange()
+  }
+
+  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(alwaysDisabled)
+  }
+
+  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, [])
+
+    if (messages.length) {
+      this.theme.addInputError(this.input, `${messages.join('. ')}.`)
+    } else {
+      this.theme.removeInputError(this.input)
+    }
+  }
+}

package/src/editors/select2.js

@@ -0,0 +1,110 @@
+import { SelectEditor } from './select.js'
+import { extend, hasOwnProperty } from '../utilities.js'
+
+export class Select2Editor extends SelectEditor {
+  setValue (value, initial) {
+    if (this.select2_instance) {
+      if (initial) this.is_dirty = false
+      else if (this.jsoneditor.options.show_errors === 'change') this.is_dirty = true
+
+      const sanitized = this.updateValue(value) /* Sets this.value to sanitized value */
+
+      this.input.value = sanitized
+
+      if (this.select2v4) this.select2_instance.val(sanitized).trigger('change')
+      else this.select2_instance.select2('val', sanitized)
+
+      this.onChange(true)
+    } else super.setValue(value, initial)
+  }
+
+  afterInputReady () {
+    if (window.jQuery && window.jQuery.fn && window.jQuery.fn.select2 && !this.select2_instance) {
+      /* Get options, either global options from "this.defaults.options.select2" or */
+      /* single property options from schema "options.select2" */
+      const options = this.expandCallbacks('select2', extend({}, this.defaults.options.select2 || {}, this.options.select2 || {}))
+
+      /* New items are allowed if option "tags" is true and type is "string" */
+      this.newEnumAllowed = options.tags = !!options.tags && this.schema.type === 'string'
+
+      this.select2_instance = window.jQuery(this.input).select2(options)
+      this.select2v4 = hasOwnProperty(this.select2_instance.select2, 'amd')
+
+      /* Create change handler */
+      this.selectChangeHandler = () => {
+        const value = this.select2v4 ? this.select2_instance.val() : this.select2_instance.select2('val')
+        this.updateValue(value)
+        this.onChange(true)
+      }
+
+      /* Add event handler. */
+      /* Note: Must use the "on()" method and not addEventListener() */
+      this.select2_instance.on('change', this.selectChangeHandler)
+      this.select2_instance.on('select2-blur', this.selectChangeHandler)
+    }
+    super.afterInputReady()
+  }
+
+  updateValue (value) {
+    let sanitized = this.enum_values[0]
+    value = this.typecast(value || '')
+    if (!this.enum_values.includes(value)) {
+      if (this.newEnumAllowed) {
+        sanitized = this.addNewOption(value) ? value : sanitized
+      }
+    } else sanitized = value
+    this.value = sanitized
+    return sanitized
+  }
+
+  addNewOption (value) {
+    const sanitized = this.typecast(value); let res = false; let optionTag
+
+    if (!this.enum_values.includes(sanitized) && sanitized !== '') {
+      /* Add to list of valid enum values */
+      this.enum_options.push(`${sanitized}`)
+      this.enum_display.push(`${sanitized}`)
+      this.enum_values.push(sanitized)
+      /* Update Schema enum to prevent triggering error */
+      /* "Value must be one of the enumerated values" */
+      this.schema.enum.push(sanitized)
+
+      optionTag = this.input.querySelector(`option[value="${sanitized}"]`)
+      if (optionTag) {
+        /* Remove data attribute to make option tag permanent. */
+        optionTag.removeAttribute('data-select2-tag')
+      } else {
+        this.input.appendChild(new Option(sanitized, sanitized, false, false)).trigger('change')
+      }
+
+      res = true
+    }
+    return res
+  }
+
+  enable () {
+    if (!this.always_disabled) {
+      if (this.select2_instance) {
+        if (this.select2v4) this.select2_instance.prop('disabled', false)
+        else this.select2_instance.select2('enable', true)
+      }
+    }
+    super.enable()
+  }
+
+  disable (alwaysDisabled) {
+    if (this.select2_instance) {
+      if (this.select2v4) this.select2_instance.prop('disabled', true)
+      else this.select2_instance.select2('enable', false)
+    }
+    super.disable(alwaysDisabled)
+  }
+
+  destroy () {
+    if (this.select2_instance) {
+      this.select2_instance.select2('destroy')
+      this.select2_instance = null
+    }
+    super.destroy()
+  }
+}