@wirenboard/json-editor 2.5.3-wb13

package/src/editors/multiselect.js

@@ -0,0 +1,218 @@
+import { AbstractEditor } from '../editor.js'
+
+export class MultiSelectEditor extends AbstractEditor {
+  onInputChange () {
+    this.value = this.input.value
+    this.onChange(true)
+  }
+
+  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 () {
+    let longestText = this.getTitle().length
+    Object.keys(this.select_values).forEach(i => (longestText = Math.max(longestText, (`${this.select_values[i]}`).length + 4)))
+
+    return Math.min(12, Math.max(Math.ceil(longestText / 7), 2))
+  }
+
+  preBuild () {
+    super.preBuild()
+
+    this.select_options = {}
+    this.select_values = {}
+    this.option_keys = []
+    this.option_titles = []
+
+    let i
+    const itemsSchema = this.jsoneditor.expandRefs(this.schema.items || {})
+    const e = itemsSchema.enum || []
+    const t = itemsSchema.options ? itemsSchema.options.enum_titles || [] : []
+
+    for (i = 0; i < e.length; i++) {
+      /* If the sanitized value is different from the enum value, don't include it */
+      if (this.sanitize(e[i]) !== e[i]) continue
+
+      this.option_keys.push(`${e[i]}`)
+      this.option_titles.push(`${this.translateProperty(t[i]) || e[i]}`)
+      this.select_values[`${e[i]}`] = e[i]
+    }
+  }
+
+  build () {
+    let i
+    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')
+
+    if ((!this.schema.format && this.option_keys.length < 8) || this.schema.format === 'checkbox') {
+      this.input_type = 'checkboxes'
+
+      this.inputs = {}
+      this.controls = {}
+      for (i = 0; i < this.option_keys.length; i++) {
+        const id = this.formname + i.toString()
+        this.inputs[this.option_keys[i]] = this.theme.getCheckbox()
+        this.inputs[this.option_keys[i]].id = id
+        this.select_options[this.option_keys[i]] = this.inputs[this.option_keys[i]]
+        const label = this.theme.getCheckboxLabel(this.option_titles[i])
+        label.htmlFor = id
+        this.controls[this.option_keys[i]] = this.theme.getFormControl(label, this.inputs[this.option_keys[i]])
+      }
+
+      this.control = this.theme.getMultiCheckboxHolder(this.controls, this.label, this.description, this.infoButton)
+      this.inputs.controlgroup = this.inputs.controls = this.control /* Enable error messages for checkboxes */
+    } else {
+      this.input_type = 'select'
+      this.input = this.theme.getSelectInput(this.option_keys, true)
+      this.theme.setSelectOptions(this.input, this.option_keys, this.option_titles)
+      /* this.input.multiple = true; */
+      this.input.setAttribute('multiple', 'multiple')
+      this.input.size = Math.min(10, this.option_keys.length)
+      for (i = 0; i < this.option_keys.length; i++) {
+        this.select_options[this.option_keys[i]] = this.input.children[i]
+      }
+
+      this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
+    }
+
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable(true)
+    }
+
+    this.container.appendChild(this.control)
+
+    this.multiselectChangeHandler = (e) => {
+      const newValue = []
+      for (i = 0; i < this.option_keys.length; i++) {
+        if (this.select_options[this.option_keys[i]] && (this.select_options[this.option_keys[i]].selected || this.select_options[this.option_keys[i]].checked)) newValue.push(this.select_values[this.option_keys[i]])
+      }
+      this.updateValue(newValue)
+      this.onChange(true)
+    }
+
+    this.control.addEventListener('change', this.multiselectChangeHandler, false)
+
+    /* Any special formatting that needs to happen after the input is added to the dom */
+    window.requestAnimationFrame(() => {
+      this.afterInputReady()
+    })
+  }
+
+  postBuild () {
+    super.postBuild()
+    /* this.theme.afterInputReady(this.input || this.inputs); */
+  }
+
+  afterInputReady () {
+    this.theme.afterInputReady(this.input || this.inputs)
+  }
+
+  setValue (value, initial) {
+    value = value || []
+    if (!(Array.isArray(value))) value = [value]
+
+    /* Make sure we are dealing with an array of strings so we can check for strict equality */
+    value = value.map(e => `${e}`)
+
+    /* Update selected status of options */
+    Object.keys(this.select_options).forEach(i => {
+      this.select_options[i][this.input_type === 'select' ? 'selected' : 'checked'] = (value.includes(i))
+    })
+
+    this.updateValue(value)
+    this.onChange(true)
+  }
+
+  removeValue (value) {
+    /* Remove from existing value(s) */
+    value = [].concat(value)
+    this.setValue(this.getValue().filter(item => !value.includes(item)))
+  }
+
+  addValue (value) {
+    /* Add to existing value(s) */
+    this.setValue(this.getValue().concat(value))
+  }
+
+  updateValue (value) {
+    let changed = false
+    const newValue = []
+    for (let i = 0; i < value.length; i++) {
+      if (!this.select_options[`${value[i]}`]) {
+        changed = true
+        continue
+      }
+      const sanitized = this.sanitize(this.select_values[value[i]])
+      newValue.push(sanitized)
+      if (sanitized !== value[i]) changed = true
+    }
+    this.value = newValue
+
+    return changed
+  }
+
+  sanitize (value) {
+    if (this.schema.items.type === 'boolean') return !!value
+    else if (this.schema.items.type === 'number') return 1 * value || 0
+    else if (this.schema.items.type === 'integer') return Math.floor(value * 1 || 0)
+    return `${value}`
+  }
+
+  enable () {
+    if (!this.always_disabled) {
+      if (this.input) {
+        this.input.disabled = false
+      } else if (this.inputs) {
+        Object.keys(this.inputs).forEach(i => (this.inputs[i].disabled = false))
+      }
+      super.enable()
+    }
+  }
+
+  disable (alwaysDisabled) {
+    if (alwaysDisabled) this.always_disabled = true
+    if (this.input) {
+      this.input.disabled = true
+    } else if (this.inputs) {
+      Object.keys(this.inputs).forEach(i => (this.inputs[i].disabled = true))
+    }
+    super.disable()
+  }
+
+  destroy () {
+    super.destroy()
+  }
+
+  escapeRegExp (string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  }
+
+  showValidationErrors (errors) {
+    const regexPath = new RegExp(`^${this.escapeRegExp(this.path)}(\\.\\d+)?$`)
+    const addMessage = (messages, error) => {
+      if (error.path.match(regexPath)) {
+        messages.push(error.message)
+      }
+      return messages
+    }
+
+    const messages = errors.reduce(addMessage, [])
+
+    if (messages.length) {
+      this.theme.addInputError(this.input || this.inputs, `${messages.join('. ')}.`)
+    } else {
+      this.theme.removeInputError(this.input || this.inputs)
+    }
+  }
+}

