@json-editor/json-editor 1.3.5 → 1.17.0

package/src/editors/select.js

@@ -1,416 +1,392 @@
-JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
-  setValue: function(value,initial) {
-    value = this.typecast(value||'');
-
-    // Sanitize value before setting it
-    var sanitized = value;
-    if(this.enum_values.indexOf(sanitized) < 0) {
-      sanitized = this.enum_values[0];
-    }
+import { AbstractEditor } from '../editor.js'
+import { extend } from '../utilities.js'
 
-    if(this.value === sanitized) {
-      return;
-    }
+export class SelectEditor extends AbstractEditor {
+  setValue (value, initial) {
+    value = this.applyConstFilter(value)
+    /* Sanitize value before setting it */
+    let sanitized = this.typecast(value)
+    const inEnum = (this.enum_options.length > 0 && this.enum_values.includes(sanitized))
 
-    if(initial) this.is_dirty = false;
-    else if(this.jsoneditor.options.show_errors === "change") this.is_dirty = true;
+    const haveToUseDefaultValue = !!this.jsoneditor.options.use_default_values || typeof this.schema.default !== 'undefined'
 
-    this.input.value = this.enum_options[this.enum_values.indexOf(sanitized)];
-    if(this.select2) {
-      if(this.select2v4)
-        this.select2.val(this.input.value).trigger("change");
-      else
-        this.select2.select2('val',this.input.value);
-    }
-    this.value = sanitized;
-    this.onChange();
-    this.change();
-  },
-  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() {
-    if(!this.enum_options) return 3;
-    var longest_text = this.getTitle().length;
-    for(var i=0; i<this.enum_options.length; i++) {
-      longest_text = Math.max(longest_text,this.enum_options[i].length+4);
+    if (!this.hasPlaceholderOption && (!inEnum || (initial && !this.isRequired() && !haveToUseDefaultValue))) {
+      sanitized = this.enum_values[0]
     }
-    return Math.min(12,Math.max(longest_text/7,2));
-  },
-  typecast: function(value) {
-    if(this.schema.type === "boolean") {
-      return !!value;
+
+    if (this.value === sanitized) return
+
+    const selectedIndex = this.enum_values.indexOf(sanitized)
+
+    if (inEnum && selectedIndex !== -1) {
+      this.input.value = this.enum_options[selectedIndex]
+    } else if (this.hasPlaceholderOption) {
+      this.input.value = '_placeholder_'
+    } else {
+      this.input.value = sanitized
     }
-    else if(this.schema.type === "number") {
-      return 1*value;
+
+    this.value = sanitized
+
+    if (!initial) {
+      this.is_dirty = true
     }
-    else if(this.schema.type === "integer") {
-      return Math.floor(value*1);
+
+    this.onChange()
+    this.change()
+  }
+
+  register () {
+    super.register()
+    if (!this.input) return
+    if (this.jsoneditor.options.use_name_attributes) {
+      this.input.setAttribute('name', this.formname)
     }
-    else {
-      return ""+value;
+  }
+
+  unregister () {
+    super.unregister()
+    if (!this.input) return
+    this.input.removeAttribute('name')
+  }
+
+  getNumColumns () {
+    if (!this.enum_options) return 3
+    let longestText = this.getTitle().length
+    for (let i = 0; i < this.enum_options.length; i++) {
+      longestText = Math.max(longestText, this.enum_options[i].length + 4)
     }
-  },
-  getValue: function() {
+    return Math.min(12, Math.max(longestText / 7, 2))
+  }
+
+  typecast (value) {
+    if (this.schema.type === 'boolean') return value === 'undefined' || value === undefined ? undefined : !!value
+    else if (this.schema.type === 'number') return 1 * value || 0
+    else if (this.schema.type === 'integer') return Math.floor(value * 1 || 0)
+    else if (this.schema.enum && value === undefined) return undefined
+    return `${value}`
+  }
+
+  getValue () {
     if (!this.dependenciesFulfilled) {
-      return undefined;
+      return undefined
     }
-    return this.typecast(this.value);
-  },
-  preBuild: function() {
-    var self = this;
-    this.input_type = 'select';
-    this.enum_options = [];
-    this.enum_values = [];
-    this.enum_display = [];
-    var i;
-
-    // Enum options enumerated
-    if(this.schema["enum"]) {
-      var display = this.schema.options && this.schema.options.enum_titles || [];
-
-      $each(this.schema["enum"],function(i,option) {
-        self.enum_options[i] = ""+option;
-        self.enum_display[i] = ""+(display[i] || option);
-        self.enum_values[i] = self.typecast(option);
-      });
-
-      if(!this.isRequired()){
-        self.enum_display.unshift(' ');
-        self.enum_options.unshift('undefined');
-        self.enum_values.unshift(undefined);
-      }
+    return this.typecast(this.value)
+  }
 
-    }
-    // Boolean
-    else if(this.schema.type === "boolean") {
-      self.enum_display = this.schema.options && this.schema.options.enum_titles || ['true','false'];
-      self.enum_options = ['1',''];
-      self.enum_values = [true,false];
-
-      if(!this.isRequired()){
-        self.enum_display.unshift(' ');
-        self.enum_options.unshift('undefined');
-        self.enum_values.unshift(undefined);
+  preBuild () {
+    this.input_type = 'select'
+    this.enum_options = []
+    this.enum_values = []
+    this.enum_display = []
+    let i
+    let callback
+
+    this.hasPlaceholderOption = this.schema?.options?.has_placeholder_option || false
+    this.placeholderOptionText = this.schema?.options?.placeholder_option_text || ' '
+
+    /* Const value */
+    if (this.enforceConst && this.schema.const) {
+      const value = this.schema.const
+      this.enum_options = [`${value}`]
+      this.enum_display = [`${this.translateProperty(value) || value}`]
+      this.enum_values = [this.typecast(value)]
+      /* Enum options enumerated */
+    } else if (this.schema.enum) {
+      const display = (this.schema.options && this.schema.options.enum_titles) || []
+
+      this.schema.enum.forEach((option, i) => {
+        this.enum_options[i] = `${option}`
+        this.enum_display[i] = `${this.translateProperty(display[i]) || option}`
+        this.enum_values[i] = this.typecast(option)
+      })
+      /* Boolean */
+    } else if (this.schema.type === 'boolean') {
+      this.enum_display = (this.schema.options && this.schema.options.enum_titles) || ['true', 'false']
+      this.enum_options = ['1', '']
+      this.enum_values = [true, false]
+
+      if (!this.isRequired()) {
+        this.enum_display.unshift(' ')
+        this.enum_options.unshift('undefined')
+        this.enum_values.unshift(undefined)
       }
-
-    }
-    // Dynamic Enum
-    else if(this.schema.enumSource) {
-      this.enumSource = [];
-      this.enum_display = [];
-      this.enum_options = [];
-      this.enum_values = [];
-
-      // Shortcut declaration for using a single array
-      if(!(Array.isArray(this.schema.enumSource))) {
-        if(this.schema.enumValue) {
+      /* Dynamic Enum */
+    } else if (this.schema.enumSource) {
+      this.enumSource = []
+      this.enum_display = []
+      this.enum_options = []
+      this.enum_values = []
+
+      /* Shortcut declaration for using a single array */
+      if (!(Array.isArray(this.schema.enumSource))) {
+        if (this.schema.enumValue) {
           this.enumSource = [
             {
               source: this.schema.enumSource,
               value: this.schema.enumValue
             }
-          ];
-        }
-        else {
+          ]
+        } else {
           this.enumSource = [
             {
               source: this.schema.enumSource
             }
-          ];
+          ]
         }
-      }
-      else {
-        for(i=0; i<this.schema.enumSource.length; i++) {
-          // Shorthand for watched variable
-          if(typeof this.schema.enumSource[i] === "string") {
+      } else {
+        for (i = 0; i < this.schema.enumSource.length; i++) {
+          /* Shorthand for watched variable */
+          if (typeof this.schema.enumSource[i] === 'string') {
             this.enumSource[i] = {
               source: this.schema.enumSource[i]
-            };
-          }
-          // Make a copy of the schema
-          else if(!(Array.isArray(this.schema.enumSource[i]))) {
-            this.enumSource[i] = $extend({},this.schema.enumSource[i]);
-          }
-          else {
-            this.enumSource[i] = this.schema.enumSource[i];
+            }
+            /* Make a copy of the schema */
+          } else if (!(Array.isArray(this.schema.enumSource[i]))) {
+            this.enumSource[i] = extend({}, this.schema.enumSource[i])
+          } else {
+            this.enumSource[i] = this.schema.enumSource[i]
           }
         }
       }
-
-      // Now, enumSource is an array of sources
-      // Walk through this array and fix up the values
-      for(i=0; i<this.enumSource.length; i++) {
-        if(this.enumSource[i].value) {
-          this.enumSource[i].value = this.jsoneditor.compileTemplate(this.enumSource[i].value, this.template_engine);
+      /* Now, enumSource is an array of sources */
+      /* Walk through this array and fix up the values */
+      for (i = 0; i < this.enumSource.length; i++) {
+        if (this.enumSource[i].value) {
+          callback = this.expandCallbacks('template', { template: this.enumSource[i].value })
+          if (typeof callback.template === 'function') this.enumSource[i].value = callback.template
+          else this.enumSource[i].value = this.jsoneditor.compileTemplate(this.enumSource[i].value, this.template_engine)
         }
-        if(this.enumSource[i].title) {
-          this.enumSource[i].title = this.jsoneditor.compileTemplate(this.enumSource[i].title, this.template_engine);
+        if (this.enumSource[i].title) {
+          callback = this.expandCallbacks('template', { template: this.enumSource[i].title })
+          if (typeof callback.template === 'function') this.enumSource[i].title = callback.template
+          else this.enumSource[i].title = this.jsoneditor.compileTemplate(this.enumSource[i].title, this.template_engine)
         }
-        if(this.enumSource[i].filter) {
-          this.enumSource[i].filter = this.jsoneditor.compileTemplate(this.enumSource[i].filter, this.template_engine);
+        if (this.enumSource[i].filter && this.enumSource[i].value) {
+          callback = this.expandCallbacks('template', { template: this.enumSource[i].filter })
+          if (typeof callback.template === 'function') this.enumSource[i].filter = callback.template
+          else this.enumSource[i].filter = this.jsoneditor.compileTemplate(this.enumSource[i].filter, this.template_engine)
         }
       }
+      /* Other, not supported */
+    } else {
+      throw new Error("'select' editor requires the enum property to be set.")
     }
-    // Other, not supported
-    else {
-      throw "'select' editor requires the enum property to be set.";
-    }
-  },
-  build: function() {
-    var self = this;
-    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.options.infoText) this.infoButton = this.theme.getInfoButton(this.options.infoText);
-    if(this.options.compact) this.container.classList.add('compact');
-
-    this.input = this.theme.getSelectInput(this.enum_options);
-    this.theme.setSelectOptions(this.input,this.enum_options,this.enum_display);
-
-    if(this.schema.readOnly || this.schema.readonly) {
-      this.always_disabled = true;
-      this.input.disabled = true;
+  }
+
+  build () {
+    if (!this.options.compact) this.header = this.label = this.theme.getFormInputLabel(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')
+
+    this.input = this.theme.getSelectInput(this.enum_options, false)
+    this.theme.setSelectOptions(this.input, this.enum_options, this.enum_display, this.hasPlaceholderOption, this.placeholderOptionText)
+
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable(true)
+      this.input.disabled = true
     }
 
-    // Set custom attributes on input element. Parameter is array of protected keys. Empty array if none.
-    this.setInputAttributes([]);
+    /* Set custom attributes on input element. Parameter is array of protected keys. Empty array if none. */
+    this.setInputAttributes([])
 
-    this.input.addEventListener('change',function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      self.onInputChange();
-    });
+    this.input.addEventListener('change', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      this.onInputChange()
+    })
 
-    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton);
-    this.container.appendChild(this.control);
+    this.control = this.theme.getFormControl(this.label, this.input, this.description, this.infoButton, this.formname)
+    this.container.appendChild(this.control)
 
-    this.value = this.enum_values[0];
-  },
-  onInputChange: function() {
-    var val = this.typecast(this.input.value);
+    this.value = this.enum_values[0]
 
-    var new_val;
-    // Invalid option, use first option instead
-    if(this.enum_values.indexOf(val) === -1) {
-      new_val = this.enum_values[0];
-    }
-    else {
-      new_val = this.enum_values[this.enum_values.indexOf(val)];
-    }
+    /* Any special formatting that needs to happen after the input is added to the dom */
+    window.requestAnimationFrame(() => {
+      if (this.input.parentNode) this.afterInputReady()
+    })
+  }
 
-    // If valid hasn't changed
-    if(new_val === this.value) return;
-
-    this.is_dirty = true;
-
-    // Store new value and propogate change event
-    this.value = new_val;
-    this.onChange(true);
-  },
-  setupSelect2: function() {
-    // If the Select2 library is loaded use it when we have lots of items
-    if(window.jQuery && window.jQuery.fn && window.jQuery.fn.select2 && (this.enum_options.length > 2 || (this.enum_options.length && this.enumSource))) {
-      var options = $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.input.value = self.select2.val();
-        else
-          self.input.value = self.select2.select2('val');
-
-        self.onInputChange();
-      });
-
-      this.select2.on('change',function() {
-        if(self.select2v4)
-          self.input.value = self.select2.val();
-        else
-          self.input.value = self.select2.select2('val');
-
-        self.onInputChange();
-      });
-    }
-    else {
-      this.select2 = null;
+  afterInputReady () {
+    this.theme.afterInputReady(this.input)
+  }
+
+  onInputChange () {
+    const val = this.typecast(this.input.value)
+
+    let newVal
+    /* Invalid option, use first option instead */
+    if (!this.enum_values.includes(val)) {
+      newVal = this.enum_values[0]
+    } else {
+      newVal = this.enum_values[this.enum_values.indexOf(val)]
     }
-  },
-  postBuild: function() {
-    this._super();
-    this.theme.afterInputReady(this.input);
-    this.setupSelect2();
-  },
-  onWatchedFieldChange: function() {
-    var self = this, vars, j;
-
-    // If this editor uses a dynamic select box
-    if(this.enumSource) {
-      vars = this.getWatchedFieldValues();
-      var select_options = [];
-      var select_titles = [];
-
-      for(var i=0; i<this.enumSource.length; i++) {
-        // Constant values
-        if(Array.isArray(this.enumSource[i])) {
-          select_options = select_options.concat(this.enumSource[i]);
-          select_titles = select_titles.concat(this.enumSource[i]);
-        }
-        else {
-          var items = [];
-          // Static list of items
-          if(Array.isArray(this.enumSource[i].source)) {
-            items = this.enumSource[i].source;
-          // A watched field
+
+    /* If valid hasn't changed */
+    if (newVal === this.value) return
+
+    this.is_dirty = true
+
+    /* Store new value and propogate change event */
+    this.value = newVal
+    this.onChange(true)
+  }
+
+  onWatchedFieldChange () {
+    let vars; let j
+    let selectOptions = []; let selectTitles = []
+
+    /* If this editor uses a dynamic select box */
+    if (this.enumSource) {
+      vars = this.getWatchedFieldValues()
+
+      for (let i = 0; i < this.enumSource.length; i++) {
+        /* Constant values */
+        if (Array.isArray(this.enumSource[i])) {
+          selectOptions = selectOptions.concat(this.enumSource[i])
+          selectTitles = selectTitles.concat(this.enumSource[i])
+        } else {
+          let items = []
+          /* Static list of items */
+          if (Array.isArray(this.enumSource[i].source)) {
+            items = this.enumSource[i].source
+            /* A watched field */
           } else {
-            items = vars[this.enumSource[i].source];
+            items = vars[this.enumSource[i].source]
           }
 
-          if(items) {
-            // Only use a predefined part of the array
-            if(this.enumSource[i].slice) {
-              items = Array.prototype.slice.apply(items,this.enumSource[i].slice);
+          if (items) {
+            /* Only use a predefined part of the array */
+            if (this.enumSource[i].slice) {
+              items = Array.prototype.slice.apply(items, this.enumSource[i].slice)
             }
-            // Filter the items
-            if(this.enumSource[i].filter) {
-              var new_items = [];
-              for(j=0; j<items.length; j++) {
-                if(this.enumSource[i].filter({i:j,item:items[j],watched:vars})) new_items.push(items[j]);
+            /* Filter the items */
+            if (this.enumSource[i].filter) {
+              const newItems = []
+              for (j = 0; j < items.length; j++) {
+                if (this.enumSource[i].filter({ i: j, item: items[j], watched: vars })) newItems.push(items[j])
               }
-              items = new_items;
+              items = newItems
             }
 
-            var item_titles = [];
-            var item_values = [];
-            for(j=0; j<items.length; j++) {
-              var item = items[j];
+            const itemTitles = []
+            const itemValues = []
+            for (j = 0; j < items.length; j++) {
+              const item = items[j]
 
-              // Rendered value
-              if(this.enumSource[i].value) {
-                item_values[j] = this.typecast(this.enumSource[i].value({
+              /* Rendered value */
+              if (this.enumSource[i].value) {
+                itemValues[j] = this.typecast(this.enumSource[i].value({
                   i: j,
-                  item: item
-                }));
-              }
-              // Use value directly
-              else {
-                item_values[j] = items[j];
+                  item
+                }))
+                /* Use value directly */
+              } else {
+                itemValues[j] = items[j]
               }
 
-              // Rendered title
-              if(this.enumSource[i].title) {
-                item_titles[j] = this.enumSource[i].title({
+              /* Rendered title */
+              if (this.enumSource[i].title) {
+                itemTitles[j] = this.enumSource[i].title({
                   i: j,
-                  item: item
-                });
-              }
-              // Use value as the title also
-              else {
-                item_titles[j] = item_values[j];
+                  item
+                })
+                /* Use value as the title also */
+              } else {
+                itemTitles[j] = itemValues[j]
               }
             }
 
-            // TODO: sort
+            if (this.enumSource[i].sort) {
+              (((itemValues, itemTitles, order) => {
+                itemValues.map((v, i) => ({
+                  v,
+                  t: itemTitles[i]
+                })).sort((a, b) => (a.v < b.v) ? -order : ((a.v === b.v) ? 0 : order)).forEach((v, i) => {
+                  itemValues[i] = v.v
+                  itemTitles[i] = v.t
+                })
+              }).bind(null, itemValues, itemTitles, this.enumSource[i].sort === 'desc' ? 1 : -1))()
+            }
 
-            select_options = select_options.concat(item_values);
-            select_titles = select_titles.concat(item_titles);
+            selectOptions = selectOptions.concat(itemValues)
+            selectTitles = selectTitles.concat(itemTitles)
           }
         }
       }
 
-      var prev_value = this.value;
-
-      this.theme.setSelectOptions(this.input, select_options, select_titles);
-      this.enum_options = select_options;
-      this.enum_display = select_titles;
-      this.enum_values = select_options;
-
-      if(this.select2) {
-        this.select2.select2('destroy');
+      const prevValue = this.value
+
+      this.theme.setSelectOptions(this.input, selectOptions, selectTitles)
+      this.enum_options = selectOptions
+      this.enum_display = selectTitles
+      this.enum_values = selectOptions
+
+      /* If the previous value is still in the new select options */
+      /* or if global option "enum_source_value_auto_select" is true, stick with it */
+      if (selectOptions.includes(prevValue) || this.jsoneditor.options.enum_source_value_auto_select !== false) {
+        this.input.value = prevValue
+        this.value = prevValue
+        /* Otherwise, set the value to the first select option */
+      } else {
+        this.input.value = selectOptions[0]
+        this.value = this.typecast(selectOptions[0] || '')
+        if (this.parent && !this.watchLoop) this.parent.onChildEditorChange(this)
+        else this.jsoneditor.onChange()
+        this.jsoneditor.notifyWatchers(this.path)
       }
+    }
 
-      // If the previous value is still in the new select options, stick with it
-      if(select_options.indexOf(prev_value) !== -1) {
-        this.input.value = prev_value;
-        this.value = prev_value;
-      }
-      // Otherwise, set the value to the first select option
-      else {
-        this.input.value = select_options[0];
-        this.value = this.typecast(select_options[0] || "");  
-        if(this.parent) this.parent.onChildEditorChange(this);
-        else this.jsoneditor.onChange();
-        this.jsoneditor.notifyWatchers(this.path);
-      }
+    super.onWatchedFieldChange()
+  }
 
-      this.setupSelect2();
+  enable () {
+    if (!this.always_disabled) {
+      this.input.disabled = false
+      super.enable()
     }
+  }
 
-    this._super();
-  },
-  enable: function() {
-    if(!this.always_disabled) {
-      this.input.disabled = false;
-      if(this.select2) {
-        if(this.select2v4)
-          this.select2.prop("disabled",false);
-        else
-          this.select2.select2("enable",true);
-      }
-    }
-    this._super();
-  },
-  disable: function(always_disabled) {
-    if(always_disabled) this.always_disabled = true;
-    this.input.disabled = true;
-    if(this.select2) {
-      if(this.select2v4)
-        this.select2.prop("disabled",true);
-      else
-        this.select2.select2("enable",false);
-    }
-    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);
-    if(this.select2) {
-      this.select2.select2('destroy');
-      this.select2 = null;
-    }
+  disable (alwaysDisabled) {
+    if (alwaysDisabled) this.always_disabled = true
+    this.input.disabled = true
+    super.disable(alwaysDisabled)
+  }
+
+  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()
+  }
 
-    this._super();
-  },
-  showValidationErrors: function (errors) {
-    var self = this;
+  showValidationErrors (errors) {
+    const showErrors = this.jsoneditor.options.show_errors
+    const changeOrInteraction = showErrors === 'change' || showErrors === 'interaction'
+    const never = showErrors === 'never'
 
-    if (this.jsoneditor.options.show_errors === "always") {}
-    else if(!this.is_dirty && this.previous_error_setting===this.jsoneditor.options.show_errors) return;
+    if (never && !this.is_dirty) {
+      return
+    }
 
-    this.previous_error_setting = this.jsoneditor.options.show_errors;
+    if (changeOrInteraction && !this.is_dirty) {
+      return
+    }
 
-    var messages = [];
-    $each(errors, function (i, error) {
-      if (error.path === self.path) {
-        messages.push(error.message);
+    const addMessage = (messages, error) => {
+      if (error.path === this.path) {
+        messages.push(error.message)
       }
-    });
+      return messages
+    }
+    const messages = errors.reduce(addMessage, [])
 
     if (messages.length) {
-      this.theme.addInputError(this.input, messages.join('. ') + '.');
-    }
-    else {
-      this.theme.removeInputError(this.input);
+      this.theme.addInputError(this.input, `${messages.join('. ')}.`)
+    } else {
+      this.theme.removeInputError(this.input)
     }
   }
-});
+}