@wirenboard/json-editor 2.5.3-wb13

package/src/editors/selectize.js

@@ -0,0 +1,112 @@
+import { SelectEditor } from './select.js'
+import { extend } from '../utilities.js'
+
+export class SelectizeEditor extends SelectEditor {
+  setValue (value, initial) {
+    if (this.selectize_instance) {
+      if (initial) this.is_dirty = false
+      else if (this.jsoneditor.options.show_errors === 'change') this.is_dirty = true
+
+      const sanitized = this.updateValue(value) /* Sets this.value to sanitized value */
+
+      this.input.value = sanitized
+
+      this.selectize_instance.clear(true)
+      this.selectize_instance.setValue(sanitized)
+
+      this.onChange(true)
+    } else super.setValue(value, initial)
+  }
+
+  afterInputReady () {
+    if (window.jQuery && window.jQuery.fn && window.jQuery.fn.selectize && !this.selectize_instance) {
+      /* Get options, either global options from "this.defaults.options.selectize" or */
+      /* single property options from schema "options.selectize" */
+      const options = this.expandCallbacks('selectize', extend({}, this.defaults.options.selectize || {}, this.options.selectize || {}))
+
+      /* New items are allowed if option "create" is true and type is "string" */
+      this.newEnumAllowed = options.create = !!options.create && this.schema.type === 'string'
+
+      this.selectize_instance = (window.jQuery(this.input).selectize(options))[0].selectize
+
+      /* Remove change handler set in parent class (src/multiselect.js) */
+      this.control.removeEventListener('change', this.multiselectChangeHandler)
+
+      /* Create a new change handler */
+      this.multiselectChangeHandler = (value) => {
+        /* var value = this.selectize_instance.getValue(true); */
+        /* this.value = value; */
+        this.updateValue(value)
+        this.onChange(true)
+      }
+
+      /* Add new event handler. */
+      /* Note: Must use the "on()" method and not addEventListener() */
+      this.selectize_instance.on('change', this.multiselectChangeHandler)
+    }
+    super.afterInputReady()
+  }
+
+  updateValue (value) {
+    let sanitized = this.enum_values[0]
+    value = this.typecast(value || '')
+    if (!this.enum_values.includes(value)) {
+      if (this.newEnumAllowed) {
+        sanitized = this.addNewOption(value) ? value : sanitized
+      }
+    } else sanitized = value
+    this.value = sanitized
+    return sanitized
+  }
+
+  addNewOption (value) {
+    const sanitized = this.typecast(value); let res = false
+
+    if (!this.enum_values.includes(sanitized) && sanitized !== '') {
+      /* Add to list of valid enum values */
+      this.enum_options.push(`${sanitized}`)
+      this.enum_display.push(`${sanitized}`)
+      this.enum_values.push(sanitized)
+      /* Update Schema enum to prevent triggering error */
+      /* "Value must be one of the enumerated values" */
+      this.schema.enum.push(sanitized)
+
+      /* Add selectize item */
+      this.selectize_instance.addItem(sanitized)
+      this.selectize_instance.refreshOptions(false)
+
+      res = true
+    }
+    return res
+  }
+
+  onWatchedFieldChange () {
+    super.onWatchedFieldChange()
+    if (this.selectize_instance) {
+      this.selectize_instance.clear(true) /* Clear selection */
+      this.selectize_instance.clearOptions(true) /* Remove all options */
+      this.enum_options.forEach((value, i) => {
+        this.selectize_instance.addOption({ value, text: this.enum_display[i] })
+      })
+      this.selectize_instance.addItem(`${this.value}`, true) /* Set new selection */
+    }
+  }
+
+  enable () {
+    if (!this.always_disabled && this.selectize_instance) this.selectize_instance.unlock()
+    super.enable()
+  }
+
+  disable (alwaysDisabled) {
+    if (this.selectize_instance) this.selectize_instance.lock()
+    super.disable(alwaysDisabled)
+  }
+
+  destroy () {
+    if (this.selectize_instance) {
+      this.selectize_instance.destroy()
+      this.selectize_instance = null
+    }
+    super.destroy()
+  }
+}

package/src/editors/signature.js

@@ -0,0 +1,113 @@
+/* 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')
+      canvas.setAttribute('name', formname)
+      canvas.classList.add('signature')
+      signatureContainer.appendChild(canvas)
+
+      this.signaturePad = new window.SignaturePad(canvas, {
+        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()
+        }
+      })
+
+      /* 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)
+
+      if (this.options.compact) this.container.setAttribute('class', `${this.container.getAttribute('class')} compact`)
+
+      if (this.schema.readOnly || this.schema.readonly) {
+        this.disable(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', (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; */
+      }
+    } else {
+      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 (val) {
+    if (typeof SignaturePad === 'function') {
+      const sanitized = this.sanitize(val)
+      if (this.value === sanitized) {
+        return
+      }
+      this.value = sanitized
+      this.input.value = this.value
+      this.signaturePad.clear()
+      /* only set contents if value != '' */
+      if (val && val !== '') {
+        this.signaturePad.fromDataURL(val)
+      }
+      this.watch_listener()
+      this.jsoneditor.notifyWatchers(this.path)
+      return false
+    }
+  }
+
+  destroy () {
+    this.signaturePad.off()
+    delete this.signaturePad
+  }
+}

package/src/editors/simplemde.js

@@ -0,0 +1,100 @@
+import { StringEditor } from './string.js'
+import { extend } from '../utilities.js'
+
+export class SimplemdeEditor extends StringEditor {
+  setValue (value, initial, fromTemplate) {
+    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
+      }))
+
+      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) {
+    function 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/editors/starrating.css

@@ -0,0 +1,52 @@
+.starrating {
+  direction: rtl;
+  display: inline-block;
+  white-space:nowrap;
+}
+
+.starrating > input {
+  display: none;
+}
+
+/* Remove radio buttons */
+
+.starrating > label:before {
+  content: '\2606'; /* Empty Star */
+  margin: 1px;
+  font-size: 18px;
+  font-style:normal;
+  font-weight:400;
+  line-height:1;
+  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;
+  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

@@ -0,0 +1,135 @@
+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.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.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)
+    }
+
+    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.disable(true)
+      for (let j = 0; j < this.radioGroup.length; j++) {
+        this.radioGroup[j].disabled = true
+      }
+      this.ratingContainer.classList.add('readonly')
+    }
+
+    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.disabled = false
+    }
+  }
+
+  disable (alwaysDisabled) {
+    if (alwaysDisabled) this.always_disabled = true
+    for (let 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
+    }
+    if (this.schema.type === 'integer') {
+      return this.value === '' ? undefined : this.value * 1
+    }
+    return this.value
+  }
+
+  setValue (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
+
+        this.onChange(true)
+        break
+      }
+    }
+  }
+}
+
+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)
+  }
+}