@wirenboard/json-editor 2.5.3-wb13

package/src/editors/ace.js

@@ -0,0 +1,89 @@
+import { StringEditor } from './string.js'
+import { extend } from '../utilities.js'
+
+export class AceEditor extends StringEditor {
+  setValue (value, initial, fromTemplate) {
+    const res = super.setValue(value, initial, fromTemplate)
+    if (res !== undefined && res.changed && this.ace_editor_instance) {
+      this.ace_editor_instance.setValue(res.value)
+      this.ace_editor_instance.session.getSelection().clearSelection()
+      this.ace_editor_instance.resize()
+    }
+  }
+
+  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 () {
+    let options
+
+    if (window.ace) {
+      let mode = this.input_type
+      /* aliases for c/cpp */
+      if (mode === 'cpp' || mode === 'c++' || mode === 'c') mode = 'c_cpp'
+
+      /* Get options, either global options from "this.defaults.options.ace" or */
+      /* single property options from schema "options.ace" */
+      options = this.expandCallbacks('ace', extend({}, {
+        selectionStyle: 'text',
+        minLines: 30,
+        maxLines: 30
+      }, this.defaults.options.ace || {}, this.options.ace || {}, {
+        mode: `ace/mode/${mode}`
+      }))
+
+      this.ace_container = document.createElement('div')
+      this.ace_container.style.width = '100%'
+      this.ace_container.style.position = 'relative'
+      /* this.ace_container.style.height = '400px'; */
+      this.input.parentNode.insertBefore(this.ace_container, this.input)
+      this.input.style.display = 'none'
+
+      this.ace_editor_instance = window.ace.edit(this.ace_container, options)
+
+      this.ace_editor_instance.setValue(this.getValue())
+      this.ace_editor_instance.session.getSelection().clearSelection()
+      this.ace_editor_instance.resize()
+
+      if (this.schema.readOnly || this.schema.readonly || this.schema.template) {
+        this.ace_editor_instance.setReadOnly(true)
+      }
+
+      /* Listen for changes */
+      this.ace_editor_instance.on('change', () => {
+        this.input.value = this.ace_editor_instance.getValue()
+        this.refreshValue()
+        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.ace_editor_instance) this.ace_editor_instance.setReadOnly(false)
+    super.enable()
+  }
+
+  disable (alwaysDisabled) {
+    if (this.ace_editor_instance) this.ace_editor_instance.setReadOnly(true)
+    super.disable(alwaysDisabled)
+  }
+
+  destroy () {
+    if (this.ace_editor_instance) {
+      this.ace_editor_instance.destroy()
+      this.ace_editor_instance = null
+    }
+    super.destroy()
+  }
+}

package/src/editors/array/choices.js

@@ -0,0 +1,103 @@
+import { MultiSelectEditor } from '../multiselect.js'
+import { extend } from '../../utilities.js'
+
+export class ArrayChoicesEditor extends MultiSelectEditor {
+  setValue (value, initial) {
+    if (this.choices_instance) {
+      /* Make sure we are dealing with an array of strings so we can check for strict equality */
+      value = [].concat(value).map(e => `${e}`)
+
+      this.updateValue(value) /* Sets this.value to sanitized value */
+
+      this.choices_instance.removeActiveItems() /* Remove existing selection */
+      this.choices_instance.setChoiceByValue(this.value) /* Set new selection */
+
+      this.onChange(true)
+    } 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({}, {
+        removeItems: true,
+        removeItemButton: true
+      }, this.defaults.options.choices || {}, this.options.choices || {}, {
+        addItems: true,
+        editItems: false,
+        duplicateItemsAllowed: false
+      }))
+
+      /* New items are allowed if option "addItems" is true and items type is "string" */
+      /* this.newEnumAllowed = options.addItems = !!options.addItems && this.schema.items && this.schema.items.type == 'string'; */
+
+      /* Choices doesn't support adding new items to select type input */
+      this.newEnumAllowed = false
+
+      this.choices_instance = new window.Choices(this.input, options)
+
+      /* Remove change handler set in parent class (src/multiselect.js) */
+      this.control.removeEventListener('change', this.multiselectChangeHandler)
+
+      /* Create a new change handler */
+      this.multiselectChangeHandler = e => {
+        const value = this.choices_instance.getValue(true)
+        this.updateValue(value)
+        this.onChange(true)
+      }
+      this.control.addEventListener('change', this.multiselectChangeHandler, false)
+    }
+    super.afterInputReady()
+  }
+
+  updateValue (value) {
+    value = [].concat(value)
+    let changed = false; const newValue = []
+    for (let i = 0; i < value.length; i++) {
+      if (!this.select_values[`${value[i]}`]) {
+        changed = true
+        if (this.newEnumAllowed) {
+          if (!this.addNewOption(value[i])) continue
+        } else continue
+      }
+      const sanitized = this.sanitize(this.select_values[value[i]])
+      newValue.push(sanitized)
+      if (sanitized !== value[i]) changed = true
+    }
+    this.value = newValue
+
+    return changed
+  }
+
+  addNewOption (value) {
+    /* Add new value and label */
+    this.option_keys.push(`${value}`)
+    this.option_titles.push(`${value}`)
+    this.select_values[`${value}`] = value
+    /* Update Schema enum to prevent triggering "Value must be one of the enumerated values" */
+    this.schema.items.enum.push(value)
+    /* Add new value and label to choices */
+    this.choices_instance.setChoices([{ value: `${value}`, label: `${value}` }], 'value', 'label', false)
+
+    return true
+  }
+
+  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()
+  }
+}

