Merge pull request #90 from BuildFire/remove-static-key

fix(static-key): remove static google api key
BuildFire · Sep 25, 2024 · dd0d882 · dd0d882
2 parents 095706f + c8b9448
commit dd0d882
Show file tree

Hide file tree

Showing 15 changed files with 157 additions and 67 deletions.
diff --git a/control/content/app.js b/control/content/app.js
@@ -206,8 +206,42 @@
         }
       };
     })
-    .run(['Location', '$rootScope', function (Location, $rootScope) {
-      // Handler to receive message from widget
+    .service('ScriptLoaderService', ['$q', function ($q) {
+      this.loadScript = function () {
+        const { apiKeys } = buildfire.getContext();
+        const { googleMapKey } = apiKeys;
+        const url = ` https://maps.googleapis.com/maps/api/js?v=3.exp&key=${googleMapKey}&libraries=places`;
+
+        const deferred = $q.defer();
+
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = url;
+
+        script.onload = function () {
+          console.info(`Successfully loaded script: ${url}`);
+          deferred.resolve();
+        };
+
+        script.onerror = function () {
+          console.error(`Failed to load script: ${url}`);
+          deferred.reject('Failed to load script.');
+        };
+
+        document.head.appendChild(script);
+        return deferred.promise;
+      };
+    }])
+    .run(['Location', '$rootScope','ScriptLoaderService', function (Location, $rootScope, ScriptLoaderService) {
+
+      ScriptLoaderService.loadScript()
+        .then(() => {
+          console.info("Successfully loaded Google's Maps SDK.");
+        })
+        .catch(() => {
+          console.error("Failed to load Google Maps SDK.");
+        });
+
       buildfire.messaging.onReceivedMessage = function (msg) {
         switch (msg.type) {
           case 'OpenItem':
@@ -224,4 +258,4 @@
         }
       });
     }]);
-})(window.angular, window.buildfire);
+})(window.angular, window.buildfire);
diff --git a/control/content/app.services.js b/control/content/app.services.js
@@ -152,7 +152,9 @@
           console.log(longitude, latitude);
           var valid = (inRange(-90, latitude, 90) && inRange(-180, longitude, 180));
           if (valid) {
-            $http.get("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," + longitude + "&key=" + GOOGLE_KEYS.API_KEY)
+            const { apiKeys } = buildfire.getContext();
+            const { googleMapKey } = apiKeys;
+            $http.get("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," + longitude + "&key=" + googleMapKey)
               .then(function (response) {
                 // this callback will be called asynchronously
                 // when the response is available
@@ -186,4 +188,4 @@
         }
       };
     }]);
-})(window.angular, window.buildfire);
+})(window.angular, window.buildfire);
diff --git a/control/content/assets/css/styles.css b/control/content/assets/css/styles.css
@@ -38,4 +38,4 @@
     overflow-y: auto;
 }
 
-.input-disabled{background-color:#DEDEDE;border:1px solid #ABADB3;padding:2px 1px;}
+.input-disabled{background-color:#DEDEDE;border:1px solid #ABADB3;padding:2px 1px;}
diff --git a/control/content/enums.js b/control/content/enums.js
@@ -36,9 +36,8 @@
       COORDINATES: "Coordinates"
     })
     .constant('GOOGLE_KEYS', {
-      API_KEY: 'AIzaSyBdhPtd93zNB7sXm_sjseo9gZgtwgxRUWM'
     })
     .constant('PAGINATION', {
       eventsCount: 10
     });
-})(window.angular);
+})(window.angular);
diff --git a/control/content/index.html b/control/content/index.html
@@ -19,7 +19,6 @@
   <script src="assets/js/moment.min.js"></script>
   <script src="../../../../scripts/jquery/jquery-ui.min.js"></script>
   <script src="../../../../scripts/angular/angular-ui-sortable.js"></script>
