1 (function($){ 2 'use strict'; 3 4 /** 5 * autocomplete control 6 * @type {Object} 7 * @name AutocompleteRadius 8 * @class AutocompleteRadius Control 9 * @memberOf jQuery.fn.jplist.controls 10 */ 11 jQuery.fn.jplist.controls.AutocompleteRadius = {}; 12 13 /** 14 * render control html 15 * @param {jQuery.fn.jplist.view.PanelControl} control 16 * @memberOf jQuery.fn.jplist.controls.AutocompleteRadius 17 */ 18 jQuery.fn.jplist.controls.AutocompleteRadius.render = function(control){ 19 20 var autocomplete 21 ,$input 22 ,$select 23 ,zoom 24 ,options = {}; 25 26 //get jquery elements 27 $input = control.$control.find('input'); 28 $select = control.$control.find('select'); 29 30 if(control.controlTypeOptions){ 31 options = control.controlTypeOptions; 32 } 33 34 //init autocomolete 35 autocomplete = new google.maps.places.Autocomplete($input.get(0), options); 36 37 //init zoom 38 zoom = Number(control.$control.attr('data-zoom')); 39 40 if(isNaN(zoom)){ 41 zoom = 17; 42 } 43 44 //add data 45 control.$control.data('jlocator-autocomplete-with-radius', autocomplete); 46 control.$control.data('jlocator-autocomplete-with-radius-input', $input); 47 control.$control.data('jlocator-autocomplete-with-radius-select', $select); 48 control.$control.data('jplist-autocomplete-with-radius-zoom', zoom); 49 }; 50 51 /** 52 * init events 53 * @param {jQuery.fn.jplist.view.PanelControl} control 54 * @memberOf jQuery.fn.jplist.controls.AutocompleteRadius 55 */ 56 jQuery.fn.jplist.controls.AutocompleteRadius.initEvents = function(control){ 57 58 var autocomplete 59 ,listenerHandle = control.$control.data('jplist-handle2') 60 ,$input 61 ,$select; 62 63 //get autocomplete 64 autocomplete = control.$control.data('jlocator-autocomplete-with-radius'); 65 $input = control.$control.data('jlocator-autocomplete-with-radius-input'); 66 $select = control.$control.data('jlocator-autocomplete-with-radius-select'); 67 68 //remove listener 69 if(listenerHandle){ 70 google.maps.event.removeListener(listenerHandle); 71 } 72 73 //add listener 74 listenerHandle = google.maps.event.addListener(autocomplete, 'place_changed', function(){ 75 76 var place 77 ,lat 78 ,lng; 79 80 //get choosen place 81 place = autocomplete.getPlace(); 82 83 //set latitude and longitude 84 if(place.geometry){ 85 86 lat = place.geometry.location['lat'](); 87 lng = place.geometry.location['lng'](); 88 89 control.$control.attr('data-latitude', lat); 90 control.$control.attr('data-longitude', lng); 91 control.$control.attr('data-name', place.name); 92 93 //trigger jump to map event 94 control.$jplistBox.trigger('jumpEvent', [lat, lng, control.$control.data('jplist-autocomplete-with-radius-zoom')]); 95 } 96 97 //send panel redraw event 98 control.$jplistBox.trigger(control.options.force_ask_event, [false]); 99 }); 100 101 if($input.length > 0 && $select.length > 0){ 102 103 $input.off('keyup').on('keyup', function(e){ 104 105 var val; 106 107 //get val 108 val = $.trim($(this).val()); 109 110 if(val === ''){ 111 112 control.$control.attr('data-latitude', ''); 113 control.$control.attr('data-longitude', ''); 114 115 //send panel redraw event 116 control.$jplistBox.trigger(control.options.force_ask_event, [false]); 117 } 118 }); 119 120 //init select change 121 $select.change(function(){ 122 123 //send panel redraw event 124 control.$jplistBox.trigger(control.options.force_ask_event, [false]); 125 }); 126 } 127 128 //save handler 129 control.$control.data('jplist-handle2', listenerHandle); 130 }; 131 132 /** 133 * get current control status 134 * @param {boolean} isDefault - if true, get default (initial) control status; else - get current control status 135 * @param {jQuery.fn.jplist.view.PanelControl} control 136 * @return {jQuery.fn.jplist.models.Status} 137 * @memberOf jQuery.fn.jplist.controls.AutocompleteRadius 138 */ 139 jQuery.fn.jplist.controls.AutocompleteRadius.getStatus = function(isDefault, control){ 140 141 var status = null 142 ,latitude 143 ,longitude 144 ,data 145 ,units 146 ,$select 147 ,distanceValue 148 ,distanceInMeters; 149 150 //get attributes 151 latitude = control.$control.attr('data-latitude'); 152 longitude = control.$control.attr('data-longitude'); 153 units = control.$control.attr('data-units'); 154 155 //get select 156 $select = control.$control.data('jlocator-autocomplete-with-radius-select'); 157 158 if($select.length > 0){ 159 160 //check if distance is a number 161 distanceValue = parseFloat($select.val()); 162 163 if(!isNaN(distanceValue)){ 164 165 166 if(units && units.toString() === 'km'){ 167 168 distanceInMeters = distanceValue * 1000; 169 } 170 else{ //miles 171 172 //get distance in meters: 1 Mile = 1609.34 meters 173 distanceInMeters = distanceValue * 1609.34; 174 } 175 176 data = { 177 name: control.$control.attr('data-name') 178 ,radius: distanceInMeters 179 ,filterType: 'autocomplete' 180 }; 181 182 if(isDefault){ 183 data.latitude = ''; 184 data.longitude = ''; 185 status = new jQuery.fn.jplist.models.Status(control.name, control.action, control.type, data, true); 186 } 187 else{ 188 if($.isNumeric(latitude) && $.isNumeric(longitude)){ 189 190 data.latitude = latitude; 191 data.longitude = longitude; 192 status = new jQuery.fn.jplist.models.Status(control.name, control.action, control.type, data, true); 193 } 194 } 195 } 196 } 197 198 return status; 199 }; 200 201 202 })(jQuery); 203 204