package/src/editors/array/select2.js

@@ -0,0 +1,110 @@
+import { MultiSelectEditor } from '../multiselect.js'
+import { extend, hasOwnProperty } from '../../utilities.js'
+
+export class ArraySelect2Editor extends MultiSelectEditor {
+  setValue (value, initial) {
+    if (this.select2_instance) {
+      /* Make sure we are dealing with an array of strings so we can check for strict equality */
+      value = [].concat(value).map(e => `${e}`)
+
+      this.updateValue(value) /* Sets this.value to sanitized value */
+
+      if (this.select2v4) this.select2_instance.val(this.value).change()
+      else this.select2_instance.select2('val', this.value)
+
+      this.onChange(true)
+    } else super.setValue(value, initial)
+  }
+
+  afterInputReady () {
+    let options
+
+    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" */
+      options = this.expandCallbacks('select2', extend({}, {
+        tags: true,
+        width: '100%'
+      }, this.defaults.options.select2 || {}, this.options.select2 || {}))
+
+      /* New items are allowed if option "tags" is true and items type is "string" */
+      this.newEnumAllowed = options.tags = !!options.tags && this.schema.items && this.schema.items.type === 'string'
+
+      this.select2_instance = window.jQuery(this.input).select2(options)
+      this.select2v4 = hasOwnProperty(this.select2_instance.select2, 'amd')
+
+      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('select2-blur', this.selectChangeHandler)
+      this.select2_instance.on('change', this.selectChangeHandler)
+    }
+    super.afterInputReady()
+  }
+
+  updateValue (value) {
+    value = [].concat(value)
+    let changed = false; const newValue = []
+    for (let i = 0; i < value.length; i++) {
+      /*      if (!this.select_options[value[i]+'']) { */
+      if (!this.select_values[`${value[i]}`]) {
+        changed = true
+        if (this.newEnumAllowed) {
+          if (!this.addNewOption(value[i])) continue
+        } else continue
+      }
+      const sanitized = this.sanitize(this.select_values[value[i]])
+      newValue.push(sanitized)
+      if (sanitized !== value[i]) changed = true
+    }
+    this.value = newValue
+
+    return changed
+  }
+
+  addNewOption (value) {
+    /* Add new value and label */
+    this.option_keys.push(`${value}`)
+    this.option_titles.push(`${value}`)
+    this.select_values[`${value}`] = value
+    /* Update Schema enum to prevent triggering "Value must be one of the enumerated values" */
+    this.schema.items.enum.push(value)
+
+    const optionTag = this.input.querySelector(`option[value="${value}"]`)
+    /* Remove data attribute to make option tag permanent. (user input) */
+    if (optionTag) optionTag.removeAttribute('data-select2-tag')
+    /* Create new option tag (setValue) */
+    else this.input.appendChild(new Option(value, value, false, false)).trigger('change')
+
+    return true
+  }
+
+  enable () {
+    if (!this.always_disabled && 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()
+  }
+
+  destroy () {
+    if (this.select2_instance) {
+      this.select2_instance.select2('destroy')
+      this.select2_instance = null
+    }
+    super.destroy()
+  }
+}

