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

package/src/editors/signature.js

@@ -1,121 +1,117 @@
-JSONEditor.defaults.editors.signature = JSONEditor.defaults.editors.string.extend({
-
-  // This editor is using the signature pad editor from https://github.com/szimek/signature_pad
-  // Credits for the pad itself go to https://github.com/szimek
-
-  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);
-    var formname = this.formname.replace(/\W/g, '');
-
-    if (typeof SignaturePad == 'function') {
-      // Dynamically add the required CSS the first time this editor is used
-      var styleId = 'json-editor-style-signature';
-      var styles = document.getElementById(styleId);
-      this.input = this.theme.getFormInputField('hidden');
-      this.container.appendChild(this.input);
+/* This editor is using the signature pad editor from https://github.com/szimek/signature_pad */
+/* Credits for the pad itself go to https://github.com/szimek */
+
+import { StringEditor } from './string.js'
+
+export class SignatureEditor extends StringEditor {
+  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))
+    const formname = this.formname.replace(/\W/g, '')
+
+    if (typeof SignaturePad === 'function') {
+      /* Dynamically add the required CSS the first time this editor is used */
+      this.input = this.theme.getFormInputField('hidden')
+      this.container.appendChild(this.input)
+
+      /* Required to keep height */
+      const signatureContainer = document.createElement('div')
+      signatureContainer.classList.add('signature-container')
+
+      /* Create canvas for signature pad */
+      const canvas = document.createElement('canvas')
+      if (this.jsoneditor.options.use_name_attributes) {
+        canvas.setAttribute('name', formname)
+      }
+      canvas.classList.add('signature')
+      signatureContainer.appendChild(canvas)
 
-      // Required to keep height
-      var signatureContainer = document.createElement('div');
-      signatureContainer.classList.add('signature-container');
+      this.signaturePad = new window.SignaturePad(canvas)
 
-      // Create canvas for signature pad
-      var canvas = document.createElement('canvas');
-      canvas.setAttribute('name', formname);
-      canvas.classList.add('signature');
-      signatureContainer.appendChild(canvas);
+      this.signaturePad.onEnd = () => {
+        /* check if the signature is not empty before setting a value */
+        if (!this.signaturePad.isEmpty()) {
+          this.input.value = this.signaturePad.toDataURL()
+        } else {
+          this.input.value = ''
+        }
 
+        this.is_dirty = true
+        this.refreshValue()
+        this.watch_listener()
+        this.jsoneditor.notifyWatchers(this.path)
+        if (this.parent) this.parent.onChildEditorChange(this)
+        else this.jsoneditor.onChange()
+      }
 
-      self.signaturePad = new window.SignaturePad(canvas, {
-        onEnd: function() {
+      /* create button containers and add clear signature button */
+      const buttons = document.createElement('div')
+      const clearButton = document.createElement('button')
+      clearButton.classList.add('tiny', 'button')
+      clearButton.innerHTML = 'Clear signature'
+      buttons.appendChild(clearButton)
+      signatureContainer.appendChild(buttons)
 
-          // check if the signature is not empty before setting a value
-          if (!self.signaturePad.isEmpty()) {
-            self.input.value = self.signaturePad.toDataURL();
-          } else {
-            self.input.value = '';
-          }
+      if (this.options.compact) this.container.setAttribute('class', `${this.container.getAttribute('class')} compact`)
 
-          self.is_dirty = true;
-          self.refreshValue();
-          self.watch_listener();
-          self.jsoneditor.notifyWatchers(self.path);
-          if(self.parent) self.parent.onChildEditorChange(self);
-          else self.jsoneditor.onChange();
+      if (this.schema.readOnly || this.schema.readonly) {
+        this.disable(true)
 
-        }
-      });
-
-      // create button containers and add clear signature button
-      var buttons = document.createElement('div');
-      var clearButton = document.createElement('button');
-      clearButton.classList.add('tiny', 'button');
-      clearButton.innerHTML='Clear signature';
-      buttons.appendChild(clearButton);
-      signatureContainer.appendChild(buttons);
-
-      if(this.options.compact) this.container.setAttribute('class',this.container.getAttribute('class')+' compact');
-
-      if(this.schema.readOnly || this.schema.readonly) {
-        this.always_disabled = true;
-        $each(this.inputs,function(i,input) {
-          canvas.setAttribute("readOnly", "readOnly");
-          input.disabled = true;
-        });
+        Array.from(this.inputs).forEach(input => {
+          canvas.setAttribute('readOnly', 'readOnly')
+          input.disabled = true
+        })
       }
-      // add listener to the clear button. when clicked, trigger a canvas change after emptying the canvas
-      clearButton.addEventListener('click', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        self.signaturePad.clear();
-        // trigger stroke end to let signaturePad update the dataURL
-        self.signaturePad.strokeEnd();
-      });
-
-      this.control = this.theme.getFormControl(this.label, signatureContainer, this.description);
-      this.container.appendChild(this.control);
-      this.refreshValue();
-
-      // signature canvas will stretch to signatureContainer width
-      canvas.width = signatureContainer.offsetWidth;
-      if (self.options && self.options.canvas_height) {
-        canvas.height = self.options.canvas_height;
+      /* add listener to the clear button. when clicked, trigger a canvas change after emptying the canvas */
+      clearButton.addEventListener('click', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        this.signaturePad.clear()
+        /* trigger stroke end to let signaturePad update the dataURL */
+        this.signaturePad.strokeEnd()
+      })
+
+      this.control = this.theme.getFormControl(this.label, signatureContainer, this.description)
+      this.container.appendChild(this.control)
+      this.refreshValue()
+
+      /* signature canvas will stretch to signatureContainer width */
+      canvas.width = signatureContainer.offsetWidth
+      if (this.options && this.options.canvas_height) {
+        canvas.height = this.options.canvas_height
       } else {
-        canvas.height = "300"; // Set to default height of 300px;
+        canvas.height = '300' /* Set to default height of 300px; */
       }
     } else {
-      var message = document.createElement('p');
-      message.innerHTML='Signature pad is not available, please include SignaturePad from https://github.com/szimek/signature_pad';
-      this.container.appendChild(message);
+      const message = document.createElement('p')
+      message.innerHTML = 'Signature pad is not available, please include SignaturePad from https://github.com/szimek/signature_pad'
+      this.container.appendChild(message)
     }
+  }
 
