Update store locator JS

closes #129 closes #120
dynamic · Feb 11, 2017 · 8ad3266 · 8ad3266
1 parent 7142d76
commit 8ad3266
Show file tree

Hide file tree

Showing 57 changed files with 5,050 additions and 41 deletions.
diff --git a/code/pages/Locator.php b/code/pages/Locator.php
@@ -63,9 +63,9 @@ public function getCMSFields()
         $fields->addFieldsToTab('Root.Settings', array(
             HeaderField::create('DisplayOptions', 'Display Options', 3),
             OptionsetField::create('Unit', 'Unit of measure', array('m' => 'Miles', 'km' => 'Kilometers')),
-            CheckboxField::create('AutoGeocode', 'Auto Geocode - Automatically filter map results based on user location')
-                ->setDescription('Note: if any locations are set as featured, the auto geocode is automatically disabled.'),
-            CheckboxField::create('ModalWindow', 'Modal Window - Show Map results in a modal window'),
+            //CheckboxField::create('AutoGeocode', 'Auto Geocode - Automatically filter map results based on user location')
+            //    ->setDescription('Note: if any locations are set as featured, the auto geocode is automatically disabled.'),
+            //CheckboxField::create('ModalWindow', 'Modal Window - Show Map results in a modal window'),
         ));
 
         // Filter categories
@@ -199,6 +199,26 @@ class Locator_Controller extends Page_Controller
      */
     private static $bootstrapify = true;
 
+    /**
+     * @var int
+     */
+    private static $limit = 50;
+
+    /**
+     * @var string
+     */
+    private static $map_container = 'map';
+
+    /**
+     * @var string
+     */
+    private static $list_container = 'loc-list';
+
+    /**
+     * @var string
+     */
+    private static $query_trigger = 'Address';
+
     /**
      * @var DataList|ArrayList
      */
@@ -221,8 +241,8 @@ public function init()
             Requirements::css('locator/css/map.css');
             Requirements::javascript('framework/thirdparty/jquery/jquery.js');
             Requirements::javascript('https://maps.google.com/maps/api/js?key=' . $key);
-            Requirements::javascript('locator/thirdparty/handlebars/handlebars-v1.3.0.js');
-            Requirements::javascript('locator/thirdparty/jquery-store-locator/js/jquery.storelocator.js');
+            Requirements::javascript('locator/thirdparty/jquery-store-locator-plugin/assets/js/libs/handlebars.min.js');
+            Requirements::javascript('locator/thirdparty/jquery-store-locator-plugin/assets/js/plugins/storeLocator/jquery.storelocator.js');
 
             $featuredInList = ($locations->filter('Featured', true)->count() > 0);
             $defaultCoords = $this->getAddressSearchCoords() ? $this->getAddressSearchCoords() : '';
@@ -234,12 +254,13 @@ public function init()
 
             // map config based on user input in Settings tab
             // AutoGeocode or Full Map
+            $limit = Config::inst()->get('Locator_Controller', 'limit');
             if ($this->data()->AutoGeocode) {
                 $load = $featuredInList || $defaultCoords != '' || $isChrome
-                    ? 'autoGeocode: false, fullMapStart: true, storeLimit: 1000, maxDistance: true,'
+                    ? 'autoGeocode: false, fullMapStart: true, storeLimit: ' . $limit . ', maxDistance: true,'
                     : 'autoGeocode: true, fullMapStart: false,';
             } else {
-                $load = 'autoGeocode: false, fullMapStart: true, storeLimit: 1000, maxDistance: true,';
+                $load = 'autoGeocode: false, fullMapStart: true, storeLimit: ' . $limit . ', maxDistance: true,';
             }
 
             $listTemplatePath = Config::inst()->get('Locator_Controller', 'list_template_path');
@@ -248,17 +269,20 @@ public function init()
             // in page or modal
             $modal = ($this->data()->ModalWindow) ? 'modalWindow: true' : 'modalWindow: false';
 
-            $kilometer = ($this->data()->Unit == 'km') ? 'lengthUnit: "km"' : 'lengthUnit: "m"';
+            $kilometer = ($this->data()->Unit == 'km') ? "lengthUnit: 'km'" : "lengthUnit: 'm'";
 
             // pass GET variables to xml action
             $vars = $this->request->getVars();
             unset($vars['url']);
-            unset($vars['action_doFilterLocations']);
             $url = '';
             if (count($vars)) {
                 $url .= '?' . http_build_query($vars);
             }
-            $link = $this->Link() . 'xml.xml' . $url;
+            $link = Controller::join_links($this->AbsoluteLink(), 'xml.xml', $url);
+
+            // containers
+            $map_id = Config::inst()->get('Locator_Controller', 'map_container');
+            $list_class = Config::inst()->get('Locator_Controller', 'list_container');
 
             // init map
             Requirements::customScript("
@@ -269,17 +293,25 @@ public function init()
                         listTemplatePath: '" . $listTemplatePath . "',
                         infowindowTemplatePath: '" . $infowindowTemplatePath . "',
                         originMarker: true,
-                        " . $modal . ',
-                        ' . $featured . ",
+                        //" . $modal . ",
+                        " . $featured . ",
                         slideMap: false,
-                        zoomLevel: 0,
-                        noForm: true,
                         distanceAlert: -1,
-                        " . $kilometer . ',
-                        ' . $defaultCoords . '
+                        " . $kilometer . ",
+                        " . $defaultCoords . "
+                        mapID: '" . $map_id . "',
+                        locationList: '" . $list_class . "',
+                        mapSettings: {
+							zoom: 12,
+							mapTypeId: google.maps.MapTypeId.ROADMAP,
+							disableDoubleClickZoom: true,
+							scrollwheel: false,
+							navigationControl: false,
+							draggable: false
+						}
                     });
                 });
