2017-03-16 15:29:07 +00:00
/ * *
* @ file
2018-11-23 12:29:20 +00:00
* JavaScript behaviors for Telephone element .
2017-03-16 15:29:07 +00:00
* /
( function ( $ , Drupal , drupalSettings ) {
'use strict' ;
2018-11-23 12:29:20 +00:00
// @see https://github.com/jackocnr/intl-tel-input#options
Drupal . webform = Drupal . webform || { } ;
Drupal . webform . intlTelInput = Drupal . webform . intlTelInput || { } ;
Drupal . webform . intlTelInput . options = Drupal . webform . intlTelInput . options || { } ;
2017-03-16 15:29:07 +00:00
/ * *
* Initialize Telephone international element .
* @ see http : //intl-tel-input.com/node_modules/intl-tel-input/examples/gen/is-valid-number.html
* @ type { Drupal ~ behavior }
* /
Drupal . behaviors . webformTelephoneInternational = {
attach : function ( context ) {
2018-11-23 12:29:20 +00:00
if ( ! $ . fn . intlTelInput ) {
return ;
}
2017-03-16 15:29:07 +00:00
$ ( context ) . find ( 'input.js-webform-telephone-international' ) . once ( 'webform-telephone-international' ) . each ( function ( ) {
var $telephone = $ ( this ) ;
// Add error message container.
var $error = $ ( '<div class="form-item--error-message">' + Drupal . t ( 'Invalid phone number' ) + '</div>' ) . hide ( ) ;
2018-11-23 12:29:20 +00:00
$telephone . closest ( '.js-form-item' ) . append ( $error ) ;
2017-03-16 15:29:07 +00:00
// @todo: Figure out how to lazy load utilsScript (build/js/utils.js).
// @see https://github.com/jackocnr/intl-tel-input#utilities-script
2018-11-23 12:29:20 +00:00
var options = $ . extend ( {
nationalMode : false ,
initialCountry : $telephone . attr ( 'data-webform-telephone-international-initial-country' ) || ''
} , Drupal . webform . intlTelInput . options ) ;
$telephone . intlTelInput ( options ) ;
2017-03-16 15:29:07 +00:00
2018-11-23 12:29:20 +00:00
var reset = function ( ) {
2017-03-16 15:29:07 +00:00
$telephone . removeClass ( 'error' ) ;
$error . hide ( ) ;
} ;
2018-11-23 12:29:20 +00:00
$telephone . blur ( function ( ) {
2017-03-16 15:29:07 +00:00
reset ( ) ;
if ( $ . trim ( $telephone . val ( ) ) ) {
if ( ! $telephone . intlTelInput ( 'isValidNumber' ) ) {
$telephone . addClass ( 'error' ) ;
$error . show ( ) ;
}
}
} ) ;
$telephone . on ( 'keyup change' , reset ) ;
2018-11-23 12:29:20 +00:00
} ) ;
2017-03-16 15:29:07 +00:00
}
} ;
} ) ( jQuery , Drupal , drupalSettings ) ;