-  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBdhPtd93zNB7sXm_sjseo9gZgtwgxRUWM&libraries=places"></script>
 
   <script src="../../../../scripts/angular/ng-infinite-scroll.custom.js" type="application/javascript"></script>
   <script src="app.js"></script>
@@ -38,4 +37,4 @@
 <body>
 <div class="content relative slide overflowY-auto infinite-scroll-parent" ng-view=""></div>
 </body>
-</html>
+</html>
diff --git a/plugin.json b/plugin.json
@@ -22,5 +22,8 @@
 
   },
   "features" : [{"name" : "Calendar"}],
+  "usesApiKeys": [
+    { "name": "googleMapKey" }
+  ],
   "languages" : ["en"]
 }
diff --git a/widget/app.js b/widget/app.js
@@ -123,7 +123,7 @@
         }
       };
     }])
-    .directive("googleMap", function () {
+    .directive("googleMap", ['ScriptLoaderService',function (ScriptLoaderService) {
       return {
         template: "<div></div>",
         replace: true,
@@ -133,48 +133,65 @@
             if (newValue) {
               scope.coordinates = newValue;
               if (scope.coordinates.length) {
-                var map = new google.maps.Map(elem[0], {
-                  center: new google.maps.LatLng(scope.coordinates[1], scope.coordinates[0]),
-                  zoomControl: false,
-                  streetViewControl: false,
-                  mapTypeControl: false,
-                  zoom: 15,
-                  mapTypeId: google.maps.MapTypeId.ROADMAP
-                });
-                var marker = new google.maps.Marker({
-                  position: new google.maps.LatLng(scope.coordinates[1], scope.coordinates[0]),
-                  map: map
-                });
-                var styleOptions = {
-                  name: "Report Error Hide Style"
-                };
-                var MAP_STYLE = [
-                  {
-                    stylers: [
-                      {visibility: "on"}
-                    ]
-                  }];
-                var mapType = new google.maps.StyledMapType(MAP_STYLE, styleOptions);
-                map.mapTypes.set("Report Error Hide Style", mapType);
-                map.setMapTypeId("Report Error Hide Style");
+                ScriptLoaderService.loadScript()
+                  .then(() => {
+                    var map = new google.maps.Map(elem[0], {
+                      center: new google.maps.LatLng(scope.coordinates[1], scope.coordinates[0]),
+                      zoomControl: false,
+                      streetViewControl: false,
+                      mapTypeControl: false,
+                      zoom: 15,
+                      mapTypeId: google.maps.MapTypeId.ROADMAP
+                    });
+                    var marker = new google.maps.Marker({
+                      position: new google.maps.LatLng(scope.coordinates[1], scope.coordinates[0]),
+                      map: map
+                    });
+                    var styleOptions = {
+                      name: "Report Error Hide Style"
+                    };
+                    var MAP_STYLE = [
+                      {
+                        stylers: [
+                          {visibility: "on"}
+                        ]
+                      }];
+                    var mapType = new google.maps.StyledMapType(MAP_STYLE, styleOptions);
+                    map.mapTypes.set("Report Error Hide Style", mapType);
+                    map.setMapTypeId("Report Error Hide Style");
 
-                marker.addListener('click', function () {
+                    marker.addListener('click', function () {
 
-                  buildfire.getContext(function (err, context) {
-                    if (context) {
-                      if (context.device && context.device.platform.toLowerCase() == 'ios')
-                        window.open("maps://maps.apple.com?q=" + scope.coordinates[1] + "," + scope.coordinates[0]);
-                      else
-                        window.open("http://maps.google.com/maps?daddr=" + scope.coordinates[1] + "," + scope.coordinates[0]);
-                    }
+                      buildfire.getContext(function (err, context) {
+                        if (context) {
+                          if (context.device && context.device.platform.toLowerCase() == 'ios')
+                            window.open("maps://maps.apple.com?q=" + scope.coordinates[1] + "," + scope.coordinates[0]);
+                          else
+                            window.open("http://maps.google.com/maps?daddr=" + scope.coordinates[1] + "," + scope.coordinates[0]);
+                        }
+                      });
+                    });
+                  })
+                  .catch(() => {
+                    console.error("Failed to load Google Maps SDK.");
+                    buildfire.dialog.alert({
+                      title: 'Error',
+                      message: 'Failed to load Google Maps API.',
+                    });
                   });
-                });
               }
             }
           }, true);
+          window.gm_authFailure = function () {
+            console.error("Invalid Google Maps API key.");
+            buildfire.dialog.alert({
+              title: 'Error',
+              message: 'Failed to load Google Maps API.',
+            });
+          };
         }
       }
-    })
+    }])
     .directive("loadImage", ['Buildfire', function (Buildfire) {
       return {
         restrict: 'A',
@@ -211,7 +228,41 @@
         }
       };
     }])
