@json-editor/json-editor 1.3.5 → 1.17.0

package/src/editors/describedby.js

@@ -0,0 +1,190 @@
+/* hyper-link describeBy Editor */
+import { AbstractEditor } from '../editor.js'
+import { extend } from '../utilities.js'
+
+export class DescribedByEditor extends AbstractEditor {
+  register () {
+    if (this.editors) {
+      for (let i = 0; i < this.editors.length; i++) {
+        if (!this.editors[i]) continue
+        this.editors[i].unregister()
+      }
+
+      if (this.editors[this.currentEditor]) this.editors[this.currentEditor].register()
+    }
+
+    super.register()
+  }
+
+  unregister () {
+    super.unregister()
+
+    if (this.editors) {
+      for (let i = 0; i < this.editors.length; i++) {
+        if (!this.editors[i]) continue
+        this.editors[i].unregister()
+      }
+    }
+  }
+
+  getNumColumns () {
+    if (!this.editors[this.currentEditor]) return 4
+    return Math.max(this.editors[this.currentEditor].getNumColumns(), 4)
+  }
+
+  enable () {
+    if (this.editors) {
+      for (let i = 0; i < this.editors.length; i++) {
+        if (!this.editors[i]) continue
+        this.editors[i].enable()
+      }
+    }
+
+    super.enable()
+  }
+
+  disable () {
+    if (this.editors) {
+      for (let i = 0; i < this.editors.length; i++) {
+        if (!this.editors[i]) continue
+        this.editors[i].disable()
+      }
+    }
+
+    super.disable()
+  }
+
+  switchEditor () {
+    const vars = this.getWatchedFieldValues()
+
+    if (!vars) return
+
+    /* var ref = this.template.fillFromObject(vars); */
+    /* var ref = this.template(vars); */
+    const ref = document.location.origin + document.location.pathname + this.template(vars)
+
+    if (!this.editors[this.refs[ref]]) {
+      this.buildChildEditor(ref)
+    }
+
+    this.currentEditor = this.refs[ref]
+
+    this.register()
+
+    this.editors.forEach((editor, ref) => {
+      if (!editor) return
+      if (this.currentEditor === ref) {
+        editor.container.style.display = ''
+      } else {
+        editor.container.style.display = 'none'
+      }
+    })
+
+    this.refreshValue()
+    this.onChange(true)
+  }
+
+  buildChildEditor (ref) {
+    this.refs[ref] = this.editors.length
+
+    const holder = this.theme.getChildEditorHolder()
+    this.editor_holder.appendChild(holder)
+
+    const schema = extend({}, this.schema, this.jsoneditor.refs[ref])
+
+    const editorClass = this.jsoneditor.getEditorClass(schema, this.jsoneditor)
+
+    const editor = this.jsoneditor.createEditor(editorClass, {
+      jsoneditor: this.jsoneditor,
+      schema,
+      container: holder,
+      path: this.path,
+      parent: this,
+      required: true
+    }
+    )
+
+    this.editors.push(editor)
+
+    editor.preBuild()
+    editor.build()
+    editor.postBuild()
+  }
+
+  preBuild () {
+    this.refs = {}
+    this.editors = []
+    this.currentEditor = ''
+    let i
+    for (i = 0; i < this.schema.links.length; i++) {
+      if (this.schema.links[i].rel.toLowerCase() === 'describedby') {
+        /* this.template = new UriTemplate(this.schema.links[i].href); */
+        this.template = this.jsoneditor.compileTemplate(this.schema.links[i].href, this.template_engine)
+        break
+      }
+    }
+
+    /* this.template.fill(function(varName) {
+      this.schema.watch = this.schema.watch || {};
+      this.schema.watch[varName] = varName;
+      return '';
+    }); */
+
+    this.schema.links = this.schema.links.slice(0, i).concat(this.schema.links.slice(i + 1))
+    if (this.schema.links.length === 0) delete this.schema.links
+    this.baseSchema = extend({}, this.schema)
+  }
+
+  build () {
+    this.editor_holder = document.createElement('div')
+    this.container.appendChild(this.editor_holder)
+    this.switchEditor()
+  }
+
+  onWatchedFieldChange () {
+    this.switchEditor()
+  }
+
+  onChildEditorChange (editor, eventData) {
+    if (this.editors[this.currentEditor]) {
+      this.refreshValue()
+    }
+
+    super.onChildEditorChange(editor, eventData)
+  }
+
+  refreshValue () {
+    if (this.editors[this.currentEditor]) {
+      this.value = this.editors[this.currentEditor].getValue()
+    }
+  }
+
+  setValue (val, initial) {
+    val = this.applyConstFilter(val)
+
+    if (this.editors[this.currentEditor]) {
+      this.editors[this.currentEditor].setValue(val, initial)
+      this.refreshValue()
+      this.onChange()
+    }
+  }
+
+  destroy () {
+    this.editors.forEach(editor => {
+      if (editor) editor.destroy()
+    })
+
+    if (this.editor_holder && this.editor_holder.parentNode) {
+      this.editor_holder.parentNode.removeChild(this.editor_holder)
+    }
+
+    super.destroy()
+  }
+
+  showValidationErrors (errors) {
+    this.editors.forEach(editor => {
+      if (!editor) return
+      editor.showValidationErrors(errors)
+    })
+  }
+}