-  },
-  setValue: function(val) {
-    var self = this, i;
-    if (typeof SignaturePad == 'function') {
-      var formname = this.formname.replace(/\W/g, '');
-      var sanitized = this.sanitize(val);
-      if(this.value === sanitized) {
-        return;
+  setValue (val) {
+    val = this.applyConstFilter(val)
+
+    if (typeof SignaturePad === 'function') {
+      const sanitized = this.sanitize(val)
+      if (this.value === sanitized) {
+        return
       }
-      self.value = sanitized;
-      self.input.value = self.value;
-      self.signaturePad.clear();
-      // only set contents if value != ''
-      if (val && val != '') {
-        self.signaturePad.fromDataURL(val);
+      this.value = sanitized
+      this.input.value = this.value
+      this.signaturePad.clear()
+      /* only set contents if value != '' */
+      if (val && val !== '') {
+        this.signaturePad.fromDataURL(val)
       }
-      self.watch_listener();
-      self.jsoneditor.notifyWatchers(self.path);
-      return false;
+      this.watch_listener()
+      this.jsoneditor.notifyWatchers(this.path)
+      return false
     }
-  },
-  destroy: function() {
-    var self = this, i;
-    var formname = this.formname.replace(/\W/g, '');
-    self.signaturePad.off();
-    delete self.signaturePad;
   }
-});
+
+  destroy () {
+    this.signaturePad.off()
+    delete this.signaturePad
+  }
+}

package/src/editors/simplemde.js

@@ -0,0 +1,103 @@
+import { StringEditor } from './string.js'
+import { extend } from '../utilities.js'
+
+export class SimplemdeEditor extends StringEditor {
+  setValue (value, initial, fromTemplate) {
+    value = this.applyConstFilter(value)
+
+    const res = super.setValue(value, initial, fromTemplate)
+    if (res !== undefined && res.changed && this.simplemde_instance) this.simplemde_instance.value(res.value)
+  }
+
+  build () {
+    this.options.format = 'textarea' /* Force format into "textarea" */
+    super.build()
+    this.input_type = this.schema.format /* Restore original format */
+    this.input.setAttribute('data-schemaformat', this.input_type)
+  }
+
+  afterInputReady () {
+    let options
+
+    if (window.SimpleMDE) {
+      /* Get options, either global options from "this.defaults.options.simplemde" or */
+      /* single property options from schema "options.simplemde" */
+      options = this.expandCallbacks('simplemde', extend({}, {
+        height: 300
+      }, this.defaults.options.simplemde || {}, this.options.simplemde || {}, {
+        element: this.input,
+        forceSync: true
+      }))
+
+      this.simplemde_instance = new window.SimpleMDE(options)
+
+      if (this.schema.readOnly || this.schema.readonly || this.schema.template) {
+        this.simplemde_instance.codemirror.options.readOnly = true
+      }
+
+      /* Listen for changes */
+      this.simplemde_instance.codemirror.on('change', () => {
+        this.value = this.simplemde_instance.value()
+        this.is_dirty = true
+        this.onChange(true)
+      })
+
+      /* This will prevent SimpleMDE content from being hidden until focus in Chrome */
+      /* if SimpleMDE is not visible (Like when placed inside Tabs) */
+      if (options.autorefresh) {
+        this.startListening(this.simplemde_instance.codemirror, this.simplemde_instance.codemirror.state.autoRefresh = { delay: 250 })
+      }
+
+      this.theme.afterInputReady(this.input)
+    } else super.afterInputReady() /* Library not loaded, so just treat this as a string */
+  }
+
+  getNumColumns () {
+    return 6
+  }
+
+  enable () {
+    if (!this.always_disabled && this.simplemde_instance) this.simplemde_instance.codemirror.options.readOnly = false
+    super.enable()
+  }
+
+  disable (alwaysDisabled) {
+    if (this.simplemde_instance) this.simplemde_instance.codemirror.options.readOnly = true
+    super.disable(alwaysDisabled)
+  }
+
+  destroy () {
+    if (this.simplemde_instance) {
+      this.simplemde_instance.toTextArea()
+      this.simplemde_instance = null
+    }
+    super.destroy()
+  }
+
+  /* Ported from https://codemirror.net/addon/display/autorefresh.js */
+  startListening (cm, state) {
+    const check = () => {
+      if (cm.display.wrapper.offsetHeight) {
+        this.stopListening(cm, state)
+        if (cm.display.lastWrapHeight !== cm.display.wrapper.clientHeight) {
+          cm.refresh()
+        }
+      } else {
+        state.timeout = window.setTimeout(check, state.delay)
+      }
+    }
+    state.timeout = window.setTimeout(check, state.delay)
+    state.hurry = () => {
+      window.clearTimeout(state.timeout)
+      state.timeout = window.setTimeout(check, 50)
+    }
+    cm.on(window, 'mouseup', state.hurry)
+    cm.on(window, 'keyup', state.hurry)
+  }
+
+  stopListening (cm, state) {
+    window.clearTimeout(state.timeout)
+    cm.off(window, 'mouseup', state.hurry)
+    cm.off(window, 'keyup', state.hurry)
+  }
+}

package/src/{styles → editors}/starrating.css

@@ -3,9 +3,13 @@
   display: inline-block;
   white-space:nowrap;
 }
