Update detail view for events

Updating event detail view for leaflet.

diff --git a/Toolkit/Events/views/eventDetail.html b/Toolkit/Events/views/eventDetail.html
index 98ff682..dd4e889 100644 (file)
--- a/Toolkit/Events/views/eventDetail.html
+++ b/Toolkit/Events/views/eventDetail.html
@@ -10,6 +10,10 @@
     eventTitle="event.header"
        >
 </flexy:toJavascript>
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
+<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
+<link rel="stylesheet" href="//app.gaslightmedia.com/Common/Leaflet.loading/src/Control.Loading.css" />
+<script src="//app.gaslightmedia.com/Common/Leaflet.loading/src/Control.Loading.js"></script>
 <div id="eventDetailNew">
     <div>
         <h2 id="eventHeaderTitle">{event.header:h}</h2>
@@ -101,4 +105,82 @@
             </div><!-- /#eventDetailTop -->
         <div id="eventDetailDescNew" flexy:if="event.description">{event.description:h}</div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+    jQuery(document).ready( function ($){
+        var view_select = $("#glm-event-view-select");
+        view_select.hide();
+
+        // Expand the takeback button in small views.
+        if ( $(window).width() < 1024 ) {
+            $("#glm-event-detail-takeback-mini").css('width','190px');
+            $("#glm-event-detail-takeback-mini span").css('opacity','1');
+        }
+
+        /*
+         *  Leaflet Map
+         *  API reference: https://leafletjs.com/reference-1.3.2.html
+         */
+
+        // Get member location if available, otherwise use this site's default locatgion
+        var myLocation = false;
+        var eventLat = $("#event-lat").attr('rel');
+        var eventLon = $("#event-lon").attr('rel');
+        var mapType = "eventDetail-map";
+        var mapOptions = { dragging: false, zoomControl: false };
+        var attributionText = 'Map &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> Contrib, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
+
+        function initMap() {
+
+            var leafletMap = L.map(mapType, mapOptions ).setView([eventLat, eventLon], 13);
+            var leafletTileServer = 'https://maps.gaslightmedia.com/12312029-NoPlaceNames-95bfebd37e9e7d649daafa8762629084/' + '{z}/{x}/{y}.png';
+            var leafletMinZoom = 5;
+            var leafletMaxZoom = 18;
+            var geocoder;
+
+            // Tile server
+            L.tileLayer(leafletTileServer, {
+                attribution: attributionText,
+                minZoom: leafletMinZoom,
+                maxZoom: leafletMaxZoom,
+                id: 'nothot'
+            }).addTo(leafletMap);
+
+            var loadingControl = L.Control.loading({
+                separate: true,
+                delayIndicator: 500
+            });
+            leafletMap.addControl(loadingControl);
+
+            // Marker
+            var leafletMarker = L.marker([eventLat, eventLon]).addTo(leafletMap);
+
+        }
+
+        $(window).load(function(){
+            initMap();
+        });
+
+        jQuery('#map-dialog').dialog({
+            height: 490,
+            width: 630,
+            modal: true,
+            autoOpen: false
+        });
+
+        var largeMapInit = false;
+        jQuery("#eventDetail-map").click(function(e){
+            e.preventDefault();
+            jQuery("#map-dialog").dialog('open');
+            if (!largeMapInit) {
+                mapType = "LeafletMapContainer";
+                mapOptions = {};
+                attributionText = 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.gaslightmedia.com/">Gaslight Media</a>';
+                initMap();
+                largeMapinit = true;
+            }
+        });
+
+    });
+</script>