Skip to content

Commit

Permalink
Refresh map button instead of toggle
Browse files Browse the repository at this point in the history
  • Loading branch information
@RyanTG
RyanTG committed Dec 8, 2024
1 parent 0e4a7eb commit 8891df3
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 55 deletions.
59 changes: 30 additions & 29 deletions app/assets/javascripts/application.js.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ var zoomLevel;
var markers = new Array();
var locationIDs = new Array();
var searchSections = new Array();
const REDO_TIMEOUT = 1800;
const REDO_TIMEOUT = 200;

function toggleData(name, id) {
var main = id ? '_' + id : '';
Expand Down Expand Up @@ -105,11 +105,7 @@ function showLocations(ids, lats, lons, num_machines, latLng) {
el.addEventListener('touchstart', function () {
showLocationDetail(locationID);

var x = document.getElementsByClassName("marker2 maplibregl-marker maplibregl-marker-anchor-center");
var g;
for (g = 0; g < x.length; g++) {
x[g].className = "marker maplibregl-marker maplibregl-marker-anchor-center";
}
clearSelectedMarker();
el.className = 'marker2 maplibregl-marker maplibregl-marker-anchor-center';

document.getElementById('location_detail_location_' + locationID).scrollIntoView(true);
Expand All @@ -119,11 +115,7 @@ function showLocations(ids, lats, lons, num_machines, latLng) {
el.addEventListener('click', function () {
showLocationDetail(locationID);

var x = document.getElementsByClassName("marker2 maplibregl-marker maplibregl-marker-anchor-center");
var g;
for (g = 0; g < x.length; g++) {
x[g].className = "marker maplibregl-marker maplibregl-marker-anchor-center";
}
clearSelectedMarker();
el.className = 'marker2 maplibregl-marker maplibregl-marker-anchor-center';

document.getElementById('location_detail_location_' + locationID).scrollIntoView(true);
Expand All @@ -144,7 +136,8 @@ function showLocations(ids, lats, lons, num_machines, latLng) {
if (locationIDs.length === 1) {
map.setZoom(18);
map.setCenter([lons[0], lats[0]]);
zoomCheck();
hideRefresh();
refreshButton();
if (document.getElementById("not_found")) {
document.getElementById("not_found").style.display = "none";
}
Expand All @@ -153,53 +146,59 @@ function showLocations(ids, lats, lons, num_machines, latLng) {
} else if (locationIDs.length == 0 && latLng.length === 2) {
map.fitBounds(bounds, { padding: 50, animate: false });
map.setZoom(18);
zoomCheck();
hideRefresh();
refreshButton();
if (document.getElementById("not_found")) {
document.getElementById("not_found").style.display = "none";
}
} else {
map.fitBounds(bounds, { padding: 50, animate: false });
zoomCheck();
hideRefresh();
if (document.getElementById("not_found")) {
document.getElementById("not_found").style.display = "none";
}
}
}
}

function clearSelectedMarker() {
var x = document.getElementsByClassName("marker2 maplibregl-marker maplibregl-marker-anchor-center");
var g;
for (g = 0; g < x.length; g++) {
x[g].className = "marker maplibregl-marker maplibregl-marker-anchor-center";
}
}

function hideRefresh() {
document.getElementById("refresh_button").style.display = "none";
}

function zoomCheck() {
zoomLevel = map.getZoom();
if (zoomLevel < 6) {
document.getElementById("zoom_in_more").style.display = "block";
} else {
document.getElementById("zoom_in_more").style.display = "none";
redone();
}
mapAdjusted = 1;
redo();
}

function storeMachineID() {
searchMachineID = document.getElementById("by_machine_id").value;
searchMachineIDString = searchMachineID ? ';by_machine_id=' + searchMachineID : ''
}

function redo() {
zoomLevel = map.getZoom();
map.on('zoomend', redone);
map.on('dragend', redone);
function refreshButton() {
map.on('zoomend', function () { document.getElementById("refresh_button").style.display = "block"; });
map.on('dragend', function () { document.getElementById("refresh_button").style.display = "block"; });
}

function redone() {
hideRefresh();
var mapupdater;
zoomLevel = map.getZoom();
if (zoomLevel < 6) {
document.getElementById("zoom_in_more").style.display = "block";
zoomLevel = map.getZoom();
} else if (zoomLevel >= 6) {
document.getElementById("zoom_in_more").style.display = "none";
zoomLevel = map.getZoom();
}
if ($("#followCheck").is(':checked') && (zoomLevel >= 6)) {

document.getElementById("zoom_in_more").style.display = "none";
window.clearTimeout(mapupdater);
mapupdater = window.setTimeout(function () {
Expand Down Expand Up @@ -234,7 +233,6 @@ function redone() {
}
});
}, REDO_TIMEOUT);
}
}

function scrollToMiddle(id) {
Expand Down Expand Up @@ -310,11 +308,13 @@ function findClosestLocations(region) {

function showLocationDetail(locationID) {
$('.location_detail_location').hide();
clearSelectedMarker();

if ($('#location_detail_location_' + locationID).is(":hidden")) {
$('#show_location_detail_location_' + locationID).hide();
$('.sub_nav_location').hide();
$('.back_to_results').show();
$('#marker_' + locationID).removeClass('marker').addClass('marker2');
toggleData('location_detail_location', locationID);

$('#location_detail_location_' + locationID).html(loadingHTML());
Expand All @@ -326,8 +326,9 @@ function showLocationDetail(locationID) {

function backToResults() {
$('.back_to_results').hide();
$('.sub_nav_location').show("slide", { direction: "left" }, 400);
$('.sub_nav_location').show("slide", { direction: "left" }, 200);
$('.location_detail_location').hide();
clearSelectedMarker();
}

function showSearchModal() {
Expand Down
30 changes: 25 additions & 5 deletions app/assets/stylesheets/application.scss.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1316,10 +1316,10 @@ input.single_hide {
margin-left: 8px;
}

#mapFollow_wrapper,
#refresh_button,
#zoom_in_more,
#search_link_wrapper {
position: fixed;
top: 100px;
width: 110px;
background: var(--lightpink);
text-align: center;
Expand All @@ -1331,7 +1331,7 @@ input.single_hide {

#search_link_wrapper {
padding-top: 5px;
top: 160px;
top: 60px;
}

#search_link_wrapper a {
Expand All @@ -1345,12 +1345,29 @@ input.single_hide {
cursor: pointer;
}

#mapFollow_wrapper {
#refresh_button {
top: 220px;
color: #440152;
background-color: #e3fae5;
font-family: $Nunito_700Bold;
}

#zoom_in_more {
top: 280px;
color: var(--darkgrey);
background-color: var(--lightpink);
}

#refresh_button,
#zoom_in_more {
display: none;
}

#refresh_button:hover,
#zoom_in_more:hover {
cursor: pointer;
}

.toggle_btn_reg {
left: 43%;
}
Expand Down Expand Up @@ -1993,7 +2010,6 @@ br.clear {
}

.search_result {
background: var(--container);
height: 100%;
@include radius(10px);
box-shadow: 2px 5px 10px var(--shadow);
Expand All @@ -2005,6 +2021,10 @@ br.clear {
font-size: 14px;
}

.location_details_container {
background: var(--container);
}

#form select,
form select {
border: 2px solid var(--border);
Expand Down
13 changes: 11 additions & 2 deletions app/assets/stylesheets/mobile-application.scss.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -632,8 +632,7 @@ input.single_hide {
margin: 5px 0 5px 20%;
}

#mapFollow_wrapper,
#search_link_wrapper {
#zoom_in_more {
position: relative;
padding: 0px 5px 10px;
font-size: 20px;
Expand All @@ -645,9 +644,19 @@ input.single_hide {
background: none;
}

#refresh_button {
z-index: 100;
top: 440px;
left: 50% !important;
margin-left: -55px;
}

#search_link_wrapper {
border: none;
font-size: 16px;
z-index: 100;
top: 105px;
left: 20px !important;
}

#search_link_wrapper a {
Expand Down
5 changes: 1 addition & 4 deletions app/views/locations/_form.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,7 @@
hideSearchModal();
$(".mask").hide();
ismap = 0;
if (mapAdjusted = 1) { //reset checkbox
mapAdjusted = 0;
$('#followCheck').prop('checked', false);
}
mapAdjusted = 0;
$('#search_link_wrapper').css('display','block');
e.preventDefault();
search_string = $(this).children(":input").filter(function(index, element) { return $(element).val() != ''; }).serialize();
Expand Down
2 changes: 1 addition & 1 deletion app/views/locations/_locations.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
:javascript

clearMarkers();
$("#mapFollow_wrapper,#search_link_wrapper,#min_lookup_wrapper").removeClass("hide_button");
$("#search_link_wrapper,#min_lookup_wrapper").removeClass("hide_button");

showLocations(
[#{@location_data[0].join(', ')}],
Expand Down
16 changes: 7 additions & 9 deletions app/views/pages/map.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,13 @@

#search_link_wrapper.hide_button.toggle_btn_reg
=link_to "Link to this Search Result", "", :id => "search_link"
#mapFollow_wrapper.hide_button.toggle_btn_reg
%span.red.font14.p_5{:id => "zoom_in_more"}
#refresh_button.toggle_btn_reg
%div.refresh_button{:onclick => "zoomCheck();"}
Refresh this map area
#zoom_in_more.toggle_btn_reg
%span.red.font14.p_5
Zoom in further to refresh results!
%input{:type => "checkbox", :id => "followCheck", :name => "followCheck", :class => "m_0"}
%label{ for: "followCheck" }
%span.font16.semiBold.pointer Redo results when map is moved?

%button#top_button{onclick: "topFunction()", title: "Go to top"} Top

#lookup.map_lookup
Expand Down Expand Up @@ -183,10 +184,7 @@

hideSearchModal();
$(".mask").hide();
if (mapAdjusted = 1) { //reset checkbox
mapAdjusted = 0;
$('#followCheck').prop('checked', false);
}
mapAdjusted = 0;
$('#search_link_wrapper').css('display','block');
e.preventDefault();
search_string = $("#address_search_form :input").filter(function(index, element) { return $(element).val() != ''; }).serialize();
Expand Down
11 changes: 6 additions & 5 deletions app/views/pages/region.html.haml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@
= render :partial => 'locations/map'
#search_link_wrapper.hide_button.toggle_btn_reg
=link_to "Link to this Search Result", "", :id => "search_link"
#mapFollow_wrapper.hide_button.toggle_btn_reg
%span.red.font14.p_5{:id => "zoom_in_more"}
#refresh_button.toggle_btn_reg
%div.refresh_button{:onclick => "zoomCheck();"}
Refresh this map area
#zoom_in_more.toggle_btn_reg
%span.red.font14.p_5
Zoom in further to refresh results!
%input{:type => "checkbox", :id => "followCheck", :name => "followCheck", :class => "m_0"}
%label{ for: "followCheck" }
%span.font16.semiBold.pointer Redo results when map is moved?

%button#top_button{onclick: "topFunction()", title: "Go to top"} Top
#lookup
#locations
Expand Down

0 comments on commit 8891df3

Please sign in to comment.