+
 .starrating > input {
   display: none;
-}  /* Remove radio buttons */
+}
+
+/* Remove radio buttons */
+
 .starrating > label:before {
   content: '\2606'; /* Empty Star */
   margin: 1px;
@@ -16,27 +20,32 @@
   font-family: 'Arial';
   display: inline-block;
 }
+
 .starrating > label {
   color: #888; /* Start color when not clicked */
   cursor: pointer;
   margin: 0;
   margin: 8px 0 2px 0;
 }
+
 .starrating > label.starrating-display-enabled {
   margin: 1px 0 0 0;
 }
+
 .starrating > input:checked ~ label,
 .starrating:not(.readonly) > input:hover ~ label {
   color: #ffca08; /* Set yellow color when star checked/hover */
 }
+
 .starrating > input:checked ~ label:before,
 .starrating:not(.readonly) > input:hover ~ label:before {
   content: '\2605'; /* Filled Star when star checked/hover */
   text-shadow: 0 0 1px rgba(0,20,20,1);
 }
+
 .starrating .starrating-display {
   position: relative;
-  direction: rtl;     
+  direction: rtl;
   text-align: center;
   font-size: 10px;
   line-height: 0px;

package/src/editors/starrating.css.js

@@ -0,0 +1,3 @@
+/* eslint-disable */
+export default {".starrating":"direction:rtl;display:inline-block;white-space:nowrap",".starrating > input":"display:none",".starrating > label:before":"content:'%5C2606';margin:1px;font-size:18px;font-style:normal;font-weight:400;line-height:1;font-family:'Arial';display:inline-block",".starrating > label":"color:%23888;cursor:pointer;margin:8px%200%202px%200",".starrating > label.starrating-display-enabled":"margin:1px%200%200%200",".starrating > input:checked ~ label":"color:%23ffca08",".starrating:not(.readonly) > input:hover ~ label":"color:%23ffca08",".starrating > input:checked ~ label:before":"content:'%5C2605';text-shadow:0%200%201px%20rgba(0%2C20%2C20%2C1)",".starrating:not(.readonly) > input:hover ~ label:before":"content:'%5C2605';text-shadow:0%200%201px%20rgba(0%2C20%2C20%2C1)",".starrating .starrating-display":"position:relative;direction:rtl;text-align:center;font-size:10px;line-height:0px"}
+/* eslint-enable */

package/src/editors/starrating.js

@@ -1,111 +1,142 @@
-JSONEditor.defaults.editors.starrating = JSONEditor.defaults.editors.string.extend({
-  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.ratingContainer = document.createElement('div');
-    this.ratingContainer.classList.add('starrating');
-
-    this.enum_values = this.schema.enum;
-    this.radioGroup =[];
-
-    var radioInputEventhandler = function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      self.setValue(this.value);
-      self.onChange(true);
-    };
-
-    for(var i = this.enum_values.length-1; i>-1; i--) {
-
-      var id = this.key + '-' + i;
-
-      // form radio elements
-      var radioInput = this.theme.getFormInputField('radio');
-      radioInput.name = this.formname + '[starrating]';
-      radioInput.value = this.enum_values[i];
-      radioInput.id = id;
-      radioInput.addEventListener('change', radioInputEventhandler, false);
-      this.radioGroup.push(radioInput);
-
-      // form-label for radio elements
-      var radioLabel = document.createElement('label');
-      radioLabel.htmlFor = id;
-      radioLabel.title = this.enum_values[i];
-      if(this.options.displayValue) {
-        radioLabel.classList.add('starrating-display-enabled');
+import { StringEditor } from './string.js'
+import rules from './starrating.css.js'
+
+export class StarratingEditor extends StringEditor {
+  build () {
+    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')
+
+    this.ratingContainer = document.createElement('div')
+    this.ratingContainer.classList.add('starrating')
+
+    /* Emulate the old "rating" editor parameters */
+    if (this.schema.enum === undefined) {
+      let max = this.schema.maximum ? this.schema.maximum : 5
+      if (this.schema.exclusiveMaximum) max--
+      this.enum_values = []
+      for (let k = 0; k < max; k++) this.enum_values.push(k + 1)
+    } else this.enum_values = this.schema.enum
+
+    this.radioGroup = []
+
+    const radioInputEventhandler = e => {
+      e.preventDefault()
+      e.stopPropagation()
+      this.setValue(e.currentTarget.value)
+      this.onChange(true)
+    }
+
+    for (let i = this.enum_values.length - 1; i > -1; i--) {
+      const id = this.formname + (i + 1)
+
+      /* form radio elements */
+      const radioInput = this.theme.getFormInputField('radio')
+      radioInput.name = `${this.formname}[starrating]`
+      radioInput.value = this.enum_values[i]
+      radioInput.id = id
+      radioInput.addEventListener('change', radioInputEventhandler, false)
+      this.radioGroup.push(radioInput)
+
+      /* form-label for radio elements */
+      const radioLabel = document.createElement('label')
+      radioLabel.htmlFor = id
+      radioLabel.title = this.enum_values[i]
+      if (this.options.displayValue) {
+        radioLabel.classList.add('starrating-display-enabled')
       }
 
-      this.ratingContainer.appendChild(radioInput);
-      this.ratingContainer.appendChild(radioLabel);
+      const radioText = this.theme.getHiddenText('label')
+      radioText.textContent = i
 
+      radioLabel.appendChild(radioText)
+      this.ratingContainer.appendChild(radioInput)
+      this.ratingContainer.appendChild(radioLabel)
     }
 
-    if(this.options.displayValue) {
-      this.displayRating = document.createElement('div');
-      this.displayRating.classList.add('starrating-display');
-      this.displayRating.innerText = this.enum_values[0];
-      this.ratingContainer.appendChild(this.displayRating);
+    if (this.options.displayValue) {
+      this.displayRating = document.createElement('div')
+      this.displayRating.classList.add('starrating-display')
+      this.displayRating.innerText = this.enum_values[0]
+      this.ratingContainer.appendChild(this.displayRating)
     }
 
-    if(this.schema.readOnly || this.schema.readonly) {
-      this.always_disabled = true;
-      for (var j = 0; i<this.radioGroup.length; j++) {
-        this.radioGroup[j].disabled = true;
+    if (this.schema.readOnly || this.schema.readonly) {
+      this.disable(true)
+      for (let j = 0; j < this.radioGroup.length; j++) {
+        this.radioGroup[j].disabled = true
       }
-      this.ratingContainer.classList.add('readonly');
+      this.ratingContainer.classList.add('readonly')
     }
 
-    var ratingsContainerWrapper = this.theme.getContainer();
-    ratingsContainerWrapper.appendChild(this.ratingContainer);
-
-    this.input = ratingsContainerWrapper;
-    
-    this.control = this.theme.getFormControl(this.label, ratingsContainerWrapper, this.description, this.infoButton);
-    this.container.appendChild(this.control);
-  },
-  enable: function() {
-    if(!this.always_disabled) {
-      for (var i = 0; i<this.radioGroup.length; i++) {
-        this.radioGroup[i].disabled = false;
+    const ratingsContainerWrapper = this.theme.getContainer()
+    ratingsContainerWrapper.appendChild(this.ratingContainer)
+
+    this.input = ratingsContainerWrapper
+
+    this.control = this.theme.getFormControl(this.label, ratingsContainerWrapper, this.description, this.infoButton)
+    this.container.appendChild(this.control)
+
+    this.refreshValue()
+  }
+
+  enable () {
+    if (!this.always_disabled) {
+      for (let i = 0; i < this.radioGroup.length; i++) {
+        this.radioGroup[i].disabled = false
       }
-      this.ratingContainer.classList.remove('readonly');
-      this._super();
+      this.ratingContainer.classList.remove('readonly')
+      this.disabled = false
+    }
+  }
+
+  disable (alwaysDisabled) {
+    if (alwaysDisabled) this.always_disabled = true
+    for (let i = 0; i < this.radioGroup.length; i++) {
+      this.radioGroup[i].disabled = true
     }
-  },
-  disable: function(always_disabled) {
-    if(always_disabled) this.always_disabled = true;
-    for (var i = 0; i<this.radioGroup.length; i++) {
-      this.radioGroup[i].disabled = true;
+    this.ratingContainer.classList.add('readonly')
+    this.disabled = true
+  }
+
+  destroy () {
+    if (this.ratingContainer.parentNode && this.ratingContainer.parentNode.parentNode) this.ratingContainer.parentNode.parentNode.removeChild(this.ratingContainer.parentNode)
+    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()
+  }
+
+  getNumColumns () {
+    return 2
+  }
+
+  getValue () {
+    if (!this.dependenciesFulfilled) {
+      return undefined
     }
-    this.ratingContainer.classList.add('readonly');
-    this._super();
-  },
-  destroy: function() {
-    if(this.ratingContainer.parentNode && this.ratingContainer.parentNode.parentNode) this.ratingContainer.parentNode.parentNode.removeChild(this.ratingContainer.parentNode);
-    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();
-  },
-  getNumColumns: function() {
-    return 2;
-  },
-  setValue: function (val) {
-    for(var i = 0; i < this.radioGroup.length; i++) {
-
-      if(this.radioGroup[i].value == val) {
-        this.radioGroup[i].checked = true;
-        this.value = val;
-        if(this.options.displayValue) {
-          this.displayRating.innerHTML = this.value;
-        }
-        this.onChange();
-        break;
+    if (this.schema.type === 'integer') {
+      return this.value === '' ? 0 : parseInt(this.value)
+    }
+    return this.value
+  }
+
+  setValue (value) {
+    value = this.applyConstFilter(value)
+
+    this.value = value
+
+    for (let i = 0; i < this.radioGroup.length; i++) {
+      if (this.radioGroup[i].value === `${value}`) {
+        this.radioGroup[i].checked = true
+        this.value = value
+        if (this.options.displayValue) this.displayRating.innerHTML = this.value
+        break
       }
     }
+
+    super.setValue(this.value)
   }
-});
+}
+
+StarratingEditor.rules = rules

package/src/editors/stepper.js

@@ -0,0 +1,27 @@
+import { IntegerEditor } from './integer.js'
+
+export class StepperEditor extends IntegerEditor {
+  build () {
+    super.build()
+    this.input.setAttribute('type', 'number')
+    if (!this.input.getAttribute('step')) {
+      this.input.setAttribute('step', '1')
+    }
+    const stepperButtons = this.theme.getStepperButtons(this.input)
+    this.control.appendChild(stepperButtons)
+    this.stepperDown = this.control.querySelector('.stepper-down')
+    this.stepperUp = this.control.querySelector('.stepper-up')
+  }
+
+  enable () {
+    super.enable()
+    this.stepperDown.removeAttribute('disabled')
+    this.stepperUp.removeAttribute('disabled')
+  }
+
+  disable () {
+    super.disable()
+    this.stepperDown.setAttribute('disabled', true)
+    this.stepperUp.setAttribute('disabled', true)
+  }
+}