remove jquery and jQuery.geocode dependencies

urbandove · Aug 12, 2016 · f08794b · f08794b
1 parent 8d985f2
commit f08794b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 26 deletions.
diff --git a/address/forms.py b/address/forms.py
@@ -33,8 +33,6 @@ def _media(self):
             query_parms += '&key={}'.format(settings.GOOGLE_API_KEY)
 
         return forms.Media(js=(
-            'js/jquery.min.js',
-            'address/js/jquery.geocomplete.min.js',
             'address/js/address.js',
             maps_api + query_parms))
 

diff --git a/address/static/address/js/address.js b/address/static/address/js/address.js
@@ -1,19 +1,43 @@
-$(function(){
-    $('input.address').each(function(){
-        var self = $(this);
-	var cmps = $('#' + self.attr('name') + '_components');
-	var fmtd = $('input[name="' + self.attr('name') + '_formatted"]');
-        self.geocomplete({
-            details: cmps,
-            detailsAttribute: 'data-geo'
-        }).change(function(){
-	    if(self.val() != fmtd.val()) {
-		var cmp_names = ['country', 'country_code', 'locality', 'postal_code',
+function initAddressAutoComplete() {
+	var address_inputs = document.querySelectorAll('input.address')
+	for (var i = 0; i < address_inputs.length; i++){
+		var self = address_inputs[i];
+		var cmps = document.querySelector('#' + self.name + '_components')
+		var fmtd = document.querySelector('input[name="' + self.name + '_formatted"]');
+		var autocomplete = new google.maps.places.Autocomplete(self);
+		var changed_flag = false;
+		autocomplete.addListener('place_changed', function() {
+			changed_flag = true;
+			var place = autocomplete.getPlace();
+			fmtd.value = place.formatted_address;
+			for (var x = 0; x < place.address_components.length; x++){
+				var cmp = place.address_components[x]
+				if (cmp.types[0] == "sublocality_level_1"){cmp.types[0] = "locality"}
+				if (cmps.querySelector('input[data-geo="'+cmp.types[0]+'"')){
+					cmps.querySelector('input[data-geo="'+cmp.types[0]+'"').value = cmp.long_name
+					if (cmps.querySelector('input[data-geo="'+cmp.types[0]+'_short"')){
+						cmps.querySelector('input[data-geo="'+cmp.types[0]+'_short"').value = cmp.short_name
+					}
+				}
+			}
+		  	if (place.geometry) {
+				cmps.querySelector('input[data-geo="lat"').value = place.geometry.location.lat();
+				cmps.querySelector('input[data-geo="lng"').value = place.geometry.location.lng();
+			} else {
+		    		console.log("Autocomplete's returned place contains no geometry");
+	  		}
+			changed_flag = false;
+		})
+		self.addEventListener("change", function( event ) {
+		  !changed_flag && clear_address_hidden_fields(event.target)
+		}, true);
+	}
+}
+function clear_address_hidden_fields(element){
+	var cmp_names = ['country', 'country_code', 'locality', 'postal_code',
 				 'route', 'street_number', 'state', 'state_code',
 				 'formatted', 'latitude', 'longitude'];
-		for(var ii = 0; ii < cmp_names.length; ++ii)
-		    $('input[name="' + self.attr('name') + '_' + cmp_names[ii] + '"]').val('');
+		for(var ii = 0; ii < cmp_names.length; ++ii){
+		    document.querySelector('input[name="' + element.name + '_' + cmp_names[ii] + '"]').value = '';
 	    }
-	});
-    });
-});
+}
diff --git a/address/static/address/js/jquery.geocomplete.min.js b/address/static/address/js/jquery.geocomplete.min.js