Fixes editing issue with politespace-us-telephone plugin

filamentgroup · Sep 26, 2016 · 78c93db · 78c93db
1 parent 34ceb6f
commit 78c93db
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -186,7 +186,7 @@ <h2>input type="tel"</h2>
 			<input type="tel" data-politespace data-politespace-strip="[^\d]*" data-grouplength="4,3,3" data-reverse value="2223334444">
 		</label>
 		<label>
-			<code>input[type=tel]</code> (US Phone Number, strips country code transparently) with <code>data-politespace-us-telephone data-grouplength="4,3,3" data-reverse data-delimiter="-"</code>
+			<code>input[type=tel]</code> (US Phone Number, strips country code transparently) with <code>data-politespace-us-telephone data-grouplength="3,3,4" data-reverse data-delimiter="-"</code>
 			<input type="tel" data-politespace data-politespace-us-telephone data-grouplength="4,3,3" data-reverse data-delimiter="-" value="12223334444" maxlength="10">
 		</label>
 

diff --git a/src/politespace-init.js b/src/politespace-init.js
@@ -34,6 +34,8 @@
 					polite.updateProxy();
 				})
 				.bind( "blur", function() {
+					$( this ).trigger( "politespace-beforeblur" );
+
 					polite.update();
 
 					if( polite.useProxy() ){

diff --git a/src/politespace-us-telephone.js b/src/politespace-us-telephone.js
@@ -2,36 +2,46 @@
 (function( w, $ ) {
 	"use strict";
 
+	var maxlengthCacheKey = "politespace-us-telephone-maxlength";
+	var eventName = "politespace-beforeblur.politespace-us-telephone";
+
 	function cleanup( el ) {
 		var $t = $( el );
-		$t.val( $t.val().replace( /^1/, "" ) );
+		var val = $t.val();
+
+		$t.val( val.replace( /^1/, "" ) );
 	}
 
-	$( document ).bind( "politespace-init politespace-input", function( event ) {
+	// On init
+	$( document ).bind( "politespace-init", function( event ) {
 		var $t = $( event.target );
 		if( !$t.is( "[data-politespace-us-telephone]" ) ) {
 			return;
 		}
-		var val = $t.val();
 
 		// Adjust maxlength
 		var maxlength= $t.attr( "maxlength" );
-		var maxlengthCacheKey = "politespace-us-telephone-maxlength";
-		var maxlengthCache = $t.data( maxlengthCacheKey );
 
-		if( maxlength && !maxlengthCache ) {
-			maxlengthCache = maxlength;
-			$t.data( maxlengthCacheKey, maxlength );
+		if( maxlength ) {
+			$t.data( maxlengthCacheKey, parseInt( maxlength, 10 ) );
 
 			cleanup( $t[ 0 ] );
-			$t.one( "blur", function() {
-				$( this ).attr( "maxlength", maxlength );
+			$t.off( eventName ).on( eventName, function() {
+				$( this ).attr( "maxlength", $t.data( maxlengthCacheKey ) );
 				cleanup( this );
 			});
 		}
+	});
+
+	// On input
+	$( document ).bind( "politespace-input", function( event ) {
+		var $t = $( event.target );
+		if( !$t.is( "[data-politespace-us-telephone]" ) ) {
+			return;
+		}
 
-		if( val.indexOf( '1' ) === 0 ) {
-			$t.attr( "maxlength", parseInt( maxlengthCache, 10 ) + 1 );
+		if( $t.val().indexOf( '1' ) === 0 ) {
+			$t.attr( "maxlength", $t.data( maxlengthCacheKey ) + 1 );
 		}
 	});