Skip to content

Commit 6f533c6

Browse files
mas-iotamas-iota
authored
Merge pull request #25 from BuildFire/load-google-script
fix(static-key): remove google static key
2 parents b8cc251 + 952144b commit 6f533c6

5 files changed

Lines changed: 211 additions & 148 deletions

File tree

‎control/content/app.js‎

Lines changed: 96 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,99 @@
11
(function (angular) {
22
"use strict";
3-
//created geoFencePluginContent module
3+
// created geoFencePluginContent module
44
angular
5-
.module('geoFencePluginContent',
6-
[
7-
'geoFenceServices',
8-
'geoFenceEnums',
9-
'ngAnimate',
10-
'ui.bootstrap',
11-
'infinite-scroll',
12-
'geoFenceModals'
13-
14-
])
15-
//injected ui.bootstrap for angular bootstrap component
16-
.config(['$compileProvider', '$httpProvider', function ($compileProvider, $httpProvider) {
17-
18-
/**
19-
* To make href urls safe on mobile
20-
*/
21-
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|cdvfile|file):/);
22-
23-
var interceptor = ['$q', function ($q) {
24-
var counter = 0;
25-
26-
return {
27-
28-
request: function (config) {
29-
buildfire.spinner.show();
30-
counter++;
31-
return config;
32-
},
33-
response: function (response) {
34-
counter--;
35-
if (counter === 0) {
36-
buildfire.spinner.hide();
37-
}
38-
return response;
39-
},
40-
responseError: function (rejection) {
41-
counter--;
42-
if (counter === 0) {
43-
buildfire.spinner.hide();
44-
}
45-
return $q.reject(rejection);
46-
}
47-
};
48-
}];
49-
$httpProvider.interceptors.push(interceptor);
50-
}])
51-
})
52-
(window.angular);
5+
.module('geoFencePluginContent', [
6+
'geoFenceServices',
7+
'geoFenceEnums',
8+
'ngAnimate',
9+
'ui.bootstrap',
10+
'infinite-scroll',
11+
'geoFenceModals'
12+
])
13+
//injected ui.bootstrap for angular bootstrap component
14+
.config(['$compileProvider', '$httpProvider', function ($compileProvider, $httpProvider) {
15+
16+
/**
17+
* To make href urls safe on mobile
18+
*/
19+
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension|cdvfile|file):/);
20+
21+
var interceptor = ['$q', function ($q) {
22+
var counter = 0;
23+
24+
return {
25+
request: function (config) {
26+
buildfire.spinner.show();
27+
counter++;
28+
return config;
29+
},
30+
response: function (response) {
31+
counter--;
32+
if (counter === 0) {
33+
buildfire.spinner.hide();
34+
}
35+
return response;
36+
},
37+
responseError: function (rejection) {
38+
counter--;
39+
if (counter === 0) {
40+
buildfire.spinner.hide();
41+
}
42+
return $q.reject(rejection);
43+
}
44+
};
45+
}];
46+
$httpProvider.interceptors.push(interceptor);
47+
}])
48+
.service('ScriptLoaderService', ['$q', function ($q) {
49+
this.loadScript = function () {
50+
51+
const {apiKeys} = buildfire.getContext();
52+
const {googleMapKey} = apiKeys;
53+
54+
const url = `https://maps.googleapis.com/maps/api/js?key=${googleMapKey}&v=3.exp&libraries=places`;
55+
56+
const deferred = $q.defer();
57+
58+
// Check if the script is already loaded
59+
if (document.querySelector(`script[src="${url}"]`)) {
60+
deferred.resolve(); // Already loaded
61+
} else {
62+
// If not, load the script
63+
const script = document.createElement('script');
64+
script.type = 'text/javascript';
65+
script.src = url;
66+
67+
script.onload = function () {
68+
deferred.resolve();
69+
};
70+
71+
script.onerror = function () {
72+
deferred.reject('Failed to load Google Maps script.');
73+
};
74+
75+
window.gm_authFailure = () => {
76+
deferred.reject('Failed to authenticate Google Maps API.');
77+
};
78+
79+
document.head.appendChild(script);
80+
}
81+
82+
return deferred.promise;
83+
};
84+
}])
85+
.run(['ScriptLoaderService', '$q', function (ScriptLoaderService, $q) {
86+
// Create a global promise for Google Maps loading
87+
angular.module('geoFencePluginContent').googleMapsReady = $q.defer();
88+
89+
ScriptLoaderService.loadScript()
90+
.then(function () {
91+
// Resolve the global promise when the script is loaded
92+
angular.module('geoFencePluginContent').googleMapsReady.resolve();
93+
})
94+
.catch(function (err) {
95+
console.error('Google Maps failed to load:', err);
96+
angular.module('geoFencePluginContent').googleMapsReady.reject(err);
97+
});
98+
}])
99+
})(window.angular);

