@wirenboard/json-editor 2.5.3-wb13

package/src/editors/datetime.js

@@ -0,0 +1,141 @@
+/*
+
+Edtended handling of date, time and datetime-local type fields.
+
+Works with both string and integer data types. (default only support string type)
+
+Has optional support for using flatpickr datepicker.
+All flatpickr options is supported with a few minor differences.
+- "enableTime" and "noCalendar" are set automatically, based on the data type.
+- Extra config option "errorDateFormat". If this is set, it will replace the format displayed in error messages.
+- It is not possible to use "inline" and "wrap" options together.
+- When using the "wrap" option, "toggle" and "clear" buttons are automatically added to markup. 2 extra boolean options ("showToggleButton" and "showClearButton") are available to control which buttons to display. Note: not all frameworks supports this. (Works in: Bootstrap and Foundation)
+- When using the "inline" option, an extra boolean option ("inlineHideInput") is available to hide the original input field.
+- If "mode" is set to either "multiple" or "range", only string data type is supported. Also the result from these is returned as a string not an array.
+
+ToDo:
+ - Improve Handling of flatpicker "multiple" and "range" modes. (Currently the values are just added as string values, but the optimal scenario would be to save those as array if possible)
+
+*/
+import { StringEditor } from './string.js'
+
+export class DatetimeEditor extends StringEditor {
+  build () {
+    super.build()
+    if (!this.input) {
+      return
+    }
+
+    if (this.schema.max && typeof this.schema.max === 'string') {
+      this.input.setAttribute('max', this.schema.max)
+    }
+
+    if (this.schema.min && typeof this.schema.max === 'string') {
+      this.input.setAttribute('min', this.schema.min)
+    }
+
+    if (window.flatpickr && typeof this.options.flatpickr === 'object') {
+      /* Make sure that flatpickr settings matches the input type */
+      this.options.flatpickr.enableTime = this.schema.format !== 'date'
+      this.options.flatpickr.noCalendar = this.schema.format === 'time'
+
+      /* Curently only string can contain range or multiple values */
+      if (this.schema.type === 'integer') this.options.flatpickr.mode = 'single'
+
+      /* Attribute for flatpicker */
+      this.input.setAttribute('data-input', '')
+
+      let { input } = this
+
+      if (this.options.flatpickr.wrap === true) {
+        /* Create buttons for input group */
+        const buttons = []
+        if (this.options.flatpickr.showToggleButton !== false) {
+          const toggleButton = this.getButton('', this.schema.format === 'time' ? 'time' : 'calendar', 'flatpickr_toggle_button')
+          /* Attribute for flatpicker */
+          toggleButton.setAttribute('data-toggle', '')
+          buttons.push(toggleButton)
+        }
+        if (this.options.flatpickr.showClearButton !== false) {
+          const clearButton = this.getButton('', 'clear', 'flatpickr_clear_button')
+          /* Attribute for flatpicker */
+          clearButton.setAttribute('data-clear', '')
+          buttons.push(clearButton)
+        }
+
+        /* Save position of input field */
+        const { parentNode } = this.input; const { nextSibling } = this.input
+
+        const buttonContainer = this.theme.getInputGroup(this.input, buttons)
+        if (buttonContainer !== undefined) {
+          /* Make sure "inline" option is turned off */
+          this.options.flatpickr.inline = false
+
+          /* Insert container at same position as input field */
+          parentNode.insertBefore(buttonContainer, nextSibling)
+
+          input = buttonContainer
+        } else {
+          this.options.flatpickr.wrap = false
+        }
+      }
+
+      this.flatpickr = window.flatpickr(input, this.options.flatpickr)
+
+      if (this.options.flatpickr.inline === true && this.options.flatpickr.inlineHideInput === true) {
+        this.input.setAttribute('type', 'hidden')
+      }
+    }
+  }
+
+  getValue () {
+    if (!this.dependenciesFulfilled) {
+      return undefined
+    }
+    if (this.schema.type === 'string') {
+      return this.value
+    }
+    if (this.value === '' || this.value === undefined) {
+      return undefined
+    }
+
+    const value = this.schema.format === 'time' ? `1970-01-01 ${this.value}` : this.value
+    return parseInt(new Date(value).getTime() / 1000)
+  }
+
+  setValue (value, initial, fromTemplate) {
+    if (this.schema.type === 'string') {
+      super.setValue(value, initial, fromTemplate)
+      if (this.flatpickr) this.flatpickr.setDate(value)
+    } else if (value > 0) {
+      const dateObj = new Date(value * 1000)
+      const year = dateObj.getFullYear()
+      const month = this.zeroPad(dateObj.getMonth() + 1)
+      const day = this.zeroPad(dateObj.getDate())
+      const hour = this.zeroPad(dateObj.getHours())
+      const min = this.zeroPad(dateObj.getMinutes())
+      const sec = this.zeroPad(dateObj.getSeconds())
+      const date = [year, month, day].join('-')
+      const time = [hour, min, sec].join(':')
+      let dateValue = `${date}T${time}`
+
+      if (this.schema.format === 'date') dateValue = date
+      else if (this.schema.format === 'time') dateValue = time
+
+      this.input.value = dateValue
+      this.refreshValue()
+      if (this.flatpickr) this.flatpickr.setDate(dateValue)
+    }
+  }
+
+  destroy () {
+    if (this.flatpickr) this.flatpickr.destroy()
+    this.flatpickr = null
+    super.destroy()
+  }
+
+  /* helper function */
+  zeroPad (value) {
+    return (`0${value}`).slice(-2)
+  }
+}

