Changeset 2441351

Timestamp:

12/17/2020 10:03:06 AM (5 years ago)

Author:

spikkl

Message:

Disable input fields while fetching

Location:

spikkl-address-lookup/trunk

Files:

• assets/js/spikkl-address-lookup.js (modified) (9 diffs)
• assets/js/spikkl-address-lookup.min.js (modified) (1 diff)
• readme.txt (modified) (2 diffs)
• spikkl-address-lookup.php (modified) (2 diffs)

spikkl-address-lookup/trunk/assets/js/spikkl-address-lookup.js

@@ -11 +11 @@
     const DUTCH_POSTCODE_REGEX = new RegExp('^[1-9][0-9]{3}\\s*(?!sa|sd|ss)[a-z]{2}$', 'i');
     const DUTCH_STREET_NUMBER_REGEX = new RegExp('^[0-9]{1,5}$');
-    const DUTCH_STREET_NUMBER_SUFFIX_REGEX = new RegExp('^(?:[a-z])?\\s?(?:[a-z0-9]{1,4})?$', 'i');
+    const DUTCH_STREET_NUMBER_SUFFIX_REGEX = new RegExp('^(?:[a-z])?(?:\\s?[a-z0-9]{1,4})?$', 'i');
 
     const LookupHandler = function ( fields ) {
         this.cache = {};
+
+        this.xhr = null;
         this.lookupTimeout = null;
 
@@ -55 +57 @@
 
                 $( el ).on( 'keyup', this.delayedLookup.bind(this) );
-                $( el ).on( 'blur', this.performLookup.bind(this) );
-
+                //$( el ).on( 'blur', this.performLookup.bind(this) );
             });
 
@@ -64 +65 @@
             $.each( interactionElements, ( index, el ) => {
                 el.off( 'keyup' );
-                el.off( 'blur' );
             });
 
@@ -100 +100 @@
 
         if ( typeof this.$spinner !== 'undefined' ) {
-            this.$spinner.hide();
+            this.stopLoading()
         }
     };
@@ -121 +121 @@
         this.lookupTimeout = setTimeout( () => {
             this.performLookup();
-        }, 350);
+        }, 150);
     };
 