-    .run(['Location', '$location', '$rootScope', function (Location, $location, $rootScope) {
+    .service('ScriptLoaderService', ['$q', function ($q) {
+      this.loadScript = function () {
+        const {apiKeys} = buildfire.getContext();
+        const {googleMapKey} = apiKeys;
+
+        const url = `https://maps.googleapis.com/maps/api/js?v=3.exp&key=${googleMapKey}`;
+
+        const deferred = $q.defer();
+
+        // Check if the script is already in the document
+        const existingScript = document.getElementById('googleMapsScript');
+        if (existingScript) {
+          // If the script is already in the document, remove it
+          existingScript.parentNode.removeChild(existingScript);
+        }
+
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = url;
+
+        script.onload = function () {
+          console.info(`Successfully loaded script: ${url}`);
+          deferred.resolve();
+        };
+
+        script.onerror = function () {
+          console.error(`Failed to load script: ${url}`);
+          deferred.reject('Failed to load script.');
+        };
+
+        document.head.appendChild(script);
+        return deferred.promise;
+      };
+    }])
+    .run(['Location', '$location', '$rootScope', 'ScriptLoaderService', function (Location, $location, $rootScope,ScriptLoaderService) {
 
       buildfire.messaging.onReceivedMessage = function (msg) {
         console.log('$location--------------------------------------------', $location, msg);

diff --git a/widget/assets/css/style.css b/widget/assets/css/style.css
@@ -166,8 +166,10 @@
 	z-index:2;
 }
 .events-plugin.event-layout3 .plugin-slider .plugin-slide{
-	
+
 }
+.events-plugin.event-layout3 .empty-state:after,
+.events-plugin.event-layout4 .empty-state:after,
 .events-plugin.event-layout3 .plugin-slider .plugin-slide:after,
 .events-plugin.event-layout4 .plugin-slider .plugin-slide:after{
 	content:'';
@@ -215,7 +217,7 @@
 	background:#efefef;
 }
 .holder .info-circle.bg-white{
-	background:rgba(255, 255, 255, 0.8);	
+	background:rgba(255, 255, 255, 0.8);
 }
 .holder .info-circle .info-circle-inner{
 	margin-top:33px;
@@ -354,11 +356,11 @@
 }
 
 .map-holder{
-    min-height: 192px !important;
+    min-height: 200px !important;
 }
 
 .mapSize{
-    height: 192px;
+    height: 192px !important;
 }
 .titleWidth70{
 	max-width: 70%;

diff --git a/widget/controllers/widget.event.controller.js b/widget/controllers/widget.event.controller.js
@@ -193,7 +193,7 @@
               }
             }
 
-            function decodeHtmlCharCodes(str) { 
+            function decodeHtmlCharCodes(str) {
               return str.replace(/(&#(\d+);)/g, function(match, capture, charCode) {
                 return String.fromCharCode(charCode);
               });
@@ -310,6 +310,7 @@
           WidgetEvent.view = new buildfire.components.carousel.view("#carousel", [], WidgetEvent.data.design.itemDetailsLayout == 'Event_Item_1' ? "WideScreen" : "Square");
 
           if (WidgetEvent.event.data && WidgetEvent.event.data.carouselImages) {
+
             WidgetEvent.view.loadItems(WidgetEvent.event.data.carouselImages, null, WidgetEvent.data.design.itemDetailsLayout == 'Event_Item_1' ? "WideScreen" : "Square");
           } else {
             WidgetEvent.view.loadItems([]);

diff --git a/widget/controllers/widget.home.controller.js b/widget/controllers/widget.home.controller.js
@@ -122,13 +122,13 @@
             var expandRepeatingEvents = function (result, repeat_until, AllEvent) {
                 var repeat_results = [];
                 for (var i = 0; i < result.length; i++) {
-                    
+
                     //set as all day event if overlapping on multiple days
                     var startDate = new Date(result[i].data.startDate).setHours(0,0,0,0);
                     var endDate = new Date(result[i].data.endDate).setHours(0,0,0,0);
                     if(startDate != endDate)
                         result[i].data.isAllDay = true;
-                    
+
 
                     if (result[i].data.repeat.isRepeating && result[i].data.repeat.repeatType) {
                         var repeat_unit = getRepeatUnit(result[i].data.repeat.repeatType);
@@ -203,7 +203,7 @@
                             temp_result.data.startTime = result[i].data.startTime;
                             temp_result.data.endDate = temp_result.data.startDate + difference;
                             temp_result.data.endTime = temp_result.data.startTime + differenceTime;
-                            
+
                             if (temp_result.data.startDate >= +new Date(eventStartDate) && temp_result.data.startDate <= +new Date(eventRecEndDate)||
                             (temp_result.data.endDate >= +new Date(eventStartDate) && temp_result.data.endDate <= +new Date(eventRecEndDate)) ||
                             (+new Date(eventStartDate) >= temp_result.data.startDate && +new Date(eventRecEndDate) <= temp_result.data.endDate))
@@ -246,7 +246,7 @@
                 WidgetHome.NoDataFound = false;
                 Buildfire.spinner.show();
                 var successEvents = function (result) {
-                    Buildfire.spinner.hide();                    
+                    Buildfire.spinner.hide();
                     if (!result.length) {
                         return true;
                     }
@@ -343,7 +343,7 @@
                 if(event.data) {
                     var startDate = new Date(event.data.startDate).setHours(0,0,0,0);
                     var endDate = new Date(event.data.endDate).setHours(0,0,0,0);
-                    
+
                     return startDate === endDate;
                 }
                 return true;
@@ -396,7 +396,7 @@
                     }
                     currentLayout = WidgetHome.data.design.itemDetailsLayout;
                     if (
-                      buildfire && 
+                      buildfire &&
                       buildfire.getContext() &&
                       buildfire.getContext().device &&
                       buildfire.getContext().device.platform !== 'web'

diff --git a/widget/index.html b/widget/index.html
@@ -39,7 +39,6 @@
     <script src="controllers/widget.event.controller.js"
             type="application/javascript"></script>
     <link rel="stylesheet" href="assets/css/style.css">
-    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBdhPtd93zNB7sXm_sjseo9gZgtwgxRUWM"></script>
 
     <script src="../../../scripts/angular/angular-animate.min.js"></script>
     <link rel="stylesheet" href="../../../styles/transitionAnimation.css">

diff --git a/widget/templates/Event_Item_1.html b/widget/templates/Event_Item_1.html
@@ -36,7 +36,7 @@ <h1>
       </div>
     </div>
     <div class="plugin-banner has-info-bar location-map clearfix" ng-if="WidgetEvent.event.data.address.location_coordinates">
-      <div class="plugin-slide map-holder">
+      <div class="map-holder">
         <p ng-if="!WidgetEvent.event.data.address.location">
 
         <div google-map class="mapSize"