package/src/editors/describedby.js

@@ -0,0 +1,188 @@
+/* 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) {
+    if (this.editors[this.currentEditor]) {
+      this.refreshValue()
+    }
+
+    super.onChildEditorChange(editor)
+  }
+
+  refreshValue () {
+    if (this.editors[this.currentEditor]) {
+      this.value = this.editors[this.currentEditor].getValue()
+    }
+  }
+
+  setValue (val, initial) {
+    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

@@ -0,0 +1,136 @@
+/* Enum Editor (used for objects and arrays with enumerated values) */
+import { AbstractEditor } from '../editor.js'
+
+export class EnumEditor extends AbstractEditor {
+  getNumColumns () {
+    return 4
+  }
+
+  build () {
+    this.title = this.header = this.label = this.theme.getFormInputLabel(this.getTitle(), this.isRequired())
+    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 = []
+
+    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])
+    }
+
+    /* 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', 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 () {
+    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
+    }
+
+    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()
+    }
+  }
+
+  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))
+      }
+    }
+
+    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 */
+    }
+    return el
+  }
+
+  setValue (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)
+
+    super.destroy()
+  }
+}

package/src/editors/hidden.js

@@ -0,0 +1,127 @@
+/**
+ * Created by Mehmet Baker on 12.04.2017
+ */
+import { AbstractEditor } from '../editor.js'
+
+export class HiddenEditor extends AbstractEditor {
+  register () {
+    super.register()
+    if (!this.input) return
+    this.input.setAttribute('name', this.formname)
+  }
+
+  unregister () {
+    super.unregister()
+    if (!this.input) return
+    this.input.removeAttribute('name')
+  }
+
+  setValue (value, initial, fromTemplate) {
+    if (this.template && !fromTemplate) {
+      return
+    }
+
+    if (value === null || typeof value === 'undefined') value = ''
+    else if (typeof value === 'object') value = JSON.stringify(value)
+    else if (typeof value !== 'string') value = `${value}`
+
+    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
+
+    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 (value) {
+    return value
+  }
+
+  /**
+   * Re-calculates the value if needed
+   */
+  onWatchedFieldChange () {
+    let vars
+
+    /* If this editor needs to be rendered by a macro template */
+    if (this.template) {
+      vars = this.getWatchedFieldValues()
+      this.setValue(this.template(vars), false, true)
+    }
+
+    super.onWatchedFieldChange()
+  }
+
+  build () {
+    this.format = this.schema.format
+    if (!this.format && this.options.default_format) {
+      this.format = this.options.default_format
+    }
+    if (this.options.format) {
+      this.format = this.options.format
+    }
+
+    this.input_type = 'hidden'
+    this.input = this.theme.getFormInputField(this.input_type)
+
+    if (this.format) this.input.setAttribute('data-schemaformat', this.format)
+
+    this.container.appendChild(this.input)
+
+    /* Compile and store the template */
+    if (this.schema.template) {
+      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()
+    }
+  }
+}

package/src/editors/index.js

@@ -0,0 +1,81 @@
+/* Internal helper function called only here so we won't export as part of class */
+/* Previously the assignment to the JSONEditor.defaults.editors was done in each of the editor */
+/* files but doing it this way removes each of the editors' dependency on JSONEditor */
+
+import { AceEditor as ace } from './ace.js'
+import { ArrayEditor as array } from './array.js'
+import { ArrayChoicesEditor as arrayChoices } from './array/choices.js'
+import { ArraySelect2Editor as arraySelect2 } from './array/select2.js'
+import { ArraySelectizeEditor as arraySelectize } from './array/selectize.js'
+import { AutocompleteEditor as autocomplete } from './autocomplete.js'
+import { Base64Editor as base64 } from './base64.js'
+import { ButtonEditor as button } from './button.js'
+import { CheckboxEditor as checkbox } from './checkbox.js'
+import { ChoicesEditor as choices } from './choices.js'
+import { DatetimeEditor as datetime } from './datetime.js'
+import { DescribedByEditor as describedBy } from './describedby.js'
+import { EnumEditor } from './enum.js'
+import { HiddenEditor as hidden } from './hidden.js'
+import { InfoEditor as info } from './info.js'
+import { IntegerEditor as integer } from './integer.js'
+import { IpEditor as ip } from './ip.js'
+import { JoditEditor as jodit } from './jodit.js'
+import { MultipleEditor as multiple } from './multiple.js'
+import { MultiSelectEditor as multiselect } from './multiselect.js'
+import { NullEditor } from './null.js'
+import { NumberEditor as number } from './number.js'
+import { ObjectEditor as object } from './object.js'
+import { RadioEditor as radio } from './radio.js'
+import { ScEditor as sceditor } from './sceditor.js'
+import { SelectEditor as select } from './select.js'
+import { Select2Editor as select2 } from './select2.js'
+import { SelectizeEditor as selectize } from './selectize.js'
+import { SignatureEditor as signature } from './signature.js'
+import { SimplemdeEditor as simplemde } from './simplemde.js'
+import { StarratingEditor as starrating } from './starrating.js'
+import { StepperEditor as stepper } from './stepper.js'
+import { StringEditor as string } from './string.js'
+import { TableEditor as table } from './table.js'
+import { UploadEditor as upload } from './upload.js'
+import { UuidEditor as uuid } from './uuid.js'
+import { ColorEditor as colorpicker } from './colorpicker.js'
+
+export const editors = {
+  ace,
+  array,
+  arrayChoices,
+  arraySelect2,
+  arraySelectize,
+  autocomplete,
+  base64,
+  button,
+  checkbox,
+  choices,
+  datetime,
+  describedBy,
+  enum: EnumEditor,
+  hidden,
+  info,
+  integer,
+  ip,
+  jodit,
+  multiple,
+  multiselect,
+  null: NullEditor,
+  number,
+  object,
+  radio,
+  sceditor,
+  select,
+  select2,
+  selectize,
+  signature,
+  simplemde,
+  starrating,
+  stepper,
+  string,
+  table,
+  upload,
+  uuid,
+  colorpicker
+}

package/src/editors/info.js

@@ -0,0 +1,20 @@
+/* Non-Active editor for displaying text blocks in form */
+import { ButtonEditor } from './button.js'
+
+export class InfoEditor extends ButtonEditor {
+  build () {
+    this.options.compact = false
+    this.header = this.label = this.theme.getFormInputLabel(this.getTitle())
+    this.description = this.theme.getDescription(this.schema.description || '')
+    this.control = this.theme.getFormControl(this.label, this.description, null)
+    this.container.appendChild(this.control)
+  }
+
+  getTitle () {
+    return this.translateProperty(this.schema.title)
+  }
+
+  getNumColumns () {
+    return 12
+  }
+}