169 lines
3.4 KiB
JavaScript
169 lines
3.4 KiB
JavaScript
'use strict'
|
|
|
|
import $ from 'jquery'
|
|
import Events from '../_events'
|
|
|
|
const FormFieldUI = (($) => {
|
|
// Constants
|
|
const NAME = 'jsFormFieldUI'
|
|
const DATA_KEY = NAME
|
|
const $Html = $('html, body')
|
|
|
|
class FormFieldUI {
|
|
constructor (el) {
|
|
const ui = this
|
|
|
|
ui.$el = $(el)
|
|
ui.shown = true
|
|
|
|
ui.$el.data(DATA_KEY, ui)
|
|
// ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions');
|
|
|
|
ui.vals = {
|
|
val: ui.$el.val(),
|
|
checked: ui.$el.is(':checked'),
|
|
}
|
|
|
|
// bootstrap collapse integration
|
|
ui.$el.parents('.optionset').not('.field').removeClass('collapse')
|
|
ui.$collapse = ui.$el
|
|
.parents('.field.collapse')
|
|
.not('.composite')
|
|
.first()
|
|
if (ui.$collapse.length) {
|
|
ui.$el.removeClass('collapse')
|
|
|
|
ui.$collapse.on('show.bs.collapse', (e) => {
|
|
ui.show()
|
|
})
|
|
|
|
ui.$collapse.on('hidden.bs.collapse', (e) => {
|
|
ui.hide()
|
|
})
|
|
}
|
|
|
|
ui.$el.addClass(`${NAME}-active`)
|
|
|
|
return ui
|
|
}
|
|
|
|
// Public methods
|
|
dispose () {
|
|
const ui = this
|
|
const $el = ui.$el
|
|
|
|
$el.removeClass(`${NAME}-active`)
|
|
$.removeData($el[0], DATA_KEY)
|
|
}
|
|
|
|
show () {
|
|
const ui = this
|
|
const $el = ui.$el
|
|
|
|
ui.restore()
|
|
ui.shown = true
|
|
|
|
/* if (ui.$collapse.length) {
|
|
ui.$collapse.collapse('show');
|
|
}
|
|
|
|
if ($el.hasClass('collapse')) {
|
|
$el.collapse('show');
|
|
} */
|
|
|
|
$el.trigger(`shown.${NAME}`)
|
|
}
|
|
|
|
hide () {
|
|
const ui = this
|
|
const $el = ui.$el
|
|
|
|
ui.wipe()
|
|
ui.shown = false
|
|
|
|
/* if (ui.$collapse.length) {
|
|
ui.$collapse.collapse('hide');
|
|
}
|
|
|
|
if ($el.hasClass('collapse')) {
|
|
$el.collapse('hide');
|
|
}
|
|
|
|
$el.trigger('change'); */
|
|
$el.trigger(`hidden.${NAME}`)
|
|
}
|
|
|
|
wipe () {
|
|
const ui = this
|
|
const $el = ui.$el
|
|
|
|
ui.vals = {
|
|
name: $el.attr('name'),
|
|
val: $el.val(),
|
|
checked: $el.is(':checked'),
|
|
}
|
|
|
|
$el.val('')
|
|
$el.prop('checked', false)
|
|
}
|
|
|
|
restore () {
|
|
const ui = this
|
|
const $el = ui.$el
|
|
const checked = ui.vals.checked
|
|
|
|
$el.val(ui.vals.val)
|
|
$el.prop('checked', checked)
|
|
}
|
|
|
|
addMessage (msg, type = null, scrollTo = true) {
|
|
const ui = this
|
|
const $field = ui.$el.closest('.field')
|
|
|
|
$field.addClass('has-message')
|
|
if (msg) {
|
|
$field.append(`<div class="message alert ${type}">${msg}</div>`)
|
|
}
|
|
|
|
if (scrollTo) {
|
|
const pos = $field.offset().top
|
|
$field.focus()
|
|
$Html.scrollTop(pos - 100)
|
|
}
|
|
}
|
|
|
|
removeMessages () {
|
|
const ui = this
|
|
const $field = ui.$el.closest('.field')
|
|
|
|
$field.removeClass('has-message')
|
|
$field.find('.message').remove()
|
|
}
|
|
|
|
static _jQueryInterface () {
|
|
return this.each(function () {
|
|
// attach functionality to el
|
|
const $el = $(this)
|
|
let data = $el.data(DATA_KEY)
|
|
|
|
if (!data) {
|
|
data = new FormFieldUI(this)
|
|
$el.data(DATA_KEY, data)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// jQuery interface
|
|
$.fn[NAME] = FormFieldUI._jQueryInterface
|
|
$.fn[NAME].Constructor = FormFieldUI
|
|
$.fn[NAME].noConflict = function () {
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT
|
|
return FormFieldUI._jQueryInterface
|
|
}
|
|
|
|
return FormFieldUI
|
|
})($)
|
|
|
|
export default FormFieldUI
|