Skip to content

Commit

Permalink
Update store locator JS
Browse files Browse the repository at this point in the history 
closes #129
closes #120
  • Loading branch information
@jsirish
jsirish committed Feb 12, 2017
1 parent 7142d76 commit 5cf2396
Show file tree
Hide file tree
Showing 80 changed files with 4,785 additions and 7,374 deletions.
184 changes: 127 additions & 57 deletions code/pages/Locator.php
View file
Expand Up @@ -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
Expand Down Expand Up @@ -199,6 +199,32 @@ class Locator_Controller extends Page_Controller
*/
private static $bootstrapify = true;

/**
* @var int
*/
private static $limit = 50;

/**
* ID of map container
*
* @var string
*/
private static $map_container = 'map';

/**
* class of location list container
*
* @var string
*/
private static $list_container = 'loc-list';

/**
* GET variable which, if isset, will trigger storeLocator init and return XML
*
* @var string
*/
private static $query_trigger = 'action_doFilterLocations';

/**
* @var DataList|ArrayList
*/
Expand All @@ -211,75 +237,93 @@ public function init()
{
parent::init();

// google maps api key
$key = Config::inst()->get('GoogleGeocoding', 'google_api_key');

$locations = $this->getLocations();

if ($locations) {

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');

$featuredInList = ($locations->filter('Featured', true)->count() > 0);
$defaultCoords = $this->getAddressSearchCoords() ? $this->getAddressSearchCoords() : '';
$isChrome = (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== FALSE);

$featured = $featuredInList
? 'featuredLocations: true'
: 'featuredLocations: false';
// prevent init of map if no query
$request = Controller::curr()->getRequest();
if ($this->getTrigger($request)) {
// google maps api key
$key = Config::inst()->get('GoogleGeocoding', 'google_api_key');

$locations = $this->getLocations();

if ($locations) {

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/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() : '';
$isChrome = (strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome') !== FALSE);

$featured = $featuredInList
? 'featuredLocations: true'
: 'featuredLocations: false';

// map config based on user input in Settings tab
// AutoGeocode or Full Map
$limit = Config::inst()->get('Locator_Controller', 'limit');
if ($limit < 1) $limit = -1;
if ($this->data()->AutoGeocode) {
$load = $featuredInList || $defaultCoords != '' || $isChrome
? 'autoGeocode: false, fullMapStart: true, storeLimit: ' . $limit . ', maxDistance: true,'
: 'autoGeocode: true, fullMapStart: false,';
} else {
$load = 'autoGeocode: false, fullMapStart: true, storeLimit: ' . $limit . ', maxDistance: true,';
}

// map config based on user input in Settings tab
// AutoGeocode or Full Map
if ($this->data()->AutoGeocode) {
$load = $featuredInList || $defaultCoords != '' || $isChrome
? 'autoGeocode: false, fullMapStart: true, storeLimit: 1000, maxDistance: true,'
: 'autoGeocode: true, fullMapStart: false,';
} else {
$load = 'autoGeocode: false, fullMapStart: true, storeLimit: 1000, maxDistance: true,';
}
$listTemplatePath = Config::inst()->get('Locator_Controller', 'list_template_path');
$infowindowTemplatePath = Config::inst()->get('Locator_Controller', 'info_window_template_path');

$listTemplatePath = Config::inst()->get('Locator_Controller', 'list_template_path');
$infowindowTemplatePath = Config::inst()->get('Locator_Controller', 'info_window_template_path');
// in page or modal
$modal = ($this->data()->ModalWindow) ? 'modalWindow: true' : 'modalWindow: false';

// 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']);
$url = '';
if (count($vars)) {
$url .= '?' . http_build_query($vars);
}
$link = Controller::join_links($this->AbsoluteLink(), 'xml.xml', $url);
$link = Controller::join_links($this->Link(), 'xml.xml', $url);

// 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;
// containers
$map_id = Config::inst()->get('Locator_Controller', 'map_container');
$list_class = Config::inst()->get('Locator_Controller', 'list_container');

// init map
Requirements::customScript("
// init map
Requirements::customScript("
$(function(){
$('#map-container').storeLocator({
" . $load . "
dataLocation: '" . $link . "',
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
}
});
});
');
");
}
}
}

Expand All @@ -290,7 +334,11 @@ public function init()
*/
public function index(SS_HTTPRequest $request)
{
$locations = $this->getLocations();
if ($this->getTrigger($request)) {
$locations = $this->getLocations();
} else {
$locations = ArrayList::create();
}

return $this->customise(array(
'Locations' => $locations,
Expand All @@ -305,7 +353,11 @@ public function index(SS_HTTPRequest $request)
*/
public function xml(SS_HTTPRequest $request)
{
$locations = $this->getLocations();
if ($this->getTrigger($request)) {
$locations = $this->getLocations();
} else {
$locations = ArrayList::create();
}

return $this->customise(array(
'Locations' => $locations,
Expand Down Expand Up @@ -366,11 +418,29 @@ public function setLocations(SS_HTTPRequest $request = null)
//allow for returning list to be set as
$this->extend('updateListType', $locations);

$limit = Config::inst()->get('Locator_Controller', 'limit');
if ($limit > 0) {
$locations = $locations->limit($limit);
}

$this->locations = $locations;
return $this;

}

/**
* @param SS_HTTPRequest $request
* @return bool
*/
public function getTrigger(SS_HTTPRequest $request = null)
{
if ($request === null) {
$request = $this->getRequest();
}
$trigger = $request->getVar(Config::inst()->get('Locator_Controller', 'query_trigger'));
return isset($trigger);
}

/**
* @return bool|string
*/
Expand Down
28 changes: 14 additions & 14 deletions css/map.css
View file
Expand Up @@ -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;
Expand All @@ -86,7 +86,7 @@
width: 100%;
}

#loc-list .list-label
.loc-list .list-label
{
float: left;
margin: 10px 0 0 6px;
Expand All @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -215,7 +215,7 @@

@media only screen and (max-width: 960px) {

#loc-list {
.loc-list {

}

Expand All @@ -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;
}

Expand All @@ -248,7 +248,7 @@

@media only screen and (max-width: 640px) {

#loc-list {
.loc-list {
width: 100%;
height: auto;
}
Expand Down
11 changes: 4 additions & 7 deletions templates/Layout/Locator.ss
View file
@@ -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>
Expand Down
4 changes: 3 additions & 1 deletion templates/LocationXML.ss
View file
@@ -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 %>

0 comments on commit 5cf2396

Please sign in to comment.