Merge pull request #54 from michelegiorgi/development

Release 1.5.7

LICENSE.txt

@@ -1,4 +1,4 @@
-Copyright (C) 2018-2022, Michele Giorgi
+Copyright (C) 2018-2023, Michele Giorgi
 
                     GNU GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007

README.md

@@ -11,7 +11,7 @@ If you are not a developer, please download the latest release of the Formality
 
 ## Requirements
 
-* [WordPress](https://wordpress.org/) >= 6.0
+* [WordPress](https://wordpress.org/) >= 6.1
 
 ## Plugin setup
 
@@ -54,4 +54,4 @@ Contributions are welcome from everyone.
 
 ## License
 
-GPL-3.0 - Copyright (c) 2018-2022 Michele Giorgi
+GPL-3.0 - Copyright (c) 2018-2023 Michele Giorgi

assets/scripts/public/modules/conditional.js

@@ -4,7 +4,7 @@ export let initConditionalField = (form, field) => {
   if(!field.hasAttribute('data-conditional')) return
   let query = ''
   const rule = JSON.parse(field.getAttribute('data-conditional'))
-  for (const index in rule) { query += ( index == 0 ? '' : ', ' ) + '[name="' + rule[index].field + '"]' }
+  for(const index in rule) { query += ( index == 0 ? '' : ', ' ) + '[name="' + rule[index].field + '"]' }
   if(query) {
     checkCondition(form, field, rule)
     const inputs = form.querySelectorAll(query)
@@ -23,13 +23,19 @@ export let checkCondition = (form, field, rule, auto=true) => {
     if(inputs.length) {
       let check = false
       let inputValue = ''
-      inputs.forEach((input)=> {
+      inputs.forEach((input) => {
         const type = input.getAttribute('type')
         switch(type) {
-          case 'radio' : inputValue = input.checked ? input.value : '' ; break;
-          case 'checkbox' : inputValue = input.checked ? input.value : ''; break;
-          case 'file' : inputValue = input.hasAttribute('data-file') ? input.getAttribute('data-file') : ''; break;
-          default : inputValue = input.value; break;
+          case 'radio':
+          case 'checkbox':
+            if(input.checked) { inputValue = input.value }
+            break
+          case 'file':
+            inputValue = input.hasAttribute('data-file') ? input.getAttribute('data-file') : ''
+            break
+          default:
+            inputValue = input.value
+            break
         }
       })
       const ruleValue = ('value' in rule[index]) ? rule[index].value : '';
@@ -69,27 +75,30 @@ export let toggleConditionalField = (field, show) => {
   if(show && disabled) {
     field.classList.remove(el('field', '', 'disabled'))
     toggleConditionalValidation(field, false)
+    toggleConditionalNavbar(field, true)
   } else if(!show && !disabled) {
     field.classList.add(el('field', '', 'disabled'))
     toggleConditionalValidation(field, true)
+    toggleConditionalNavbar(field, false)
   }
   if(video) {
     video.style.display = 'none'
     video.style.display = 'block'
   }
 }
 
+export let toggleConditionalNavbar = (field, show) => {
+  const input = field.querySelector('input, select, textarea')
+  if(input) {
+    const navItem = document.querySelector(cl('nav', 'list li[data-name="' + input.name + '"]'))
+    if(navItem) { navItem.classList.toggle('disabled', !show) }
+  }
+}
+
 export let toggleConditionalValidation = (field, disable=true) => {
-  const input = field.querySelector('[required]')
   if(disable) {
     field.setAttribute('data-excluded','')
   } else {
     field.removeAttribute('data-excluded')
   }
-  if(input) {
-    const navItem = document.querySelector(cl('nav', 'list li[data-name="' + input.name + '"]'))
-    if(navItem) {
-      navItem.classList.toggle('disabled', disable)
-    }
-  }
 }

assets/scripts/public/modules/navigation.js

@@ -88,7 +88,8 @@ export let conversationalNavbar = (form, section) => {
     if(navItem.classList.contains(el('field'))) {
       const input = getInput(navItem)
       const label = navItem.querySelector(cl('label'))
-      listHtml += `<li data-name="${ input.id }"><a href="#${ navItemId }">${ label.innerText }</a></li>`
+      const disabled = navItem.classList.contains(el('field', '', 'disabled'))
+      listHtml += `<li class="${ disabled ? 'disabled' : '' }" data-name="${ input.name }"><a href="#${ navItemId }">${ label.innerText }</a></li>`
     } else if(navItem.classList.contains(el('section', 'header'))) {
       const title = navItem.querySelector('h4')
       listHtml += `</ul></li><li class="${ el('nav', 'anchor') }"><a href="#${ navItemId }">${ title.innerText }</a><ul>`

assets/styles/admin/layouts/sidebar_form.scss

@@ -123,6 +123,7 @@
           border-radius: 50%;
           box-sizing: content-box;
           margin: 0;
+          padding: 0;
           * {
             box-sizing: border-box;
           }

formality.php

@@ -6,13 +6,13 @@
  * @link              https://formality.dev
  * @since             1.0
  * @package           Formality
- * @copyright         Copyright (C) 2018-2022, Michele Giorgi
+ * @copyright         Copyright (C) 2018-2023, Michele Giorgi
  *
  * @wordpress-plugin
  * Plugin Name:       Formality
  * Plugin URI:        https://formality.dev
  * Description:       Forms made simple (and cute). Designless, multistep, conversational, secure, all-in-one WordPress forms plugin.
- * Version:           1.5.6
+ * Version:           1.5.7
  * Author:            Michele Giorgi
  * Author URI:        https://giorgi.io
  * License:           GPLv3
@@ -47,7 +47,7 @@
 /**
  * Currently plugin version.
  */
-define('FORMALITY_VERSION', '1.5.6');
+define('FORMALITY_VERSION', '1.5.7');
 define('FORMALITY_PATH', plugin_dir_path( __FILE__ ));
 
 /**

includes/class-formality.php

@@ -57,7 +57,7 @@ class Formality {
    */
   public function __construct() {
 
-    $this->version = defined( 'FORMALITY_VERSION' ) ? FORMALITY_VERSION : '1.5.6';
+    $this->version = defined( 'FORMALITY_VERSION' ) ? FORMALITY_VERSION : '1.5.7';
     $this->formality = 'formality';
 
     $this->load_dependencies();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Formality",
-  "version": "1.5.6",
+  "version": "1.5.7",
   "author": "Michele Giorgi <hi@giorgi.io>",
   "homepage": "https://giorgi.io",
   "private": true,

readme.txt

@@ -2,9 +2,9 @@
 Contributors: michelegiorgi
 Donate link: https://www.paypal.me/michelegiorgi/
 Tags: form, conversational, multistep, design form, gutenberg, block editor
-Requires at least: 6.0
-Tested up to: 6.1
-Stable tag: 1.5.6
+Requires at least: 6.1
+Tested up to: 6.2
+Stable tag: 1.5.7
 Requires PHP: 7.2
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.txt
@@ -61,6 +61,14 @@ You will find **Formality** menu in your WordPress admin screen.
 
 == Changelog ==
 
+= 1.5.7 =
+Release Date: February 28th, 2023
+
+* Fix conditional validation on radio/checkbox input¹
+* WordPress 6.2 compatibility
+
+<small>¹ Thanks to @julien2400056, @anagaaco, @rizoma for bug report</small>
+
 = 1.5.6 =
 Release Date: October 31th, 2022
 

webpack.mix.js

@@ -16,7 +16,7 @@ mix
   .js('assets/scripts/public/index.js', 'scripts/formality-public.js')
   .js('assets/scripts/editor/index.js', 'scripts/formality-editor.js')
   .js('assets/scripts/admin/index.js', 'scripts/formality-admin.js')
-  .banner({ banner: 'Formality v1.5.6' });
+  .banner({ banner: 'Formality v1.5.7' });
 
 mix
   .copyWatched('assets/images/admin/**', 'dist/images/admin')