diff --git a/vatchecker.php b/vatchecker.php index b9d03dd..18daec6 100644 --- a/vatchecker.php +++ b/vatchecker.php @@ -173,6 +173,7 @@ public function uninstall() public function hookDisplayHeader( $params ) { $this->context->controller->addJS( $this->_path . 'views/js/front.js' ); + $this->context->controller->addCSS( $this->_path . 'views/css/front.css' ); } /** diff --git a/views/css/front.css b/views/css/front.css new file mode 100644 index 0000000..383ae92 --- /dev/null +++ b/views/css/front.css @@ -0,0 +1,60 @@ +/** +* 2007-2020 PrestaShop +* +* NOTICE OF LICENSE +* +* This source file is subject to the Academic Free License (AFL 3.0) +* that is bundled with this package in the file LICENSE.txt. +* It is also available through the world-wide-web at this URL: +* http://opensource.org/licenses/afl-3.0.php +* If you did not receive a copy of the license and are unable to +* obtain it through the world-wide-web, please send an email +* to license@prestashop.com so we can send you a copy immediately. +* +* DISCLAIMER +* +* Do not edit or add to this file if you wish to upgrade PrestaShop to newer +* versions in the future. If you wish to customize PrestaShop for your +* needs please refer to http://www.prestashop.com for more information. +* +* @author PrestaShop SA +* @copyright 2007-2020 PrestaShop SA +* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) +* International Registered Trademark & Property of PrestaShop SA +* +* Don't forget to prefix your containers with your own identifier +* to avoid any conflicts with others containers. +*/ + +.vatchecker-reload { + position: relative; + float: right; + margin: .2em; + width: 1em; + height: 1em; + display: inline-block; + border: 3px solid; + border-color: currentColor #0000 currentColor #0000; + border-radius: 50%; + box-sizing: border-box; + cursor: pointer; +} +.vatchecker-reload:before , .vatchecker-reload:after{ + content: ''; + top: 0; + left: 0; + position: absolute; + border: 0.25em solid transparent; + border-bottom-color: currentColor; + transform: translate(-0.33em,.17em) rotate(-35deg); +} +.vatchecker-reload:after { + border-color: currentColor #0000 #0000 #0000 ; + transform: translate(.47em,-0.02em) rotate(-35deg); +} +.vatchecker-reload.rotate { + animation: 1s rotate linear infinite; +} +@keyframes rotate { + 100%{ transform: rotate(360deg) } +} diff --git a/views/js/front.js b/views/js/front.js index a0eb6e9..44a2ab2 100644 --- a/views/js/front.js +++ b/views/js/front.js @@ -32,11 +32,13 @@ jQuery( function( $ ) { var $document = $(document), checked = {}; - vatchecker.validate = function( vat_number, id_country, $elem ) { + vatchecker.validate = function( vat_number, id_country, $elem, $reloader ) { $elem.removeClass( 'validated error text-danger text-success' ); - $elem.next( '.vat-result' ).remove(); - $elem.after( '
' ); - $result = $elem.next( '.vat-result' ); + $elem.siblings( '.vatchecker-result' ).remove(); + + // Remove invalid characters. + vat_number = vat_number.toUpperCase().replace( /[^A-Z0-9]/gi, '' ); + $elem.val( vat_number ); // Minimal VAT number length is 8 digits. // https://en.wikipedia.org/wiki/VAT_identification_number @@ -44,7 +46,20 @@ jQuery( function( $ ) { return; } - var $result = $elem.next( '.vat-result' ), + if ( ! $reloader || ! $reloader.length ) { + $reloader = addReload( $elem ); + } else { + // Enfore recheck. + delete checked[ vat_number ]; + } + + if ( $reloader ) { + $reloader.after( '
' ); + } else { + $elem.after( '
' ); + } + + var $result = $elem.siblings( '.vatchecker-result' ), loading = '. . . ', loading_interval = setInterval( function() { if ( 20 < loading.length ) { @@ -60,6 +75,7 @@ jQuery( function( $ ) { } $elem.css( { 'opacity': '0.5' } ); + $reloader.addClass( 'rotate' ); $.ajax( { type: 'POST', @@ -88,12 +104,14 @@ jQuery( function( $ ) { clearInterval( loading_interval ); $result.html(''); + $reloader.removeClass( 'rotate' ); if ( resp.hasOwnProperty( 'valid' ) ) { // Check successful. if ( resp.valid ) { // Valid VAT $elem.addClass( 'validated text-success' ); $result.remove(); + $reloader.remove(); checked[ vat_number ] = resp; } else if ( resp.error ) { @@ -112,16 +130,33 @@ jQuery( function( $ ) { } }; + function addReload( input ) { + var $vat = $( input ), + $reloader = $vat.siblings( '.vatchecker-reload' ); + + if ( $reloader.length ) { + return $reloader; + } + + $vat.after( '' ); + $reloader = $vat.siblings( '.vatchecker-reload' ); + + $reloader.on( 'click touchend', function() { + var $form = $vat.parents( 'form' ), + $country = $form.find('[name="id_country"]'); + + vatchecker.validate( $vat.val(), $country.val(), $vat, $reloader ); + } ); + + return $reloader; + } + $document.on( 'blur', '[name="vat_number"]', function () { var $vat = $( this ), $form = $vat.parents( 'form' ), - $country = $form.find('[name="id_country"]'), - - // Remove invalid characters. - val = $vat.val().toUpperCase().replace( /[^A-Z0-9]/gi, '' ); + $country = $form.find('[name="id_country"]'); - $vat.val( val ); - vatchecker.validate( $( this ).val(), $country.val(), $vat ); + vatchecker.validate( $vat.val(), $country.val(), $vat ); } ); $document.on( 'change', '[name="id_country"]', function() {