2019-07-10 21:00:20 +02:00
|
|
|
import $ from 'jquery';
|
|
|
|
import Events from '../_events';
|
|
|
|
|
|
|
|
const FormToggleUI = (($) => {
|
|
|
|
// Constants
|
|
|
|
const NAME = 'jsFormToggleUI';
|
|
|
|
const DATA_KEY = NAME;
|
|
|
|
const W = window;
|
|
|
|
const $Html = $('html, body');
|
|
|
|
const FieldUI = 'jsFormFieldUI';
|
|
|
|
|
|
|
|
class FormToggleUI {
|
|
|
|
|
|
|
|
constructor($el) {
|
|
|
|
const ui = this;
|
2019-10-20 01:40:40 +02:00
|
|
|
const condition = $el.data('value-toggle');
|
|
|
|
if (!condition) {
|
|
|
|
return;
|
|
|
|
}
|
2019-07-10 21:00:20 +02:00
|
|
|
|
|
|
|
ui.$el = $el;
|
|
|
|
ui.$el.data(DATA_KEY, ui);
|
|
|
|
|
|
|
|
ui.toggle();
|
|
|
|
|
2019-08-27 17:25:41 +02:00
|
|
|
ui.$el.on(`change shown.${ FieldUI } hidden.${ FieldUI}`, (e) => {
|
2019-07-10 21:00:20 +02:00
|
|
|
ui.toggle();
|
|
|
|
});
|
|
|
|
|
|
|
|
ui.$el.addClass(`${NAME}-active`);
|
|
|
|
|
|
|
|
return ui;
|
|
|
|
}
|
|
|
|
|
|
|
|
toggle() {
|
|
|
|
const ui = this;
|
|
|
|
const $el = ui.$el;
|
|
|
|
|
|
|
|
const val = ($el.attr('type') === 'checkbox') ?
|
|
|
|
($el.is(':checked') ? true : false) :
|
2019-08-27 17:25:41 +02:00
|
|
|
($el.attr('type') === 'radio' ? $Html.find(`[name="${ $el.attr('name') }"]:checked`).val() : $el.val());
|
2019-07-10 21:00:20 +02:00
|
|
|
|
|
|
|
const $dataEl = ($el.is('[type="radio"]') && $el.parents('.optionset').length) ?
|
|
|
|
$el.parents('.optionset') : $el;
|
|
|
|
|
2019-10-20 01:40:40 +02:00
|
|
|
// coditional toggler
|
|
|
|
const target = $el.data('target');
|
|
|
|
const condition = $el.data('value-toggle');
|
|
|
|
if (!condition) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// yes/no toggler
|
|
|
|
const yesNoVal = (
|
|
|
|
(condition === true && val && val !== '' && val !== '0') ||
|
|
|
|
condition === val
|
|
|
|
) ? true : false;
|
|
|
|
|
2019-07-10 21:00:20 +02:00
|
|
|
const $yesTarget = $($dataEl.data('value-toggle-yes'));
|
|
|
|
const $noTarget = $($dataEl.data('value-toggle-no'));
|
|
|
|
|
|
|
|
if (!$el.data(FieldUI).shown || typeof val === 'undefined') {
|
2019-10-20 01:40:40 +02:00
|
|
|
ui.toggleElement($yesTarget, false);
|
|
|
|
ui.toggleElement($noTarget, false);
|
2019-07-10 21:00:20 +02:00
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (yesNoVal) {
|
2019-10-20 01:40:40 +02:00
|
|
|
ui.toggleElement($yesTarget, true);
|
|
|
|
ui.toggleElement($noTarget, false);
|
2019-07-10 21:00:20 +02:00
|
|
|
} else {
|
2019-10-20 01:40:40 +02:00
|
|
|
ui.toggleElement($yesTarget, false);
|
|
|
|
ui.toggleElement($noTarget, true);
|
2019-07-10 21:00:20 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleElement($el, show) {
|
2019-10-20 01:40:40 +02:00
|
|
|
if (!$el.length) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-07-10 21:00:20 +02:00
|
|
|
const ui = this;
|
|
|
|
const action = show ? 'show' : 'hide';
|
|
|
|
|
|
|
|
$el.filter('div.collapse').each((i, el) => {
|
|
|
|
const $el = $(el);
|
|
|
|
|
|
|
|
$el.collapse(action);
|
|
|
|
});
|
|
|
|
|
2019-08-27 17:25:41 +02:00
|
|
|
$el.trigger(`${action }.${ NAME}`);
|
2019-07-10 21:00:20 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
dispose() {
|
|
|
|
const ui = this;
|
|
|
|
const $el = ui.$el;
|
|
|
|
|
|
|
|
$el.removeClass(`${NAME}-active`);
|
|
|
|
$.removeData(this._el, DATA_KEY);
|
|
|
|
this._el = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
static _jQueryInterface() {
|
|
|
|
return this.each((i, el) => {
|
|
|
|
// attach functionality to el
|
|
|
|
const $el = $(el);
|
|
|
|
let data = $el.data(DATA_KEY);
|
|
|
|
|
|
|
|
if (!data) {
|
|
|
|
data = new FormToggleUI($el);
|
|
|
|
$el.data(DATA_KEY, data);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
static validate() {
|
|
|
|
return $(Events.FORM_FIELDS).each((i, el) => {
|
|
|
|
const $el = $(el);
|
|
|
|
const name = $el.attr('name');
|
|
|
|
|
2019-08-27 17:25:41 +02:00
|
|
|
if ($(`[name="${ name }"]`).length > 1) {
|
|
|
|
console.log(`${NAME }: Module malfunction duplicate "${ name }" elements found`);
|
2019-07-10 21:00:20 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// jQuery interface
|
|
|
|
$.fn[NAME] = FormToggleUI._jQueryInterface;
|
|
|
|
$.fn[NAME].Constructor = FormToggleUI;
|
|
|
|
$.fn[NAME].noConflict = function() {
|
|
|
|
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
|
|
|
return FormToggleUI._jQueryInterface;
|
|
|
|
};
|
|
|
|
|
|
|
|
// auto-apply
|
|
|
|
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
|
|
|
//FormToggleUI.validate();
|
|
|
|
$(Events.FORM_FIELDS).filter('[data-value-toggle]').jsFormToggleUI();
|
2019-10-20 01:40:40 +02:00
|
|
|
$('[data-value-toggle]')
|
|
|
|
.not(Events.FORM_FIELDS)
|
|
|
|
.find(Events.FORM_FIELDS)
|
|
|
|
.jsFormToggleUI();
|
2019-07-10 21:00:20 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
return FormToggleUI;
|
|
|
|
})($);
|
|
|
|
|
|
|
|
export default FormToggleUI;
|