Merge pull request #49 from michelegiorgi/development

Release v1.5.3

assets/scripts/public/fields/select.js

@@ -49,6 +49,11 @@ export let customSelect = (field, input, select, conversational) => {
       moveOption(focused, 'next', selectItems)
     } else if(e.key == 'Enter' && focused) {
       selectOption(field, select, selectItems, focused.getAttribute('data-value'), true)
+    } else if((/^[a-zA-Z0-9]{1}$/).test(e.key))  {
+      const search = filterElements(selectItems, `[data-value^="${e.key}" i]`)
+      if(search) {
+        moveOption(focused, 'search', search)
+      }
     }
   })
 }
@@ -75,14 +80,14 @@ export let selectOption = (field, select, selectItems, value, focus = false) =>
 
 export let moveOption = (focused, direction = 'next', selectItems) => {
   if(focused) {
-    let nextprev = direction == 'next' ? focused.nextElementSibling : focused.previousElementSibling
+    let nextprev = direction == 'search' ? selectItems : direction == 'next' ? focused.nextElementSibling : focused.previousElementSibling
     if(nextprev) {
       focused.classList.remove('focus')
       nextprev.classList.add('focus')
       focused = nextprev
     }
   } else {
-    focused = selectItems[0]
+    focused = direction == 'search' ? selectItems : selectItems[0]
     focused.classList.add('focus')
   }
   const optionsList = focused.closest('ul')

assets/scripts/public/fields/textarea.js

@@ -1,4 +1,4 @@
-import { el } from '../modules/helpers'
+import { el, isSafari } from '../modules/helpers'
 
 export const fieldTextarea = (field) => {
   if(!field.classList.contains(el('field', '', 'textarea'))) return
@@ -11,13 +11,16 @@ export const fieldTextarea = (field) => {
   lineHeight = parseInt(lineHeight.replace('px', ''))
   textarea.value = savedValue
   const minRows = textarea.rows
-  const maxLength = textarea.getAttribute('maxlength') ? ' / ' + parseInt(textarea.getAttribute('maxlength')) : ''
-  const counterHtml = maxLength ? `<div class="${ el('textarea', 'counter') }">${ savedValue.length + maxLength }</div>` : ''
+  const maxLengthLabel = textarea.getAttribute('maxlength') ? ' / ' + parseInt(textarea.getAttribute('maxlength')) : ''
+  const counterHtml = maxLengthLabel ? `<div class="${ el('textarea', 'counter') }">${ savedValue.length + maxLengthLabel }</div>` : ''
   textarea.insertAdjacentHTML('beforebegin', counterHtml)
   textarea.addEventListener('input', (e) => {
     const counter = textarea.previousElementSibling
+    const currentValue = textarea.value
+    const newLines = currentValue.match(/(\r\n|\n|\r)/g)
+    const realLength = newLines != null && isSafari() ? newLines.length + currentValue.length : currentValue.length
     if(counter) {
-      counter.innerText = textarea.value.length + maxLength
+      counter.innerText = realLength + maxLengthLabel
     }
     textarea.rows = minRows
     const newRows = Math.ceil((textarea.scrollHeight - baseScrollHeight) / lineHeight)

assets/scripts/public/modules/helpers.js

@@ -68,6 +68,10 @@ export let isVisible = (elem) => {
   return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ) && window.getComputedStyle(elem).visibility !== 'hidden';
 }
 
+export let isSafari = () => {
+  return navigator.userAgent.indexOf('Safari') > -1 && navigator.userAgent.indexOf('Chrome') <= -1
+}
+
 export let pushEvent = (name, options = {}, target = window) => {
   const event = new CustomEvent('fo' + name, {
     view: window,

assets/styles/admin/index.scss

@@ -1,17 +1,16 @@
 //Formality admin stylesheet
 
 @import "../public/common/variables";
+@import "../public/common/typography";
+@import "../public/common/animation";
+@import "../public/common/embed";
 
+@import "common/icons";
 @import "layouts/header";
 @import "layouts/results";
-@import "common/icons";
 @import "layouts/menu";
 @import "layouts/sidebar";
 
-@import "../public/common/typography";
-@import "../public/common/animation";
-@import "../public/common/embed";
-
 //single form
 body.post-type-formality_form {
   @import "layouts/editor_form";

assets/styles/admin/layouts/editor_form.scss

@@ -449,6 +449,9 @@
       .fo__field  {
         padding: 0;
         margin: 0;
+        * {
+          box-sizing: border-box;
+        }
         .fo__label {
           span {
             display: inline-block;
@@ -474,6 +477,17 @@
             text-align: right;
           }
         }
+        &--multiple {
+          .fo__label--checkbox,
+          .fo__label--radio {
+            pointer-events: none;
+          }
+        }
+        &--rating {
+          .fo__input__rating {
+            pointer-events: none;
+          }
+        }
       }
     }
     .block-list-appender {

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.2
+ * Version:           1.5.3
  * Author:            Michele Giorgi
  * Author URI:        https://giorgi.io
  * License:           GPLv3
@@ -47,7 +47,7 @@
 /**
  * Currently plugin version.
  */
-define('FORMALITY_VERSION', '1.5.2');
+define('FORMALITY_VERSION', '1.5.3');
 define('FORMALITY_PATH', plugin_dir_path( __FILE__ ));
 
 /**

includes/class-formality.php

@@ -57,9 +57,8 @@ class Formality {
    */
   public function __construct() {
 
-    $this->version = defined( 'FORMALITY_VERSION' ) ? FORMALITY_VERSION : '1.5.2';
+    $this->version = defined( 'FORMALITY_VERSION' ) ? FORMALITY_VERSION : '1.5.3';
     $this->formality = 'formality';
-    $this->fse = class_exists('WP_Block_Editor_Context');
 
     $this->load_dependencies();
     $this->set_locale();
@@ -155,8 +154,8 @@ private function define_admin_hooks() {
     $plugin_editor = new Formality_Editor( $this->get_formality(), $this->get_version() );
     $this->loader->add_action( 'enqueue_block_editor_assets', $plugin_editor, 'enqueue_scripts' );
     $this->loader->add_action( 'init', $plugin_editor, 'register_blocks');
-    $this->loader->add_filter( $this->fse ? 'block_categories_all' : 'block_categories', $plugin_editor, 'block_categories', 99, 2);
-    $this->loader->add_filter( $this->fse ? 'allowed_block_types_all' : 'allowed_block_types', $plugin_editor, 'filter_blocks', 99, 2);
+    $this->loader->add_filter( 'block_categories_all', $plugin_editor, 'block_categories', 99, 2);
+    $this->loader->add_filter( 'allowed_block_types_all', $plugin_editor, 'filter_blocks', 99, 2);
     $this->loader->add_action( 'rest_api_init', $plugin_editor, 'register_metas' );
     $this->loader->add_filter( 'use_block_editor_for_post_type', $plugin_editor, 'prevent_classic_editor', PHP_INT_MAX, 2 );
     $this->loader->add_filter( 'gutenberg_can_edit_post_type', $plugin_editor, 'prevent_classic_editor', PHP_INT_MAX, 2 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Formality",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "author": "Michele Giorgi <[email protected]>",
   "homepage": "https://giorgi.io",
   "private": true,
@@ -31,32 +31,33 @@
     "test": "run-s -c lint",
     "i18n:pot": "yarn build && wp i18n make-pot . languages/formality.pot --exclude=assets,release,download --headers='{\"Last-Translator\":\"Formality <[email protected]>\",\"Language-Team\":\"Formality <[email protected]>>\"}'",
     "i18n:json": "rm -rf ./languages/*.json || true && wp i18n make-json languages/ --no-purge --pretty-print",
-    "i18n": "yarn i18n:pot"
+    "i18n": "yarn i18n:pot",
+    "dependencies": "yarn upgrade-interactive --latest"
   },
   "devDependencies": {
     "@babel/plugin-syntax-jsx": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
-    "@wordpress/babel-preset-default": "^6.4.1",
-    "@wordpress/browserslist-config": "^4.1.0",
-    "@wordpress/dependency-extraction-webpack-plugin": "^3.2.1",
+    "@wordpress/babel-preset-default": "^6.6.1",
+    "@wordpress/browserslist-config": "^4.1.2",
+    "@wordpress/dependency-extraction-webpack-plugin": "^3.4.1",
     "babel-eslint": "^10.1.0",
     "browser-sync": "^2.27.7",
     "browser-sync-webpack-plugin": "^2.0.1",
     "cross-env": "^7.0.2",
-    "eslint": "^8.7.0",
+    "eslint": "^8.11.0",
     "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-react": "^7.28.0",
-    "laravel-mix": "^6.0.41",
+    "eslint-plugin-react": "^7.29.3",
+    "laravel-mix": "^6.0.43",
     "laravel-mix-banner": "^0.1.4",
     "laravel-mix-copy-watched": "^2.3.1",
     "laravel-mix-purgecss": "^6.0.0",
     "npm-run-all": "^4.1",
     "purgecss-with-wordpress": "^4.1.0",
     "rimraf": "^3.0.2",
-    "sass": "^1.49.0",
-    "sass-loader": "^12.4.0",
-    "stylelint": "^14.2.0",
-    "stylelint-config-standard": "^24.0.0",
+    "sass": "^1.49.9",
+    "sass-loader": "^12.6.0",
+    "stylelint": "^14.5.3",
+    "stylelint-config-standard": "^25.0.0",
     "vue-template-compiler": "^2.6.12"
   },
   "dependencies": {

readme.txt

@@ -4,7 +4,7 @@ Donate link: https://www.paypal.me/michelegiorgi/
 Tags: form, conversational, multistep, design form, gutenberg, block editor
 Requires at least: 5.8
 Tested up to: 5.9
-Stable tag: 1.5.2
+Stable tag: 1.5.3
 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.3 =
+Release Date: Mar 13th, 2022
+
+* Add select keyboard navigation by letter/number
+* Fix textarea characters counter on Safari browser
+* Gutenberg 12.7.2 compatibility
+
 = 1.5.2 =
 Release Date: Jan 30th, 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.2' });
+  .banner({ banner: 'Formality v1.5.3' });
 
 mix
   .copyWatched('assets/images/admin/**', 'dist/images/admin')