add svg use click handlers for edge/IE since they are special

fpdcc · Feb 25, 2017 · d0ec994 · d0ec994
1 parent d369012
commit d0ec994
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 53 deletions.
diff --git a/bundle.js b/bundle.js
diff --git a/js/activityFeature.js b/js/activityFeature.js
@@ -9,8 +9,9 @@ var activityFeature = function (map) {
   var that = {}
   var events = eL.events()
   that.originalActivitiesObject = {}
+  that.originalActivitiesArray = []
   that.originalActivitiesCreated = $.Deferred()
-  // that.filteredActivitiesArray = [];
+  that.filteredFGArray = []
   that.filteredFG = null
   that.selectedFG = null
   that.fetchActivities = function () {
@@ -29,6 +30,7 @@ var activityFeature = function (map) {
   var _createOriginalActivities = function (data) {
     console.log('populateOriginalActivities start at: ' + performance.now())
     that.originalActivitiesObject = {}
+    that.originalActivitiesArray = []
     for (var i = 0; i < data.features.length; i++) {
       var currentFeature = data.features[i]
       var currentGeoOne = currentFeature.geometry.coordinates[1]
@@ -40,14 +42,14 @@ var activityFeature = function (map) {
         var activityName = currentFeature.properties.name || currentFeature.properties.aname
         var mainIcon = L.divIcon({
           className: 'icon-map icon-activity active activity-' + currentFeature.properties.id + ' ' + iconType + ' poi-' + currentFeature.properties.poi_info_id,
-          html: '<svg class="icon icon-map icon-activity ' + iconType + '"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/defs.svg#' + iconType + '"></use></svg><br />',
+          html: '<svg class="icon icon-map icon-activity ' + iconType + '"><use class="useMapIcon" data-type="activity" data-poiid="' + currentFeature.properties.poi_info_id + '" data-id="' + currentFeature.properties.id + '" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/defs.svg#' + iconType + '"></use></svg><br />',
           iconAnchor: [15, 20],
           popupAnchor: [0, -20],
           iconSize: null
         })
         var selectedIcon = L.divIcon({
           className: 'icon-map icon-activity selected activity-' + currentFeature.properties.id + ' ' + iconType + ' poi-' + currentFeature.properties.poi_info_id,
-          html: '<svg class="icon icon-map icon-activity ' + iconType + '"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/defs.svg#' + iconType + '"></use></svg><br />',
+          html: '<svg class="icon icon-map icon-activity ' + iconType + '"><use class="useMapIcon" data-type="activity" data-poiid="' + currentFeature.properties.poi_info_id + '" data-id="' + currentFeature.properties.id + '" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/defs.svg#' + iconType + '"></use></svg><br />',
           iconAnchor: [15, 20],
           popupAnchor: [0, -20],
           iconSize: null
@@ -69,12 +71,13 @@ var activityFeature = function (map) {
         marker.geometry = currentFeature.geometry
         marker.popupContent = popupContentMainDivHTML
         // console.log('activity marker.icon= ' + marker.icon)
-        marker.bindPopup(marker.popupContent)
+        // marker.bindPopup(marker.popupContent)
         marker.on(Config.listenType, (function (activity) {
           return function () {
-            events.activityClick(activity)
+            that.activityClickSetup(activity)
           }
         })(marker))
+        that.originalActivitiesArray.push(marker)
         that.originalActivitiesObject[marker.properties.poi_info_id] = that.originalActivitiesObject[marker.properties.poi_info_id] || new L.FeatureGroup()
         that.originalActivitiesObject[marker.properties.poi_info_id].addLayer(marker)
       }
@@ -83,6 +86,26 @@ var activityFeature = function (map) {
     console.log('populateOriginalActivities end at: ' + performance.now())
   }
 
+  that.activityClickSetup = function (activity) {
+    var poiId = activity.properties.poi_info_id
+    events.openPopup(activity.popupContent, activity.getLatLng())
+    events.activityClick(poiId)
+  }
+
+  that.getById = function (id) {
+    console.log('activity.getById start for id = ' + id)
+    var activity = null
+    // console.log('[getPoiById] that.originalPoisArray.length = ' + that.originalPoisArray.length)
+    for (var i = 0; i < that.originalActivitiesArray.length; i++) {
+      if (that.originalActivitiesArray[i].properties.id == id) {
+        activity = that.originalActivitiesArray[i]
+        break
+      }
+    }
+    console.log('activity.getById activity = ' + activity)
+    return activity
+  }
+
   var getIconName = function (activityType) {
     return activityType === 'Fishing Lake' ? 'icon-fishing'
           : activityType === 'aquatic center' ? 'icon-aquatic-center'
@@ -121,14 +144,14 @@ var activityFeature = function (map) {
       map.removeLayer(that.filteredFG)
       that.filteredFG = null
     }
-    var filteredFGArray = []
+    that.filteredFGArray = []
     $.each(poiArray, function (i, el) {
       var selectFG = that.originalActivitiesObject[el.properties.poi_info_id]
       if (selectFG) {
-        filteredFGArray.push(selectFG)
+        that.filteredFGArray.push(selectFG)
       }
     })
-    that.filteredFG = new L.FeatureGroup(filteredFGArray, {
+    that.filteredFG = new L.FeatureGroup(that.filteredFGArray, {
       makeBoundsAware: true,
       minZoom: 13
     }) // .addTo(map)
@@ -153,6 +176,7 @@ var activityFeature = function (map) {
         layer.setIcon(layer.selectedIcon)
       })
     }
+    events.addEdgeEventHandlers()
     var t1 = performance.now()
     console.log('[[act.setSelected end] time', (t1-t0).toFixed(4), 'milliseconds')
     return that.selectedFG

diff --git a/js/config.js b/js/config.js
@@ -1,8 +1,8 @@
 var L = require('leaflet')
 var mapCenter = [41.838, -87.685]
 var defaultZoom = 9
-var listenType = (navigator.userAgent.toLowerCase().indexOf('edge') !== -1) ? 'mouseup' : 'click'
-var isEdge = (navigator.userAgent.toLowerCase().indexOf('edge') !== -1) ? true : false
+var listenType = ((navigator.userAgent.toLowerCase().indexOf('edge') !== -1) || (navigator.userAgent.toLowerCase().indexOf('trident') !== -1)) ? 'mouseup' : 'click'
+var isEdge = ((navigator.userAgent.toLowerCase().indexOf('edge') !== -1) || (navigator.userAgent.toLowerCase().indexOf('trident') !== -1)) ? true : false
 // var appId = '6' // OuterSpatial assigns a unique id for each customer
 var url = 'https://fpcc-staging.smartchicagoapps.org'
 // var trailsyBaseEndpoint = url + '/v0/applications/' + appId;

diff --git a/js/eventListeners.js b/js/eventListeners.js
@@ -189,17 +189,17 @@ var events = function (map) {
     console.log('[events poiClick] end')
   }
 
-  that.activityClick = function (activity) {
+  that.activityClick = function (poiId) {
     var lastPoi = ''
     var lastPoiId = ''
     if (my.poiFeat.current) {
       lastPoi = my.poiFeat.current
       lastPoiId = lastPoi.properties.id
     }
-    var poi = my.poiFeat.getPoiById(activity.properties.poi_info_id)
+    var poi = my.poiFeat.getPoiById(poiId)
     if (poi) {
       my.panel.showDetails(my, null, poi)
-      if (lastPoiId != activity.properties.poi_info_id) {
+      if (lastPoiId != poiId) {
         var zoomFeatureGroupBounds = that.highlightPoi(poi, false)
         var trailSubsystem = null
         if (poi.properties.direct_trail_id) {
@@ -217,6 +217,33 @@ var events = function (map) {
     }
   }
 
+  that.addEdgeEventHandlers = function () {
+    if (Config.isEdge) {
+      console.log('isEdge')
+      $('.useMapIcon').on(Config.listenType, that.edgeClick)
+    }
+  }
+
+  that.edgeClick = function (e) {
+    console.log('edge listen click')
+    var $myTarget = $(e.currentTarget)
+    var iconType = $myTarget.attr('data-type')
+    var poiId = $myTarget.attr('data-poiid')
+    var id = $myTarget.attr('data-id')
+    console.log('edgeClick poiId = ' + poiId + ' iconType = ' + iconType)
+    if (iconType === 'activity') {
+      var activity = my.actFeat.getById(id)
+      that.openPopup(activity.popupContent, activity.getLatLng())
+      that.activityClick(poiId)
+    } else if (iconType === 'poi') {
+      var poi = my.poiFeat.getPoiById(poiId)
+      that.poiClick(poi)
+    } else if (iconType === 'picnicgrove') {
+      var picnicgrove = my.pgFeat.getById(id)
+      that.openPopup(picnicgrove.popupContent, picnicgrove.getLatLng())
+    }
+  }
+
   that.highlightPoi = function (poi, openPopup) {
     console.log('[events highlightPoi] start')
     if (openPopup === undefined) {
@@ -254,11 +281,27 @@ var events = function (map) {
     } else {
       my.map.closePopup()
     }
+    that.addEdgeEventHandlers()
     var zoomFeatureGroup = new L.FeatureGroup(zoomArray)
     var zoomBounds = zoomFeatureGroup.getBounds()
     return zoomBounds
   }
 
+  that.openPopup = function (popupContent, location) {
+    my.map.closePopup()
+    console.log('[open Popup] create + open popup')
+    if (popupContent && location) {
+      var popup = new L.Popup({
+        offset: [0, -12],
+        autoPanPadding: [10, 10]
+        // autoPan: SMALL ? false : true
+      })
+      .setContent(popupContent)
+      .setLatLng(location)
+      .openOn(my.map)
+    }
+  }
+
   that.segmentClick = function (trailSubsystemNormalizedName) {
     console.log('[events segmentClick] start')
     my.panel.showDetails(my, trailSubsystemNormalizedName, null)

diff --git a/js/map.js b/js/map.js
@@ -95,7 +95,7 @@ var trailMap = function () {
       updateWhenZooming: false,
       attribution: mapboxAttribution
     }).addTo(map)
-  
+
   var mapboxAccessToken = 'sk.eyJ1Ijoic21hcnRjaGljYWdvY29sbGFib3JhdGl2ZSIsImEiOiJjaWlqOGU2dmMwMTA2dWNrcHM0d21qNDhzIn0.2twD0eBu4UKHu-3JZ0vt0w'
   var imageryBase = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
     attribution: mapboxAttribution,
@@ -148,13 +148,6 @@ var trailMap = function () {
     })
   })
 
-  that.testClick = function (e) {
-     console.log('edge listen click')
-    var $myTarget = $(e.currentTarget)
-    var myId = $myTarget.attr('id')
-    console.log('isEdge myId = ' + myId)
-  }
-
   var filterAll = function (fitToSearchResults, openResults) {
     console.log('[filterAll] start')
     $('.loader').show()
@@ -184,21 +177,20 @@ var trailMap = function () {
               })
           }
           poiFeat.filteredPoisFeatureGroup.addTo(map)
-          //if (Config.isEdge) {
-          // $('.usePoi').on(Config.listenType, that.testClick)
-          //}
+          console.log('isEdge? = ' + Config.isEdge)
         }
         if (activityFeat.filteredFG) {
           activityFeat.filteredFG.addTo(map)
         }
         if (tSegment.filteredFG && filters.current.trailOnMap) {
           tSegment.filteredFG.addTo(map)
         }
+        events.addEdgeEventHandlers()
       })
     })
     $('.loader').hide()
   }
-  
+
   that.processSearch = function (e) {
     // $("#fpccSearchResults").html(loaderDiv)
     var $currentTarget = $(e.currentTarget)

diff --git a/js/panelFunctions.js b/js/panelFunctions.js
@@ -26,7 +26,6 @@ var setup = function (myMap, myFilters, myPoiFeature, myTrailSegmentFeature, myA
 var panelFuncs = function (map) {
   var that = {}
   that.SMALL = false
-  var loaderDiv = '<div class="loader"></div>'
   var events = eL.events(map)
 
   that.currentDetailPanelHTML = ''
@@ -785,8 +784,8 @@ var panelFuncs = function (map) {
       $('#fpccDetailPanel').html(content)
     }
     that.setHeights()
-    $('#closeAbout').click(that.closeAboutPage)
     $('#closeDetail').on(Config.listenType, events.closeDetailPanel)
+    $('#closeAbout').on(Config.listenType, that.closeAboutPage)
     $('.detailPanelBanner').on(Config.listenType, detailPanelBannerClick)
   }
 

diff --git a/js/picnicgroveFeature.js b/js/picnicgroveFeature.js
@@ -3,9 +3,11 @@ var L = require('leaflet')
 var $ = require('jquery')
 require('leaflet-boundsawarelayergroup')
 var Config = require('./config.js')
+var eL = require('./eventListeners.js')
 
 var picnicgroveFeature = function (map) {
   var that = {}
+  var events = eL.events()
   that.originalPicnicgrovesArray = []
   that.originalObject = {}
   that.highlightFG = null
@@ -44,7 +46,7 @@ var picnicgroveFeature = function (map) {
       }
       var picnicgroveIcon = L.divIcon({
         className: 'icon-map picnic-grove-marker selected ' + iconName + ' picnicgrove-' + currentFeature.properties.id + ' poi-' + currentFeature.properties.poi_info_id,
-        html: '<svg class="icon icon-map picnic-grove-marker ' + iconName + '"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/defs.svg#' + iconName + '"></use></svg><br />',
+        html: '<svg class="icon icon-map picnic-grove-marker ' + iconName + '"><use class="useMapIcon" data-type="picnicgrove" data-poiId="' + currentFeature.properties.poi_info_id + '" data-id="' + currentFeature.properties.id + '" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/defs.svg#' + iconName + '"></use></svg><br />',
         iconAnchor: [15, 20],
         popupAnchor: [0, -20],
         iconSize: null
@@ -59,18 +61,12 @@ var picnicgroveFeature = function (map) {
       // console.log("signMarker.trailheadID = " + signMarker.trailheadID);
       marker.popupContent = popupContentMainDivHTML
       marker.properties = currentFeature.properties
-      marker.bindPopup(marker.popupContent)
-      // marker.on('click', (function (activity) {
-      // return function () {
-      //   events.activityClick(activity)
-      // }
-      // var picnicgrove = {
-      //   properties: currentFeature.properties,
-      //   geometry: currentFeature.geometry,
-      //   marker: marker,
-      //   popupContent: ""
-      // };
-      // setTrailheadEventHandlers(trailhead);
+      marker.on(Config.listenType, (function (picnicgrove) {
+        return function () {
+          that.pgClickSetup(picnicgrove)
+        }
+      })(marker))
+      that.originalPicnicgrovesArray.push(marker)
       that.originalObject[currentFeature.properties.poi_info_id] = that.originalObject[currentFeature.properties.poi_info_id] || new L.FeatureGroup()
       that.originalObject[currentFeature.properties.poi_info_id].addLayer(marker)
     }
@@ -79,6 +75,23 @@ var picnicgroveFeature = function (map) {
     console.log('populateOriginalPicnicgroves end at: ' + performance.now())
   }
 
+  that.pgClickSetup = function (picnicgrove) {
+    events.openPopup(picnicgrove.popupContent, picnicgrove.getLatLng())
+  }
+
+  that.getById = function (id) {
+    console.log('picnicgrove.getById start for id = ' + id)
+    var picnicgrove = null
+    // console.log('[getPoiById] that.originalPoisArray.length = ' + that.originalPoisArray.length)
+    for (var i = 0; i < that.originalPicnicgrovesArray.length; i++) {
+      if (that.originalPicnicgrovesArray[i].properties.id == id) {
+        picnicgrove = that.originalPicnicgrovesArray[i]
+        break
+      }
+    }
+    return picnicgrove
+  }
+
   that.highlight = function (poiId) {
     var t0 = performance.now()
     console.log('[picnicgrove.highlight start] at: ' + t0)

diff --git a/js/poiFeature.js b/js/poiFeature.js
@@ -57,7 +57,7 @@ var poiFeature = function (map) {
       var currentFeatureLatLng = new L.LatLng(currentGeoOne, currentGeoTwo)
       var mainIcon = L.divIcon({
         className: 'icon-sign icon-map poi-' + currentFeature.properties.id,
-        html: '<svg class="icon icon-map icon-sign" id="poi-' + currentFeature.properties.id + '" ><use class="usePoi" id="poi-' + currentFeature.properties.id + '" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/defs.svg#icon-sign"></use></svg>',
+        html: '<svg class="icon icon-map icon-sign" id="poi-' + currentFeature.properties.id + '" ><use class="useMapIcon" data-type="poi" data-poiid="' + currentFeature.properties.id + '" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/defs.svg#icon-sign"></use></svg>',
         // iconAnchor: [13 * 0.60, 33 * 0.60],
         iconAnchor: [15, 20],
         popupAnchor: [15, 0],
@@ -67,7 +67,7 @@ var poiFeature = function (map) {
 
       var selectedIcon = L.divIcon({
         className: 'icon-sign icon-map selected poi-' + currentFeature.properties.id,
-        html: '<svg class="icon icon-map icon-sign" id="poi-' + currentFeature.properties.id + '" ><use class="usePoi" id="poi-' + currentFeature.properties.id + '" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/defs.svg#icon-sign"></use></svg>',
+        html: '<svg class="icon icon-map icon-sign" id="poi-' + currentFeature.properties.id + '" ><use class="useMapIcon" data-type="poi" data-poiid="' + currentFeature.properties.id + '" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons/defs.svg#icon-sign"></use></svg>',
         // iconAnchor: [13 * 0.60, 33 * 0.60],
         iconAnchor: [15, 20],
         popupAnchor: [15, 0],
@@ -254,6 +254,7 @@ var poiFeature = function (map) {
       that.current = poi
       that.current.setIcon(that.current.selectedIcon)
     }
+    events.addEdgeEventHandlers()
   }
 
   var filterResult = function (poi, filters) {