@json-editor/json-editor 1.3.5 → 1.17.0

package/src/editors/checkbox.js

@@ -1,90 +1,125 @@
-JSONEditor.defaults.editors.checkbox = JSONEditor.AbstractEditor.extend({
-  setValue: function(value,initial) {
-    this.value = !!value;
-    this.input.checked = this.value;
-    this.onChange();
-  },
-  register: function() {
-    this._super();
-    if(!this.input) return;
-    this.input.setAttribute('name',this.formname);
-  },
-  unregister: function() {
-    this._super();
-    if(!this.input) return;
-    this.input.removeAttribute('name');
-  },
-  getNumColumns: function() {
-    return Math.min(12,Math.max(this.getTitle().length/7,2));
-  },
-  build: function() {
-    var self = this;
-    if(!this.options.compact) {
-      this.label = this.header = this.theme.getCheckboxLabel(this.getTitle());
+import { AbstractEditor } from '../editor.js'
+
+export class CheckboxEditor extends AbstractEditor {
+  setValue (value, initial) {
+    value = this.applyConstFilter(value)
+    value = !!value
+    const changed = this.getValue() !== value
+    this.value = value
+    this.input.checked = this.value
+
+    if (!initial) {
+      this.is_dirty = true
     }
-    if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
-    if(this.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText);
-    if(this.options.compact) this.container.classList.add('compact');
 
-    this.input = this.theme.getCheckbox();
-    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton);
+    this.onChange(changed)
+  }
 
-    if(this.schema.readOnly || this.schema.readonly) {
-      this.always_disabled = true;
-      this.input.disabled = true;
+  register () {
+    super.register()
+    if (!this.input) return
+    if (this.jsoneditor.options.use_name_attributes) {
+      this.input.setAttribute('name', this.formname)
     }
+  }
+
+  unregister () {
+    super.unregister()
+    if (!this.input) return
+    this.input.removeAttribute('name')
+  }
+
+  getNumColumns () {
+    return Math.min(12, Math.max(this.getTitle().length / 7, 2))
+  }
 
-    this.input.addEventListener('change',function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      self.value = this.checked;
-      self.onChange(true);
-    });
-
-    this.container.appendChild(this.control);
-  },
-  enable: function() {
-    if(!this.always_disabled) {
-      this.input.disabled = false;
-      this._super();
+  setOptInCheckbox () {
+    super.setOptInCheckbox()
+
+    if (this.optInAppended) {
+      this.container.insertBefore(this.optInContainer, this.container.firstChild)
+      this.optInContainer.style.verticalAlign = 'top'
+      this.control.style.marginTop = '0'
     }
-  },
-  disable: function(always_disabled) {
-    if(always_disabled) this.always_disabled = true;
-    this.input.disabled = true;
-    this._super();
-  },
-  destroy: function() {
-    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);
-    this._super();
-  },
-  showValidationErrors: function (errors) {
-    var self = this;
-
-    if (this.jsoneditor.options.show_errors === "always") {}
-
-    else if (!this.is_dirty && this.previous_error_setting === this.jsoneditor.options.show_errors) {
-      return;
+  }
+
+  build () {
+    if (!this.parent.options.table_row) {
+      this.label = this.header = this.theme.getCheckboxLabel(this.getTitle(), this.isRequired())
+      this.label.htmlFor = this.formname
     }
 
-    this.previous_error_setting = this.jsoneditor.options.show_errors;
+    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')
 
-    var messages = [];
-    $each(errors, function (i, error) {
-      if (error.path === self.path) {
-        messages.push(error.message);
-      }
-    });
+    this.input = this.theme.getCheckbox()
+    this.input.id = this.formname
+    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton)
+    this.control.style.display = 'inline-block'
 
-    this.input.controlgroup = this.control;
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable(true)
+      this.input.disabled = true
+    }
 
-    if (messages.length) {
-      this.theme.addInputError(this.input, messages.join('. ') + '.');
+    this.input.addEventListener('change', e => {
+      e.preventDefault()
+      e.stopPropagation()
+      this.value = e.currentTarget.checked
+      this.is_dirty = true
+      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) {
+    const showErrors = this.jsoneditor.options.show_errors
+    const changeOrInteraction = showErrors === 'change' || showErrors === 'interaction'
+    const never = showErrors === 'never'
+
+    if (never && !this.is_dirty) {
+      return
+    }
+
+    if (changeOrInteraction && !this.is_dirty) {
+      return
+    }
+
+    const addMessage = (messages, error) => {
+      if (error.path === this.path) {
+        messages.push(error.message)
+      }
+      return messages
     }
-    else {
-      this.theme.removeInputError(this.input);
+    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,71 @@
+import { SelectEditor } from './select.js'
+import { extend } from '../utilities.js'
+import rules from './choices.css.js'
+
+export class ChoicesEditor extends SelectEditor {
+  setValue (value, initial) {
+    value = this.applyConstFilter(value)
+
+    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,105 @@
+/*
+
+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) {
+    value = this.applyConstFilter(value)
+
+    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 = ''
+      }
+    }
+  }
+}

package/src/editors/datetime.js

@@ -17,113 +17,127 @@ ToDo:
  - Improve Handling of flatpicker "multiple" and "range" modes. (Currently the values are just added as string values, but the optimal scenario would be to save those as array if possible)
 
 */
-JSONEditor.defaults.editors.datetime = JSONEditor.defaults.editors.string.extend({
-  build: function () {
-    this._super();
-    if(!this.input) return;
+import { StringEditor } from './string.js'
 
-    if(window.flatpickr && typeof this.options.flatpickr == 'object') {
+export class DatetimeEditor extends StringEditor {
+  build () {
+    super.build()
+    if (!this.input) {
+      return
+    }
 
-      // Make sure that flatpickr settings matches the input type
-      this.options.flatpickr.enableTime = this.schema.format == 'date' ? false : true;
-      this.options.flatpickr.noCalendar = this.schema.format == 'time' ? true : false;
+    if (this.schema.max && typeof this.schema.max === 'string') {
+      this.input.setAttribute('max', this.schema.max)
+    }
 
-      // Curently only string can contain range or multiple values
-      if (this.schema.type == 'integer') this.options.flatpickr.mode = 'single';
+    if (this.schema.min && typeof this.schema.max === 'string') {
+      this.input.setAttribute('min', this.schema.min)
+    }
 
-      // Attribute for flatpicker
-      this.input.setAttribute('data-input','');
+    if (window.flatpickr && typeof this.options.flatpickr === 'object') {
+      /* Make sure that flatpickr settings matches the input type */
+      this.options.flatpickr.enableTime = this.schema.format !== 'date'
+      this.options.flatpickr.noCalendar = this.schema.format === 'time'
 
-      var input = this.input;
+      /* Curently only string can contain range or multiple values */
+      if (this.schema.type === 'integer') this.options.flatpickr.mode = 'single'
 
-      if (this.options.flatpickr.wrap === true) {
+      /* Attribute for flatpicker */
+      this.input.setAttribute('data-input', '')
+
+      let { input } = this
 
-        // Create buttons for input group
-        var buttons = [];
+      if (this.options.flatpickr.wrap === true) {
+        /* Create buttons for input group */
+        const buttons = []
         if (this.options.flatpickr.showToggleButton !== false) {
-          var toggleButton = this.getButton('',this.schema.format == 'time' ? 'time' :'calendar', this.translate('flatpickr_toggle_button'));
-          // Attribute for flatpicker
-          toggleButton.setAttribute('data-toggle','');
-          buttons.push(toggleButton);
+          const toggleButton = this.getButton('', this.schema.format === 'time' ? 'time' : 'calendar', 'flatpickr_toggle_button')
+          /* Attribute for flatpicker */
+          toggleButton.setAttribute('data-toggle', '')
+          buttons.push(toggleButton)
         }
         if (this.options.flatpickr.showClearButton !== false) {
-          var clearButton = this.getButton('','clear', this.translate('flatpickr_clear_button'));
-          // Attribute for flatpicker
-          clearButton.setAttribute('data-clear','');
-          buttons.push(clearButton);
+          const clearButton = this.getButton('', 'clear', 'flatpickr_clear_button')
+          /* Attribute for flatpicker */
+          clearButton.setAttribute('data-clear', '')
+          buttons.push(clearButton)
         }
 
-        // Save position of input field
-        var parentNode = this.input.parentNode, nextSibling = this.input.nextSibling;
+        /* Save position of input field */
+        const { parentNode } = this.input; const { nextSibling } = this.input
 
-        var buttonContainer = this.theme.getInputGroup(this.input, buttons);
+        const buttonContainer = this.theme.getInputGroup(this.input, buttons)
         if (buttonContainer !== undefined) {
-          // Make sure "inline" option is turned off
-          this.options.flatpickr.inline = false;
+          /* Make sure "inline" option is turned off */
+          this.options.flatpickr.inline = false
 
-          // Insert container at same position as input field
-          parentNode.insertBefore(buttonContainer, nextSibling);
+          /* Insert container at same position as input field */
+          parentNode.insertBefore(buttonContainer, nextSibling)
 
-          input = buttonContainer;
-        }
-        else {
-          this.options.flatpickr.wrap = false;
+          input = buttonContainer
+        } else {
+          this.options.flatpickr.wrap = false
         }
-
       }
 
-      this.flatpickr = window.flatpickr(input, this.options.flatpickr);
+      this.flatpickr = window.flatpickr(input, this.options.flatpickr)
 
       if (this.options.flatpickr.inline === true && this.options.flatpickr.inlineHideInput === true) {
-          this.input.setAttribute('type','hidden');
+        this.input.setAttribute('type', 'hidden')
       }
     }
-  },
-  getValue: function() {
+  }
+
+  getValue () {
     if (!this.dependenciesFulfilled) {
-      return undefined;
+      return undefined
     }
-    if (this.schema.type == 'string') {
-      return this.value;
+    if (this.schema.type === 'string') {
+      return this.value
     }
     if (this.value === '' || this.value === undefined) {
-      return undefined;
+      return undefined
     }
 
-    var value =  this.schema.format == 'time' ? '1970-01-01 ' + this.value : this.value;
-    return parseInt(new Date(value).getTime() / 1000);
-  },
-  setValue: function(value, initial, from_template) {
-    if (this.schema.type == 'string') {
-      this._super(value, initial, from_template);
-      if (this.flatpickr) this.flatpickr.setDate(value);
-    }
-    else if (value > 0) {
-      var dateObj = new Date(value * 1000),
-          year = dateObj.getFullYear(),
-          month = this.zeroPad(dateObj.getMonth() + 1),
-          day = this.zeroPad(dateObj.getDate()),
-          hour = this.zeroPad(dateObj.getHours()),
-          min = this.zeroPad(dateObj.getMinutes()),
-          sec = this.zeroPad(dateObj.getSeconds()),
-          date = [year, month, day].join('-'),
-          time = [hour, min, sec].join(':'),
-          dateValue = date + ' ' + time;
-
-      if (this.schema.format == 'date') dateValue = date;
-      else if (this.schema.format == 'time') dateValue = time;
-
-      this.input.value = dateValue;
-      if (this.flatpickr) this.flatpickr.setDate(dateValue);
+    const value = this.schema.format === 'time' ? `1970-01-01 ${this.value}` : this.value
+    return parseInt(new Date(value).getTime() / 1000)
+  }
+
+  setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
+    if (this.schema.type === 'string') {
+      super.setValue(value, initial, fromTemplate)
+      if (this.flatpickr) this.flatpickr.setDate(value)
+    } else if (value > 0) {
+      const dateObj = new Date(value * 1000)
+      const year = dateObj.getFullYear()
+      const month = this.zeroPad(dateObj.getMonth() + 1)
+      const day = this.zeroPad(dateObj.getDate())
+      const hour = this.zeroPad(dateObj.getHours())
+      const min = this.zeroPad(dateObj.getMinutes())
+      const sec = this.zeroPad(dateObj.getSeconds())
+      const date = [year, month, day].join('-')
+      const time = [hour, min, sec].join(':')
+      let dateValue = `${date}T${time}`
+
+      if (this.schema.format === 'date') dateValue = date
+      else if (this.schema.format === 'time') dateValue = time
+
+      this.input.value = dateValue
+      this.refreshValue()
+      if (this.flatpickr) this.flatpickr.setDate(dateValue)
     }
-  },
-  destroy: function() {
-    if (this.flatpickr) this.flatpickr.destroy();
-    this.flatpickr = null;
-    this._super();
-  },
-  // helper function
-  zeroPad: function(value) {
-    return ('0' + value).slice(-2);
   }
-});
+
+  destroy () {
+    if (this.flatpickr) this.flatpickr.destroy()
+    this.flatpickr = null
+    super.destroy()
+  }
+
+  /* helper function */
+  zeroPad (value) {
+    return (`0${value}`).slice(-2)
+  }
+}