@json-editor/json-editor 1.4.0-beta.0 → 1.17.0

package/src/editors/multiselect.js

@@ -1,234 +1,234 @@
-JSONEditor.defaults.editors.multiselect = JSONEditor.AbstractEditor.extend({
-  preBuild: function() {
-    this._super();
-    var i;
-
-    this.select_options = {};
-    this.select_values = {};
-
-    var items_schema = this.jsoneditor.expandRefs(this.schema.items || {});
-
-    var e = items_schema["enum"] || [];
-    var t = items_schema.options? items_schema.options.enum_titles || [] : [];
-    this.option_keys = [];
-    this.option_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((t[i]||e[i])+"");
-      this.select_values[e[i]+""] = e[i];
+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
+    if (this.jsoneditor.options.use_name_attributes) {
+      this.input.setAttribute('name', this.formname)
     }
-  },
-  build: function() {
-    var self = this, i;
-    if(!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
-    if(this.schema.description) this.description = this.theme.getFormInputDescription(this.schema.description);
-
-    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++) {
-        this.inputs[this.option_keys[i]] = this.theme.getCheckbox();
-        this.select_options[this.option_keys[i]] = this.inputs[this.option_keys[i]];
-        var label = this.theme.getCheckboxLabel(this.option_titles[i]);
-        this.controls[this.option_keys[i]] = this.theme.getFormControl(label, this.inputs[this.option_keys[i]]);
-      }
+  }
+
+  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(longestText / 7, 2))
+  }
+
+  preBuild () {
+    super.preBuild()
+
+    this.select_options = {}
+    this.select_values = {}
+    this.option_titles = []
+    this.option_keys = []
+    this.option_enum = []
+
+    let i
+    const itemsSchema = this.jsoneditor.expandRefs(this.schema.items || {})
+    const e = itemsSchema.enum || []
+    const oe = itemsSchema.options ? itemsSchema.options.enum || [] : []
+    /* fallback to enum_titles, when options.enum is not present */
+    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
+
+      const d = oe[i] || {}
+      if (!('title' in d)) d.title = `${t[i] || e[i]}`
 
-      this.control = this.theme.getMultiCheckboxHolder(this.controls,this.label,this.description);
+      this.option_keys.push(`${e[i]}`)
+      this.option_enum.push(d)
+      this.select_values[`${e[i]}`] = e[i]
     }
-    else {
-      this.input_type = 'select';
-      this.input = this.theme.getSelectInput(this.option_keys);
-      this.theme.setSelectOptions(this.input,this.option_keys,this.option_titles);
-      this.input.multiple = true;
-      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];
+  }
+
+  build () {
+    let i
+    if (!this.options.compact) this.header = this.label = this.theme.getLabelLike(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_enum[i].title)
+        label.htmlFor = id
+        if (this.option_enum[i].infoText) {
+          const infoButton = this.theme.getInfoButton(this.translateProperty(this.option_enum[i].infoText))
+          label.appendChild(infoButton)
+        }
+        this.controls['_' + this.option_keys[i]] = this.theme.getFormControl(label, this.inputs[this.option_keys[i]])
       }
 
