Merge pull request #5 from JDI-company/v1.1.0

V1.1.0
JDI-company · Apr 27, 2023 · 1fb0f14 · 1fb0f14
2 parents b3c84b7 + d1c49b6
commit 1fb0f14
Show file tree

Hide file tree

Showing 14 changed files with 147 additions and 108 deletions.
diff --git a/README.txt b/README.txt
@@ -3,8 +3,8 @@ Contributors: yaroslavborodii, max10110
 Donate link: https://jdi.company
 Tags: Smart Phone Addon, Ninja Forms, SPN, intlTelInput, International Telephone Input
 Requires at least: 4.0
-Tested up to: 6.1.1
-Stable tag: 1.0.3
+Tested up to: 6.2
+Stable tag: 1.1.0
 License: GPLv2
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Requires PHP: 7.0
@@ -48,6 +48,11 @@ please, write to us <a href="mailto:[email protected]">yaroslav.borod
 
 == Changelog ==
 
+= 1.1.0 =
+* Fixed bug <a href="https://github.com/JDI-company/Smart-Phone-for-Ninja-Forms/issues/1" target="_blank">Responsive issue in Elementor (#1)</a>.
+* Closed <a href="https://github.com/JDI-company/Smart-Phone-for-Ninja-Forms/issues/2" target="_blank">Elementor Builder plugin crash (#2)</a>. Cannot reproduce bug.
+* Fixed bug <a href="https://github.com/JDI-company/Smart-Phone-for-Ninja-Forms/issues/3" target="_blank">Prefix not stored (#3)</a>.
+
 = 1.0.3 =
 * Fixed Incorrect Stable Tag
 * Removed unnecessary options in package.json
@@ -68,6 +73,9 @@ please, write to us <a href="mailto:[email protected]">yaroslav.borod
 
 == Upgrade Notice ==
 
+= 1.1.0 =
+NOTE:<br>if you have used custom code to add a country code to your submissions in WordPress, you can remove it.
+
 = 1.0.3 =
 
 = 1.0.2 =

diff --git a/admin/class-ninja-forms-spn-addon-admin.php b/admin/class-ninja-forms-spn-addon-admin.php
@@ -98,7 +98,7 @@ public function enqueue_scripts() {
 
 		wp_enqueue_script( 'intlTelInput', plugin_dir_url( dirname( __FILE__ ) ) . 'vendor/intl-tel-input-master/build/js/intlTelInput-jquery.js', array( 'jquery' ), $this->version, true );
 		wp_enqueue_script( 'intlTelInputUtils', plugin_dir_url( dirname( __FILE__ ) ) . 'vendor/intl-tel-input-master/build/js/utils.js', array( 'intlTelInput' ), $this->version, true );
-		wp_enqueue_script( $this->plugin_name, plugin_dir_url( dirname( __FILE__ ) ) . 'dist/admin/main.min.js', array( 'jquery', 'intlTelInput' ), $this->version, true );
+		wp_enqueue_script( $this->plugin_name, plugin_dir_url( dirname( __FILE__ ) ) . 'dist/admin/spn-back-end.min.js', array( 'jquery', 'intlTelInput' ), $this->version, true );
 
 	}
 
@@ -117,16 +117,4 @@ public function register_fields( $actions ) {
 
 	}
 
-	/**
-	 * Add templates file path.
-	 *
-	 * @since    1.0.0
-	 */
-	public function register_template_path( $paths ) {
-
-		$paths[] = plugin_dir_path( __FILE__ ) . 'ninja-forms-fields/templates/';
-
-		return $paths;
-
-	}
 }
diff --git a/admin/ninja-forms-fields/class-spn-field.php b/admin/ninja-forms-fields/class-spn-field.php
@@ -26,7 +26,6 @@ public function __construct() {
 
 		$this->add_options();
 
-		$this->_settings['custom_name_attribute']['value']   = 'phone';
 		$this->_settings['personally_identifiable']['value'] = '1';
 	}
 
@@ -147,7 +146,7 @@ protected function add_options() {
 		/**
 		 * Add allowDropdown
 		 *
-		 * @since    2.0.0
+		 * @since    1.0.0
 		 */
 		$this->_settings['allow_dropdown'] = array(
 			'name'    => 'allow_dropdown',
@@ -163,7 +162,7 @@ protected function add_options() {
 		/**
 		 * Add nationalMode
 		 *
-		 * @since    2.0.0
+		 * @since    1.0.0
 		 */
 		$this->_settings['national_mode'] = array(
 			'name'    => 'national_mode',
@@ -179,7 +178,7 @@ protected function add_options() {
 		/**
 		 * Add autoHideDialCode
 		 *
-		 * @since    2.0.0
+		 * @since    1.0.0
 		 */
 		$this->_settings['auto_hide_dial_code'] = array(
 			'name'  => 'auto_hide_dial_code',
@@ -194,7 +193,7 @@ protected function add_options() {
 		/**
 		 * Add excludeCountries
 		 *
-		 * @since    2.0.0
+		 * @since    1.0.0
 		 */
 		$this->_settings['exclude_countries'] = array(
 			'name'    => 'exclude_countries',
@@ -210,7 +209,7 @@ protected function add_options() {
 		/**
 		 * Add Format On Display
 		 *
-		 * @since    2.0.0
+		 * @since    1.0.0
 		 */
 		$this->_settings['format_on_display'] = array(
 			'name'  => 'format_on_display',

diff --git a/dist/admin/main.min.js → dist/admin/spn-back-end.min.js b/dist/admin/main.min.js → dist/admin/spn-back-end.min.js
diff --git a/dist/public/main.min.js b/dist/public/main.min.js
diff --git a/dist/public/spn-front-end.min.js b/dist/public/spn-front-end.min.js
diff --git a/gulpfile.js b/gulpfile.js
@@ -16,7 +16,7 @@ function compileAdminJS () {
       webpackStream({
         mode: 'production',
         output: {
-          filename: '[name].min.js'
+          filename: 'spn-back-end.min.js'
         },
         module: {
           rules: [
@@ -56,7 +56,7 @@ function compilePublicJS () {
       webpackStream({
         mode: 'production',
         output: {
-          filename: '[name].min.js'
+          filename: 'spn-front-end.min.js'
         },
         module: {
           rules: [

diff --git a/includes/class-ninja-forms-spn-addon.php b/includes/class-ninja-forms-spn-addon.php
@@ -169,6 +169,7 @@ private function set_locale() {
 	private function define_admin_hooks() {
 
 		$plugin_admin             = new Ninja_Forms_Spn_Addon_Admin( $this->get_plugin_name(), $this->get_version() );
+		$plugin_public            = new Ninja_Forms_Spn_Addon_Public( $this->get_plugin_name(), $this->get_version() );
 		$plugin_builder_templates = new SPN_Builder_Templates();
 
 		// Styles and scripts
@@ -181,7 +182,7 @@ private function define_admin_hooks() {
 		// Ninja Forms Filters
 		$this->loader->add_filter( 'ninja_forms_plugin_settings', $plugin_admin, 'add_select_multiple' );
 		$this->loader->add_filter( 'ninja_forms_register_fields', $plugin_admin, 'register_fields' );
-		$this->loader->add_filter( 'ninja_forms_field_template_file_paths', $plugin_admin, 'register_template_path' );
+		$this->loader->add_filter( 'ninja_forms_field_template_file_paths', $plugin_public, 'register_template_path' );
 
 	}
 

diff --git a/ninja-forms-spn-addon.php b/ninja-forms-spn-addon.php
@@ -16,7 +16,7 @@
  * Plugin Name:       Smart Phone Addon for Ninja Forms
  * Plugin URI:        https://github.com/JDI-company/Smart-Phone-for-Ninja-Forms
  * Description:       Smart Phone Addon for Ninja Forms is a plugin to add country flag to the Phone Number field.
- * Version:           1.0.3
+ * Version:           1.1.0
  * Author:            JDI
  * Author URI:        https://jdi.company
  * License:           GPL-2.0+
@@ -50,7 +50,7 @@
  * Start at version 1.0.0 and use SemVer - https://semver.org
  * Rename this for your plugin and update it as you release new versions.
  */
-define( 'NINJA_FORMS_SPN_ADDON_VERSION', '1.0.3' );
+define( 'NINJA_FORMS_SPN_ADDON_VERSION', '1.1.0' );
 
 /**
  * The code that runs during plugin activation.

diff --git a/package-lock.json b/package-lock.json
diff --git a/public/class-ninja-forms-spn-addon-public.php b/public/class-ninja-forms-spn-addon-public.php
@@ -99,7 +99,20 @@ public function enqueue_scripts() {
 
 		wp_enqueue_script( 'intlTelInput', plugin_dir_url( dirname( __FILE__ ) ) . 'vendor/intl-tel-input-master/build/js/intlTelInput-jquery.js', array( 'jquery' ), $this->version, false );
 		wp_enqueue_script( 'intlTelInputUtils', plugin_dir_url( dirname( __FILE__ ) ) . 'vendor/intl-tel-input-master/build/js/utils.js', array( 'intlTelInput' ), $this->version, false );
-		wp_enqueue_script( $this->plugin_name, plugin_dir_url( dirname( __FILE__ ) ) . 'dist/public/main.min.js', array( 'jquery', 'intlTelInput' ), $this->version, false );
+		wp_enqueue_script( $this->plugin_name, plugin_dir_url( dirname( __FILE__ ) ) . 'dist/public/spn-front-end.min.js', array( 'jquery', 'intlTelInput', 'nf-front-end' ), $this->version, false );
+
+	}
+
+	/**
+	 * Add templates file path.
+	 *
+	 * @since    1.1.0
+	 */
+	public function register_template_path( $paths ) {
+
+		$paths[] = plugin_dir_path( __FILE__ ) . 'ninja-forms-fields/templates/';
+
+		return $paths;
 
 	}
 

diff --git a/public/js/ninja-forms-spn-addon-public.js b/public/js/ninja-forms-spn-addon-public.js
@@ -25,63 +25,105 @@ const codesISO2European = ['al', 'ad', 'at', 'by', 'be', 'ba', 'bg', 'hr', 'cz',
   'li', 'lt', 'lu', 'mk', 'mt', 'md', 'mc', 'me', 'nl', 'no', 'pl', 'pt', 'ro',
   'ru', 'sm', 'rs', 'sk', 'si', 'es', 'se', 'ch', 'ua', 'gb']
 
-function formSettings () {
+function initSPN () {
   'use strict'
 
-  $(window).on('load', function () {
-    $('.nf-field-container.spn-container input').each(function () {
-      const $input = $(this)
+  const initInputOnFormLoad = Marionette.Object.extend({
+    initialize: function () {
+      this.listenTo(Backbone.Radio.channel('form'), 'render:view', this.initInputOnFormLoad)
+    },
 
-      let onlyCountries = $input.data('only-countries').split(',')
-      if (onlyCountries.includes('all')) {
-        onlyCountries = codesISO2
-      } else if (onlyCountries.includes('european')) {
-        onlyCountries = onlyCountries.remove('european')
-        onlyCountries = onlyCountries.concat(codesISO2European)
-      }
+    initInputOnFormLoad: function (model) {
+      let $parentElement = $(model.el);
+      let $inputPath = $parentElement.find('.spn-container input[type="tel"]');
 
-      const preferredCountries = $input.data('preffered-countries').split(',')
-      let defaultCountry = $input.data('default-country')
-      const allowDropdown = Boolean($input.data('allow-dropdown'))
-      const nationalMode = Boolean($input.data('national-mode'))
-      const autoHideDialCode = Boolean($input.data('auto-hide-dial-code'))
+      $($inputPath).each(function () {
+        const $input = $(this)
 
-      let excludeCountries = $input.data('exclude-countries')
-      if (excludeCountries) {
-        excludeCountries = excludeCountries.split(',')
-      }
+        let onlyCountries = $input.data('only-countries').split(',')
+        if (onlyCountries.includes('all')) {
+          onlyCountries = codesISO2
+        } else if (onlyCountries.includes('european')) {
+          onlyCountries = onlyCountries.remove('european')
+          onlyCountries = onlyCountries.concat(codesISO2European)
+        }
 
-      let allowIpLookUp = Boolean($input.data('allow-ip-lookup'))
-      if (allowIpLookUp) {
-        allowIpLookUp = function (success, failure) {
-          $.get('https://ipinfo.io', function () {}, 'jsonp').always(function (resp) {
-            const countryCode = (resp && resp.country) ? resp.country : defaultCountry
-            success(countryCode)
-          })
+        const preferredCountries = $input.data('preffered-countries').split(',')
+        let defaultCountry = $input.data('default-country')
+        const allowDropdown = Boolean($input.data('allow-dropdown'))
+        const nationalMode = Boolean($input.data('national-mode'))
+        const autoHideDialCode = Boolean($input.data('auto-hide-dial-code'))
+
+        let excludeCountries = $input.data('exclude-countries')
+        if (excludeCountries) {
+          excludeCountries = excludeCountries.split(',')
         }
-        defaultCountry = 'auto'
-      } else {
-        allowIpLookUp = null
-      }
 
-      const separateDialCode = Boolean($input.data('separate-dial-code'))
-      const formatOnDisplay = Boolean($input.data('format-on-display'))
-
-      $input.intlTelInput({
-        initialCountry: defaultCountry,
-        preferredCountries,
-        onlyCountries,
-        allowDropdown,
-        nationalMode,
-        autoHideDialCode,
-        excludeCountries,
-        geoIpLookup: allowIpLookUp,
-        separateDialCode,
-        formatOnDisplay,
-        utilsScript: '../../vendor/intl-tel-input-master/build/js/utils.js'
+        let allowIpLookUp = Boolean($input.data('allow-ip-lookup'))
+        if (allowIpLookUp) {
+          allowIpLookUp = function (success, failure) {
+            $.get('https://ipinfo.io', function () {}, 'jsonp').always(function (resp) {
+              const countryCode = (resp && resp.country) ? resp.country : defaultCountry
+              success(countryCode)
+            })
+          }
+          defaultCountry = 'auto'
+        } else {
+          allowIpLookUp = null
+        }
+
+        const separateDialCode = Boolean($input.data('separate-dial-code'))
+        const formatOnDisplay = Boolean($input.data('format-on-display'))
+
+        $input.intlTelInput({
+          initialCountry: defaultCountry,
+          preferredCountries,
+          onlyCountries,
+          allowDropdown,
+          nationalMode,
+          autoHideDialCode,
+          excludeCountries,
+          geoIpLookup: allowIpLookUp,
+          separateDialCode,
+          formatOnDisplay,
+          utilsScript: '../../vendor/intl-tel-input-master/build/js/utils.js'
+        })
       })
-    })
+    }
   })
+
+  new initInputOnFormLoad()
+
+  let $phoneHidden;
+
+  const syncPhoneNumber = Marionette.Object.extend({
+    initialize: function () {
+      this.listenTo(Backbone.Radio.channel('fields'), 'change:modelValue', this.syncPhoneNumber)
+      this.listenTo(Backbone.Radio.channel('fields'), 'before:submit', this.submitForm)
+    },
+
+    syncPhoneNumber: function (model) {
+      if (model.get('type') === 'spn' && model.get('value') !== '' && !isNaN(Number(model.get('value')))) {
+        const modelID = model.get('id')
+
+        const $phone = $('#nf-field-' + modelID)
+        const $wrapper = $phone.parents('nf-field')
+        $phoneHidden = $wrapper.find('#nf-field-' + modelID + '-hidden')
+
+        const countryCode = $wrapper.find('.iti__selected-flag').attr('title').match(/[+\d]+/g).join('')
+
+        $phoneHidden.val(countryCode + $phone.val())
+      }
+    },
+
+    submitForm: function (model) {
+      if(model.get('type') === 'spn') {
+        model.set('value', $phoneHidden.val())
+      }
+    }
+  })
+
+  new syncPhoneNumber()
 }
 
-formSettings()
+initSPN()