package/src/editors/null.js

@@ -0,0 +1,18 @@
+import { AbstractEditor } from '../editor.js'
+
+export class NullEditor extends AbstractEditor {
+  getValue () {
+    if (!this.dependenciesFulfilled) {
+      return undefined
+    }
+    return null
+  }
+
+  setValue () {
+    this.onChange()
+  }
+
+  getNumColumns () {
+    return 2
+  }
+}

package/src/editors/number.js

@@ -0,0 +1,51 @@
+import { StringEditor } from './string.js'
+import { isNumber } from '../utilities'
+
+export class NumberEditor extends StringEditor {
+  build () {
+    super.build()
+
+    if (typeof this.schema.minimum !== 'undefined') {
+      let { minimum } = this.schema
+
+      if (typeof this.schema.exclusiveMinimum !== 'undefined') {
+        minimum += 1
+      }
+
+      this.input.setAttribute('min', minimum)
+    }
+
+    if (typeof this.schema.maximum !== 'undefined') {
+      let { maximum } = this.schema
+
+      if (typeof this.schema.exclusiveMaximum !== 'undefined') {
+        maximum -= 1
+      }
+
+      this.input.setAttribute('max', maximum)
+    }
+
+    if (typeof this.schema.step !== 'undefined') {
+      const step = this.schema.step || 1
+      this.input.setAttribute('step', step)
+    }
+
+    /* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */
+    this.setInputAttributes(['maxlength', 'pattern', 'readonly', 'min', 'max', 'step'])
+  }
+
+  getNumColumns () {
+    return 2
+  }
+
+  getValue () {
+    if (!this.dependenciesFulfilled) {
+      return undefined
+    }
+    const value = isNumber(this.value) ? parseFloat(this.value) : this.value
+    if (!this.jsoneditor.options.use_default_values && value === '') {
+      return undefined
+    }
+    return value
+  }
+}

package/src/editors/object.css

@@ -0,0 +1,41 @@
+.je-object__title {
+  display: inline-block
+}
+
+.je-object__controls {
+  margin: 0 0 0 10px
+}
+
+.je-object__container {
+  position: relative
+}
+
+.je-object__property-checkbox {
+  margin: 0;
+  height: auto;
+}
+
+.property-selector {
+  width: 295px;
+  max-height: 160px;
+  padding: 5px 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-left: 5px
+}
+
+.property-selector-input {
+  width: 220px;
+  margin-bottom: 0;
+  display: inline-block;
+}
+
+.json-editor-btntype-toggle {
+  margin: 0 10px 0 0;
+}
+
+.je-edit-json--textarea {
+  height: 170px !important;
+  width: 300px !important;
+  display: block;
+}

package/src/editors/object.css.js

@@ -0,0 +1,3 @@
+/* eslint-disable */
+export default {".je-object__title":"display:inline-block",".je-object__controls":"margin:0%200%200%2010px",".je-object__container":"position:relative",".je-object__property-checkbox":"margin:0;height:auto",".property-selector":"width:295px;max-height:160px;padding:5px%200;overflow-y:auto;overflow-x:hidden;padding-left:5px",".property-selector-input":"width:220px;margin-bottom:0;display:inline-block",".json-editor-btntype-toggle":"margin:0%2010px%200%200",".je-edit-json--textarea":"height:170px%20!important;width:300px%20!important;display:block"}
+/* eslint-enable */