package/src/editors/enum.js

@@ -1,131 +1,146 @@
-// Enum Editor (used for objects and arrays with enumerated values)
-JSONEditor.defaults.editors["enum"] = JSONEditor.AbstractEditor.extend({
-  getNumColumns: function() {
-    return 4;
-  },
-  build: function() {
-    var container = this.container;
-    this.title = this.header = this.label = this.theme.getFormInputLabel(this.getTitle());
-    this.container.appendChild(this.title);
-
-    this.options.enum_titles = this.options.enum_titles || [];
-
-    this["enum"] = this.schema["enum"];
-    this.selected = 0;
-    this.select_options = [];
-    this.html_values = [];
-
-    var self = this;
-    for(var i=0; i<this["enum"].length; i++) {
-      this.select_options[i] = this.options.enum_titles[i] || "Value "+(i+1);
-      this.html_values[i] = this.getHTML(this["enum"][i]);
-    }
+/* Enum Editor (used for objects and arrays with enumerated values) */
+import { AbstractEditor } from '../editor.js'
 
-    // Switcher
-    this.switcher = this.theme.getSwitcher(this.select_options);
-    this.container.appendChild(this.switcher);
-
-    // Display area
-    this.display_area = this.theme.getIndentedPanel();
-    this.container.appendChild(this.display_area);
-
-    if(this.options.hide_display) this.display_area.style.display = "none";
-
-    this.switcher.addEventListener('change',function() {
-      self.selected = self.select_options.indexOf(this.value);
-      self.value = self["enum"][self.selected];
-      self.refreshValue();
-      self.onChange(true);
-    });
-    this.value = this["enum"][0];
-    this.refreshValue();
-
-    if(this["enum"].length === 1) this.switcher.style.display = 'none';
-  },
-  refreshValue: function() {
-    var self = this;
-    self.selected = -1;
-    var stringified = JSON.stringify(this.value);
-    $each(this["enum"], function(i, el) {
-      if(stringified === JSON.stringify(el)) {
-        self.selected = i;
-        return false;
-      }
-    });
+export class EnumEditor extends AbstractEditor {
+  getNumColumns () {
+    return 4
+  }
 
-    if(self.selected<0) {
-      self.setValue(self["enum"][0]);
-      return;
-    }
+  build () {
+    this.title = this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
+    this.container.appendChild(this.title)
 
-    this.switcher.value = this.select_options[this.selected];
-    this.display_area.innerHTML = this.html_values[this.selected];
-  },
-  enable: function() {
-    if(!this.always_disabled) {
-      this.switcher.disabled = false;
-      this._super();
+    this.options.enum_titles = this.options.enum_titles || []
+
+    if (this.enforceConstEnabled && this.schema.const) {
+      this.enum = [this.schema.const]
+    } else {
+      this.enum = this.schema.enum
     }
-  },
-  disable: function(always_disabled) {
-    if(always_disabled) this.always_disabled = true;
-    this.switcher.disabled = true;
-    this._super();
-  },
-  getHTML: function(el) {
-    var self = this;
-
-    if(el === null) {
-      return '<em>null</em>';
+
+    this.selected = 0
+    this.select_options = []
+    this.html_values = []
+
+    for (let i = 0; i < this.enum.length; i++) {
+      this.select_options[i] = this.options.enum_titles[i] || `Value ${i + 1}`
+      this.html_values[i] = this.getHTML(this.enum[i])
     }
-    // Array or Object
-    else if(typeof el === "object") {
-      // TODO: use theme
-      var ret = '';
-
-      $each(el,function(i,child) {
-        var html = self.getHTML(child);
-
-        // Add the keys to object children
-        if(!(Array.isArray(el))) {
-          // TODO: use theme
-          html = '<div><em>'+i+'</em>: '+html+'</div>';
-        }
 
-        // TODO: use theme
-        ret += '<li>'+html+'</li>';
-      });
+    /* Switcher */
+    this.switcher = this.theme.getSwitcher(this.select_options)
+    this.container.appendChild(this.switcher)
 
-      if(Array.isArray(el)) ret = '<ol>'+ret+'</ol>';
-      else ret = "<ul style='margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;'>"+ret+'</ul>';
+    /* Display area */
+    this.display_area = this.theme.getIndentedPanel()
+    this.container.appendChild(this.display_area)
 
-      return ret;
+    if (this.options.hide_display) this.display_area.style.display = 'none'
+
+    this.switcher.addEventListener('change', e => {
+      this.selected = this.select_options.indexOf(e.currentTarget.value)
+      this.value = this.enum[this.selected]
+      this.refreshValue()
+      this.onChange(true)
+    })
+    this.value = this.enum[0]
+    this.refreshValue()
+
+    if (this.enum.length === 1) this.switcher.style.display = 'none'
+  }
+
+  refreshValue () {
+    if (!this.enum) {
+      return
     }
-    // Boolean
-    else if(typeof el === "boolean") {
-      return el? 'true' : 'false';
+    this.selected = -1
+    const stringified = JSON.stringify(this.value)
+    this.enum.forEach((el, i) => {
+      if (stringified === JSON.stringify(el)) {
+        this.selected = i
+        return false
+      }
+    })
+
+    if (this.selected < 0) {
+      this.setValue(this.enum[0])
+      return
     }
-    // String
-    else if(typeof el === "string") {
-      return el.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+
+    this.switcher.value = this.select_options[this.selected]
+    this.display_area.innerHTML = this.html_values[this.selected]
+  }
+
+  enable () {
+    if (!this.always_disabled) {
+      this.switcher.disabled = false
+      super.enable()
     }
-    // Number
-    else {
-      return el;
+  }
+
+  disable (alwaysDisabled) {
+    if (alwaysDisabled) this.always_disabled = true
+    this.switcher.disabled = true
+    super.disable()
+  }
+
+  getHTML (el) {
+    const each = (obj, callback) => {
+      if (Array.isArray(obj) || (typeof obj.length === 'number' && obj.length > 0 && (obj.length - 1) in obj)) {
+        Array.from(obj).forEach((e, i) => callback(i, e))
+      } else {
+        Object.entries(obj).forEach(([key, value]) => callback(key, value))
+      }
     }
-  },
-  setValue: function(val) {
-    if(this.value !== val) {
-      this.value = val;
-      this.refreshValue();
-      this.onChange();
+
+    if (el === null) {
+      return '<em>null</em>'
+      /* Array or Object */
+    } else if (typeof el === 'object') {
+      /* TODO: use theme */
+      let ret = ''
+      const callback = (i, child) => {
+        let html = this.getHTML(child)
+        /* Add the keys to object children */
+        if (!(Array.isArray(el))) {
+          /* TODO: use theme */
+          html = `<div><em>${i}</em>: ${html}</div>`
+        }
+        /* TODO: use theme */
+        ret += `<li>${html}</li>`
+      }
+      each(el, callback)
+
+      if (Array.isArray(el)) ret = `<ol>${ret}</ol>`
+      else ret = `<ul style='margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;'>${ret}</ul>`
+
+      return ret
+      /* Boolean */
+    } else if (typeof el === 'boolean') {
+      return el ? 'true' : 'false'
+      /* String */
+    } else if (typeof el === 'string') {
+      return el.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+      /* Number */
     }
-  },
-  destroy: function() {
-    if(this.display_area && this.display_area.parentNode) this.display_area.parentNode.removeChild(this.display_area);
-    if(this.title && this.title.parentNode) this.title.parentNode.removeChild(this.title);
-    if(this.switcher && this.switcher.parentNode) this.switcher.parentNode.removeChild(this.switcher);
+    return el
+  }
+
+  setValue (val) {
+    val = this.applyConstFilter(val)
+
+    if (this.value !== val) {
+      this.value = val
+      this.refreshValue()
+      this.onChange()
+    }
+  }
+
+  destroy () {
+    if (this.display_area && this.display_area.parentNode) this.display_area.parentNode.removeChild(this.display_area)
+    if (this.title && this.title.parentNode) this.title.parentNode.removeChild(this.title)
+    if (this.switcher && this.switcher.parentNode) this.switcher.parentNode.removeChild(this.switcher)
 
-    this._super();
+    super.destroy()
   }
-});
+}

package/src/editors/hidden.js

@@ -1,118 +1,132 @@
 /**
  * Created by Mehmet Baker on 12.04.2017
  */
-JSONEditor.defaults.editors.hidden = JSONEditor.AbstractEditor.extend({
-  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');
-  },
-  setValue: function (value, initial, from_template) {
-    var self = this;
-
-    if(this.template && !from_template) {
-      return;
+import { AbstractEditor } from '../editor.js'
+
+export class HiddenEditor extends AbstractEditor {
+  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')
+  }
 
-    if(value === null || typeof value === 'undefined') value = "";
-    else if(typeof value === "object") value = JSON.stringify(value);
-    else if(typeof value !== "string") value = ""+value;
+  setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
 
-    if(value === this.serialized) return;
+    if (this.template && !fromTemplate) {
+      return
+    }
 
-    // Sanitize value before setting it
-    var sanitized = this.sanitize(value);
+    if (value === null || typeof value === 'undefined') value = ''
+    else if (typeof value === 'object') value = JSON.stringify(value)
+    else if (typeof value !== 'string') value = `${value}`
 
-    if(this.input.value === sanitized) {
-      return;
+    if (value === this.serialized) return
+
+    /* Sanitize value before setting it */
+    const sanitized = this.sanitize(value)
+
+    if (this.input.value === sanitized) {
+      return
     }
 
-    this.input.value = sanitized;
-
-    var changed = from_template || this.getValue() !== value;
-
-    this.refreshValue();
-
-    if(initial) this.is_dirty = false;
-    else if(this.jsoneditor.options.show_errors === "change") this.is_dirty = true;
-
-    if(this.adjust_height) this.adjust_height(this.input);
-
-    // Bubble this setValue to parents if the value changed
-    this.onChange(changed);
-  },
-  getNumColumns: function () {
-    return 2;
-  },
-  enable: function () {
-    this._super();
-  },
-  disable: function () {
-    this._super();
-  },
-  refreshValue: function () {
-    this.value = this.input.value;
-    if (typeof this.value !== "string") this.value = '';
-    this.serialized = this.value;
-  },
-  destroy: function () {
-    this.template = null;
-    if (this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input);
-    if (this.label && this.label.parentNode) this.label.parentNode.removeChild(this.label);
-    if (this.description && this.description.parentNode) this.description.parentNode.removeChild(this.description);
-
-    this._super();
-  },
+    this.input.value = sanitized
+
+    const changed = fromTemplate || this.getValue() !== value
+
+    this.refreshValue()
+
+    if (initial) this.is_dirty = false
+    else if (this.jsoneditor.options.show_errors === 'change') this.is_dirty = true
+
+    if (this.adjust_height) this.adjust_height(this.input)
+
+    /* Bubble this setValue to parents if the value changed */
+    this.onChange(changed)
+  }
+
+  getNumColumns () {
+    return 2
+  }
+
+  enable () {
+    super.enable()
+  }
+
+  disable () {
+    super.disable()
+  }
+
+  refreshValue () {
+    this.value = this.input.value
+    if (typeof this.value !== 'string') this.value = ''
+    this.serialized = this.value
+  }
+
+  destroy () {
+    this.template = null
+    if (this.input && this.input.parentNode) this.input.parentNode.removeChild(this.input)
+    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()
+  }
+
   /**
    * This is overridden in derivative editors
    */
-  sanitize: function (value) {
-    return value;
-  },
+  sanitize (value) {
+    value = this.purify(value)
+    return value
+  }
+
   /**
    * Re-calculates the value if needed
    */
-  onWatchedFieldChange: function () {
-    var self = this, vars, j;
+  onWatchedFieldChange () {
+    let vars
 
-    // If this editor needs to be rendered by a macro template
+    /* If this editor needs to be rendered by a macro template */
     if (this.template) {
-      vars = this.getWatchedFieldValues();
-      this.setValue(this.template(vars), false, true);
+      vars = this.getWatchedFieldValues()
+      this.setValue(this.template(vars), false, true)
     }
 
-    this._super();
-  },
-  build: function () {
-    var self = this;
+    super.onWatchedFieldChange()
+  }
 
-    this.format = this.schema.format;
+  build () {
+    this.format = this.schema.format
     if (!this.format && this.options.default_format) {
-      this.format = this.options.default_format;
+      this.format = this.options.default_format
     }
     if (this.options.format) {
-      this.format = this.options.format;
+      this.format = this.options.format
     }
 
-    this.input_type = 'hidden';
-    this.input = this.theme.getFormInputField(this.input_type);
+    this.input_type = 'hidden'
+    this.input = this.theme.getFormInputField(this.input_type)
 
-    if (this.format) this.input.setAttribute('data-schemaformat', this.format);
+    if (this.format) this.input.setAttribute('data-schemaformat', this.format)
 
-    this.container.appendChild(this.input);
+    this.container.appendChild(this.input)
 
-    // Compile and store the template
+    /* Compile and store the template */
     if (this.schema.template) {
-      this.template = this.jsoneditor.compileTemplate(this.schema.template, this.template_engine);
-      this.refreshValue();
-    }
-    else {
-      this.refreshValue();
+      const callback = this.expandCallbacks('template', { template: this.schema.template })
+      if (typeof callback.template === 'function') this.template = callback.template
+      else this.template = this.jsoneditor.compileTemplate(this.schema.template, this.template_engine)
+      this.refreshValue()
+    } else {
+      this.refreshValue()
     }
   }
-});
+}