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

package/src/editors/describedby.js

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