-      if(this.schema.readOnly || this.schema.readonly) {
-        this.always_disabled = true;
-        this.input.disabled = true;
+      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 {
+      if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
+      this.input_type = 'select'
+      this.input = this.theme.getSelectInput(this.option_keys, true)
+      this.theme.setSelectOptions(this.input, this.option_keys, this.option_enum.map(e => e.title))
+      /* 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.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton, this.formname)
+    }
+
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable(true)
     }
 
-    this.container.appendChild(this.control);
-    this.control.addEventListener('change',function(e) {
-      e.preventDefault();
-      e.stopPropagation();
+    this.container.appendChild(this.control)
 
-      var new_value = [];
-      for(i = 0; i<self.option_keys.length; i++) {
-        if(self.select_options[self.option_keys[i]].selected || self.select_options[self.option_keys[i]].checked) new_value.push(self.select_values[self.option_keys[i]]);
+    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]])
       }
-
-      self.updateValue(new_value);
-      self.onChange(true);
-    });
-  },
-  setValue: function(value, initial) {
-    var i;
-    value = value || [];
-    if(typeof value !== "object") value = [value];
-    else if(!(Array.isArray(value))) value = [];
-
-    // Make sure we are dealing with an array of strings so we can check for strict equality
-    for(i=0; i<value.length; i++) {
-      if(typeof value[i] !== "string") value[i] += "";
+      this.updateValue(newValue)
+      this.onChange(true)
     }
 
-    // Update selected status of options
-    for(i in this.select_options) {
-      if(!this.select_options.hasOwnProperty(i)) continue;
+    this.control.addEventListener('change', this.multiselectChangeHandler, false)
 
-      this.select_options[i][this.input_type === "select"? "selected" : "checked"] = (value.indexOf(i) !== -1);
-    }
+    /* Any special formatting that needs to happen after the input is added to the dom */
+    window.requestAnimationFrame(() => {
+      this.afterInputReady()
+    })
+  }
 
-    this.updateValue(value);
-    this.onChange();
-  },
-  setupSelect2: function() {
-    if(window.jQuery && window.jQuery.fn && window.jQuery.fn.select2) {
-        var options = window.jQuery.extend({},JSONEditor.plugins.select2);
-        if(this.schema.options && this.schema.options.select2_options) options = $extend(options,this.schema.options.select2_options);
-        this.select2 = window.jQuery(this.input).select2(options);
-        this.select2v4 = this.select2.select2.hasOwnProperty("amd");
-
-        var self = this;
-        this.select2.on('select2-blur',function() {
-          if(self.select2v4)
-            self.value = self.select2.val();
-          else
-            self.value = self.select2.select2('val');
-
-          self.onChange(true);
-        });
-
-        this.select2.on('change',function() {
-          if(self.select2v4)
-            self.value = self.select2.val();
-          else
-            self.value = self.select2.select2('val');
-
-          self.onChange(true);
-        });
-    }
-    else {
-        this.select2 = null;
-    }
-  },
-  onInputChange: function() {
-      this.value = this.input.value;
-      this.onChange(true);
-  },
-  postBuild: function() {
-      this._super();
-      this.setupSelect2();
-  },
-  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() {
-    var longest_text = this.getTitle().length;
-    for(var i in this.select_values) {
-      if(!this.select_values.hasOwnProperty(i)) continue;
-      longest_text = Math.max(longest_text,(this.select_values[i]+"").length+4);
-    }
+  postBuild () {
+    super.postBuild()
+    /* this.theme.afterInputReady(this.input || this.inputs); */
+  }
+
+  afterInputReady () {
+    this.theme.afterInputReady(this.input || this.inputs)
+  }
+
+  setValue (value, initial) {
+    value = this.applyConstFilter(value)
 
-    return Math.min(12,Math.max(longest_text/7,2));
-  },
-  updateValue: function(value) {
-    var changed = false;
-    var new_value = [];
-    for(var i=0; i<value.length; i++) {
-      if(!this.select_options[value[i]+""]) {
-        changed = true;
-        continue;
+    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
       }
-      var sanitized = this.sanitize(this.select_values[value[i]]);
-      new_value.push(sanitized);
-      if(sanitized !== value[i]) changed = true;
+      const sanitized = this.sanitize(this.select_values[value[i]])
+      newValue.push(sanitized)
+      if (sanitized !== value[i]) changed = true
     }
-    this.value = new_value;
+    this.value = newValue
 
-    if(this.select2) {
-      if(this.select2v4)
-        this.select2.val(this.value).trigger("change"); 
-      else
-        this.select2.select2('val',this.value);
-    }
+    return changed
+  }
 
-    return changed;
-  },
-  sanitize: function(value) {
-    if(this.schema.items.type === "number") {
-      return 1*value;
-    }
-    else if(this.schema.items.type === "integer") {
-      return Math.floor(value*1);
-    }
-    else {
-      return ""+value;
-    }
-  },
-  enable: function() {
-    if(!this.always_disabled) {
-      if(this.input) {
-        this.input.disabled = false;
-      }
-      else if(this.inputs) {
-        for(var i in this.inputs) {
-          if(!this.inputs.hasOwnProperty(i)) continue;
-          this.inputs[i].disabled = false;
-        }
-      }
-      if(this.select2) {
-        if(this.select2v4)
-          this.select2.prop("disabled",false);
-        else
-          this.select2.select2("enable",true);
+  sanitize (value) {
+    value = this.purify(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))
       }
-      this._super();
+      super.enable()
     }
-  },
-  disable: function(always_disabled) {
-    if(always_disabled) this.always_disabled = true;
-    if(this.input) {
-      this.input.disabled = true;
+  }
+
+  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))
     }
