%PDF- %PDF-
| Direktori : /home/opti/workflow/src/public/app-assets/vendors/formBuilder-master/src/js/ |
| Current File : /home/opti/workflow/src/public/app-assets/vendors/formBuilder-master/src/js/controls.js |
import './control/index'
import control from './control'
import controlCustom from './control/custom'
import { unique, hyphenCase, markup as m } from './utils'
import { empty } from './dom'
/**
* control parent class for creating control panel
*/
export default class Controls {
/**
* setup instance
* @param {Object} opts
* @param {Object} d dom instance
*/
constructor(opts, d) {
this.opts = opts
this.dom = d.controls
this.custom = controlCustom
this.getClass = control.getClass
this.getRegistered = control.getRegistered
// ability for controls to have their own configuration / options
// of the format control identifier (type, or type.subtype): {options}
control.controlConfig = opts.controlConfig || {}
this.init()
}
/**
* bootstrap controls and append them
*/
init() {
this.setupControls()
this.appendControls()
}
/**
* registers controls
*/
setupControls() {
const opts = this.opts
// load in any custom specified controls, or preloaded plugin controls
control.loadCustom(opts.controls)
// register any passed custom templates & fields
if (Object.keys(opts.fields).length) {
controlCustom.register(opts.templates, opts.fields)
}
// retrieve a full list of loaded controls
const registeredControls = control.getRegistered()
this.registeredControls = registeredControls
const customFields = controlCustom.getRegistered()
if (customFields) {
jQuery.merge(registeredControls, customFields)
}
// if we support rearranging control order, add classes to support this
if (opts.sortableControls) {
this.dom.classList.add('sort-enabled')
}
// add each control to the interface
this.controlList = []
this.allControls = {}
for (let i = 0; i < registeredControls.length; i++) {
const type = registeredControls[i]
// first check if this is a custom control
let custom = controlCustom.lookup(type)
let controlClass
if (custom) {
controlClass = custom.class
} else {
custom = {}
// determine the class, icon & label for this control
controlClass = control.getClass(type)
if (!controlClass || !controlClass.active(type)) {
continue
}
}
const icon = custom.icon || controlClass.icon(type)
let label = custom.label || controlClass.label(type)
const iconClassName = !icon ? custom.iconClassName || `icon-${type.replace(/-[\d]{4}$/, '')}` : ''
// if the class has specified a custom icon, inject it into the label
if (icon) {
label = `<span class="control-icon">${icon}</span>${label}`
}
// build & insert the new list item to represent this control
const newFieldControl = m('li', m('span', label), {
className: `${iconClassName} input-control input-control-${i}`,
})
newFieldControl.dataset.type = type
this.controlList.push(type)
this.allControls[type] = newFieldControl
}
if (opts.inputSets.length) {
opts.inputSets.forEach((set, i) => {
let { name, label } = set
name = name || hyphenCase(label)
if (set.icon) {
label = `<span class="control-icon">${set.icon}</span>${label}`
}
const inputSet = m('li', label, {
className: `input-set-control input-set-${i}`,
})
inputSet.dataset.type = name
this.controlList.push(name)
this.allControls[name] = inputSet
})
}
}
/**
* Reorder the controls if the user has previously ordered them.
*
* @param {Array} controls - an array of control types
* @return {Array} ordered fields
*/
orderFields(controls) {
const opts = this.opts
const controlOrder = opts.controlOrder.concat(controls)
let fieldOrder
// retrieve any saved ordering from the session
if (window.sessionStorage) {
if (opts.sortableControls) {
fieldOrder = window.sessionStorage.getItem('fieldOrder')
} else {
window.sessionStorage.removeItem('fieldOrder')
}
}
// if we have a saved order, use it. Otherwise build the order ourselves
if (!fieldOrder) {
fieldOrder = unique(controlOrder)
} else {
fieldOrder = window.JSON.parse(fieldOrder)
fieldOrder = unique(fieldOrder.concat(controls))
fieldOrder = Object.keys(fieldOrder).map(i => fieldOrder[i])
}
// order custom fields
fieldOrder.forEach(field => {
// identify custom field
const randomKey = new RegExp('-[\\d]{4}$')
if (field.match(randomKey)) {
const baseFieldIndex = fieldOrder.indexOf(field.replace(randomKey, ''))
if (baseFieldIndex !== -1) {
fieldOrder.splice(fieldOrder.indexOf(field), 1)
fieldOrder.splice(baseFieldIndex + 1, fieldOrder.indexOf(field), field)
}
}
})
// remove disableFields
if (opts.disableFields.length) {
fieldOrder = fieldOrder.filter(type => opts.disableFields.indexOf(type) == -1)
}
return fieldOrder.filter(Boolean)
}
/**
* Adds the controls to the control list
*/
appendControls() {
empty(this.dom)
// append controls to list
this.orderFields(this.controlList).forEach(controlKey => {
const control = this.allControls[controlKey]
control && this.dom.appendChild(control)
})
}
}