Merge pull request #52 from michelegiorgi/development

Release 1.5.6

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/) >= 5.8
+* [WordPress](https://wordpress.org/) >= 6.0
 
 ## Plugin setup
 
@@ -24,7 +24,7 @@ If you are not a developer, please download the latest release of the Formality
 Based on [Sage](https://roots.io/sage/) workflow/build process.  
 Make sure all dependencies have been installed before moving on:
 
-* [Node.js](http://nodejs.org/) >= 12.0.0
+* [Node.js](http://nodejs.org/) >= 16.0.0
 * [Yarn](https://yarnpkg.com/en/docs/install)
 * [WP-CLI](https://wp-cli.org)
 

assets/scripts/public/index.js

@@ -1,63 +1,41 @@
 // Formality public script
-import { cl, isConversational, getInput } from './modules/helpers'
+import { cl, isConversational, isLoaded, getInput, pushEvent } from './modules/helpers'
 
 import { initLoader } from './modules/loader'
-import { inputFocus, inputPlaceholder, inputFilled, inputKeypress, firstFocus } from './modules/fields'
-import { hasDbg } from './modules/dbg'
+import { loadFields, firstFocus } from './modules/fields'
 import { buildNavigation } from './modules/navigation'
-import { liveUpdate, addStepIndexes } from './modules/validation'
+import { addStepIndexes } from './modules/validation'
 import { submitForm } from './modules/submit'
-import { initConditionalField } from './modules/conditional'
 import { initHints } from './modules/hints'
 import { initEmbeds } from './modules/embeds'
 
 import { initMedia } from './fields/media'
-import { fieldMultiple } from './fields/multiple'
-import { fieldNumber } from './fields/number'
-import { fieldRating } from './fields/rating'
-import { fieldSwitch } from './fields/switch'
-import { fieldTextarea } from './fields/textarea'
-import { fieldUpload, dragNdrop } from './fields/upload'
-import { fieldSelect } from './fields/select'
+import { dragNdrop } from './fields/upload'
 
-let initForm = (form) => {
-  const conversational = isConversational(form)
-  initLoader(form)
-  addStepIndexes(form)
-  loadFields(form, conversational)
-  buildNavigation(form, conversational)
-  submitForm(form)
-  initMedia(form)
-}
-
-let loadFields = (form, conversational = false) => {
-  const fields = form.querySelectorAll(cl('field'))
-  const dbg = hasDbg(form)
-  fields.forEach((field) => {
-    initConditionalField(form, field)
-    const inputs = getInput(field, true)
-    inputs.forEach((input) => {
-      inputFocus(input, field, dbg)
-      inputPlaceholder(input, field)
-      inputFilled(input, field)
-      inputKeypress(input, field, conversational)
-      liveUpdate(input)
-    })
-    fieldMultiple(field)
-    fieldNumber(field)
-    fieldRating(field)
-    fieldSwitch(field)
-    fieldTextarea(field)
-    fieldUpload(field)
-    fieldSelect(field, conversational)
-  })
-}
-
-document.addEventListener('DOMContentLoaded', () => {
+let initForms = () => {
   const forms = document.querySelectorAll(cl('form'))
-  forms.forEach((form) => { initForm(form) })
+  forms.forEach((form) => {
+    const conversational = isConversational(form)
+    const loaded = isLoaded(form)
+    if(!loaded) {
+      initLoader(form)
+      addStepIndexes(form)
+      loadFields(form, conversational)
+      buildNavigation(form, conversational)
+      submitForm(form)
+      initMedia(form)
+    }
+  })
   firstFocus()
   initHints()
   initEmbeds()
   dragNdrop()
+}
+
+window.addEventListener('foFormsInit', () => {
+  initForms()
+})
+
+document.addEventListener('DOMContentLoaded', () => {
+  pushEvent('FormsInit');
 })

assets/scripts/public/modules/fields.js

@@ -1,7 +1,18 @@
 import { el, cl, pushEvent, nextEl, prevEl, getInput, isMobile, animateScroll, isVisible } from './helpers'
 import { showHints, clearHints } from './hints'
 import { moveStep } from './navigation'
-import { updateDbg } from './dbg'
+import { updateDbg, hasDbg } from './dbg'
+import { initConditionalField } from './conditional'
+import { liveUpdate } from './validation'
+
+import { initMedia } from '../fields/media'
+import { fieldMultiple } from '../fields/multiple'
+import { fieldNumber } from '../fields/number'
+import { fieldRating } from '../fields/rating'
+import { fieldSwitch } from '../fields/switch'
+import { fieldTextarea } from '../fields/textarea'
+import { fieldUpload } from '../fields/upload'
+import { fieldSelect } from '../fields/select'
 
 export let inputFocus = (input, field, dbg = false) => {
   let pressed = false;
@@ -126,3 +137,26 @@ export let focusFirst = (delay = 10) => {
     }
   })
 }
+
+export let loadFields = (form, conversational = false) => {
+  const fields = form.querySelectorAll(cl('field'))
+  const dbg = hasDbg(form)
+  fields.forEach((field) => {
+    initConditionalField(form, field)
+    const inputs = getInput(field, true)
+    inputs.forEach((input) => {
+      inputFocus(input, field, dbg)
+      inputPlaceholder(input, field)
+      inputFilled(input, field)
+      inputKeypress(input, field, conversational)
+      liveUpdate(input)
+    })
+    fieldMultiple(field)
+    fieldNumber(field)
+    fieldRating(field)
+    fieldSwitch(field)
+    fieldTextarea(field)
+    fieldUpload(field)
+    fieldSelect(field, conversational)
+  })
+}

assets/scripts/public/modules/helpers.js

@@ -41,6 +41,10 @@ export let isConversational = (form) => {
   return form.classList.contains(el('form', '', 'conversational'))
 }
 
+export let isLoaded = (form) => {
+  return !form.classList.contains(el('form', '', 'first-loading'))
+}
+
 export let isMobile = () => {
   let hasTouchScreen = false
   if ('maxTouchPoints' in navigator) {

assets/scripts/public/modules/navigation.js

@@ -107,10 +107,11 @@ export let conversationalNavigation = (form) => {
       if (entry[0].isIntersecting) {
         let active = field.id
         if(current!==active) {
-          current = active;
+          const prevField = current ? form.querySelector('#' + current) : form
+          current = active
           const sended = field.closest(cl('form', '', 'sended'))
           const navList = form.querySelector(cl('nav', 'list'))
-          const navLink = navList.querySelector('a[href="#'+active+'"]')
+          const navLink = navList.querySelector('a[href="#' + active + '"]')
           const scrollPx = parseInt(Math.max(0, (navLink.offsetLeft - (navList.offsetWidth/2) + (navLink.offsetWidth/2))))
           const prevActives = navList.querySelectorAll('a.active')
           animateScroll(scrollPx, 100, navList, false)
@@ -123,6 +124,7 @@ export let conversationalNavigation = (form) => {
           if(!field.classList.contains(el('field', '', 'focus')) && !sended) {
             const input = getInput(field)
             input.focus()
+            prevField.classList.remove(el('field', '', 'focus'))
           }
         }
       }

assets/styles/admin/layouts/editor_form.scss

@@ -384,6 +384,8 @@
       margin: 0;
       padding: 12px;
       font-size: 2.6em;
+      max-width: none !important;
+      font-weight: bold;
       &.is-selected {
         box-shadow: -3px 0 0 0 var(--formality_col1);
       }
@@ -405,12 +407,18 @@
       &.wp-block--halfwidth {
         @media(min-width:521px) {
           width: 50%;
+          box-sizing: border-box;
         }
       }
       &:before,
       &:after {
+        content: "";
         right: 0;
         left: 0;
+        top: 0;
+        bottom: 0;
+        position: absolute;
+        pointer-events: none;
         border-color: var(--formality_col1);
         border: none;
         box-shadow: -3px 0 0 0 var(--formality_col1) !important;
@@ -542,6 +550,7 @@
         }
       }
       &:after {
+        position: static;
         content: var(--formality_credits);
         font-size: 0.7em;
         opacity: 0.5;

formality.php

@@ -12,7 +12,7 @@
  * 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.5
+ * Version:           1.5.6
  * Author:            Michele Giorgi
  * Author URI:        https://giorgi.io
  * License:           GPLv3
@@ -47,7 +47,7 @@
 /**
  * Currently plugin version.
  */
-define('FORMALITY_VERSION', '1.5.5');
+define('FORMALITY_VERSION', '1.5.6');
 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.5';
+    $this->version = defined( 'FORMALITY_VERSION' ) ? FORMALITY_VERSION : '1.5.6';
     $this->formality = 'formality';
 
     $this->load_dependencies();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Formality",
-  "version": "1.5.5",
+  "version": "1.5.6",
   "author": "Michele Giorgi <[email protected]>",
   "homepage": "https://giorgi.io",
   "private": true,
@@ -35,30 +35,30 @@
     "dependencies": "yarn upgrade-interactive --latest"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-jsx": "^7.16.7",
-    "@babel/preset-react": "^7.16.7",
-    "@wordpress/babel-preset-default": "^6.10.0",
-    "@wordpress/browserslist-config": "^4.1.2",
-    "@wordpress/dependency-extraction-webpack-plugin": "^3.4.1",
+    "@babel/plugin-syntax-jsx": "^7.18.6",
+    "@babel/preset-react": "^7.18.6",
+    "@wordpress/babel-preset-default": "^7.4.0",
+    "@wordpress/browserslist-config": "^5.3.0",
+    "@wordpress/dependency-extraction-webpack-plugin": "^4.3.0",
     "babel-eslint": "^10.1.0",
-    "browser-sync": "^2.27.9",
+    "browser-sync": "^2.27.10",
     "browser-sync-webpack-plugin": "^2.0.1",
     "cross-env": "^7.0.2",
-    "eslint": "^8.15.0",
+    "eslint": "^8.26.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-react": "^7.29.4",
-    "laravel-mix": "^6.0.43",
+    "eslint-plugin-react": "^7.31.10",
+    "laravel-mix": "^6.0.49",
     "laravel-mix-banner": "^0.1.4",
-    "laravel-mix-copy-watched": "^2.3.1",
+    "laravel-mix-copy-watched": "^3.0.0",
     "laravel-mix-purgecss": "^6.0.0",
     "npm-run-all": "^4.1",
-    "purgecss-with-wordpress": "^4.1.0",
+    "purgecss-with-wordpress": "^5.0.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.51.0",
-    "sass-loader": "^12.6.0",
-    "stylelint": "^14.8.2",
-    "stylelint-config-standard": "^25.0.0",
-    "vue-template-compiler": "^2.6.12"
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
+    "stylelint": "^14.14.0",
+    "stylelint-config-standard": "^29.0.0",
+    "vue-template-compiler": "^2.7.13"
   },
   "dependencies": {
     "clone-deep": "^4.0.1",

public/class-formality-public.php

@@ -35,12 +35,12 @@ private function load_dependencies() {
   }
 
   /**
-   * Register the stylesheets for the public-facing side of the site.
+   * Register stylesheets and scripts for the public-facing side of the site.
    *
    * @since    1.0
    */
   public function enqueue_assets() {
-    $isform = is_singular('formality_form');
+    $isform = apply_filters('formality_enqueue_assets', is_singular('formality_form'));
     wp_register_style( $this->formality . "-public", plugin_dir_url(__DIR__) . 'dist/styles/formality-public.css', array(), $this->version, 'all' );
     wp_register_script( $this->formality . "-public", plugin_dir_url(__DIR__) . 'dist/scripts/formality-public.js', array( 'wp-i18n' ), $this->version, !$isform );
     wp_localize_script($this->formality . "-public", 'formality', array(

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: 5.8
-Tested up to: 6.0
-Stable tag: 1.5.5
+Requires at least: 6.0
+Tested up to: 6.1
+Stable tag: 1.5.6
 Requires PHP: 7.2
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.txt
@@ -61,6 +61,13 @@ You will find **Formality** menu in your WordPress admin screen.
 
 == Changelog ==
 
+= 1.5.6 =
+Release Date: October 31th, 2022
+
+* Various fixes and refinements
+* WordPress 6.1 compatibility
+* Gutenberg 14.4.0 compatibility
+
 = 1.5.5 =
 Release Date: May 9th, 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.5' });
+  .banner({ banner: 'Formality v1.5.6' });
 
 mix
   .copyWatched('assets/images/admin/**', 'dist/images/admin')