‎control/content/directives.js‎

Lines changed: 108 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -2,105 +2,116 @@
22
"use strict";
33
angular
44
.module('geoFencePluginContent')
5-
.directive('googleLocationSearch', function () {
6-
return {
7-
restrict: 'A',
8-
scope: {setLocationInController: '&callbackFn'},
9-
link: function (scope, element, attributes) {
10-
var options = {
11-
types: ['geocode']
12-
};
13-
var autocomplete = new google.maps.places.Autocomplete(element[0], options);
14-
google.maps.event.addListener(autocomplete, 'place_changed', function () {
15-
var location = autocomplete.getPlace().formatted_address;
16-
if (autocomplete.getPlace().geometry) {
17-
var coordinates = [autocomplete.getPlace().geometry.location.lng(), autocomplete.getPlace().geometry.location.lat()];
18-
scope.setLocationInController({
19-
data: {
20-
location: location,
21-
coordinates: coordinates
22-
}
23-
});
24-
}
25-
});
26-
}
27-
};
28-
})
29-
.directive("googleMap", ['$timeout', function ($timeout) {
30-
return {
31-
template: "<div></div>",
32-
link: function (scope, elem, attrs) {
33-
var circle;
34-
var map = new google.maps.Map(elem[0], {
35-
zoom: 9,
36-
center: {lat: 37.090, lng: -95.712}
37-
});
5+
.directive('googleLocationSearch', function() {
6+
return {
7+
restrict: 'A',
8+
scope: { setLocationInController: '&callbackFn' },
9+
link: function (scope, element, attributes) {
10+
// Wait for Google Maps script to be ready before initializing
11+
angular.module('geoFencePluginContent').googleMapsReady.promise.then(function() {
12+
var options = {
13+
types: ['geocode']
14+
};
15+
var autocomplete = new google.maps.places.Autocomplete(element[0], options);
16+
google.maps.event.addListener(autocomplete, 'place_changed', function () {
17+
var location = autocomplete.getPlace().formatted_address;
18+
if (autocomplete.getPlace().geometry) {
19+
var coordinates = [autocomplete.getPlace().geometry.location.lng(), autocomplete.getPlace().geometry.location.lat()];
20+
scope.setLocationInController({
21+
data: {
22+
location: location,
23+
coordinates: coordinates
24+
}
25+
});
26+
}
27+
});
28+
}).catch(function(err) {
29+
console.error('Google Maps failed to load:', err);
30+
// Handle the case when Google Maps API fails to load (e.g., show an error message)
31+
});
32+
}
33+
};
34+
})
35+
.directive("googleMap", [ '$timeout', function($timeout) {
36+
return {
37+
template: "<div></div>",
38+
link: function (scope, elem, attrs) {
39+
// Wait for Google Maps script to be ready before initializing
40+
angular.module('geoFencePluginContent').googleMapsReady.promise.then(function() {
41+
var circle;
42+
var map = new google.maps.Map(elem[0], {
43+
zoom: 9,
44+
center: { lat: 37.090, lng: -95.712 }
45+
});
3846

39-
attrs.$observe('googleMap', redrawTheCircle);
40-
attrs.$observe('googleMapRadius', redrawTheCircle);
41-
42-
function calculateRadius(){
43-
var radiusInMeters;
44-
if((((scope.ContentHome.geoAction && scope.ContentHome.geoAction.data && parseFloat(scope.ContentHome.geoAction.data.radius)) || 10) * 1609.34 < 3.048) ){
45-
radiusInMeters= 3.048;
46-
scope.ContentHome.geoAction.data.radius=3.048/1609.34;
47-
calculateRadiusInMilesAndFeet(scope.ContentHome.geoAction.data.radius);
48-
}
49-
else{
50-
radiusInMeters=((scope.ContentHome.geoAction && scope.ContentHome.geoAction.data && parseFloat(scope.ContentHome.geoAction.data.radius)) || 10) * 1609.34;
51-
}
52-
return radiusInMeters;
53-
}
47+
attrs.$observe('googleMap', redrawTheCircle);
48+
attrs.$observe('googleMapRadius', redrawTheCircle);
5449

55-
function calculateRadiusInMilesAndFeet(radiusInMiles){
56-
scope.ContentHome.radiusMiles=parseInt(radiusInMiles);
57-
if(scope.ContentHome.radiusMiles){
58-
scope.ContentHome.radiusFeet=parseInt((parseFloat(radiusInMiles)%scope.ContentHome.radiusMiles)*5280);
59-
}
60-
else{
61-
scope.ContentHome.radiusFeet=parseInt(parseFloat(radiusInMiles)*5280);
62-
}
63-
}
50+
function calculateRadius(){
51+
var radiusInMeters;
52+
if((((scope.ContentHome.geoAction && scope.ContentHome.geoAction.data && parseFloat(scope.ContentHome.geoAction.data.radius)) || 10) * 1609.34 < 3.048) ){
53+
radiusInMeters= 3.048;
54+
scope.ContentHome.geoAction.data.radius=3.048/1609.34;
55+
calculateRadiusInMilesAndFeet(scope.ContentHome.geoAction.data.radius);
56+
}
57+
else{
58+
radiusInMeters=((scope.ContentHome.geoAction && scope.ContentHome.geoAction.data && parseFloat(scope.ContentHome.geoAction.data.radius)) || 10) * 1609.34;
59+
}
60+
return radiusInMeters;
61+
}
62+
function calculateRadiusInMilesAndFeet(radiusInMiles){
63+
scope.ContentHome.radiusMiles=parseInt(radiusInMiles);
64+
if(scope.ContentHome.radiusMiles){
65+
scope.ContentHome.radiusFeet=parseInt((parseFloat(radiusInMiles)%scope.ContentHome.radiusMiles)*5280);
66+
}
67+
else{
68+
scope.ContentHome.radiusFeet=parseInt(parseFloat(radiusInMiles)*5280);
69+
}
70+
}
6471

65-
function redrawTheCircle(newVal, oldVal) {
66-
if (circle)
67-
circle.setMap(null);
68-
circle = new google.maps.Circle({
69-
strokeColor: '#09a3ee',
70-
strokeOpacity: 0.8,
71-
strokeWeight: 2,
72-
fillColor: '#09a3ee',
73-
fillOpacity: 0.35,
74-
map: map,
75-
center: (scope.ContentHome.center && scope.ContentHome.center.lat && scope.ContentHome.center.lng && scope.ContentHome.center) || ({"lat":32.715738,"lng":-117.16108380000003}),
76-
radius: calculateRadius(),
77-
editable: true
78-
});
79-
if (map && circle)
80-
map.panTo(circle.getCenter());
81-
circle.addListener('radius_changed', function () {
82-
scope.$apply(function () {
83-
scope.ContentHome.geoAction.data.radius = (circle.getRadius()/1609.34);
84-
calculateRadiusInMilesAndFeet(scope.ContentHome.geoAction.data.radius);
85-
});
86-
console.info('Circle radius_changed Event called');
87-
});
88-
circle.addListener('center_changed', function () {
89-
var newCenter = circle.getCenter();
90-
console.info('center_changed Event called',newCenter, newCenter.lat(), newCenter.lng());
91-
scope.ContentHome.center = {lat: newCenter.lat(), lng: newCenter.lng()};
92-
scope.$apply(function(){
93-
scope.ContentHome.selectedLocation=newCenter.lat()+','+newCenter.lng();
94-
scope.ContentHome.geoAction.data.epicenter.address=scope.ContentHome.selectedLocation;
95-
scope.ContentHome.geoAction.data.epicenter.coordinates=scope.ContentHome.center;
96-
});
97-
map.panTo(circle.getCenter());
98-
});
99-
}
100-
}
101-
}
102-
}])
103-
.directive('ngEnter', function () {
72+
function redrawTheCircle(newVal, oldVal) {
73+
if (circle)
74+
circle.setMap(null);
75+
circle = new google.maps.Circle({
76+
strokeColor: '#09a3ee',
77+
strokeOpacity: 0.8,
78+
strokeWeight: 2,
79+
fillColor: '#09a3ee',
80+
fillOpacity: 0.35,
81+
map: map,
82+
center: (scope.ContentHome.center && scope.ContentHome.center.lat && scope.ContentHome.center.lng && scope.ContentHome.center) || ({"lat":32.715738,"lng":-117.16108380000003}),
83+
radius: calculateRadius(),
84+
editable: true
85+
});
86+
if (map && circle)
87+
map.panTo(circle.getCenter());
88+
circle.addListener('radius_changed', function () {
89+
scope.$apply(function () {
90+
scope.ContentHome.geoAction.data.radius = (circle.getRadius()/1609.34);
91+
calculateRadiusInMilesAndFeet(scope.ContentHome.geoAction.data.radius);
92+
});
93+
console.info('Circle radius_changed Event called');
94+
});
95+
circle.addListener('center_changed', function () {
96+
var newCenter = circle.getCenter();
97+
console.info('center_changed Event called',newCenter, newCenter.lat(), newCenter.lng());
98+
scope.ContentHome.center = {lat: newCenter.lat(), lng: newCenter.lng()};
99+
scope.$apply(function(){
100+
scope.ContentHome.selectedLocation=newCenter.lat()+','+newCenter.lng();
101+
scope.ContentHome.geoAction.data.epicenter.address=scope.ContentHome.selectedLocation;
102+
scope.ContentHome.geoAction.data.epicenter.coordinates=scope.ContentHome.center;
103+
});
104+
map.panTo(circle.getCenter());
105+
});
106+
}
107+
}).catch(function(err) {
108+
console.error('Google Maps failed to load:', err);
109+
// Handle the case when Google Maps API fails to load (e.g., show an error message)
110+
});
111+
}
112+
};
113+
}])
114+
.directive('ngEnter', function () {
104115
return function (scope, element, attrs) {
105116
element.bind("keydown keypress", function (event) {
106117
if (event.which === 13 && element && element.length) {
@@ -117,4 +128,4 @@
117128
});
118129
};
119130
})
120-
})(window.angular);
131+
})(window.angular);

‎control/content/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
<script src="assets/js/ng-infinite-scroll.js"></script>
2424

2525
<!--<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>-->
26-
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpEguTSmOeMQM-4lLaJRoyWN8SlUrOjkg&v=3.exp&libraries=places"></script>
2726
<script src="controllers/content.home.controller.js"></script>
2827
</head>
2928
<body ng-controller="ContentHomeCtrl as ContentHome">
@@ -180,4 +179,4 @@
180179
</div>
181180
</div>
182181
</body>
183-
</html>
182+
</html>

‎widget/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
}
2424
});
2525
</script>
26+
<link rel="stylesheet" href="./style.css" />
2627
</head>
2728
<body>
2829
<img style="margin: auto; display: block;" src="geoFenceIcon.png">

‎widget/style.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
#lng , #lat {
2+
color: var(--bf-theme-body-text);
3+
font-family: var(--bf-font-family);
4+
margin: 10px 0;
5+
}

0 commit comments

Comments
 (0)