fix Avada tinymce bug live update text + character counter textarea/c…

…alculator
RensTillmann · Jun 9, 2022 · 3507b5f · 3507b5f
1 parent acd9376
commit 3507b5f
Show file tree

Hide file tree

Showing 14 changed files with 170 additions and 33 deletions.
diff --git a/docs/changelog.md b/docs/changelog.md
@@ -8,14 +8,15 @@
 
 - [PDF Generator Add-on](https://renstillmann.github.io/super-forms/#/pdf-generator-add-on)
 
-## Jun 06, 2022 - Version 6.3.2
+## Jun 09, 2022 - Version 6.3.3
 
+- **Added:** Option to count words for `Textarea field` with use of tag `{fieldname;word}` to count words
+- **Added:** Option to count words for `Textarea field` with use of tag `{fieldname;chars}` to count characters excluding, carriage return, line-feed (newline), tab, form-feed, vertical whitespace
+- **Added:** Option to count words for `Textarea field` with use of tag `{fieldname;allchars}` to count all characters including, carriage return, line-feed (newline), tab, form-feed, vertical whitespace
 - **Improved:** Do not store `server_http_referrer_session` and/or `tags_values` as client data when not needed, which could stress the database on high traffic websites
-- **Fix:** `Listings` bug fix when leaving role settings empty (did not allow the user to view/edit/delete their own entries)
-
-## May 04, 2022 - Version 6.3.1
-
 - **Improved:** Cookie/Session system, in case WP Cron is disabled, make sure we still clear expired client data from the database
+- **Fix:** Bug/Issue with `Avada Builder` when typing in TinyMCE editor it would not update the live view properly
+- **Fix:** `Listings` bug fix when leaving role settings empty (did not allow the user to view/edit/delete their own entries)
 
 ## Apr 26, 2022 - Version 6.3.0
 

diff --git a/docs/hook-examples.md b/docs/hook-examples.md
@@ -2,6 +2,7 @@
 
 **Examples:**
 
+- [Track form submissions with GTM (Google Tag Manager)](#track-form-submissions-with-gtm-google-tag-manager)
 - [Track form submissions with third party](#track-form-submissions-with-third-party)
 - [Insert form data into a custom database table](#insert-form-data-into-a-custom-database-table)
 - [Send submitted form data to another site](#send-submitted-form-data-to-another-site)
@@ -14,6 +15,50 @@
 - [Altering cookie secure and httponly parameters](#altering-cookie-secure-and-httponly-parameters)
 - [Define fake cronjob to clear old client data if cronjob is disabled on your server](#define-fake-cronjob-to-clear-old-client-data-if-cronjob-is-disabled-on-your-server)
 
+## Track form submissions with GTM (Google Tag Manager)
+
+_Insert the below PHP code in your child theme functions.php file, or create a custom plugin. You may also use a plugin that allows you to insert code snippets to your site._
+
+```php
+add_action('wp_footer', function(){
+    ?>
+    <script type="text/javascript">
+        // Execute after form submission
+        if(typeof SUPER === 'undefined') {
+            // Custom JS script was loaded to early
+            window.SUPER = {};
+        }
+        SUPER.custom_form_tracker = function(args){
+            // Grab form fields
+            var product_name= (args.data.product_name? args.data.product_name.value : '');
+            var quantity= (args.data.quantity? args.data.quantity.value : '');
+            var total= (args.data.total? args.data.total.value : '');
+            var utm_source= (args.data.utm_source? args.data.utm_source.value : ''); 
+            // Your third party code here
+            window.dataLayer = window.dataLayer || []
+            dataLayer.push({
+                'event': 'superFormsSubmission',
+                'formID': args.form_id,
+                'product_name': product_name,
+                'quantity' : quantity,
+                'total' : total,
+                'utm_source': utm_source
+            });
+        }
+    </script>
+    <?php
+}, 100);
+
+// Add custom javascript function 
+function f4d_add_dynamic_function( $functions ) {
+    $functions['after_email_send_hook'][] = array(
+        'name' => 'custom_form_tracker'
+    );
+    return $functions;
+}
+add_filter( 'super_common_js_dynamic_functions_filter', 'f4d_add_dynamic_function', 100, 2 );
+```
+
 ## Track form submissions with third party
 
 PHP code:

diff --git a/docs/tags-system.md b/docs/tags-system.md
@@ -98,6 +98,12 @@ Now you might ask where should I actually place this tag? You can choose to use
 
 ## Predefined {tags} that are useful
 
+**Tags that are compatible in combination with Calculator element and the Textarea field:**
+
+* `{your_textarea_field_name_here;word}` (will count all words entered in the textarea)
+* `{your_textarea_field_name_here;chars}` (will count all characters entered in the textarea, excluding carriage return, line-feed/newline, tab, form-feed, vertical whitespace)
+* `{your_textarea_field_name_here;allchars}` (will count all all characters entered in the textarea, including carriage return, line-feed/newline, tab, form-feed, vertical whitespace)
+
 **Tags that are compatible with the file upload element:**
 
 ?> Also checkout the [file upload foreach example](email-foreach-loops#how-to-loop-over-files) for the file upload element

diff --git a/src/add-ons/super-forms-calculator/assets/js/frontend/calculator.js b/src/add-ons/super-forms-calculator/assets/js/frontend/calculator.js
@@ -506,6 +506,17 @@
 			if( parent.classList.contains('super-textarea') ) {
 				text_field = false;
 				value = (element.getAttribute('data-word-count')) ? parseFloat(element.getAttribute('data-word-count')) : 0;
+				if(value_n === 'word' || value_n === 'words' || value_n === 'char' || value_n === 'chars' || value_n === 'characters' || value_n === 'allChars' || value_n === 'allchars' || value_n === 'allcharacters' || value_n === 'allCharacters' ){
+					if(value_n === 'word' || value_n === 'words'){
+						// already defaults to word, unless otherwise specified e.g: {questions;chars}, {questions;allchars}
+					}
+					if(value_n === 'char' || value_n === 'chars' || value_n === 'characters' ){
+						value = (element.getAttribute('data-chars-count')) ? parseFloat(element.getAttribute('data-chars-count')) : 0;
+					}
+					if(value_n === 'allchars' || value_n === 'allChars' || value_n === 'allcharacters' || value_n === 'allCharacters' ){
+						value = (element.getAttribute('data-allchars-count')) ? parseFloat(element.getAttribute('data-allchars-count')) : 0;
+					}
+				}
 			}
 
 			// @since 1.3.2

diff --git a/src/add-ons/super-forms-calculator/changelog.txt b/src/add-ons/super-forms-calculator/changelog.txt
@@ -1,3 +1,8 @@
+Jun 09, 2022 - Version 2.3.4
+- Added: Option to count words for Textarea field (without whitespace, linebreak, tabs etc) with use of `{fieldname;words}`
+- Added: Option to count characters for Textarea field (without whitespace, linebreak, tabs etc) with use of `{fieldname;chars}`
+- Added: Option to count all characters for Textarea field (including whitespace, linebreak, tabs etc) with use of `{fieldname;allchars}`
+
 Jan 20, 2022 - Version 2.3.3
 - Added: Compatibility with latest version of Super Forms
 

diff --git a/src/add-ons/super-forms-calculator/super-forms-calculator.php b/src/add-ons/super-forms-calculator/super-forms-calculator.php
@@ -11,7 +11,7 @@
  * @wordpress-plugin
  * Plugin Name: Super Forms - Calculator
  * Description: Adds an extra element that allows you to do calculations on any of your fields
- * Version:     2.3.3
+ * Version:     2.3.4
  * Plugin URI:  http://f4d.nl/super-forms
  * Author URI:  http://f4d.nl/super-forms
  * Author:      feeling4design
@@ -44,7 +44,7 @@ final class SUPER_Calculator {
          *
          *	@since		1.0.0
         */
-        public $version = '2.3.3';
+        public $version = '2.3.4';
 
 
         /**

diff --git a/src/assets/css/frontend/elements.css b/src/assets/css/frontend/elements.css
diff --git a/src/assets/css/frontend/elements.css.map b/src/assets/css/frontend/elements.css.map
diff --git a/src/assets/css/frontend/elements.sass b/src/assets/css/frontend/elements.sass
@@ -536,11 +536,13 @@ h1.super-thanks-title
   padding: 0px 0px 0px 0px
   position: relative
   display: flex
+  align-items: center
   flex-direction: column
   .super-max-width-wrapper
     position: relative
     display: inline-block
   &.super-initialized
+    align-items: initial
     min-height: inherit 
   form
     float: left

diff --git a/src/assets/js/frontend/elements.js b/src/assets/js/frontend/elements.js
@@ -1921,8 +1921,10 @@
             var $this = $(this),
                 $time = 250,
                 $text,
-                $words;
-
+                $words,
+                $removeNoneChars,
+                $chars,
+                $allChars;
             if(e.type!='keyup') $time = 0;
             if (word_count_timeout !== null) {
                 clearTimeout(word_count_timeout);
@@ -1931,7 +1933,12 @@
                 $text = $this.val();
                 $words = $text.match(/\S+/g);
                 $words = $words ? $words.length : 0;
+                $removeNoneChars = $text.replace(/\s/g, ""); // use the \s quantifier to remove all white space, is equivalent to [\r\n\t\f\v ]
+                $chars = $removeNoneChars.length; // count only characters after removing any whitespace, tabs, linebreaks etc.
+                $allChars = $text.length; // count all characters
                 $this.attr('data-word-count', $words);
+                $this.attr('data-chars-count', $chars);
+                $this.attr('data-allchars-count', $allChars);
                 SUPER.after_field_change_blur_hook({el: $this[0]});
             }, $time);
         });

diff --git a/src/docs/changelog.md b/src/docs/changelog.md
@@ -8,14 +8,15 @@
 
 - [PDF Generator Add-on](https://renstillmann.github.io/super-forms/#/pdf-generator-add-on)
 
-## Jun 06, 2022 - Version 6.3.2
+## Jun 09, 2022 - Version 6.3.3
 
+- **Added:** Option to count words for `Textarea field` with use of tag `{fieldname;word}` to count words
+- **Added:** Option to count words for `Textarea field` with use of tag `{fieldname;chars}` to count characters excluding, carriage return, line-feed (newline), tab, form-feed, vertical whitespace
+- **Added:** Option to count words for `Textarea field` with use of tag `{fieldname;allchars}` to count all characters including, carriage return, line-feed (newline), tab, form-feed, vertical whitespace
 - **Improved:** Do not store `server_http_referrer_session` and/or `tags_values` as client data when not needed, which could stress the database on high traffic websites
-- **Fix:** `Listings` bug fix when leaving role settings empty (did not allow the user to view/edit/delete their own entries)
-
-## May 04, 2022 - Version 6.3.1
-
 - **Improved:** Cookie/Session system, in case WP Cron is disabled, make sure we still clear expired client data from the database
+- **Fix:** Bug/Issue with `Avada Builder` when typing in TinyMCE editor it would not update the live view properly
+- **Fix:** `Listings` bug fix when leaving role settings empty (did not allow the user to view/edit/delete their own entries)
 
 ## Apr 26, 2022 - Version 6.3.0
 

diff --git a/src/docs/hook-examples.md b/src/docs/hook-examples.md
@@ -2,6 +2,7 @@
 
 **Examples:**
 
+- [Track form submissions with GTM (Google Tag Manager)](#track-form-submissions-with-gtm-google-tag-manager)
 - [Track form submissions with third party](#track-form-submissions-with-third-party)
 - [Insert form data into a custom database table](#insert-form-data-into-a-custom-database-table)
 - [Send submitted form data to another site](#send-submitted-form-data-to-another-site)
@@ -14,6 +15,50 @@
 - [Altering cookie secure and httponly parameters](#altering-cookie-secure-and-httponly-parameters)
 - [Define fake cronjob to clear old client data if cronjob is disabled on your server](#define-fake-cronjob-to-clear-old-client-data-if-cronjob-is-disabled-on-your-server)
 
+## Track form submissions with GTM (Google Tag Manager)
+
+_Insert the below PHP code in your child theme functions.php file, or create a custom plugin. You may also use a plugin that allows you to insert code snippets to your site._
+
+```php
+add_action('wp_footer', function(){
+    ?>
+    <script type="text/javascript">
+        // Execute after form submission
+        if(typeof SUPER === 'undefined') {
+            // Custom JS script was loaded to early
+            window.SUPER = {};
+        }
+        SUPER.custom_form_tracker = function(args){
+            // Grab form fields
+            var product_name= (args.data.product_name? args.data.product_name.value : '');
+            var quantity= (args.data.quantity? args.data.quantity.value : '');
+            var total= (args.data.total? args.data.total.value : '');
+            var utm_source= (args.data.utm_source? args.data.utm_source.value : ''); 
+            // Your third party code here
+            window.dataLayer = window.dataLayer || []
+            dataLayer.push({
+                'event': 'superFormsSubmission',
+                'formID': args.form_id,
+                'product_name': product_name,
+                'quantity' : quantity,
+                'total' : total,
+                'utm_source': utm_source
+            });
+        }
+    </script>
+    <?php
+}, 100);
+
+// Add custom javascript function 
+function f4d_add_dynamic_function( $functions ) {
+    $functions['after_email_send_hook'][] = array(
+        'name' => 'custom_form_tracker'
+    );
+    return $functions;
+}
+add_filter( 'super_common_js_dynamic_functions_filter', 'f4d_add_dynamic_function', 100, 2 );
+```
+
 ## Track form submissions with third party
 
 PHP code:

diff --git a/src/docs/tags-system.md b/src/docs/tags-system.md
@@ -98,6 +98,12 @@ Now you might ask where should I actually place this tag? You can choose to use
 
 ## Predefined {tags} that are useful
 
+**Tags that are compatible in combination with Calculator element and the Textarea field:**
+
+* `{your_textarea_field_name_here;word}` (will count all words entered in the textarea)
+* `{your_textarea_field_name_here;chars}` (will count all characters entered in the textarea, excluding carriage return, line-feed/newline, tab, form-feed, vertical whitespace)
+* `{your_textarea_field_name_here;allchars}` (will count all all characters entered in the textarea, including carriage return, line-feed/newline, tab, form-feed, vertical whitespace)
+
 **Tags that are compatible with the file upload element:**
 
 ?> Also checkout the [file upload foreach example](email-foreach-loops#how-to-loop-over-files) for the file upload element

diff --git a/src/super-forms.php b/src/super-forms.php
@@ -11,7 +11,7 @@
  * @wordpress-plugin
  * Plugin Name:       Super Forms - Drag & Drop Form Builder
  * Description:       The most advanced, flexible and easy to use form builder for WordPress!
- * Version:           6.3.2
+ * Version:           6.3.3
  * Plugin URI:        http://f4d.nl/super-forms
  * Author URI:        http://f4d.nl/super-forms
  * Author:            feeling4design
@@ -43,7 +43,7 @@ final class SUPER_Forms {
          *
          *  @since      1.0.0
         */
-        public $version = '6.3.2';
+        public $version = '6.3.3';
         public $slug = 'super-forms';
         public $apiUrl = 'https://api.super-forms.com/';
         public $apiVersion = 'v1';
@@ -806,24 +806,30 @@ public function onchange_tinymce( $init ) {
                 var word_count_timeout = null;
                 editor.on("keyup blur", function(e){
                     // Check if this Editor belongs to super forms
-                    if( !editor.container.closest(".super-forms") ) {
+                    if( editor.container.closest(".super-forms") ) {
+                        var $this = this, $time = 250, $text, $words, $removeNoneChars, $chars, $allChars;
+                        if(e.type!="keyup") $time = 0;
+                        if (word_count_timeout !== null) {
+                            clearTimeout(word_count_timeout);
+                        }
+                        word_count_timeout = setTimeout(function () {
+                            debugger;
+                            $text = editor.getContent();
+                            $words = $text.match(/\S+/g);
+                            $words = $words ? $words.length : 0;
+                            $removeNoneChars = $text.replace(/\s/g, ""); // use the \s quantifier to remove all white space, is equivalent to [\r\n\t\f\v ]
+                            $chars = $removeNoneChars.length; // count only characters after removing any whitespace, tabs, linebreaks etc.
+                            $allChars = $text.length; // count all characters
+                            console.log($words);
+                            console.log($chars);
+                            console.log($allChars);
+                            jQuery($this.targetElm).attr("data-word-count", $words);
+                            jQuery($this.targetElm).attr("data-chars-count", $chars);
+                            jQuery($this.targetElm).attr("data-allchars-count", $allChars);
+                            SUPER.after_field_change_blur_hook({el: $this.targetElm});
+                        }, $time);
                         return false;
                     }
-                    var $this = this,
-                        $time = 250,
-                        $text,
-                        $words;
-                    if(e.type!="keyup") $time = 0;
-                    if (word_count_timeout !== null) {
-                        clearTimeout(word_count_timeout);
-                    }
-                    word_count_timeout = setTimeout(function () {
-                        $text = editor.getContent();
-                        $words = $text.match(/\S+/g);
-                        $words = $words ? $words.length : 0;
-                        jQuery($this.targetElm).attr("data-word-count", $words);
-                        SUPER.after_field_change_blur_hook({el: $this.targetElm});
-                    }, $time);
                 });
             }';
             $init['setup'] = ob_get_contents();