Adding template block for no location results (#109)

coderedcms/models/page_models.py

@@ -489,11 +489,14 @@ class CoderedPage(WagtailCacheMixin, Page, metaclass=CoderedPageMeta):
         """
         Override to return query of subpages as defined by `index_` variables.
         """
-        if self.index_query_pagemodel and self.index_order_by:
+        if self.index_query_pagemodel:
             querymodel = resolve_model_string(self.index_query_pagemodel, self._meta.app_label)
-            return querymodel.objects.child_of(self).live().order_by(self.index_order_by)
-
-        return super().get_children().live()
+            query = querymodel.objects.child_of(self).live()
+        else:
+            query = super().get_children().live()
+        if self.index_order_by:
+            return query.order_by(self.index_order_by)
+        return query
 
     def get_content_walls(self, check_child_setting=True):
         current_content_walls = []

coderedcms/static/js/codered-maps.js

@@ -1,136 +1,139 @@
-  // Initialize the map on the gooogle maps api js callback.
+// Initialize the map on the gooogle maps api js callback.
 
-  function initMap() {
+function initMap() {
     // Set defaults
     const map = new google.maps.Map(document.querySelector('#cr-map'), {
-      zoom: parseInt($("#cr-map").data( "zoom" )),
-      center: {
-        lat: parseFloat($("#cr-map").data( "latitude" )),
-        lng: parseFloat($("#cr-map").data( "longitude" )),
-      },
-      mapTypeControl : $("#cr-map").data( "map-type-control"),
-      streetViewControl: $("#cr-map").data( "street-view-control"),
+        zoom: parseInt($("#cr-map").data("zoom")),
+        center: {
+            lat: parseFloat($("#cr-map").data("latitude")),
+            lng: parseFloat($("#cr-map").data("longitude")),
+        },
+        mapTypeControl: $("#cr-map").data("map-type-control"),
+        streetViewControl: $("#cr-map").data("street-view-control"),
     });
     // Create an infowindow object.
-    var infowindow = new google.maps.InfoWindow({  });
+    var infowindow = new google.maps.InfoWindow({});
 
     if (navigator.geolocation) {
-          var currentLocationControlDiv = document.createElement('div');
-          var currentLocation = new CurrentLocationControl(currentLocationControlDiv, map);
+        var currentLocationControlDiv = document.createElement('div');
+        var currentLocation = new CurrentLocationControl(currentLocationControlDiv, map);
 
-          currentLocationControlDiv.index = 1;
-          map.controls[google.maps.ControlPosition.TOP_LEFT].push(currentLocationControlDiv);
+        currentLocationControlDiv.index = 1;
+        map.controls[google.maps.ControlPosition.TOP_LEFT].push(currentLocationControlDiv);
     }
 
 
     // Listener to update the map markers when the map is idling.
     google.maps.event.addListener(map, 'idle', () => {
-      const sw = map.getBounds().getSouthWest();
-      const ne = map.getBounds().getNorthEast();
-      let locationDataFeatures = [];
-      map.data.loadGeoJson(
-        $("#cr-map").data( "geojson-url" ) + `&viewport=${sw.lat()},${sw.lng()}|${ne.lat()},${ne.lng()}`,
-        null,
-        features => {
-          locationDataFeatures.forEach(dataFeature => {
-            map.data.remove(dataFeature);
-          });
-          locationDataFeatures = features;
-          if ($("#cr-map").data( "show-list" ) == "True"){
-            updateList(locationDataFeatures);
-          }
-        }
-      );
+        const sw = map.getBounds().getSouthWest();
+        const ne = map.getBounds().getNorthEast();
+        let locationDataFeatures = [];
+        map.data.loadGeoJson(
+            $("#cr-map").data("geojson-url") + `&viewport=${sw.lat()},${sw.lng()}|${ne.lat()},${ne.lng()}`,
+            null,
+            features => {
+                locationDataFeatures.forEach(dataFeature => {
+                    map.data.remove(dataFeature);
+                });
+                locationDataFeatures = features;
+                if ($("#cr-map").data("show-list") == "True") {
+                    updateList(locationDataFeatures);
+                }
+            }
+        );
     });
 
     // Listener to update the info window when a marker is clicked.
     map.data.addListener('click', ev => {
-      const f = ev.feature;
-      infowindow.setContent(f.getProperty('pin_description'));
-      infowindow.setPosition(f.getGeometry().get());
-      infowindow.setOptions({
-        pixelOffset: new google.maps.Size(0, -30)
-      });
-      infowindow.open(map);
+        const f = ev.feature;
+        infowindow.setContent(f.getProperty('pin_description'));
+        infowindow.setPosition(f.getGeometry().get());
+        infowindow.setOptions({
+            pixelOffset: new google.maps.Size(0, -30)
+        });
+        infowindow.open(map);
     });
 
 
     // Logic to create a search box and move the map on successful search.
 
-    if ($("#cr-map").data( "show-search" ) == "True"){
-      var input = document.getElementById('pac-input');
-      var searchBox = new google.maps.places.SearchBox(input);
-      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
-      map.addListener('bounds_changed', function() {
-              searchBox.setBounds(map.getBounds());
+    if ($("#cr-map").data("show-search") == "True") {
+        var input = document.getElementById('pac-input');
+        var searchBox = new google.maps.places.SearchBox(input);
+        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
+        map.addListener('bounds_changed', function () {
+            searchBox.setBounds(map.getBounds());
+        });
+        searchBox.addListener('places_changed', function () {
+            var places = searchBox.getPlaces();
+            if (places.length == 0) {
+                return;
+            }
+            // For each place, get the icon, name and location.
+            var bounds = new google.maps.LatLngBounds();
+            places.forEach(function (place) {
+                if (!place.geometry) {
+                    return;
+                }
+                if (place.geometry.viewport) {
+                    // Only geocodes have viewport.
+                    bounds.union(place.geometry.viewport);
+                } else {
+                    bounds.extend(place.geometry.location);
+                }
             });
-      searchBox.addListener('places_changed', function() {
-        var places = searchBox.getPlaces();
-        if (places.length == 0) {
-          return;
-        }
-        // For each place, get the icon, name and location.
-        var bounds = new google.maps.LatLngBounds();
-        places.forEach(function(place) {
-          if (!place.geometry) {
-            return;
-          }
-          if (place.geometry.viewport) {
-            // Only geocodes have viewport.
-            bounds.union(place.geometry.viewport);
-          } else {
-            bounds.extend(place.geometry.location);
-          }
+            map.fitBounds(bounds);
         });
-        map.fitBounds(bounds);
-      });
     }
 
-  // Updates the list to the side of the map with markers that are in the viewport.
-  function updateList(features) {
-      new_html = "";
-      if(features.length == 0){
-        new_html = $("#cr-map").data( "empty-state" );
-      } else {
-        for (i=0; i < features.length; i++){
-            feature = features[i];
-            new_html += feature.getProperty('list_description');
+    // Updates the list to the side of the map with markers that are in the viewport.
+    function updateList(features) {
+        new_html = "";
+        if (features.length == 0) {
+            $("#LocationList").hide();
+            $("#LocationListEmpty").show();
+        } else {
+            $("#LocationList").show();
+            $("#LocationListEmpty").hide();
+            for (i = 0; i < features.length; i++) {
+                feature = features[i];
+                new_html += feature.getProperty('list_description');
+            }
         }
-      }
-      $("#LocationList").html(new_html);
+        $("#LocationList").html(new_html);
     }
-  }
+}
 
-  function CurrentLocationControl(controlDiv, map){
+function CurrentLocationControl(controlDiv, map) {
     var controlUI = document.createElement('div');
-      controlUI.style.backgroundColor = '#fff';
-      controlUI.style.border = '2px solid #fff';
-      controlUI.style.borderRadius = '3px';
-      controlUI.style.boxShadow = '0 2px 2px rgba(0,0,0,.3)';
-      controlUI.style.cursor = 'pointer';
-      controlUI.style.marginTop = '10px'
-      controlUI.style.marginBottom = '22px';
-      controlUI.style.marginLeft = '10px';
-      controlUI.style.textAlign = 'center';
-      controlUI.title = 'Near Me';
-      controlDiv.appendChild(controlUI);
+    controlUI.style.backgroundColor = '#fff';
+    controlUI.style.border = '2px solid #fff';
+    controlUI.style.borderRadius = '3px';
+    controlUI.style.boxShadow = '0 2px 2px rgba(0,0,0,.3)';
+    controlUI.style.cursor = 'pointer';
+    controlUI.style.marginTop = '10px'
+    controlUI.style.marginBottom = '22px';
+    controlUI.style.marginLeft = '10px';
+    controlUI.style.textAlign = 'center';
+    controlUI.title = 'Near Me';
+    controlDiv.appendChild(controlUI);
 
-      // Set CSS for the control interior.
-      var controlText = document.createElement('div');
-      controlText.style.color = 'rgb(25,25,25)';
-      controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
-      controlText.style.fontSize = '16px';
-      controlText.style.lineHeight = '36px';
-      controlText.style.paddingLeft = '5px';
-      controlText.style.paddingRight = '5px';
-      controlText.innerHTML = 'Near Me';
-      controlUI.appendChild(controlText);
+    // Set CSS for the control interior.
+    var controlText = document.createElement('div');
+    controlText.style.color = 'rgb(25,25,25)';
+    controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
+    controlText.style.fontSize = '16px';
+    controlText.style.lineHeight = '36px';
+    controlText.style.paddingLeft = '5px';
+    controlText.style.paddingRight = '5px';
+    controlText.innerHTML = 'Near Me';
+    controlUI.appendChild(controlText);
 
-      // Setup the click event listeners: simply set the map to Chicago.
-      controlUI.addEventListener('click', function() {
-          navigator.geolocation.getCurrentPosition(function (position){
+    // Setup the click event listeners: simply set the map to Chicago.
+    controlUI.addEventListener('click', function () {
+        navigator.geolocation.getCurrentPosition(function (position) {
             currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
             map.setCenter(currentPosition);
-          });
-      });
-    }
+        });
+    });
+}

coderedcms/templates/coderedcms/pages/location_index_page.html

@@ -9,29 +9,33 @@
       {% block map %}
           <div class="col-md-8 col-xs-12 order-md-12 mb-5">
           <input id="pac-input" class="controls" type="text" placeholder="Enter your location">
-            <div class="map-container" 
-            id="cr-map" 
-            data-zoom="{{ page.zoom }}" 
-            data-latitude="{{ page.center_latitude }}" 
-            data-longitude="{{ page.center_longitude }}" 
+            <div class="map-container"
+            id="cr-map"
+            data-zoom="{{ page.zoom }}"
+            data-latitude="{{ page.center_latitude }}"
+            data-longitude="{{ page.center_longitude }}"
             data-geojson-url="{{ request.path }}?data-format=geojson"
             data-key="{{ google_api_key }}"
             data-callback="initMap"
             data-libraries="places"
             data-show-list="True"
             data-show-search="True"
-            data-empty-state="There are no locations in this area.  Try zooming out or moving the map to find a location."
             data-map-type-control=false>
             </div>
           </div>
       {% endblock %}
       {% block map_list %}
         <div class="col-md-4 col-xs-12 order-md-1 mb-5">
-          <div class="list-group" id="LocationList">
+          <div id="LocationList" class="list-group">
               {% for item in geojson_data.features %}
                 {{ item.render_list_description }}
               {% endfor %}
           </div>
+          <div id="LocationListEmpty" style="display:none;">
+              {% block no_results %}
+              <p>There are no locations in this area. Try zooming out or moving the map to find a location.</p>
+              {% endblock %}
+          </div>
         </div>
       {% endblock %}
   </div>