@@ -132 +132 @@
             this.softResetFields();
         } else {
-            this.$spinner.show();
+            this.startLoading();
+
             this.$message.hide();
 
@@ -150 +151 @@
         const cacheKey = spikkl_params.url + JSON.stringify( Object.values( params ) );
 
+        if (this.xhr) {
+            this.xhr.abort();
+        }
+
         if ( this.cache.hasOwnProperty( cacheKey ) ) {
             this.fillFields( this.cache[ cacheKey ] );
         } else {
-            $.ajax({
+            this.xhr = $.ajax({
                 crossDomain: true,
                 type: 'GET',
@@ -180 +185 @@
     };
 
+    LookupHandler.prototype.startLoading = function () {
+        this.$spinner.show();
+
+        this.$postcode.attr('disabled', true);
+        this.$streetNumber.attr('disabled', true);
+        this.$streetNumberSuffix.attr('disabled', true);
+    }
+
+    LookupHandler.prototype.stopLoading = function () {
+        this.$spinner.hide();
+
+        this.$postcode.attr('disabled', false);
+        this.$streetNumber.attr('disabled', false);
+        this.$streetNumberSuffix.attr('disabled', false);
+    }
+
     LookupHandler.prototype.fillFields = function ( json ) {
-        this.$spinner.hide();
+        this.stopLoading();
 
         if ( json.status === 'ok' && json.results.length >= 1) {
@@ -252 +273 @@
     LookupHandler.prototype.isValidStreetNumberSuffix = function () {
         const streetNumberSuffix = this.$streetNumberSuffix.val();
-
 
         if ( DUTCH_STREET_NUMBER_SUFFIX_REGEX.test( streetNumberSuffix ) ) {

spikkl-address-lookup/trunk/assets/js/spikkl-address-lookup.min.js

@@ -1 @@
-jQuery(function(e){if("undefined"==typeof spikkl_params)return!1;const t=new RegExp("^[1-9][0-9]{3}\\s*(?!sa|sd|ss)[a-z]{2}$","i"),s=new RegExp("^[0-9]{1,5}$"),i=new RegExp("^(?:[a-z])?\\s?(?:[a-z0-9]{1,4})?$","i"),r=function(t){this.cache={},this.lookupTimeout=null,this.prefix=t.prefix,this.$countryField=e(t.country+"_field"),this.$stateField=e(t.state+"_field"),this.$cityField=e(t.city+"_field"),this.$streetField=e(t.street+"_field"),this.$postcodeField=e(t.postcode+"_field"),this.$streetNumberField=e(t.street_number+"_field"),this.$streetNumberSuffixField=e(t.street_number_suffix+"_field"),this.$country=this.$countryField.find(":input"),this.$state=this.$stateField.find(":input"),this.$city=this.$cityField.find(":input"),this.$street=this.$streetField.find(":input"),this.$postcode=this.$postcodeField.find(":input"),this.$streetNumber=this.$streetNumberField.find(":input"),this.$streetNumberSuffix=this.$streetNumberSuffixField.find(":input"),this.setHelperElements(),this.$country.on("change",()=>{let e=this.getSelectedCountryCode();this.reorderFields(e),this.listen(e)}),this.$country.trigger("change")};r.prototype.listen=function(t){const s=[this.$postcode,this.$streetNumber,this.$streetNumberSuffix];this.isCountryEligibleForLookup(t)?(e.each(s,(t,s)=>{e(s).on("keyup",this.delayedLookup.bind(this)),e(s).on("blur",this.performLookup.bind(this))}),this.applyFieldsLock()):(e.each(s,(e,t)=>{t.off("keyup"),t.off("blur")}),this.hardResetFields(),this.releaseFieldsLock())},r.prototype.applyFieldsLock=function(){this.$postcode.attr("autocomplete","off"),this.$postcode.attr("maxlength",7),this.$street.attr("readonly",!0),this.$city.attr("readonly",!0),this.$state.attr("readonly",!0),this.$stateField.addClass("spikkl-hidden")},r.prototype.releaseFieldsLock=function(){this.$postcode.removeAttr("autocomplete"),this.$postcode.removeAttr("maxlength"),this.$street.removeAttr("readonly"),this.$city.removeAttr("readonly"),this.$state.removeAttr("readonly"),this.$stateField.removeClass("spikkl-hidden")},r.prototype.softResetFields=function(){this.$street.val(""),this.$city.val(""),this.$state.val("").trigger("change"),void 0!==this.$spinner&&this.$spinner.hide()},r.prototype.hardResetFields=function(){this.$postcode.val(""),this.$streetNumber.val(""),this.$streetNumberSuffix.val(""),void 0!==this.$message&&this.$message.hide(),this.softResetFields()},r.prototype.delayedLookup=function(){clearTimeout(this.lookupTimeout),this.lookupTimeout=setTimeout(()=>{this.performLookup()},350)},r.prototype.performLookup=function(){const e=this.$postcode.val(),t=this.$streetNumber.val(),s=this.$streetNumberSuffix.val();if(this.isValidPostcode()&&this.isValidStreetNumber()&&this.isValidStreetNumberSuffix()){this.$spinner.show(),this.$message.hide();const i={action:spikkl_params.action,postal_code:encodeURIComponent(e),street_number:encodeURIComponent(t),street_number_suffix:encodeURIComponent(s)};this.cachedGet(i)}else this.softResetFields()},r.prototype.cachedGet=function(t){const s=spikkl_params.url+JSON.stringify(Object.values(t));this.cache.hasOwnProperty(s)?this.fillFields(this.cache[s]):e.ajax({crossDomain:!0,type:"GET",dataType:"json",timeout:5e3,url:spikkl_params.url,data:t,success:(e,t)=>{if(!e||"success"!==t)return this.fillFields({status:"failed",status_code:"UNAVAILABLE"}),void this.releaseFieldsLock();this.cache[s]=e,this.fillFields(e)}})},r.prototype.fillFields=function(e){if(this.$spinner.hide(),"ok"===e.status&&e.results.length>=1)this.$postcode.val(e.results[0].postal_code),this.$streetNumber.val(e.results[0].street_number),this.$streetNumberSuffix.val(e.results[0].street_number_suffix),this.$street.val(e.results[0].street_name),this.$city.val(e.results[0].city),this.$state.val(e.results[0].administrative_areas[0].abbreviation).trigger("change");else{let t;"ZERO_RESULTS"===e.status_code&&(t=spikkl_params.errors.invalid_address),"INVALID_REQUEST"===e.status_code&&(t=spikkl_params.errors.invalid_postal_code_or_street_number),"UNAVAILABLE"!==e.status_code&&"ACCESS_RESTRICTED"!==e.status_code||(t=spikkl_params.errors.unknown_error,this.releaseFieldsLock()),this.softResetFields(),this.$message.empty().append("<li>"+t+"</li>"),this.$message.show()}},r.prototype.isValidPostcode=function(){const e=this.$postcode.val();return null!==e&&""!==e&&(!!t.test(e)||(this.$message.empty().append("<li>"+spikkl_params.errors.invalid_postal_code+"</li>"),this.$message.show(),!1))},r.prototype.isValidStreetNumber=function(){const e=this.$streetNumber.val();return null!==e&&""!==e&&(!!s.test(e)||(this.$message.empty().append("<li>"+spikkl_params.errors.invalid_street_number+"</li>"),this.$message.show(),!1))},r.prototype.isValidStreetNumberSuffix=function(){const e=this.$streetNumberSuffix.val();return!!i.test(e)||(this.$message.empty().append("<li>"+spikkl_params.errors.invalid_street_number_suffix+"</li>"),this.$message.show(),!1)},r.prototype.setHelperElements=function(){this.$spinner=e("<div>",{id:"spikkl-"+this.prefix+"-spinner",class:"spikkl-loader",style:"display:none;"}),this.$message=e("<ul>",{id:"spikkl-"+this.prefix+"-message",class:"woocommerce-error",style:"display:none;"}),this.$postcode.after(this.$spinner),this.$postcode.before(this.$message)},r.prototype.reorderFields=function(e){const t=this.$streetNumber.closest("p.form-row"),s=this.$streetNumberSuffix.closest("p.form-row");this.isCountryEligibleForLookup(e)?(this.createStreetNumberLabel(),t.removeClass("form-row-wide").addClass("form-row-first"),s.show()):(t.removeClass("form-row-first").addClass("form-row-wide"),s.hide(),t.find("label").remove())},r.prototype.createStreetNumberLabel=function(){const t=this.$streetNumber.attr("id"),s='<abbr title="'+("undefined"!==woocommerce_params.i18n_required_text?woocommerce_params.i18n_required_text:"required")+'" class="required"> * </abbr>',i=e('label[for="'+t+'"]');i.length?e('label[for="'+t+'"] > abbr').length||i.append(s):this.$streetNumber.before('<label for="'+t+'">'+spikkl_params.street_number_label+s+"</label>")},r.prototype.getSelectedCountryCode=function(){return this.$country.val().trim()},r.prototype.isCountryEligibleForLookup=function(e){return e=e||this.getSelectedCountryCode(),spikkl_params.supported_countries.indexOf(e)>=0},e(document.body).bind("wc_address_i18n_ready",function(){"undefined"!=typeof spikkl_billing_fields&&new r(spikkl_billing_fields),"undefined"!=typeof spikkl_shipping_fields&&new r(spikkl_shipping_fields)})});
+jQuery(function(e){if("undefined"==typeof spikkl_params)return!1;const t=new RegExp("^[1-9][0-9]{3}\\s*(?!sa|sd|ss)[a-z]{2}$","i"),s=new RegExp("^[0-9]{1,5}$"),i=new RegExp("^(?:[a-z])?(?:\\s?[a-z0-9]{1,4})?$","i"),r=function(t){this.cache={},this.xhr=null,this.lookupTimeout=null,this.prefix=t.prefix,this.$countryField=e(t.country+"_field"),this.$stateField=e(t.state+"_field"),this.$cityField=e(t.city+"_field"),this.$streetField=e(t.street+"_field"),this.$postcodeField=e(t.postcode+"_field"),this.$streetNumberField=e(t.street_number+"_field"),this.$streetNumberSuffixField=e(t.street_number_suffix+"_field"),this.$country=this.$countryField.find(":input"),this.$state=this.$stateField.find(":input"),this.$city=this.$cityField.find(":input"),this.$street=this.$streetField.find(":input"),this.$postcode=this.$postcodeField.find(":input"),this.$streetNumber=this.$streetNumberField.find(":input"),this.$streetNumberSuffix=this.$streetNumberSuffixField.find(":input"),this.setHelperElements(),this.$country.on("change",()=>{let e=this.getSelectedCountryCode();this.reorderFields(e),this.listen(e)}),this.$country.trigger("change")};r.prototype.listen=function(t){const s=[this.$postcode,this.$streetNumber,this.$streetNumberSuffix];this.isCountryEligibleForLookup(t)?(e.each(s,(t,s)=>{e(s).on("keyup",this.delayedLookup.bind(this))}),this.applyFieldsLock()):(e.each(s,(e,t)=>{t.off("keyup")}),this.hardResetFields(),this.releaseFieldsLock())},r.prototype.applyFieldsLock=function(){this.$postcode.attr("autocomplete","off"),this.$postcode.attr("maxlength",7),this.$street.attr("readonly",!0),this.$city.attr("readonly",!0),this.$state.attr("readonly",!0),this.$stateField.addClass("spikkl-hidden")},r.prototype.releaseFieldsLock=function(){this.$postcode.removeAttr("autocomplete"),this.$postcode.removeAttr("maxlength"),this.$street.removeAttr("readonly"),this.$city.removeAttr("readonly"),this.$state.removeAttr("readonly"),this.$stateField.removeClass("spikkl-hidden")},r.prototype.softResetFields=function(){this.$street.val(""),this.$city.val(""),this.$state.val("").trigger("change"),void 0!==this.$spinner&&this.stopLoading()},r.prototype.hardResetFields=function(){this.$postcode.val(""),this.$streetNumber.val(""),this.$streetNumberSuffix.val(""),void 0!==this.$message&&this.$message.hide(),this.softResetFields()},r.prototype.delayedLookup=function(){clearTimeout(this.lookupTimeout),this.lookupTimeout=setTimeout(()=>{this.performLookup()},150)},r.prototype.performLookup=function(){const e=this.$postcode.val(),t=this.$streetNumber.val(),s=this.$streetNumberSuffix.val();if(this.isValidPostcode()&&this.isValidStreetNumber()&&this.isValidStreetNumberSuffix()){this.startLoading(),this.$message.hide();const i={action:spikkl_params.action,postal_code:encodeURIComponent(e),street_number:encodeURIComponent(t),street_number_suffix:encodeURIComponent(s)};this.cachedGet(i)}else this.softResetFields()},r.prototype.cachedGet=function(t){const s=spikkl_params.url+JSON.stringify(Object.values(t));this.xhr&&this.xhr.abort(),this.cache.hasOwnProperty(s)?this.fillFields(this.cache[s]):this.xhr=e.ajax({crossDomain:!0,type:"GET",dataType:"json",timeout:5e3,url:spikkl_params.url,data:t,success:(e,t)=>{if(!e||"success"!==t)return this.fillFields({status:"failed",status_code:"UNAVAILABLE"}),void this.releaseFieldsLock();this.cache[s]=e,this.fillFields(e)}})},r.prototype.startLoading=function(){this.$spinner.show(),this.$postcode.attr("disabled",!0),this.$streetNumber.attr("disabled",!0),this.$streetNumberSuffix.attr("disabled",!0)},r.prototype.stopLoading=function(){this.$spinner.hide(),this.$postcode.attr("disabled",!1),this.$streetNumber.attr("disabled",!1),this.$streetNumberSuffix.attr("disabled",!1)},r.prototype.fillFields=function(e){if(this.stopLoading(),"ok"===e.status&&e.results.length>=1)this.$postcode.val(e.results[0].postal_code),this.$streetNumber.val(e.results[0].street_number),this.$streetNumberSuffix.val(e.results[0].street_number_suffix),this.$street.val(e.results[0].street_name),this.$city.val(e.results[0].city),this.$state.val(e.results[0].administrative_areas[0].abbreviation).trigger("change");else{let t;"ZERO_RESULTS"===e.status_code&&(t=spikkl_params.errors.invalid_address),"INVALID_REQUEST"===e.status_code&&(t=spikkl_params.errors.invalid_postal_code_or_street_number),"UNAVAILABLE"!==e.status_code&&"ACCESS_RESTRICTED"!==e.status_code||(t=spikkl_params.errors.unknown_error,this.releaseFieldsLock()),this.softResetFields(),this.$message.empty().append("<li>"+t+"</li>"),this.$message.show()}},r.prototype.isValidPostcode=function(){const e=this.$postcode.val();return null!==e&&""!==e&&(!!t.test(e)||(this.$message.empty().append("<li>"+spikkl_params.errors.invalid_postal_code+"</li>"),this.$message.show(),!1))},r.prototype.isValidStreetNumber=function(){const e=this.$streetNumber.val();return null!==e&&""!==e&&(!!s.test(e)||(this.$message.empty().append("<li>"+spikkl_params.errors.invalid_street_number+"</li>"),this.$message.show(),!1))},r.prototype.isValidStreetNumberSuffix=function(){const e=this.$streetNumberSuffix.val();return!!i.test(e)||(this.$message.empty().append("<li>"+spikkl_params.errors.invalid_street_number_suffix+"</li>"),this.$message.show(),!1)},r.prototype.setHelperElements=function(){this.$spinner=e("<div>",{id:"spikkl-"+this.prefix+"-spinner",class:"spikkl-loader",style:"display:none;"}),this.$message=e("<ul>",{id:"spikkl-"+this.prefix+"-message",class:"woocommerce-error",style:"display:none;"}),this.$postcode.after(this.$spinner),this.$postcode.before(this.$message)},r.prototype.reorderFields=function(e){const t=this.$streetNumber.closest("p.form-row"),s=this.$streetNumberSuffix.closest("p.form-row");this.isCountryEligibleForLookup(e)?(this.createStreetNumberLabel(),t.removeClass("form-row-wide").addClass("form-row-first"),s.show()):(t.removeClass("form-row-first").addClass("form-row-wide"),s.hide(),t.find("label").remove())},r.prototype.createStreetNumberLabel=function(){const t=this.$streetNumber.attr("id"),s='<abbr title="'+("undefined"!==woocommerce_params.i18n_required_text?woocommerce_params.i18n_required_text:"required")+'" class="required"> * </abbr>',i=e('label[for="'+t+'"]');i.length?e('label[for="'+t+'"] > abbr').length||i.append(s):this.$streetNumber.before('<label for="'+t+'">'+spikkl_params.street_number_label+s+"</label>")},r.prototype.getSelectedCountryCode=function(){return this.$country.val().trim()},r.prototype.isCountryEligibleForLookup=function(e){return e=e||this.getSelectedCountryCode(),spikkl_params.supported_countries.indexOf(e)>=0},e(document.body).bind("wc_address_i18n_ready",function(){"undefined"!=typeof spikkl_billing_fields&&new r(spikkl_billing_fields),"undefined"!=typeof spikkl_shipping_fields&&new r(spikkl_shipping_fields)})});

spikkl-address-lookup/trunk/readme.txt

@@ -4 +4 @@
 Requires at least: 4.4
 Tested up to: 5.5
-Stable tag: 1.5.1
+Stable tag: 1.5.2
 Requires PHP: 5.6
 License: GPLv3
@@ -107 +107 @@
 = 1.5.1 =
 * Fix address checkout key tests
+
+= 1.5.2 =
+* Disable input fields while fetching
+* Abort request on newer input values

spikkl-address-lookup/trunk/spikkl-address-lookup.php

@@ -11 +11 @@
  *  Plugin URI: https://www.spikkl.nl/modules
  *  Description: Spikkl Address Lookup validates the Dutch postcode and street number combination during checkout and fills additional address values automatically. Increase the ease-of-use for each of your customers and be assured of up-to-date and valid address data.
- *  Version: 1.5.1
+ *  Version: 1.5.2
  *  Author: Spikkl
  *  Author URI: https://www.spikkl.nl/
@@ -42 +42 @@
     final class Spikkl {
 
-        public static $version = '1.5.1';
+        public static $version = '1.5.2';
 
         protected static $_instance;