diff --git a/.eslintrc b/.eslintrc index ca37688..3c43d62 100644 --- a/.eslintrc +++ b/.eslintrc @@ -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. diff --git a/src/js/_components/_ui.form.basics.js b/src/js/_components/_ui.form.basics.js index dbab636..d85bf87 100755 --- a/src/js/_components/_ui.form.basics.js +++ b/src/js/_components/_ui.form.basics.js @@ -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 += `${ opt - } `; - - }); - - $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); } }); } diff --git a/src/js/_components/_ui.form.fields.js b/src/js/_components/_ui.form.fields.js index a3d0e29..0c0cf08 100755 --- a/src/js/_components/_ui.form.fields.js +++ b/src/js/_components/_ui.form.fields.js @@ -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 = { diff --git a/src/js/_components/_ui.form.fields.toggle.js b/src/js/_components/_ui.form.fields.toggle.js index 5c74c52..ed5f279 100755 --- a/src/js/_components/_ui.form.fields.toggle.js +++ b/src/js/_components/_ui.form.fields.toggle.js @@ -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) diff --git a/src/js/_layout.js b/src/js/_layout.js index 49ef737..86e8f62 100755 --- a/src/js/_layout.js +++ b/src/js/_layout.js @@ -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 diff --git a/src/js/app.js b/src/js/app.js index d0c4e56..62ae608 100755 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,3 +1,5 @@ +"use strict"; + import '../scss/app.scss'; // import Bootstrap