From 12e547a78e2eb6f1e7d7349507cd05d8a29b1eaa Mon Sep 17 00:00:00 2001 From: Leonardo Bispo de Oliveira Date: Wed, 16 Apr 2014 16:00:09 +0200 Subject: [PATCH 1/4] Added semi collon to the end of Lines - Most of linters are complaining about ; in the end of the line. --- src/ngAutocomplete.js | 48 +++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/src/ngAutocomplete.js b/src/ngAutocomplete.js index 3b0b33c..b027b21 100644 --- a/src/ngAutocomplete.js +++ b/src/ngAutocomplete.js @@ -40,45 +40,45 @@ angular.module( "ngAutocomplete", []) link: function(scope, element, attrs, controller) { //options for autocomplete - var opts - var watchEnter = false + var opts; + var watchEnter = false; //convert options provided to opts var initOpts = function() { - opts = {} + opts = {}; if (scope.options) { if (scope.options.watchEnter !== true) { - watchEnter = false + watchEnter = false; } else { - watchEnter = true + watchEnter = true; } if (scope.options.types) { - opts.types = [] - opts.types.push(scope.options.types) - scope.gPlace.setTypes(opts.types) + opts.types = []; + opts.types.push(scope.options.types); + scope.gPlace.setTypes(opts.types); } else { - scope.gPlace.setTypes([]) + scope.gPlace.setTypes([]); } if (scope.options.bounds) { - opts.bounds = scope.options.bounds - scope.gPlace.setBounds(opts.bounds) + opts.bounds = scope.options.bounds; + scope.gPlace.setBounds(opts.bounds); } else { - scope.gPlace.setBounds(null) + scope.gPlace.setBounds(null); } if (scope.options.country) { opts.componentRestrictions = { country: scope.options.country - } - scope.gPlace.setComponentRestrictions(opts.componentRestrictions) + }; + scope.gPlace.setComponentRestrictions(opts.componentRestrictions); } else { - scope.gPlace.setComponentRestrictions(null) + scope.gPlace.setComponentRestrictions(null); } } - } + }; if (scope.gPlace == undefined) { scope.gPlace = new google.maps.places.Autocomplete(element[0], {}); @@ -97,13 +97,13 @@ angular.module( "ngAutocomplete", []) } else { if (watchEnter) { - getPlace(result) + getPlace(result); } } } - }) + }); - //function to get retrieve the autocompletes first result using the AutocompleteService + //function to get retrieve the autocompletes first result using the AutocompleteService var getPlace = function(result) { var autocompleteService = new google.maps.places.AutocompleteService(); if (result.name.length > 0){ @@ -136,8 +136,8 @@ angular.module( "ngAutocomplete", []) //on focusout the value reverts, need to set it again. var watchFocusOut = element.on('focusout', function(event) { element.val(detailsResult.formatted_address); - element.unbind('focusout') - }) + element.unbind('focusout'); + }); }); } @@ -146,7 +146,7 @@ angular.module( "ngAutocomplete", []) } }); } - } + }; controller.$render = function () { var location = controller.$viewValue; @@ -155,10 +155,10 @@ angular.module( "ngAutocomplete", []) //watch options provided to directive scope.watchOptions = function () { - return scope.options + return scope.options; }; scope.$watch(scope.watchOptions, function () { - initOpts() + initOpts(); }, true); } From cb48a6ee235edc2d299b8a4aa13d879f8503a144 Mon Sep 17 00:00:00 2001 From: Leonardo Bispo de Oliveira Date: Wed, 16 Apr 2014 16:06:37 +0200 Subject: [PATCH 2/4] Removed opts variable - Removed the opts variable. It is not used outside initOpts. - Moved initOpts function to be inside the variable watcher. --- src/ngAutocomplete.js | 59 +++++++++++++------------------------------ 1 file changed, 18 insertions(+), 41 deletions(-) diff --git a/src/ngAutocomplete.js b/src/ngAutocomplete.js index b027b21..0860963 100644 --- a/src/ngAutocomplete.js +++ b/src/ngAutocomplete.js @@ -39,46 +39,7 @@ angular.module( "ngAutocomplete", []) link: function(scope, element, attrs, controller) { - //options for autocomplete - var opts; var watchEnter = false; - //convert options provided to opts - var initOpts = function() { - - opts = {}; - if (scope.options) { - - if (scope.options.watchEnter !== true) { - watchEnter = false; - } else { - watchEnter = true; - } - - if (scope.options.types) { - opts.types = []; - opts.types.push(scope.options.types); - scope.gPlace.setTypes(opts.types); - } else { - scope.gPlace.setTypes([]); - } - - if (scope.options.bounds) { - opts.bounds = scope.options.bounds; - scope.gPlace.setBounds(opts.bounds); - } else { - scope.gPlace.setBounds(null); - } - - if (scope.options.country) { - opts.componentRestrictions = { - country: scope.options.country - }; - scope.gPlace.setComponentRestrictions(opts.componentRestrictions); - } else { - scope.gPlace.setComponentRestrictions(null); - } - } - }; if (scope.gPlace == undefined) { scope.gPlace = new google.maps.places.Autocomplete(element[0], {}); @@ -158,9 +119,25 @@ angular.module( "ngAutocomplete", []) return scope.options; }; scope.$watch(scope.watchOptions, function () { - initOpts(); - }, true); + if (scope.options) { + watchEnter = scope.options.watchEnter; + + if (scope.options.types) + scope.gPlace.setTypes([ scope.options.types ]); + else + scope.gPlace.setTypes([]); + + if (scope.options.bounds) + scope.gPlace.setBounds(scope.options.bounds); + else + scope.gPlace.setBounds(null); + if (scope.options.country) + scope.gPlace.setComponentRestrictions({ country: scope.options.country }); + else + scope.gPlace.setComponentRestrictions(null); + } + }, true); } }; }); \ No newline at end of file From 4281dbce7936e68a3a3a86ec0668997fbb581659 Mon Sep 17 00:00:00 2001 From: Leonardo Bispo de Oliveira Date: Wed, 16 Apr 2014 16:13:52 +0200 Subject: [PATCH 3/4] Removed a not required if --- src/ngAutocomplete.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/ngAutocomplete.js b/src/ngAutocomplete.js index 0860963..ee8e2a5 100644 --- a/src/ngAutocomplete.js +++ b/src/ngAutocomplete.js @@ -41,9 +41,8 @@ angular.module( "ngAutocomplete", []) var watchEnter = false; - if (scope.gPlace == undefined) { - scope.gPlace = new google.maps.places.Autocomplete(element[0], {}); - } + scope.gPlace = new google.maps.places.Autocomplete(element[0], {}); + google.maps.event.addListener(scope.gPlace, 'place_changed', function() { var result = scope.gPlace.getPlace(); if (result !== undefined) { From 7f74f2893ca874a0e378eeafb2d5d3ef307bffed Mon Sep 17 00:00:00 2001 From: Leonardo Bispo de Oliveira Date: Wed, 16 Apr 2014 16:25:54 +0200 Subject: [PATCH 4/4] Changed watch enter to not got to server - Simulating an arrow down and enter on the listbox, so the app don't need to do one extra server call to get the information. This change will also fix the lost focus issue, where the AutoComplete is reverting the changes when user press enter. --- src/ngAutocomplete.js | 82 ++++++++++++------------------------------- 1 file changed, 22 insertions(+), 60 deletions(-) diff --git a/src/ngAutocomplete.js b/src/ngAutocomplete.js index ee8e2a5..aabc8a7 100644 --- a/src/ngAutocomplete.js +++ b/src/ngAutocomplete.js @@ -6,7 +6,7 @@ * * Usage: * - * * * + ng-model - autocomplete textbox value * @@ -44,73 +44,35 @@ angular.module( "ngAutocomplete", []) scope.gPlace = new google.maps.places.Autocomplete(element[0], {}); google.maps.event.addListener(scope.gPlace, 'place_changed', function() { - var result = scope.gPlace.getPlace(); - if (result !== undefined) { - if (result.address_components !== undefined) { - - scope.$apply(function() { - - scope.details = result; - - controller.$setViewValue(element.val()); - }); - } - else { - if (watchEnter) { - getPlace(result); - } - } + if ((scope.details = scope.gPlace.getPlace()) && scope.details.address_components) { + scope.$apply(function() { + controller.$setViewValue(element.val()); + }); } }); - //function to get retrieve the autocompletes first result using the AutocompleteService - var getPlace = function(result) { - var autocompleteService = new google.maps.places.AutocompleteService(); - if (result.name.length > 0){ - autocompleteService.getPlacePredictions( - { - input: result.name, - offset: result.name.length - }, - function listentoresult(list, status) { - if(list == null || list.length == 0) { - - scope.$apply(function() { - scope.details = null; - }); - - } else { - var placesService = new google.maps.places.PlacesService(element[0]); - placesService.getDetails( - {'reference': list[0].reference}, - function detailsresult(detailsResult, placesServiceStatus) { - - if (placesServiceStatus == google.maps.GeocoderStatus.OK) { - scope.$apply(function() { + var addListener = element[0].addEventListener || element[0].attachEvent; + var wrapper = function(type, listener) { + if (type === 'keydown') { + var orig = listener; + listener = function (event) { + if (watchEnter && event.which === 13) + orig.apply(element[0], [$.Event('keydown', { keyCode : 40, which : 40 })]); - controller.$setViewValue(detailsResult.formatted_address); - element.val(detailsResult.formatted_address); - - scope.details = detailsResult; - - //on focusout the value reverts, need to set it again. - var watchFocusOut = element.on('focusout', function(event) { - element.val(detailsResult.formatted_address); - element.unbind('focusout'); - }); - - }); - } - } - ); - } - }); + orig.apply(element[0], [event]); + }; } + + addListener.apply(element[0], [type, listener]); }; + if (element[0].addEventListener) + element[0].addEventListener = wrapper; + else if (element[0].attachEvent) + element[0].attachEvent = wrapper; + controller.$render = function () { - var location = controller.$viewValue; - element.val(location); + element.val(controller.$viewValue); }; //watch options provided to directive