-    else if(this.inputs) {
-      for(var i in this.inputs) {
-        if(!this.inputs.hasOwnProperty(i)) continue;
-        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
     }
-    if(this.select2) {
-      if(this.select2v4)
-        this.select2.prop("disabled",true);
-      else
-        this.select2.select2("enable",false);
-    }
-    this._super();
-  },
-  destroy: function() {
-    if(this.select2) {
-        this.select2.select2('destroy');
-        this.select2 = null;
+
+    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)
     }
-    this._super();
   }
-});
+}

package/src/editors/null.js

@@ -1,14 +1,18 @@
-JSONEditor.defaults.editors["null"] = JSONEditor.AbstractEditor.extend({
-  getValue: function() {
+import { AbstractEditor } from '../editor.js'
+
+export class NullEditor extends AbstractEditor {
+  getValue () {
     if (!this.dependenciesFulfilled) {
-      return undefined;
+      return undefined
     }
-    return null;
-  },
-  setValue: function() {
-    this.onChange();
-  },
-  getNumColumns: function() {
-    return 2;
+    return null
   }
-});
+
+  setValue () {
+    this.onChange()
+  }
+
+  getNumColumns () {
+    return 2
+  }
+}

package/src/editors/number.js

@@ -1,46 +1,55 @@
-JSONEditor.defaults.editors.number = JSONEditor.defaults.editors.string.extend({
-  build: function() {
-    this._super();
+import { StringEditor } from './string.js'
+import { isNumber } from '../utilities'
 
-    if (typeof this.schema.minimum !== "undefined") {
-      var minimum = this.schema.minimum;
+export class NumberEditor extends StringEditor {
+  build () {
+    super.build()
 
-      if (typeof this.schema.exclusiveMinimum !== "undefined") {
-        minimum += 1;
+    if (typeof this.schema.minimum !== 'undefined') {
+      let { minimum } = this.schema
+
+      if (typeof this.schema.exclusiveMinimum !== 'undefined') {
+        minimum += 1
       }
 
-      this.input.setAttribute("min", minimum);
+      this.input.setAttribute('min', minimum)
     }
 
-    if (typeof this.schema.maximum !== "undefined") {
-      var maximum = this.schema.maximum;
+    if (typeof this.schema.maximum !== 'undefined') {
+      let { maximum } = this.schema
 
-      if (typeof this.schema.exclusiveMaximum !== "undefined") {
-        maximum -= 1;
+      if (typeof this.schema.exclusiveMaximum !== 'undefined') {
+        maximum -= 1
       }
 
-      this.input.setAttribute("max", maximum);
+      this.input.setAttribute('max', maximum)
     }
 
-    if (typeof this.schema.step !== "undefined") {
-      var step = this.schema.step || 1;
-      this.input.setAttribute("step", step);
+    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']);
-
-  },
-  sanitize: function(value) {
-    return (value+"").replace(/[^0-9\.\-eE]/g,'');
-  },
-  getNumColumns: function() {
-    return 2;
-  },
-  getValue: function() {
+    /* 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;
+      return undefined
+    }
+
+    if (!this.schema.default && !this.jsoneditor.options.use_default_values && this.value === '') {
+      if (this.shouldBeUnset()) {
+        this.input.value = ''
+        return undefined
+      }
+    } else {
+      return isNumber(this.value) ? parseFloat(this.value) : this.value
     }
-    return this.value===''?undefined:this.value*1;
   }
-});
+}

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;
+  width: 300px;
+  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;width:300px;display:block"}
+/* eslint-enable */