mirror of
https://github.com/a2nt/webpack-bootstrap-ui-kit.git
synced 2024-10-22 11:05:45 +02:00
Form toggle bugfixtures
This commit is contained in:
Tony Air
parent
79608a337f
commit
5c6a03af18
@ -2,6 +2,12 @@
|
||||
// http://eslint.org/docs/rules/
|
||||
"extends": "eslint:recommended",
|
||||
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "detect"
|
||||
}
|
||||
},
|
||||
|
||||
"env": {
|
||||
"browser": true, // browser global variables.
|
||||
"node": true, // Node.js global variables and Node.js-specific rules.
|
||||
|
||||
@ -20,104 +20,29 @@ const FormBasics = (($) => {
|
||||
|
||||
class FormBasics {
|
||||
|
||||
constructor(element) {
|
||||
constructor(el) {
|
||||
const ui = this;
|
||||
const $element = $(element);
|
||||
const $el = $(el);
|
||||
|
||||
ui._element = element;
|
||||
$element.data(DATA_KEY, this);
|
||||
ui._el = el;
|
||||
$el.data(DATA_KEY, this);
|
||||
|
||||
$('[data-inputmask]').inputmask();
|
||||
|
||||
const $fields = $element.find(Events.FORM_FIELDS);
|
||||
const $fields = $el.find(Events.FORM_FIELDS);
|
||||
// init fields ui
|
||||
$fields.each((i, el) => {
|
||||
// skip some fields here
|
||||
new FormFieldUI(el);
|
||||
});
|
||||
|
||||
const $selectFields = $element.find('select:not([readonly])');
|
||||
const $radioOptions = $element.find('input[type="radio"]');
|
||||
const $selectFields = $el.find('select:not([readonly])');
|
||||
const $radioOptions = $el.find('input[type="radio"]');
|
||||
|
||||
$selectFields.each((i, el) => {
|
||||
const $el = $(el);
|
||||
$el.select2();
|
||||
$(el).select2();
|
||||
});
|
||||
|
||||
/*const separator = '::;::';
|
||||
$selectFields.each((i, el) => {
|
||||
const $el = $(el);
|
||||
const maxOptions = $el.data('max-options') || false;
|
||||
|
||||
$el.selectpicker($.extend({
|
||||
iconBase: 'fas',
|
||||
tickIcon: 'fa-check',
|
||||
virtualScroll: false,
|
||||
dropupAuto: false,
|
||||
size: 10,
|
||||
maxOptions,
|
||||
}, $el.data(), {
|
||||
multipleSeparator: separator,
|
||||
}));
|
||||
|
||||
// wrap options
|
||||
if (maxOptions > 1) {
|
||||
const wrapOptions = () => {
|
||||
if (!$el.val().length) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const $container = $el.parent().find('.dropdown-toggle .filter-option');
|
||||
const val = $container.text();
|
||||
const vals = val.split(separator);
|
||||
let html = '';
|
||||
|
||||
vals.forEach((opt) => {
|
||||
const $opt = $el.find('option').filter((i, e) => {
|
||||
return $(e).text() === opt;
|
||||
});
|
||||
|
||||
html += `<span class="option" data-val=${ $opt.attr('value') }>${ opt
|
||||
} <i class="fas fa-times btn-remove"></i></span>`;
|
||||
|
||||
});
|
||||
|
||||
$container.html(html);
|
||||
|
||||
// remove value
|
||||
$container.find('.option').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const $opt = $(e.currentTarget);
|
||||
const val = $opt.data('val').toString();
|
||||
//$opt.remove();
|
||||
|
||||
const vals = $el.selectpicker('val');
|
||||
const i = vals.indexOf(val);
|
||||
if (i > -1) {
|
||||
vals.splice(i, 1);
|
||||
$el.selectpicker('val', vals);
|
||||
}
|
||||
|
||||
wrapOptions();
|
||||
});
|
||||
};
|
||||
|
||||
$el.on('rendered.bs.select changed.bs.select refreshed.bs.select loaded.bs.select change', wrapOptions);
|
||||
wrapOptions();
|
||||
}
|
||||
});
|
||||
|
||||
// FIX: missing conflicting 'bootstrap/js/dist/dropdown' with bootstrap-select/dist/js/bootstrap-select
|
||||
$('[data-toggle="dropdown"]').on('click', (e) => {
|
||||
$(e.currentTarget).siblings('.dropdown-menu').toggleClass('show');
|
||||
});
|
||||
|
||||
$('.dropdown-menu a').on('click', (e) => {
|
||||
$(e.currentTarget).parents('.dropdown-menu').removeClass('show');
|
||||
});*/
|
||||
// /FIX
|
||||
|
||||
$fields.each((e, el) => {
|
||||
const $el = $(el);
|
||||
|
||||
@ -151,32 +76,32 @@ const FormBasics = (($) => {
|
||||
}
|
||||
});
|
||||
|
||||
$element.on('submit', (e) => {
|
||||
$el.on('submit', (e) => {
|
||||
SpinnerUI.show();
|
||||
});
|
||||
|
||||
$element.addClass(`${NAME}-active`);
|
||||
$element.trigger(Events.FORM_INIT_BASICS);
|
||||
$el.addClass(`${NAME}-active`);
|
||||
$el.trigger(Events.FORM_INIT_BASICS);
|
||||
}
|
||||
|
||||
// Public methods
|
||||
dispose() {
|
||||
const $element = $(this._element);
|
||||
const $el = $(this._el);
|
||||
|
||||
$element.removeClass(`${NAME}-active`);
|
||||
$.removeData(this._element, DATA_KEY);
|
||||
this._element = null;
|
||||
$el.removeClass(`${NAME}-active`);
|
||||
$.removeData(this._el, DATA_KEY);
|
||||
this._el = null;
|
||||
}
|
||||
|
||||
static _jQueryInterface() {
|
||||
return this.each(() => {
|
||||
// attach functionality to element
|
||||
const $element = $(this);
|
||||
let data = $element.data(DATA_KEY);
|
||||
// attach functionality to el
|
||||
const $el = $(this);
|
||||
let data = $el.data(DATA_KEY);
|
||||
|
||||
if (!data) {
|
||||
data = new FormBasics(this);
|
||||
$element.data(DATA_KEY, data);
|
||||
$el.data(DATA_KEY, data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -13,8 +13,9 @@ const FormFieldUI = (($) => {
|
||||
const ui = this;
|
||||
|
||||
ui.$el = $(el);
|
||||
ui.$el.data(DATA_KEY, ui);
|
||||
ui.shown = true;
|
||||
|
||||
ui.$el.data(DATA_KEY, ui);
|
||||
//ui.$actions = ui.$el.parents('form').children('.btn-toolbar,.form-actions');
|
||||
|
||||
ui.vals = {
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import $ from 'jquery';
|
||||
import Events from '../_events';
|
||||
|
||||
import FormBasics from './_ui.form.basics';
|
||||
|
||||
const FormToggleUI = (($) => {
|
||||
// Constants
|
||||
const NAME = 'jsFormToggleUI';
|
||||
@ -16,11 +18,10 @@ const FormToggleUI = (($) => {
|
||||
ui.$el = $el;
|
||||
|
||||
if (!ui.getCondition()) {
|
||||
console.warn(`${NAME}: no condition found`);
|
||||
return;
|
||||
}
|
||||
|
||||
ui.$el.data(DATA_KEY, ui);
|
||||
|
||||
ui.toggle();
|
||||
|
||||
ui.$el.on(`change shown.${ FieldUI } hidden.${ FieldUI}`, (e) => {
|
||||
@ -28,6 +29,7 @@ const FormToggleUI = (($) => {
|
||||
});
|
||||
|
||||
ui.$el.addClass(`${NAME}-active`);
|
||||
ui.$el.data(DATA_KEY, ui);
|
||||
|
||||
return ui;
|
||||
}
|
||||
@ -36,8 +38,8 @@ const FormToggleUI = (($) => {
|
||||
const ui = this;
|
||||
const $el = ui.$el;
|
||||
|
||||
return ($el.is('[type="radio"]') && $el.parents('.optionset').length) ?
|
||||
$el.parents('.optionset') : $el;
|
||||
return ($el.is('[type="radio"],[type="checkbox"]') && $el.parents('.optionset,.checkboxset').length) ?
|
||||
$el.parents('.optionset,.checkboxset') : $el;
|
||||
}
|
||||
|
||||
getCondition() {
|
||||
@ -50,18 +52,29 @@ const FormToggleUI = (($) => {
|
||||
const ui = this;
|
||||
const $el = ui.$el;
|
||||
|
||||
return ($el.attr('type') === 'checkbox') ?
|
||||
($el.is(':checked') ? true : false) :
|
||||
($el.attr('type') === 'radio' ? $Html.find(`[name="${ $el.attr('name') }"]:checked`).val() : $el.val());
|
||||
if ($el.attr('type') === 'checkbox') {
|
||||
if ($el.parents('.checkboxset').length && $el.is(':checked')) {
|
||||
return $el.val();
|
||||
}
|
||||
|
||||
return $el.is(':checked') ? true : false;
|
||||
}
|
||||
|
||||
if ($el.attr('type') === 'radio') {
|
||||
return $Html.find(`[name="${ $el.attr('name') }"]:checked`).val();
|
||||
}
|
||||
|
||||
return $el.val();
|
||||
}
|
||||
|
||||
getTrueTarget() {
|
||||
const ui = this;
|
||||
const $dataEl = ui.getDataEl();
|
||||
|
||||
let target = $dataEl.data('value-toggle-yes');
|
||||
// compatibility params
|
||||
const target = $dataEl.data('value-toggle-yes');
|
||||
if (!target || !target.length) {
|
||||
let target = $dataEl.data('target');
|
||||
return ui.getElement($dataEl.data('target'));
|
||||
}
|
||||
|
||||
return ui.getElement(target);
|
||||
@ -69,7 +82,13 @@ const FormToggleUI = (($) => {
|
||||
|
||||
getFalseTarget() {
|
||||
const ui = this;
|
||||
const target = ui.getDataEl().data('value-toggle-no');
|
||||
const $dataEl = ui.getDataEl();
|
||||
|
||||
// compatibility params
|
||||
const target = $dataEl.data('value-toggle-no');
|
||||
if (!target || !target.length) {
|
||||
return ui.getElement($dataEl.data('value-toggle-false'));
|
||||
}
|
||||
|
||||
return ui.getElement(target);
|
||||
}
|
||||
@ -86,7 +105,7 @@ const FormToggleUI = (($) => {
|
||||
const val = ui.getCurrentVal();
|
||||
const $dataEl = ui.getDataEl();
|
||||
|
||||
// coditional toggler
|
||||
// conditional toggler
|
||||
const condition = ui.getCondition();
|
||||
if (!condition) {
|
||||
return;
|
||||
@ -162,7 +181,7 @@ const FormToggleUI = (($) => {
|
||||
const name = $el.attr('name');
|
||||
|
||||
if ($(`[name="${ name }"]`).length > 1) {
|
||||
console.log(`${NAME }: Module malfunction duplicate "${ name }" elements found`);
|
||||
console.warn(`${NAME }: Module malfunction duplicate "${ name }" elements found`);
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -180,6 +199,7 @@ const FormToggleUI = (($) => {
|
||||
$(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
|
||||
//FormToggleUI.validate();
|
||||
$(Events.FORM_FIELDS).filter('[data-value-toggle]').jsFormToggleUI();
|
||||
|
||||
$('[data-value-toggle]')
|
||||
.not(Events.FORM_FIELDS)
|
||||
.find(Events.FORM_FIELDS)
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
"use strict";
|
||||
|
||||
import $ from 'jquery';
|
||||
|
||||
import Events from './_events';
|
||||
import Spinner from './_components/_ui.spinner';
|
||||
import FormDatetime from './_components/_ui.form.datetime';
|
||||
import FormStepped from './_components/_ui.form.stepped';
|
||||
|
||||
//import Multislider from './_components/_ui.multislider';
|
||||
|
||||
const LayoutUI = (($) => {
|
||||
// Constants
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use strict";
|
||||
|
||||
import '../scss/app.scss';
|
||||
|
||||
// import Bootstrap
|
||||
|
||||
Loading…
Reference in New Issue
Block a user