Merge pull request #56 from smellman/feature/fix-50

fixes #50, #51, #52

Author: smellman

app/helpers/gtt_map_helper.rb

@@ -33,12 +33,7 @@ def map_tag(map: nil, layers: map&.layers,
     safe_join [
       content_tag(:div, "", data: data, id: uid, class: 'ol-map'),
       javascript_tag("
-        $(document).ready(function(){
-          /*
-          App.init({
-            target: $('##{uid}')[0]
-          });
-          */
+        document.addEventListener('DOMContentLoaded', function(){
           var target = document.getElementById('#{uid}');
           window.createGttClient(target);
         });

src/components/gtt-client.ts

@@ -193,7 +193,6 @@ export class GttClient {
     this.vector.set('displayInLayerSwitcher', false)
     this.layerArray.push(this.vector)
     this.map.addLayer(this.vector)
-    console.log(this.layerArray)
 
     // Render project boundary if bounds are available
     if (this.contents.bounds && this.contents.bounds !== null) {
@@ -298,21 +297,23 @@ export class GttClient {
     // Because Redmine filter functions are applied later, the Window onload
     // event provides a workaround to have filters loaded before executing
     // the following code
-    if (document.querySelectorAll('tr#tr_bbox').length > 0) {
-      this.filters.location = true
-    }
-    if (document.querySelectorAll('tr#tr_distance').length > 0) {
-      this.filters.distance = true
-    }
-    const legend = document.querySelector('fieldset#location legend') as HTMLLegendElement
-    if (legend) {
-      legend.addEventListener('click', (evt) => {
-        const element = evt.currentTarget as HTMLLegendElement
-        this.toggleAndLoadMap(element)
-      })
-    }
-    this.zoomToExtent()
-    this.map.on('moveend', this.updateFilter.bind(this))
+    window.addEventListener('load', () => {
+      if (document.querySelectorAll('tr#tr_bbox').length > 0) {
+        this.filters.location = true
+      }
+      if (document.querySelectorAll('tr#tr_distance').length > 0) {
+        this.filters.distance = true
+      }
+      const legend = document.querySelector('fieldset#location legend') as HTMLLegendElement
+      if (legend) {
+        legend.addEventListener('click', (evt) => {
+          const element = evt.currentTarget as HTMLLegendElement
+          this.toggleAndLoadMap(element)
+        })
+      }
+      this.zoomToExtent()
+      this.map.on('moveend', this.updateFilter.bind(this))
+    })
 
     // To fix an issue with empty map after changing the tracker type
     document.querySelectorAll('select#issue_tracker_id').forEach(element => {
@@ -475,7 +476,7 @@ export class GttClient {
       const url = popup_contents.href.replace(/\[(.+?)\]/g, feature.get('id'))
       content.push(`<a href="${url}">Edit</a>`)
 
-      popup.show(getCenter(feature.getGeometry().getExtent()), content as any)
+      popup.show(feature.getGeometry().getFirstCoordinate(), content as any)
     })
 
     select.getFeatures().on(['remove'], _ => {
@@ -1179,6 +1180,7 @@ export class GttClient {
     this.maps.forEach(function (m) {
       m.updateSize()
     })
+    this.zoomToExtent()
   }
 
 

src/stylesheets/app.scss

@@ -24,49 +24,6 @@
     background-color: rgba(40, 40, 40, 1);
 }
 
-.ol-popup {
-  position: absolute;
-  background-color: white;
-  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
-  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
-  padding: 7px;
-  border-radius: 10px;
-  border: 1px solid #cccccc;
-  bottom: 12px;
-  left: -50px;
-  min-width: 120px;
-}
-.ol-popup:after, .ol-popup:before {
-  top: 100%;
-  border: solid transparent;
-  content: " ";
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-.ol-popup:after {
-  border-top-color: white;
-  border-width: 10px;
-  left: 48px;
-  margin-left: -10px;
-}
-.ol-popup:before {
-  border-top-color: #cccccc;
-  border-width: 11px;
-  left: 48px;
-  margin-left: -11px;
-}
-.ol-popup-closer {
-  text-decoration: none;
-  position: absolute;
-  top: 2px;
-  right: 8px;
-}
-.ol-popup-closer:after {
-  content: "✖";
-}
-
 #admin-menu a.gtt {
   background-image: url(../images/map.png);
 }