2019-06-08 17:20:51 +02:00
|
|
|
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;
|
2019-11-27 06:29:20 +01:00
|
|
|
|
|
|
|
ui.$el.data(DATA_KEY, ui);
|
2019-06-08 17:20:51 +02:00
|
|
|
//ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions');
|
|
|
|
|
|
|
|
ui.vals = {
|
|
|
|
'val': ui.$el.val(),
|
|
|
|
'checked': ui.$el.is(':checked'),
|
|
|
|
};
|
|
|
|
|
2019-07-10 20:59:57 +02:00
|
|
|
// 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();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-06-08 17:20:51 +02:00
|
|
|
ui.$el.addClass(`${NAME}-active`);
|
2019-07-10 20:59:57 +02:00
|
|
|
|
|
|
|
return ui;
|
2019-06-08 17:20:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Public methods
|
|
|
|
dispose() {
|
|
|
|
const ui = this;
|
|
|
|
const $el = ui.$el;
|
|
|
|
|
|
|
|
$el.removeClass(`${NAME}-active`);
|
2019-12-02 18:01:20 +01:00
|
|
|
$.removeData($el[0], DATA_KEY);
|
2019-06-08 17:20:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
show() {
|
|
|
|
const ui = this;
|
|
|
|
const $el = ui.$el;
|
|
|
|
|
|
|
|
ui.restore();
|
|
|
|
ui.shown = true;
|
|
|
|
|
2019-07-10 20:59:57 +02:00
|
|
|
/*if (ui.$collapse.length) {
|
|
|
|
ui.$collapse.collapse('show');
|
|
|
|
}
|
|
|
|
|
2019-06-08 17:20:51 +02:00
|
|
|
if ($el.hasClass('collapse')) {
|
|
|
|
$el.collapse('show');
|
2019-07-10 20:59:57 +02:00
|
|
|
}*/
|
2019-06-08 17:20:51 +02:00
|
|
|
|
2019-08-27 17:25:41 +02:00
|
|
|
$el.trigger(`shown.${ NAME}`);
|
2019-06-08 17:20:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
hide() {
|
|
|
|
const ui = this;
|
|
|
|
const $el = ui.$el;
|
|
|
|
|
|
|
|
ui.wipe();
|
|
|
|
ui.shown = false;
|
|
|
|
|
2019-07-10 20:59:57 +02:00
|
|
|
/*if (ui.$collapse.length) {
|
|
|
|
ui.$collapse.collapse('hide');
|
|
|
|
}
|
|
|
|
|
2019-06-08 17:20:51 +02:00
|
|
|
if ($el.hasClass('collapse')) {
|
|
|
|
$el.collapse('hide');
|
|
|
|
}
|
|
|
|
|
2019-07-10 20:59:57 +02:00
|
|
|
$el.trigger('change');*/
|
2019-08-27 17:25:41 +02:00
|
|
|
$el.trigger(`hidden.${ NAME}`);
|
2019-06-08 17:20:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
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;
|
2019-07-10 20:59:57 +02:00
|
|
|
const checked = ui.vals['checked'];
|
2019-06-08 17:20:51 +02:00
|
|
|
|
|
|
|
$el.val(ui.vals['val']);
|
2019-07-10 20:59:57 +02:00
|
|
|
$el.prop('checked', checked);
|
2019-06-08 17:20:51 +02:00
|
|
|
}
|
|
|
|
|
2019-12-02 18:01:20 +01:00
|
|
|
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();
|
|
|
|
}
|
|
|
|
|
2019-06-08 17:20:51 +02:00
|
|
|
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;
|