Form toggle bugfixtures

.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.

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;
+      ui._el = el;
-      $element.data(DATA_KEY, this);
+      $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 $selectFields = $el.find('select:not([readonly])');
-      const $radioOptions = $element.find('input[type="radio"]');
+      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`);
+      $el.addClass(`${NAME}-active`);
-      $element.trigger(Events.FORM_INIT_BASICS);
+      $el.trigger(Events.FORM_INIT_BASICS);
     }
 
     // Public methods
     dispose() {
-      const $element = $(this._element);
+      const $el = $(this._el);
 
-      $element.removeClass(`${NAME}-active`);
+      $el.removeClass(`${NAME}-active`);
-      $.removeData(this._element, DATA_KEY);
+      $.removeData(this._el, DATA_KEY);
-      this._element = null;
+      this._el = null;
     }
 
     static _jQueryInterface() {
       return this.each(() => {
-        // attach functionality to element
+        // attach functionality to el
-        const $element = $(this);
+        const $el = $(this);
-        let data = $element.data(DATA_KEY);
+        let data = $el.data(DATA_KEY);
 
         if (!data) {
           data = new FormBasics(this);
-          $element.data(DATA_KEY, data);
+          $el.data(DATA_KEY, data);
         }
       });
     }

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 = {

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) ?
+      return ($el.is('[type="radio"],[type="checkbox"]') && $el.parents('.optionset,.checkboxset').length) ?
-        $el.parents('.optionset') : $el;
+        $el.parents('.optionset,.checkboxset') : $el;
     }
 
     getCondition() {
@@ -50,18 +52,29 @@ const FormToggleUI = (($) => {
       const ui = this;
       const $el = ui.$el;
 
-      return ($el.attr('type') === 'checkbox') ?
+      if ($el.attr('type') === 'checkbox') {
-        ($el.is(':checked') ? true : false) :
+        if ($el.parents('.checkboxset').length && $el.is(':checked')) {
-        ($el.attr('type') === 'radio' ? $Html.find(`[name="${  $el.attr('name')  }"]:checked`).val() : $el.val());
+          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)

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

src/js/app.js

@@ -1,3 +1,5 @@
+"use strict";
+
 import '../scss/app.scss';
 
 // import Bootstrap