Update event detail page

For leaflet.

diff --git a/Toolkit/Events/views/eventDetail.html b/Toolkit/Events/views/eventDetail.html
index 6e16250..92ebe5c 100755 (executable)
--- a/Toolkit/Events/views/eventDetail.html
+++ b/Toolkit/Events/views/eventDetail.html
@@ -3,6 +3,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="eventDetail">
        <div>
       {if:event.image}
@@ -45,14 +49,16 @@
                                <div id="eventDetailContact" flexy:if="event.hasContactInfo">
                                        <h3>Contact &amp; More Info</h3>
                                        <div class="eventcontact" flexy:if="event.contactName">Contact: {event.contactName}</div>
-                                       <div class="eventemail" flexy:if="event.contactEmail">Email: <a href="mailto:{event.contact_email}">{event.contactEmail}</a></div>
+                                       <div class="eventemail" flexy:if="event.contactEmail">Email: <a href="mailto:{event.contactEmail}">{event.contactEmail}</a></div>
                                        <div class="eventphone" flexy:if="event.contactPhone">Phone: {event.contactPhone}</div>
                                </div><!-- /#eventDetailContact -->
                        </div><!-- /#eventDetailInfo -->
             <div class="medium-4 columns">
                 <div id="eventDetailMap" flexy:if="event.hasLatLon">
                     <div id="eventDetail-map" flexy:if="event.lat" title="Click to enlarge">map...</div>
-                    <div id="map-dialog" flexy:if="event.lat"><div id="map_canvas" style="width:500px; height:400px">Loading...</div></div>
+                    <div id="map-dialog" flexy:if="event.lat">
+                        <div id="LeafletMapContainer" style="width:500px; height:400px">Loading...</div>
+                    </div>
                 </div><!-- /#eventDetailMap -->
                 <div id="EventDrivingDirectionsContainer" flexy:if="event.lat">
                     <form id="EventDrivingDirectionsForm" name="EventDrivingDirectionsForm" flexy:ignore="yes" method="post" action="">
@@ -78,3 +84,81 @@
                <div id="eventDetailDesc" flexy:if="event.description">{event.description:h}</div>
        </div>
 </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>