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

package/src/theme.js

@@ -1,461 +1,745 @@
-var matchKey = (function () {
-  var elem = document.documentElement;
-
-  if (elem.matches) return 'matches';
-  else if (elem.webkitMatchesSelector) return 'webkitMatchesSelector';
-  else if (elem.mozMatchesSelector) return 'mozMatchesSelector';
-  else if (elem.msMatchesSelector) return 'msMatchesSelector';
-  else if (elem.oMatchesSelector) return 'oMatchesSelector';
-})();
-
-JSONEditor.AbstractTheme = Class.extend({
-  getContainer: function() {
-    return document.createElement('div');
-  },
-  getFloatRightLinkHolder: function() {
-    var el = document.createElement('div');
-    el.style = el.style || {};
-    el.style.cssFloat = 'right';
-    el.style.marginLeft = '10px';
-    return el;
-  },
-  getModal: function() {
-    var el = document.createElement('div');
-    el.style.backgroundColor = 'white';
-    el.style.border = '1px solid black';
-    el.style.boxShadow = '3px 3px black';
-    el.style.position = 'absolute';
-    el.style.zIndex = '10';
-    el.style.display = 'none';
-    return el;
-  },
-  getGridContainer: function() {
-    var el = document.createElement('div');
-    return el;
-  },
-  getGridRow: function() {
-    var el = document.createElement('div');
-    el.classList.add('row');
-    return el;
-  },
-  getGridColumn: function() {
-    var el = document.createElement('div');
-    return el;
-  },
-  setGridColumnSize: function(el,size) {
-
-  },
-  getLink: function(text) {
-    var el = document.createElement('a');
-    el.setAttribute('href','#');
-    el.appendChild(document.createTextNode(text));
-    return el;
-  },
-  disableHeader: function(header) {
-    header.style.color = '#ccc';
-  },
-  disableLabel: function(label) {
-    label.style.color = '#ccc';
-  },
-  enableHeader: function(header) {
-    header.style.color = '';
-  },
-  enableLabel: function(label) {
-    label.style.color = '';
-  },
-  getInfoButton: function(text) {
-    var icon = document.createElement('span');
-    icon.innerText = "ⓘ";
-    icon.style.fontSize = "16px";
-    icon.style.fontWeight = "bold";
-    icon.style.padding = ".25rem";
-    icon.style.position = "relative";
-    icon.style.display = "inline-block";
-
-    var tooltip = document.createElement('span');
-    tooltip.style.fontSize = "12px";
-    icon.style.fontWeight = "normal";
-    tooltip.style["font-family"] = "sans-serif";
-    tooltip.style.visibility = "hidden";
-    tooltip.style["background-color"] = "rgba(50, 50, 50, .75)";
-    tooltip.style.margin = "0 .25rem";
-    tooltip.style.color = "#FAFAFA";
-    tooltip.style.padding = ".5rem 1rem";
-    tooltip.style["border-radius"] = ".25rem";
-    tooltip.style.width = "20rem";
-    tooltip.style.position = "absolute";
-    tooltip.innerText = text;
-    icon.onmouseover = function() {
-      tooltip.style.visibility = "visible";
-    };
-    icon.onmouseleave = function() {
-      tooltip.style.visibility = "hidden";
-    };
-
-    icon.appendChild(tooltip);
-
-    return icon;
-  },
-  getFormInputLabel: function(text) {
-    var el = document.createElement('label');
-    el.appendChild(document.createTextNode(text));
-    return el;
-  },
-  getCheckboxLabel: function(text) {
-    var el = this.getFormInputLabel(text);
-    el.style.fontWeight = 'normal';
-    return el;
-  },
-  getHeader: function(text) {
-    var el = document.createElement('h3');
-    if(typeof text === "string") {
-      el.textContent = text;
+import { trigger } from './utilities'
+
+const matchKey = [
+  'matches',
+  'webkitMatchesSelector',
+  'mozMatchesSelector',
+  'msMatchesSelector',
+  'oMatchesSelector'].find(key => key in document.documentElement)
+
+export class AbstractTheme {
+  constructor (jsoneditor, options = { disable_theme_rules: false }) {
+    this.jsoneditor = jsoneditor
+    Object.keys(options).forEach(key => {
+      if (typeof jsoneditor.options[key] !== 'undefined') {
+        options[key] = jsoneditor.options[key]
+      }
+    })
+    /* Theme config options that allows changing various aspects of the output */
+    this.options = options
+  }
+
+  getContainer () {
+    return document.createElement('div')
+  }
+
+  getOptInCheckbox (formname) {
+    const container = document.createElement('span')
+
+    const label = this.getHiddenLabel(formname + ' opt-in')
+    label.setAttribute('for', formname + '-opt-in')
+    label.textContent = formname + '-opt-in'
+
+    const checkbox = document.createElement('input')
+    checkbox.setAttribute('type', 'checkbox')
+    checkbox.setAttribute('style', 'margin: 0 10px 0 0;')
+    checkbox.setAttribute('id', formname + '-opt-in')
+    checkbox.classList.add('json-editor-opt-in')
+
+    container.appendChild(checkbox)
+    container.appendChild(label)
+
+    return { label, checkbox, container }
+  }
+
+  getOptInSwitch (formname) {
+    return this.getOptInCheckbox()
+  }
+
+  getFloatRightLinkHolder () {
+    const el = document.createElement('div')
+    el.classList.add('je-float-right-linkholder')
+    return el
+  }
+
+  getModal () {
+    const el = document.createElement('div')
+    el.style.display = 'none'
+    el.classList.add('je-modal')
+    return el
+  }
+
+  getGridContainer () {
+    const el = document.createElement('div')
+    return el
+  }
+
+  getGridRow () {
+    const el = document.createElement('div')
+    el.classList.add('row')
+    return el
+  }
+
+  getGridColumn () {
+    const el = document.createElement('div')
+    return el
+  }
+
+  setGridColumnSize (el, size) {
+  }
+
+  getLink (text) {
+    const el = document.createElement('a')
+    el.setAttribute('href', '#')
+    el.appendChild(document.createTextNode(text))
+    return el
+  }
+
+  disableHeader (header) {
+    header.style.color = '#ccc'
+  }
+
+  disableLabel (label) {
+    label.style.color = '#ccc'
+  }
+
+  enableHeader (header) {
+    header.style.color = ''
+  }
+
+  enableLabel (label) {
+    label.style.color = ''
+  }
+
+  getInfoButton (text) {
+    const icon = document.createElement('span')
+    icon.innerText = 'ⓘ'
+    icon.classList.add('je-infobutton-icon')
+
+    const tooltip = document.createElement('span')
+    tooltip.classList.add('je-infobutton-tooltip')
+    tooltip.innerText = text
+    icon.onmouseover = () => {
+      tooltip.style.visibility = 'visible'
+    }
+    icon.onmouseleave = () => {
+      tooltip.style.visibility = 'hidden'
     }
-    else {
-      el.appendChild(text);
+
+    icon.appendChild(tooltip)
+
+    return icon
+  }
+
+  getFormInputLabel (text, req) {
+    const el = document.createElement('label')
+    el.appendChild(document.createTextNode(text))
+    if (req) el.classList.add('required')
+    return el
+  }
+
+  getLabelLike (text, req) {
+    const el = document.createElement('b')
+    el.appendChild(document.createTextNode(text))
+    if (req) el.classList.add('required')
+    return el
+  }
+
+  getHeader (text, pathDepth) {
+    const el = document.createElement('span')
+    if (typeof text === 'string') {
+      el.textContent = text
+    } else {
+      el.appendChild(text)
     }
+    el.classList.add('je-header')
+
+    return el
+  }
+
+  getCheckbox () {
+    const el = this.getFormInputField('checkbox')
+    el.classList.add('je-checkbox')
+    return el
+  }
+
+  getCheckboxLabel (text, req) {
+    const el = document.createElement('label')
+    el.appendChild(document.createTextNode(`\u00A0${text}`))
+    if (req) el.classList.add('required')
+    return el
+  }
+
+  getMultiCheckboxHolder (controls, label, description, infoText) {
+    const el = document.createElement('div')
+    el.classList.add('control-group')
 
-    return el;
-  },
-  getCheckbox: function() {
-    var el = this.getFormInputField('checkbox');
-    el.style.display = 'inline-block';
-    el.style.width = 'auto';
-    return el;
-  },
-  getMultiCheckboxHolder: function(controls,label,description) {
-    var el = document.createElement('div');
-
-    if(label) {
-      label.style.display = 'block';
-      el.appendChild(label);
+    if (label) {
+      label.style.display = 'block'
+      el.appendChild(label)
+      if (infoText) label.appendChild(infoText)
     }
 
-    for(var i in controls) {
-      if(!controls.hasOwnProperty(i)) continue;
-      controls[i].style.display = 'inline-block';
-      controls[i].style.marginRight = '20px';
-      el.appendChild(controls[i]);
+    Object.values(controls).forEach(control => {
+      control.style.display = 'inline-block'
+      control.style.marginRight = '20px'
+      el.appendChild(control)
+    })
+
+    if (description) el.appendChild(description)
+
+    return el
+  }
+
+  getFormCheckboxControl (label, input, compact) {
+    const el = document.createElement('div')
+    el.appendChild(label)
+    input.style.width = 'auto'
+    label.insertBefore(input, label.firstChild)
+    if (compact) {
+      el.classList.add('je-checkbox-control--compact')
     }
 
-    if(description) el.appendChild(description);
-
-    return el;
-  },
-  getSelectInput: function(options) {
-    var select = document.createElement('select');
-    if(options) this.setSelectOptions(select, options);
-    return select;
-  },
-  getSwitcher: function(options) {
-    var switcher = this.getSelectInput(options);
-    switcher.style.backgroundColor = 'transparent';
-    switcher.style.display = 'inline-block';
-    switcher.style.fontStyle = 'italic';
-    switcher.style.fontWeight = 'normal';
-    switcher.style.height = 'auto';
-    switcher.style.marginBottom = 0;
-    switcher.style.marginLeft = '5px';
-    switcher.style.padding = '0 0 0 3px';
-    switcher.style.width = 'auto';
-    return switcher;
-  },
-  getSwitcherOptions: function(switcher) {
-    return switcher.getElementsByTagName('option');
-  },
-  setSwitcherOptions: function(switcher, options, titles) {
-    this.setSelectOptions(switcher, options, titles);
-  },
-  setSelectOptions: function(select, options, titles) {
-    titles = titles || [];
-    select.innerHTML = '';
-    for(var i=0; i<options.length; i++) {
-      var option = document.createElement('option');
-      option.setAttribute('value',options[i]);
-      option.textContent = titles[i] || options[i];
-      select.appendChild(option);
+    return el
+  }
+
+  getFormRadio (attributes) {
+    const el = this.getFormInputField('radio')
+    Object.keys(attributes).forEach(key => el.setAttribute(key, attributes[key]))
+    el.classList.add('je-radio')
+    return el
+  }
+
+  getFormRadioLabel (text, req) {
+    const el = document.createElement('label')
+    el.appendChild(document.createTextNode(`\u00A0${text}`))
+    if (req) el.classList.add('required')
+    return el
+  }
+
+  getFormRadioControl (label, input, compact, formName) {
+    const el = document.createElement('div')
+    el.appendChild(label)
+    input.style.width = 'auto'
+    label.insertBefore(input, label.firstChild)
+    if (compact) {
+      el.classList.add('je-radio-control--compact')
+    }
+
+    if (input.tagName.toLowerCase() !== 'div' && formName && label && input) {
+      input.setAttribute('id', formName)
+      input.setAttribute('aria-labelledby', formName)
+      label.setAttribute('for', formName)
+    }
+
+    return el
+  }
+
+  getSelectInput (options, multiple, hasPlaceholderOption = false) {
+    const select = document.createElement('select')
+    if (options) this.setSelectOptions(select, options, [], hasPlaceholderOption)
+    return select
+  }
+
+  getSwitcher (options) {
+    const switcher = this.getSelectInput(options, false)
+    switcher.classList.add('je-switcher')
+    return switcher
+  }
+
+  getSwitcherOptions (switcher) {
+    return switcher.getElementsByTagName('option')
+  }
+
+  setSwitcherOptions (switcher, options, titles) {
+    this.setSelectOptions(switcher, options, titles)
+  }
+
+  setSelectOptions (select, options, titles = [], hasPlaceholderOption = false, placeholderOptionText = ' ') {
+    select.innerHTML = ''
+
+    if (hasPlaceholderOption) {
+      const option = document.createElement('option')
+      option.setAttribute('value', '_placeholder_')
+      option.textContent = placeholderOptionText
+      option.setAttribute('disabled', '')
+      option.setAttribute('hidden', '')
+      select.appendChild(option)
+    }
+
+    for (let i = 0; i < options.length; i++) {
+      const option = document.createElement('option')
+      option.setAttribute('value', options[i])
+      option.textContent = titles[i] || options[i]
+      select.appendChild(option)
+    }
+  }
+
+  getTextareaInput () {
+    const el = document.createElement('textarea')
+    el.classList.add('je-textarea')
+    return el
+  }
+
+  getHiddenLabel (text) {
+    const el = document.createElement('label')
+    el.textContent = text
+    el.setAttribute('style', 'position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;')
+    return el
+  }
+
+  visuallyHidden (element) {
+    if (!element) {
+      return
+    }
+
+    element.setAttribute('style', 'position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;')
+  }
+
+  getHiddenText (text) {
+    const el = document.createElement('span')
+    el.textContent = text
+    el.setAttribute('style', 'position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);border: 0;')
+    return el
+  }
+
+  getRangeInput (min, max, step, description, formName) {
+    const el = this.getFormInputField('range')
+    el.setAttribute('min', min)
+    el.setAttribute('max', max)
+    el.setAttribute('step', step)
+
+    if (description) {
+      description.setAttribute('id', formName + '-description')
+      el.setAttribute('aria-describedby', formName + '-description')
+    }
+
+    return el
+  }
+
+  getStepperButtons (input) {
+    const div = document.createElement('div')
+
+    const minusBtn = document.createElement('button')
+    minusBtn.setAttribute('type', 'button')
+    minusBtn.classList.add('stepper-down')
+
+    const plusBtn = document.createElement('button')
+    plusBtn.setAttribute('type', 'button')
+    plusBtn.classList.add('stepper-up')
+
+    const readonly = input.getAttribute('readonly')
+
+    if (readonly) {
+      minusBtn.setAttribute('disabled', true)
+      plusBtn.setAttribute('disabled', true)
+    }
+
+    minusBtn.textContent = '-'
+    plusBtn.textContent = '+'
+
+    const initialize = (input, min) => {
+      if (min) {
+        input.value = Number(min)
+      } else {
+        input.value = Number(input.value)
+      }
+      input.setAttribute('initialized', '1')
+    }
+
+    const min = input.getAttribute('min')
+    const max = input.getAttribute('max')
+
+    minusBtn.addEventListener('click', () => {
+      if (!input.getAttribute('initialized')) {
+        initialize(input, min)
+      } else if (min) {
+        if (Number(input.value) > Number(min)) {
+          input.stepDown()
+        }
+      } else {
+        input.stepDown()
+      }
+      trigger(input, 'change')
+    })
+
+    plusBtn.addEventListener('click', () => {
+      if (!input.getAttribute('initialized')) {
+        initialize(input, min)
+      } else if (max) {
+        if (Number(input.value) < Number(max)) {
+          input.stepUp()
+        }
+      } else {
+        input.stepUp()
+      }
+      trigger(input, 'change')
+    })
+
+    div.appendChild(minusBtn)
+    div.appendChild(plusBtn)
+    return div
+  }
+
+  getRangeOutput (input) {
+    const output = document.createElement('output')
+    const updateOutput = e => { output.value = e.currentTarget.value }
+    input.addEventListener('change', updateOutput, false)
+    input.addEventListener('input', updateOutput, false)
+    return output
+  }
+
+  getRangeControl (input, output) {
+    const el = document.createElement('div')
+    el.classList.add('je-range-control')
+    if (output) el.appendChild(output)
+    el.appendChild(input)
+    return el
+  }
+
+  getFormInputField (type) {
+    const el = document.createElement('input')
+    el.setAttribute('type', type)
+    return el
+  }
+
+  afterInputReady (input) {
+
+  }
+
+  getFormControl (label, input, description, infoText, formName) {
+    const el = document.createElement('div')
+    el.classList.add('form-control')
+    if (label) {
+      el.appendChild(label)
+      if (formName) label.setAttribute('for', formName)
     }
-  },
-  getTextareaInput: function() {
-    var el = document.createElement('textarea');
-    el.style = el.style || {};
-    el.style.width = '100%';
-    el.style.height = '300px';
-    el.style.boxSizing = 'border-box';
-    return el;
-  },
-  getRangeInput: function(min,max,step) {
-    var el = this.getFormInputField('range');
-    el.setAttribute('min',min);
-    el.setAttribute('max',max);
-    el.setAttribute('step',step);
-    return el;
-  },
-  getFormInputField: function(type) {
-    var el = document.createElement('input');
-    el.setAttribute('type',type);
-    return el;
-  },
-  afterInputReady: function(input) {
-
-  },
-  getFormControl: function(label, input, description, infoText) {
-    var el = document.createElement('div');
-    el.classList.add('form-control');
-    if(label) el.appendChild(label);
-    if(input.type === 'checkbox' && label) {
-      label.insertBefore(input,label.firstChild);
-      if(infoText) label.appendChild(infoText);
+    if ((input.type === 'checkbox' || input.type === 'radio') && label) {
+      input.style.width = 'auto'
+      label.insertBefore(input, label.firstChild)
+      if (infoText) label.appendChild(infoText)
+    } else {
+      if (infoText && label) label.appendChild(infoText)
+      el.appendChild(input)
+    }
+
+    if (input.tagName.toLowerCase() !== 'div' && input && label && formName) {
+      label.setAttribute('for', formName)
+      input.setAttribute('id', formName)
     }
-    else {
-      if(infoText) label.appendChild(infoText);
-      el.appendChild(input);
+
+    if (input.tagName.toLowerCase() !== 'div' && input && description) {
+      description.setAttribute('id', formName + '-description')
+      input.setAttribute('aria-describedby', formName + '-description')
     }
 
-    if(description) el.appendChild(description);
-    return el;
-  },
-  getIndentedPanel: function() {
-    var el = document.createElement('div');
-    el.style = el.style || {};
-    el.style.paddingLeft = '10px';
-    el.style.marginLeft = '10px';
-    el.style.borderLeft = '1px solid #ccc';
-    return el;
-  },
-  getTopIndentedPanel: function() {
-    var el = document.createElement('div');
-    el.style = el.style || {};
-    el.style.paddingLeft = '10px';
-    el.style.marginLeft = '10px';
-    return el;
-  },
-  getChildEditorHolder: function() {
-    return document.createElement('div');
-  },
-  getDescription: function(text) {
-    var el = document.createElement('p');
-    if (window.DOMPurify) el.innerHTML = window.DOMPurify.sanitize(text);
-    else el.textContent = this.cleanText(text);
-    return el;
-  },
-  getCheckboxDescription: function(text) {
-    return this.getDescription(text);
-  },
-  getFormInputDescription: function(text) {
-    return this.getDescription(text);
-  },
-  getHeaderButtonHolder: function() {
-    return this.getButtonHolder();
-  },
-  getButtonHolder: function() {
-    return document.createElement('div');
-  },
-  getButton: function(text, icon, title) {
-    var el = document.createElement('button');
-    el.type = 'button';
-    this.setButtonText(el,text,icon,title);
-    return el;
-  },
-  setButtonText: function(button, text, icon, title) {
-    // Clear previous contents. https://jsperf.com/innerhtml-vs-removechild/37
+    if (description) el.appendChild(description)
+    return el
+  }
+
+  getIndentedPanel () {
+    const el = document.createElement('div')
+    el.classList.add('je-indented-panel')
+    return el
+  }
+
+  getTopIndentedPanel () {
+    const el = document.createElement('div')
+    el.classList.add('je-indented-panel--top')
+    return el
+  }
+
+  getChildEditorHolder () {
+    return document.createElement('div')
+  }
+
+  getDescription (text) {
+    const el = document.createElement('p')
+    if (window.DOMPurify) el.innerHTML = window.DOMPurify.sanitize(text)
+    else el.textContent = this.cleanText(text)
+    return el
+  }
+
+  getCheckboxDescription (text) {
+    return this.getDescription(text)
+  }
+
+  getFormInputDescription (text) {
+    return this.getDescription(text)
+  }
+
+  getButtonHolder () {
+    return document.createElement('span')
+  }
+
+  getHeaderButtonHolder () {
+    return this.getButtonHolder()
+  }
+
+  getFormButtonHolder (buttonAlign) {
+    return this.getButtonHolder()
+  }
+
+  getButton (text, icon, title) {
+    const el = document.createElement('button')
+    el.type = 'button'
+    this.setButtonText(el, text, icon, title)
+    return el
+  }
+
+  getFormButton (text, icon, title) {
+    return this.getButton(text, icon, title)
+  }
+
+  setButtonText (button, text, icon, title) {
+    /* Clear previous contents. https://jsperf.com/innerhtml-vs-removechild/37 */
     while (button.firstChild) {
-      button.removeChild(button.firstChild);
+      button.removeChild(button.firstChild)
     }
-    if(icon) {
-      button.appendChild(icon);
-      text = ' ' + text;
+    if (icon) {
+      button.appendChild(icon)
+      text = ` ${text}`
     }
-    var spanEl = document.createElement('span');
-    spanEl.appendChild(document.createTextNode(text));
-    button.appendChild(spanEl);
-    if(title) button.setAttribute('title',title);
-  },
-  getTable: function() {
-    return document.createElement('table');
-  },
-  getTableRow: function() {
-    return document.createElement('tr');
-  },
-  getTableHead: function() {
-    return document.createElement('thead');
-  },
-  getTableBody: function() {
-    return document.createElement('tbody');
-  },
-  getTableHeaderCell: function(text) {
-    var el = document.createElement('th');
-    el.textContent = text;
-    return el;
-  },
-  getTableCell: function() {
-    var el = document.createElement('td');
-    return el;
-  },
-  getErrorMessage: function(text) {
-    var el = document.createElement('p');
-    el.style = el.style || {};
-    el.style.color = 'red';
-    el.appendChild(document.createTextNode(text));
-    return el;
-  },
-  addInputError: function(input, text) {
-  },
-  removeInputError: function(input) {
-  },
-  addTableRowError: function(row) {
-  },
-  removeTableRowError: function(row) {
-  },
-  getTabHolder: function(propertyName) {
-    var pName = (typeof propertyName === 'undefined')? "" : propertyName;
-    var el = document.createElement('div');
-    el.innerHTML = "<div style='float: left; width: 130px;' class='tabs' id='" + pName + "'></div><div class='content' style='margin-left: 120px;' id='" + pName + "'></div><div style='clear:both;'></div>";
-    return el;
-  },
-  getTopTabHolder: function(propertyName) {
-    var pName = (typeof propertyName === 'undefined')? "" : propertyName;
-    var el = document.createElement('div');
-    el.innerHTML = "<div class='tabs' style='margin-left: 10px;' id='" + pName + "'></div><div style='clear:both;'></div><div class='content' id='" + pName + "'></div>";
-    return el;
-  },
-  applyStyles: function(el,styles) {
-    for(var i in styles) {
-      if(!styles.hasOwnProperty(i)) continue;
-      el.style[i] = styles[i];
+    if (!this.jsoneditor.options.iconlib || !this.jsoneditor.options.remove_button_labels || !icon) {
+      const spanEl = document.createElement('span')
+      spanEl.appendChild(document.createTextNode(text))
+      button.appendChild(spanEl)
     }
-  },
-  closest: function(elem, selector) {
+    if (title) button.setAttribute('title', title)
+  }
+
+  getTableContainer () {
+    return document.createElement('div')
+  }
+
+  /* Table functions */
+  getTable () {
+    return document.createElement('table')
+  }
+
+  getTableRow () {
+    return document.createElement('tr')
+  }
+
+  getTableHead () {
+    return document.createElement('thead')
+  }
+
+  getTableBody () {
+    return document.createElement('tbody')
+  }
+
+  getTableHeaderCell (text) {
+    const el = document.createElement('th')
+    el.textContent = text
+    return el
+  }
+
+  getTableCell () {
+    const el = document.createElement('td')
+    return el
+  }
+
+  getErrorMessage (text) {
+    const el = document.createElement('p')
+    el.style = el.style || {}
+    el.style.color = 'red'
+    el.appendChild(document.createTextNode(text))
+    return el
+  }
+
+  addInputError (input, text) {
+    input.errmsg.setAttribute('role', 'alert')
+  }
+
+  removeInputError (input) {
+  }
+
+  addTableRowError (row) {
+  }
+
+  removeTableRowError (row) {
+  }
+
+  getTabHolder (propertyName) {
+    const pName = (typeof propertyName === 'undefined') ? '' : propertyName
+    const el = document.createElement('div')
+    el.innerHTML = `<div class='je-tabholder tabs'></div><div class='content' id='${pName}'></div><div class='je-tabholder--clear'></div>`
+    return el
+  }
+
+  getTopTabHolder (propertyName) {
+    const pName = (typeof propertyName === 'undefined') ? '' : propertyName
+    const el = document.createElement('div')
+    el.innerHTML = `<div class='tabs je-tabholder--top'></div><div class='je-tabholder--clear'></div><div class='content' id='${pName}'></div>`
+    return el
+  }
+
+  applyStyles (el, styles) {
+    Object.keys(styles).forEach(i => (el.style[i] = styles[i]))
+  }
+
+  closest (elem, selector) {
     while (elem && elem !== document) {
       if (elem[matchKey]) {
         if (elem[matchKey](selector)) {
-          return elem;
+          return elem
         } else {
-          elem = elem.parentNode;
+          elem = elem.parentNode
         }
-      }
-      else {
-        return false;
+      } else {
+        return false
       }
     }
-    return false;
-  },
-  insertBasicTopTab: function(tab, newTabs_holder ) {
-    newTabs_holder.firstChild.insertBefore(tab,newTabs_holder.firstChild.firstChild);
-  },
-  getTab: function(span, tabId) {
-    var el = document.createElement('div');
-    el.appendChild(span);
-    el.id = tabId;
-    el.style = el.style || {};
-    this.applyStyles(el,{
-      border: '1px solid #ccc',
-      borderWidth: '1px 0 1px 1px',
-      textAlign: 'center',
-      lineHeight: '30px',
-      borderRadius: '5px',
-      borderBottomRightRadius: 0,
-      borderTopRightRadius: 0,
-      fontWeight: 'bold',
-      cursor: 'pointer'
-    });
-    return el;
-  },
-  getTopTab: function(span, tabId) {
-    var el = document.createElement('div');
-    el.id = tabId;
-    el.appendChild(span);
-    el.style = el.style || {};
-    this.applyStyles(el,{
-      float: 'left',
-      border: '1px solid #ccc',
-      borderWidth: '1px 1px 0px 1px',
-      textAlign: 'center',
-      lineHeight: '30px',
-      borderRadius: '5px',
-      paddingLeft:'5px',
-      paddingRight:'5px',
-      borderBottomRightRadius: 0,
-      borderBottomLeftRadius: 0,
-      fontWeight: 'bold',
-      cursor: 'pointer'
-    });
-    return el;
-  },
-  getTabContentHolder: function(tab_holder) {
-    return tab_holder.children[1];
-  },
-  getTopTabContentHolder: function(tab_holder) {
-    return tab_holder.children[1];
-  },
-  getTabContent: function() {
-    return this.getIndentedPanel();
-  },
-  getTopTabContent: function() {
-    return this.getTopIndentedPanel();
-  },
-  markTabActive: function(row) {
-    this.applyStyles(row.tab,{
+    return false
+  }
+
+  insertBasicTopTab (tab, newTabsHolder) {
+    newTabsHolder.firstChild.insertBefore(tab, newTabsHolder.firstChild.firstChild)
+  }
+
+  getTab (span, tabId) {
+    const el = document.createElement('div')
+    el.appendChild(span)
+    el.id = tabId
+    el.classList.add('je-tab')
+    return el
+  }
+
+  getTopTab (span, tabId) {
+    const el = document.createElement('div')
+    el.appendChild(span)
+    el.id = tabId
+    el.classList.add('je-tab--top')
+    return el
+  }
+
+  getTabContentHolder (tabHolder) {
+    return tabHolder.children[1]
+  }
+
+  getTopTabContentHolder (tabHolder) {
+    return tabHolder.children[1]
+  }
+
+  getTabContent () {
+    return this.getIndentedPanel()
+  }
+
+  getTopTabContent () {
+    return this.getTopIndentedPanel()
+  }
+
+  markTabActive (row) {
+    this.applyStyles(row.tab, {
       opacity: 1,
       background: 'white'
-    });
-    if(typeof row.rowPane !== 'undefined'){
-      row.rowPane.style.display = '';
+    })
+    if (typeof row.rowPane !== 'undefined') {
+      row.rowPane.style.display = ''
+    } else {
+      row.container.style.display = ''
     }
-    else {
-      row.container.style.display = '';
-    }
-  },
-  markTabInactive: function(row) {
-    this.applyStyles(row.tab,{
-      opacity:0.5,
+  }
+
+  markTabInactive (row) {
+    this.applyStyles(row.tab, {
+      opacity: 0.5,
       background: ''
-    });
-    if(typeof row.rowPane !== 'undefined'){
-      row.rowPane.style.display = 'none';
+    })
+    if (typeof row.rowPane !== 'undefined') {
+      row.rowPane.style.display = 'none'
+    } else {
+      row.container.style.display = 'none'
     }
-    else {
-      row.container.style.display = 'none';
+  }
+
+  addTab (holder, tab) {
+    holder.children[0].appendChild(tab)
+  }
+
+  addTopTab (holder, tab) {
+    holder.children[0].appendChild(tab)
+  }
+
+  getBlockLink () {
+    const link = document.createElement('a')
+    link.classList.add('je-block-link')
+    return link
+  }
+
+  getBlockLinkHolder () {
+    const el = document.createElement('div')
+    return el
+  }
+
+  getLinksHolder () {
+    const el = document.createElement('div')
+    return el
+  }
+
+  createMediaLink (holder, link, media) {
+    holder.appendChild(link)
+    media.classList.add('je-media')
+    holder.appendChild(media)
+  }
+
+  createImageLink (holder, link, image) {
+    holder.appendChild(link)
+    link.appendChild(image)
+  }
+
+  getFirstTab (holder) {
+    return holder.firstChild.firstChild
+  }
+
+  getInputGroup (input, buttons) {
+    return undefined
+  }
+
+  cleanText (txt) {
+    /* Clean out HTML tags from txt */
+    const tmp = document.createElement('div')
+    tmp.innerHTML = txt
+    return (tmp.textContent || tmp.innerText)
+  }
+
+  getDropZone (text) {
+    const el = document.createElement('div')
+    el.setAttribute('data-text', text)
+    el.classList.add('je-dropzone')
+    return el
+  }
+
+  /* file is an object with properties: name, type, mimeType, size amd formattedSize */
+  getUploadPreview (file, uploadButton, data) {
+    const preview = document.createElement('div')
+    preview.classList.add('je-upload-preview')
+
+    if (file.mimeType.substr(0, 5) === 'image') {
+      const img = document.createElement('img')
+      img.src = data
+      preview.appendChild(img)
     }
-  },
-  addTab: function(holder, tab) {
-    holder.children[0].appendChild(tab);
-  },
-  addTopTab: function(holder, tab) {
-    holder.children[0].appendChild(tab);
-  },
-  getBlockLink: function() {
-    var link = document.createElement('a');
-    link.style.display = 'block';
-    return link;
-  },
-  getBlockLinkHolder: function() {
-    var el = document.createElement('div');
-    return el;
-  },
-  getLinksHolder: function() {
-    var el = document.createElement('div');
-    return el;
-  },
-  createMediaLink: function(holder,link,media) {
-    holder.appendChild(link);
-    media.style.width='100%';
-    holder.appendChild(media);
-  },
-  createImageLink: function(holder,link,image) {
-    holder.appendChild(link);
-    link.appendChild(image);
-  },
-  getFirstTab: function(holder){
-    return holder.firstChild.firstChild;
-  },
-  getInputGroup: function(input, buttons) {
-    return undefined;
-  },
-  cleanText: function(txt) {
-    // Clean out HTML tags from txt
-    var tmp = document.createElement('div');
-    tmp.innerHTML = txt;
-    return (tmp.textContent || tmp.innerText);
-  }
-});
+    const info = document.createElement('div')
+    info.innerHTML += `<strong>Name:</strong> ${file.name}<br><strong>Type:</strong> ${file.type}<br><strong>Size:</strong> ${file.formattedSize}`
+    preview.appendChild(info)
+
+    preview.appendChild(uploadButton)
+
+    const clear = document.createElement('div')
+    clear.style.clear = 'left'
+    preview.appendChild(clear)
+
+    return preview
+  }
+
+  getProgressBar () {
+    const max = 100; const start = 0
+
+    const progressBar = document.createElement('progress')
+    progressBar.setAttribute('max', max)
+    progressBar.setAttribute('value', start)
+    return progressBar
+  }
+
+  updateProgressBar (progressBar, progress) {
+    if (!progressBar) return
+    progressBar.setAttribute('value', progress)
+  }
+
+  updateProgressBarUnknown (progressBar) {
+    if (!progressBar) return
+    progressBar.removeAttribute('value')
+  }
+}