-            ');
+            ");
         }
     }
 
@@ -290,7 +322,8 @@ public function init()
      */
     public function index(SS_HTTPRequest $request)
     {
-        $locations = $this->getLocations();
+        $limit = Config::inst()->get('Locator_Controller', 'limit');
+        $locations = $this->getLocations()->limit($limit);
 
         return $this->customise(array(
             'Locations' => $locations,
@@ -305,7 +338,14 @@ public function index(SS_HTTPRequest $request)
      */
     public function xml(SS_HTTPRequest $request)
     {
-        $locations = $this->getLocations();
+        $limit = Config::inst()->get('Locator_Controller', 'limit');
+        $trigger = $request->getVar(Config::inst()->get('Locator_Controller', 'query_trigger'));
+
+        if (isset($trigger)) {
+            $locations = $this->getLocations()->limit($limit);
+        } else {
+            $locations = ArrayList::create();
+        }
 
         return $this->customise(array(
             'Locations' => $locations,

diff --git a/css/map.css b/css/map.css
@@ -67,15 +67,15 @@
 /* === 
  Results List 
 === */
-#loc-list
+.loc-list
 {
 	float: left; 
 	height: 530px;
 	width: 25%;
 	overflow: auto;
 }
 
-#loc-list ul
+.loc-list ul
 {
 	display: block;
 	clear: left;
@@ -86,7 +86,7 @@
 	width: 100%;
 }
 
-#loc-list .list-label
+.loc-list .list-label
 {
 	float: left;
 	margin: 10px 0 0 6px;
@@ -98,26 +98,26 @@
 	font-weight: bold;
 }
 
-#loc-list .list-details
+.loc-list .list-details
 {
 	float: left;
 	margin-left: 6px;
 	width: 165px;
 }
 
-#loc-list .list-content
+.loc-list .list-content
 {
 	padding: 10px;
 }
 
-#loc-list .loc-dist
+.loc-list .loc-dist
 {
 	font-weight: bold;
 	font-style: italic;
 	color: #8e8e8e;
 }
 
-#loc-list li
+.loc-list li
 {
 	display: block;
 	clear: left;
@@ -128,10 +128,10 @@
 	border: 1px solid #fff; /* Adding this to prevent moving li elements when adding the list-focus class*/
 }
 
-#loc-list li:first-child {margin-top: 0px;}
+.loc-list li:first-child {margin-top: 0px;}
 
 
-#loc-list .list-focus
+.loc-list .list-focus
 {
 	border: 1px solid rgba(82,168,236,0.9);
 	-moz-box-shadow: 0 0 8px rgba(82,168,236,0.7);
@@ -215,7 +215,7 @@
 
 @media only screen and (max-width: 960px) {
 
-	#loc-list {
+	.loc-list {
 
 	}
 
@@ -231,15 +231,15 @@
 
 @media only screen and (min-width: 641px) and (max-width: 959px) {
 
-	#loc-list .list-label{
+	.loc-list .list-label{
 		margin-left: 0px;
 	}
 
-	#loc-list .list-content {
+	.loc-list .list-content {
 		padding: 10px 0px;
 	}
 
-	#loc-list .list-details {
+	.loc-list .list-details {
 		width: 140px;
 	}
 
@@ -248,7 +248,7 @@
 
 @media only screen and (max-width: 640px) { 
 
-	#loc-list {
+	.loc-list {
 		width: 100%;
 		height: auto;
 	}

diff --git a/templates/Layout/Locator.ss b/templates/Layout/Locator.ss
@@ -1,17 +1,14 @@
 <div class="content-container unit size3of4 lastUnit">
 	<h1>$Title</h1>
 	<% if $Content %><div class="typography">$Content</div><% end_if %>
+    <div class="form-container">
+		$LocationSearch
+    </div>
 	<% if $Locations %>
-        <p>$Locations.Count locations</p>
-		<div id="form-container">
-			$LocationSearch
-		</div>
-
 		<div id="map-container">
 			<div id="map"></div>
-			<div id="loc-list">
+			<div class="loc-list">
 				<ul id="list">
-					<li><img src="locator/images/ajax-loader.gif" class="loading"></li>
 				</ul>
 			</div>
 		</div>

diff --git a/templates/LocationXML.ss b/templates/LocationXML.ss
@@ -1,3 +1,5 @@
+<% if $Locations %>
 <markers>
 	<% loop $Locations %><marker name="$Title.XML" lat="$Lat.XML" lng="$Lng.XML" category="$Category.Name.XML" address="$Address.XML" address2="" city="$Suburb.XML" state="$State.XML" postal="$Postcode.XML" phone="$Phone.XML" web="$Website.XML" email="$Email.XML" featured="$Featured.NiceAsBoolean.XML" <% if $distance %>distance="$distance"<% end_if %> /><% end_loop %>
-</markers>
+</markers>
+<% end_if %>