package/src/editors/array/selectize.js

@@ -0,0 +1,103 @@
+import { MultiSelectEditor } from '../multiselect.js'
+import { extend } from '../../utilities.js'
+
+export class ArraySelectizeEditor extends MultiSelectEditor {
+  setValue (value, initial) {
+    if (this.selectize_instance) {
+      /* Make sure we are dealing with an array of strings so we can check for strict equality */
+      value = [].concat(value).map(e => `${e}`)
+
+      this.updateValue(value) /* Sets this.value to sanitized value */
+
+      this.selectize_instance.setValue(this.value)
+
+      this.onChange(true)
+    } else super.setValue(value, initial)
+  }
+
+  afterInputReady () {
+    let options
+
+    if (window.jQuery && window.jQuery.fn && window.jQuery.fn.selectize && !this.selectize_instance) {
+      /* Get options, either global options from "this.defaults.options.selectize" or */
+      /* single property options from schema "options.selectize" */
+      options = this.expandCallbacks('selectize', extend({}, {
+        plugins: ['remove_button'],
+        delimiter: false,
+        createOnBlur: true,
+        create: true
+      }, this.defaults.options.selectize || {}, this.options.selectize || {}))
+
+      /* New items are allowed if option "create" is true and items type is "string" */
+      this.newEnumAllowed = options.create = !!options.create && this.schema.items && this.schema.items.type === 'string'
+
+      this.selectize_instance = (window.jQuery(this.input).selectize(options))[0].selectize
+
+      /* Remove change handler set in parent class (src/multiselect.js) */
+      this.control.removeEventListener('change', this.multiselectChangeHandler)
+
+      /* Create a new change handler */
+      this.multiselectChangeHandler = e => {
+        const value = this.selectize_instance.getValue()
+        this.updateValue(value)
+        this.onChange(true)
+      }
+
+      /* Add new event handler. */
+      /* Note: Must use the "on()" method and not addEventListener() */
+      this.selectize_instance.on('change', this.multiselectChangeHandler)
+    }
+    super.afterInputReady()
+  }
+
+  updateValue (value) {
+    value = [].concat(value)
+    let changed = false; const newValue = []
+    for (let i = 0; i < value.length; i++) {
+      /*      if (!this.select_options[value[i]+'']) { */
+      if (!this.select_values[`${value[i]}`]) {
+        changed = true
+        if (this.newEnumAllowed) {
+          if (!this.addNewOption(value[i])) continue
+        } else continue
+      }
+      const sanitized = this.sanitize(this.select_values[value[i]])
+      newValue.push(sanitized)
+      if (sanitized !== value[i]) changed = true
+    }
+    this.value = newValue
+
+    return changed
+  }
+
+  addNewOption (value) {
+    /* Add new value and label */
+    this.option_keys.push(`${value}`)
+    this.option_titles.push(`${value}`)
+    this.select_values[`${value}`] = value
+    /* Update Schema enum to prevent triggering "Value must be one of the enumerated values" */
+    this.schema.items.enum.push(value)
+    /* Add new value and label to selectize */
+    this.selectize_instance.addOption({ text: value, value })
+
+    return true
+  }
+
+  enable () {
+    if (!this.always_disabled && this.selectize_instance) this.selectize_instance.unlock()
+    super.enable()
+  }
+
+  disable (alwaysDisabled) {
+    if (this.selectize_instance) this.selectize_instance.lock()
+    super.disable(alwaysDisabled)
+  }
+
+  destroy () {
+    if (this.selectize_instance) {
+      this.selectize_instance.destroy()
+      this.selectize_instance = null
+    }
+    super.destroy()
+  }
+}

package/src/editors/array.css

@@ -0,0 +1,9 @@
+.json-editor-btntype-toggle {
+  margin: 0 10px 0 0;
+}
+
+.je-array-control-btn {
+  width: 100%;
+  text-align: left;
+  margin-bottom: 3px
+}

package/src/editors/array.css.js

@@ -0,0 +1,3 @@
+/* eslint-disable */
+export default {".json-editor-btntype-toggle":"margin:0%2010px%200%200",".je-array-control-btn":"width:100%25;text-align:left;margin-bottom:3px"}
+/* eslint-enable */