From 5c060569eb7b7790d4a92b8f3d7819ae24855bf2 Mon Sep 17 00:00:00 2001 From: Bella Bai and Enrique Arango Lyons Date: Wed, 26 Oct 2016 23:11:10 -0400 Subject: [PATCH 1/7] added tabs for early polling location cards and address to initial disply. --- app/index.html | 4 +- app/scripts/app.js | 349 +++++++++--------- app/scripts/early_voting_mgr.js | 8 + app/scripts/map_service.js | 2 +- app/scripts/polling_location_finder.js | 2 +- .../templates/early_voting_sidebar.ejs | 64 ++-- app/styles/_navbar.scss | 2 +- app/styles/_tabs.scss | 5 + app/styles/main.scss | 6 +- 9 files changed, 236 insertions(+), 206 deletions(-) diff --git a/app/index.html b/app/index.html index c38ff97..3fde85d 100644 --- a/app/index.html +++ b/app/index.html @@ -112,13 +112,13 @@

Find your polling location

-
+

- View directions + View directions View in Map app
diff --git a/app/scripts/app.js b/app/scripts/app.js index 341d025..b90259d 100644 --- a/app/scripts/app.js +++ b/app/scripts/app.js @@ -1,86 +1,85 @@ require.config({ - paths: { - jquery: '../bower_components/jquery/jquery', - scrollTo: '../bower_components/jquery.scrollTo/jquery.scrollTo', - bootstrapAffix: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix', - bootstrapAlert: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert', - bootstrapButton: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/button', - bootstrapCarousel: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel', - bootstrapCollapse: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse', - bootstrapDropdown: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown', - bootstrapModal: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal', - bootstrapPopover: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover', - bootstrapScrollspy: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy', - bootstrapTab: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab', - bootstrapTooltip: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip', - bootstrapTransition: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition', - text: '../bower_components/requirejs-text/text', - ejs: '../bower_components/ejs/ejs', - moment: '../bower_components/moment/moment', - moment_range: '../bower_components/moment-range/dist/moment-range', - json: 'vendor/json' + paths: { + jquery: '../bower_components/jquery/jquery', + scrollTo: '../bower_components/jquery.scrollTo/jquery.scrollTo', + bootstrapAffix: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/affix', + bootstrapAlert: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/alert', + bootstrapButton: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/button', + bootstrapCarousel: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/carousel', + bootstrapCollapse: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/collapse', + bootstrapDropdown: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown', + bootstrapModal: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/modal', + bootstrapPopover: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover', + bootstrapScrollspy: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/scrollspy', + bootstrapTab: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/tab', + bootstrapTooltip: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip', + bootstrapTransition: '../bower_components/bootstrap-sass/assets/javascripts/bootstrap/transition', + text: '../bower_components/requirejs-text/text', + ejs: '../bower_components/ejs/ejs', + moment: '../bower_components/moment/moment', + moment_range: '../bower_components/moment-range/dist/moment-range', + json: 'vendor/json' + }, + shim: { + bootstrapAffix: { + deps: ['jquery'] }, - shim: { - bootstrapAffix: { - deps: ['jquery'] - }, - bootstrapAlert: { - deps: ['jquery', 'bootstrapTransition'] - }, - bootstrapButton: { - deps: ['jquery'] - }, - bootstrapCarousel: { - deps: ['jquery', 'bootstrapTransition'] - }, - bootstrapCollapse: { - deps: ['jquery', 'bootstrapTransition'] - }, - bootstrapDropdown: { - deps: ['jquery'] - }, - bootstrapModal: { - deps: ['jquery', 'bootstrapTransition'] - }, - bootstrapPopover: { - deps: ['jquery', 'bootstrapTooltip'] - }, - bootstrapScrollspy: { - deps: ['jquery'] - }, - bootstrapTab: { - deps: ['jquery', 'bootstrapTransition'] - }, - bootstrapTooltip: { - deps: ['jquery', 'bootstrapTransition'] - }, - bootstrapTransition: { - deps: ['jquery'] - }, - geojson: { - exports: 'GeoJSON' - }, - underscore: { - exports: '_' - }, - ejs: { - exports: 'ejs' - } + bootstrapAlert: { + deps: ['jquery', 'bootstrapTransition'] + }, + bootstrapButton: { + deps: ['jquery'] + }, + bootstrapCarousel: { + deps: ['jquery', 'bootstrapTransition'] + }, + bootstrapCollapse: { + deps: ['jquery', 'bootstrapTransition'] + }, + bootstrapDropdown: { + deps: ['jquery'] + }, + bootstrapModal: { + deps: ['jquery', 'bootstrapTransition'] + }, + bootstrapPopover: { + deps: ['jquery', 'bootstrapTooltip'] + }, + bootstrapScrollspy: { + deps: ['jquery'] + }, + bootstrapTab: { + deps: ['jquery', 'bootstrapTransition'] + }, + bootstrapTooltip: { + deps: ['jquery', 'bootstrapTransition'] + }, + bootstrapTransition: { + deps: ['jquery'] + }, + geojson: { + exports: 'GeoJSON' + }, + underscore: { + exports: '_' + }, + ejs: { + exports: 'ejs' } + } }); - require(['jquery', - 'early_voting_mgr', 'polling_location_finder', 'map_service', - 'json!vendor/EARLY_VOTING_AddressPoints.geojson'], - function($, earlyVotingManager, findPollingLocationFor, mapService, earlyPollingJSON) { + 'early_voting_mgr', 'polling_location_finder', 'map_service', + 'json!vendor/EARLY_VOTING_AddressPoints.geojson'], + function ($, earlyVotingManager, findPollingLocationFor, mapService, earlyPollingJSON) { 'use strict'; window.location.hash = window.location.hash || 'early-voting'; // Trigger the hashchange event if going to a different tab - $('.cambridge-tabs a[href^=#]').on('click', function() { + $('.cambridge-tabs a[href^=#]').on('click', function () { var target = $(this).attr('href'); if (target != window.location.hash) { window.location.hash = target; @@ -88,9 +87,9 @@ require(['jquery', }); // Sets the "active" styling on the active tab link - $(window).on('hashchange', function() { + $(window).on('hashchange', function () { $('.cambridge-tabs a').parent().removeClass("active"); - $('.cambridge-tabs a[href='+ window.location.hash +']').parent().addClass("active"); + $('.cambridge-tabs a[href=' + window.location.hash + ']').parent().addClass("active"); if (window.location.hash == "#early-voting") { @@ -106,144 +105,144 @@ require(['jquery', earlyVotingManager.init(); - + var $address = $('#address'); var defaultBounds = new google.maps.LatLngBounds( - new google.maps.LatLng(42.360129, -71.148834), - new google.maps.LatLng(42.389868, -71.075535) + new google.maps.LatLng(42.360129, -71.148834), + new google.maps.LatLng(42.389868, -71.075535) ); var autocomplete = new google.maps.places.Autocomplete($address.get(0), { - bounds: defaultBounds + bounds: defaultBounds }); autocomplete.addListener('place_changed', searchForAddress); - $('#view_directions').on('click', function () { - $('#info').toggleClass('up'); - if ($('#info').hasClass('up')) { - $('#view_directions').html(' View map'); - } else { - $('#view_directions').html(' View directions'); - } + $('#view-directions').on('click', function () { + $('#info').toggleClass('up'); + if ($('#info').hasClass('up')) { + $('#view-directions').html(' View map'); + } else { + $('#view-directions').html(' View directions'); + } }); function geolocationErrorDisplay() { - $('#notice') - .addClass('error') - .html("We weren't able to determine your current location. Try typing in your address?"); + $('#notice') + .addClass('error') + .html("We weren't able to determine your current location. Try typing in your address?"); } - $('.current-location').on('click', function() { - var $btn = $(this); - var initialText = $btn.html(); - // replace button text with loading text on disabled button - $btn.attr('disabled', true); - $btn.find('.button-text').text('Finding your location.'); - $btn.addClass('loading'); - if (navigator.geolocation) { - navigator.geolocation.getCurrentPosition(function(position) { - var currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); - findPollingLocationFor(currentLocation, function() { - $btn.attr('disabled', false); - $btn.html(initialText); - $btn.removeClass('loading'); - google.maps.event.trigger(map, 'resize'); - }); - }, geolocationErrorDisplay); - } else { - geolocationErrorDisplay(); - // reset button if failed + $('.current-location').on('click', function () { + var $btn = $(this); + var initialText = $btn.html(); + // replace button text with loading text on disabled button + $btn.attr('disabled', true); + $btn.find('.button-text').text('Finding your location.'); + $btn.addClass('loading'); + if (navigator.geolocation) { + navigator.geolocation.getCurrentPosition(function (position) { + var currentLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); + findPollingLocationFor(currentLocation, function () { $btn.attr('disabled', false); $btn.html(initialText); $btn.removeClass('loading'); google.maps.event.trigger(map, 'resize'); + }); + }, geolocationErrorDisplay); + } else { + geolocationErrorDisplay(); + // reset button if failed + $btn.attr('disabled', false); + $btn.html(initialText); + $btn.removeClass('loading'); + google.maps.event.trigger(map, 'resize'); - } + } }); - function searchForAddress () { - var address = $address.val(); - var geocoder = new google.maps.Geocoder(); - - // clear details pane - $('#directions').empty(); - - // go right to the first result if there's only one, or display a list if there are multiples - function displaySearchResults(results) { - var addressClickHandler = function() { - var location = $(this).data('location'); - $('#directions').empty(); - findPollingLocationFor(location); - }; - if (results.length === 1) { - findPollingLocationFor(results[0].geometry.location); - } else { - var $ul = $('
@@ -44,8 +44,11 @@
+
+ From 9fb3c6b117cbd461e1c4d45616755293ed9d7a25 Mon Sep 17 00:00:00 2001 From: Bella Bai and Enrique Arango Lyons Date: Thu, 27 Oct 2016 23:31:03 -0400 Subject: [PATCH 3/7] update the style of view-in-map link --- app/scripts/templates/early_voting_sidebar.ejs | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/app/scripts/templates/early_voting_sidebar.ejs b/app/scripts/templates/early_voting_sidebar.ejs index 6a733f0..7cb703e 100644 --- a/app/scripts/templates/early_voting_sidebar.ejs +++ b/app/scripts/templates/early_voting_sidebar.ejs @@ -43,15 +43,10 @@
- -
- - +
From 27af4e6b83c66b298584c3b07ee403a14f571d40 Mon Sep 17 00:00:00 2001 From: Bella Bai and Enrique Arango Lyons Date: Fri, 28 Oct 2016 22:36:37 -0400 Subject: [PATCH 4/7] directions for early polling locations working! --- app/scripts/app.js | 1 - app/scripts/early_voting_mgr.js | 80 +++++++++++++------ app/scripts/map_service.js | 24 +++--- app/scripts/polling_location_finder.js | 13 --- .../templates/early_voting_sidebar.ejs | 2 +- 5 files changed, 69 insertions(+), 51 deletions(-) diff --git a/app/scripts/app.js b/app/scripts/app.js index 2808075..41f74dc 100644 --- a/app/scripts/app.js +++ b/app/scripts/app.js @@ -106,7 +106,6 @@ require(['jquery', earlyVotingManager.init(); - var $address = $('#address'); var defaultBounds = new google.maps.LatLngBounds( diff --git a/app/scripts/early_voting_mgr.js b/app/scripts/early_voting_mgr.js index 9af37ab..898503e 100644 --- a/app/scripts/early_voting_mgr.js +++ b/app/scripts/early_voting_mgr.js @@ -5,13 +5,17 @@ define( 'json!vendor/EARLY_VOTING_AddressPoints.geojson', 'text!templates/early_voting_sidebar.ejs', 'scrollTo', 'moment_range', 'bootstrapCollapse' ], - function($, moment, ejs, mapService, earlyVotingJSON, earlyVotingSidebarTmpl) { + function ($, moment, ejs, mapService, earlyVotingJSON, earlyVotingSidebarTmpl) { 'use strict'; var earlyVotingLocations = mapService.earlyPollsDataLayer.addGeoJson(earlyVotingJSON); - var $el = $('#early-voting'); + var renderers = $.map(earlyVotingLocations, function(location, index) { + var panel = $('.early-voting-directions, [data-location=' + index + ']'); + return mapService.getDirectionsRenderer(panel[0]); + }); + var $el = $('#early-voting'); var userAddress = '145 Broadway'; function getDirections(destination) { @@ -28,7 +32,7 @@ define( if (eventType === 'click') { for (var i = 0; i < earlyVotingLocations.length; i++) { if (marker.getPosition().equals(earlyVotingLocations[i].getGeometry().get())) { - $el.scrollTo($('#location'+i), 800); + $el.scrollTo($('#location' + i), 800); } } } @@ -37,42 +41,70 @@ define( function listenToSidebarEvents() { var sidebarDivs = $("#early-voting-sidebar").children(); - sidebarDivs.each(function(i,sb) { - $(sb).mouseover(function() { - mapService.changeMarkerColor(i, "hover"); - }); + sidebarDivs.each(function (i, sb) { + $(sb).click(function() { + var panel = $(this).closest('.early-voting-location').find('.early-voting-directions'); + toggleDirections(userAddress, panel); + }); + + $(sb).mouseover(function () { + mapService.changeMarkerColor(i, "hover"); + }); - $(sb).mouseout(function() { - mapService.changeMarkerColor(i, "default"); - }); - }); + $(sb).mouseout(function () { + mapService.changeMarkerColor(i, "default"); + }); + }); } - function updatePollingDirections(address) { - $('.early-voting-directions').each(function() { - var panel = $(this); // Google geocoder does not like jQuery objects - var destination = earlyVotingLocations[panel.data('location')].getGeometry().get(); - panel.empty(); - mapService.searchAddress(address, function(results) { - mapService.displaySearchResults(results, panel, function (result) { - mapService.displayDirections(result, destination, panel[0]); - }); - }, function() { - alert("Sorry duuuuude"); + function toggleDirections(address, panel) { + var isExpanded = panel.closest('.panel-collapse').hasClass('in'); + if (isExpanded) { + clearDirections(panel); + } else { + showDirections(address, panel); + } + } + + function clearDirections(panel) { + var index = panel.data('location'); + mapService.clearDirectionsRenderer(renderers[index]); + panel.empty(); + } + + function showDirections(address, panel) { + var index = panel.data('location'); + var destination = earlyVotingLocations[index].getGeometry().get(); + mapService.searchAddress(address, function (results) { + mapService.displaySearchResults(results, panel, function (result) { + mapService.displayDirections(result, destination, renderers[index]); }); + }, function () { + alert("An error occurred"); + }); + } + + function updatePollingDirections(address) { + $('.early-voting-directions').each(function () { + var panel = $(this); + var isExpanded = panel.closest('.panel-collapse').hasClass('in'); + if (isExpanded) { + clearDirections(panel); + showDirections(address, panel); + } }); } return { - init: function() { + init: function () { $el.find('#early-voting-sidebar').html(ejs.render(earlyVotingSidebarTmpl, { moment: moment, locations: earlyVotingLocations, getDirections: getDirections })); - $('.early-voting-location-details .tab-header a', $el).click(function() { + $('.early-voting-location-details .tab-header a', $el).click(function () { var tab = $(this).closest('li'); tab.addClass('active'); tab.siblings('li').removeClass('active'); diff --git a/app/scripts/map_service.js b/app/scripts/map_service.js index 86a9790..4dd0188 100644 --- a/app/scripts/map_service.js +++ b/app/scripts/map_service.js @@ -31,6 +31,7 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], var earlyPollingMarkers = []; + var electionDayRenderer = getDirectionsRenderer(document.getElementById('directions')); function clearUserInputs() { @@ -79,7 +80,7 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], } - clearDirectionsRenderer(document.getElementById('directions')); + clearDirectionsRenderer(electionDayRenderer); // TODO move UI interaction into its own module $('.navigation-result').removeClass('success'); @@ -88,8 +89,8 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], $('#directions-link').removeAttr('href'); } - function clearDirectionsRenderer(panel) { - getDirectionsRenderer(panel).setDirections({routes: []}); + function clearDirectionsRenderer(renderer) { + renderer.setDirections({routes: []}); } function getDirections(destination) { @@ -102,7 +103,7 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], return encodeURI(url + destination); } - function displayDirections(latLng, destination, panel, successCallback, errorCallback) { + function displayDirections(latLng, destination, renderer, successCallback, errorCallback) { var request = { origin: latLng, destination: destination, @@ -110,8 +111,7 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], }; directionsService.route(request, function (result, status) { if (status === google.maps.DirectionsStatus.OK) { - var directionsDisplay = getDirectionsRenderer(panel); - directionsDisplay.setDirections(result); + renderer.setDirections(result); if (successCallback) { successCallback({result: result, status: status}); } @@ -208,6 +208,10 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], displayDirections: displayDirections, + clearDirectionsRenderer: clearDirectionsRenderer, + + getDirectionsRenderer: getDirectionsRenderer, + displayEarlyPollingMarkers: function () { clearPollingLocation(); @@ -240,11 +244,9 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], clearEarlyMarkers(); if (userInputs.precinct && userInputs.homeAddress && userInputs.destination) { - var panel = document.getElementById('directions'); - userInputs.precinct.setMap(map); map.fitBounds(userInputs.precinct.getBounds()); - displayDirections(userInputs.homeAddress, userInputs.destination, panel); + displayDirections(userInputs.homeAddress, userInputs.destination, electionDayRenderer); } @@ -255,15 +257,13 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], }, displayNewPollingPlace: function (latLng, destination, precinct, successCallback, errorCallback) { - - var panel = document.getElementById('directions'); clearEarlyMarkers(); clearPollingLocation(); clearUserInputs(); drawPrecinct(latLng, destination, precinct); - displayDirections(latLng, destination, panel, successCallback, errorCallback); + displayDirections(latLng, destination, electionDayRenderer, successCallback, errorCallback); }, googleMap: map, diff --git a/app/scripts/polling_location_finder.js b/app/scripts/polling_location_finder.js index ccfd7f4..f410e52 100644 --- a/app/scripts/polling_location_finder.js +++ b/app/scripts/polling_location_finder.js @@ -57,23 +57,10 @@ define(['jquery', } } - function getDirections(destination) { - var url; - if (navigator.userAgent.match(/iPhone|iPad|iPod/)) { - url = "http://maps.apple.com/?saddr=Current+Location&daddr="; - } else { - url = "https://maps.google.com/maps?daddr="; - } - return encodeURI(url + destination); - } - - return function(latLng, successCallback, errorCallback) { - var userPrecinct = getUserPrecinct(latLng); - if (!userPrecinct) { $('#notice') .addClass('error') diff --git a/app/scripts/templates/early_voting_sidebar.ejs b/app/scripts/templates/early_voting_sidebar.ejs index 7cb703e..8d9dff9 100644 --- a/app/scripts/templates/early_voting_sidebar.ejs +++ b/app/scripts/templates/early_voting_sidebar.ejs @@ -9,7 +9,7 @@
-
+
    From 563fdf15e54674ef45b00a25e574fc3e0e53839c Mon Sep 17 00:00:00 2001 From: Bella Bai and Enrique Arango Lyons Date: Fri, 28 Oct 2016 23:10:32 -0400 Subject: [PATCH 5/7] gathering user address on early voting sidebar --- app/index.html | 13 +++++++++++++ app/scripts/early_voting_mgr.js | 20 +++++++++++++------- app/scripts/polling_location_finder.js | 2 -- 3 files changed, 26 insertions(+), 9 deletions(-) diff --git a/app/index.html b/app/index.html index 3fde85d..b88ba93 100644 --- a/app/index.html +++ b/app/index.html @@ -74,6 +74,19 @@

    Election Day

    Early Voting Information

    +
    +
    + + + +
    +
    diff --git a/app/scripts/early_voting_mgr.js b/app/scripts/early_voting_mgr.js index 898503e..f3610dc 100644 --- a/app/scripts/early_voting_mgr.js +++ b/app/scripts/early_voting_mgr.js @@ -10,13 +10,10 @@ define( var earlyVotingLocations = mapService.earlyPollsDataLayer.addGeoJson(earlyVotingJSON); - var renderers = $.map(earlyVotingLocations, function(location, index) { - var panel = $('.early-voting-directions, [data-location=' + index + ']'); - return mapService.getDirectionsRenderer(panel[0]); - }); + var renderers = []; var $el = $('#early-voting'); - var userAddress = '145 Broadway'; + var userAddress = ''; function getDirections(destination) { var url; @@ -81,7 +78,7 @@ define( mapService.displayDirections(result, destination, renderers[index]); }); }, function () { - alert("An error occurred"); + alert("Could not find the address"); }); } @@ -116,9 +113,18 @@ define( }); listenToSidebarEvents(); + mapService.subscribeToMarkerEvents(whenMarkerEventsHappen); - updatePollingDirections(userAddress); + renderers = $.map(earlyVotingLocations, function(location, index) { + var panel = $('.early-voting-directions, [data-location=' + index + ']'); + return mapService.getDirectionsRenderer(panel[0]); + }); + + $('#early-voting-address').siblings('button').click(function() { + userAddress = $('#early-voting-address').val(); + updatePollingDirections(userAddress); + }); } } } diff --git a/app/scripts/polling_location_finder.js b/app/scripts/polling_location_finder.js index f410e52..cb86b02 100644 --- a/app/scripts/polling_location_finder.js +++ b/app/scripts/polling_location_finder.js @@ -71,8 +71,6 @@ define(['jquery', var destination = pollingLocation.getProperty('Address') + ', Cambridge, MA'; mapService.displayNewPollingPlace(latLng, destination, userPrecinct, successCallback, errorCallback); $('.navigation-result').addClass('success').show(); - // userPrecinct.setMap(map); - // map.fitBounds(userPrecinct.getBounds()); // display location notes $('#info .location').text(pollingLocation.getProperty('LOCATION')); From 649acec2c7c9c98e30649850f3b98969d2655acb Mon Sep 17 00:00:00 2001 From: Bella Bai and Enrique Arango Lyons Date: Fri, 28 Oct 2016 23:45:58 -0400 Subject: [PATCH 6/7] expand location card when click on marker --- app/scripts/app.js | 6 ++++-- app/scripts/early_voting_mgr.js | 25 +++++++++++++++++++++---- app/scripts/map_service.js | 2 +- 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/app/scripts/app.js b/app/scripts/app.js index 41f74dc..5f1ad35 100644 --- a/app/scripts/app.js +++ b/app/scripts/app.js @@ -92,10 +92,8 @@ require(['jquery', $('.cambridge-tabs a[href=' + window.location.hash + ']').parent().addClass("active"); if (window.location.hash == "#early-voting") { - mapService.displayEarlyPollingMarkers(); } else if (window.location.hash == "#election-day") { - mapService.displayUserPollingPlace(); } @@ -181,6 +179,10 @@ require(['jquery', $('form').on('submit', function (e) { e.preventDefault(); // don't submit form + }); + + $('#election-day form').on('submit', function () { updateElectionDayDirections(); }); + }); diff --git a/app/scripts/early_voting_mgr.js b/app/scripts/early_voting_mgr.js index f3610dc..00bbd8c 100644 --- a/app/scripts/early_voting_mgr.js +++ b/app/scripts/early_voting_mgr.js @@ -15,6 +15,16 @@ define( var $el = $('#early-voting'); var userAddress = ''; + var $address = $('#early-voting-address'); + + var defaultBounds = new google.maps.LatLngBounds( + new google.maps.LatLng(42.360129, -71.148834), + new google.maps.LatLng(42.389868, -71.075535) + ); + var autocomplete = new google.maps.places.Autocomplete($address.get(0), { + bounds: defaultBounds + }); + function getDirections(destination) { var url; if (navigator.userAgent.match(/iPhone|iPad|iPod/)) { @@ -29,6 +39,13 @@ define( if (eventType === 'click') { for (var i = 0; i < earlyVotingLocations.length; i++) { if (marker.getPosition().equals(earlyVotingLocations[i].getGeometry().get())) { + var cardBody = $('#collapse' + i); + if (cardBody.hasClass('in')) { + cardBody.removeClass('in'); + } else { + cardBody.addClass('in'); + } + $el.scrollTo($('#location' + i), 800); } } @@ -39,7 +56,7 @@ define( var sidebarDivs = $("#early-voting-sidebar").children(); sidebarDivs.each(function (i, sb) { - $(sb).click(function() { + $(sb).click(function () { var panel = $(this).closest('.early-voting-location').find('.early-voting-directions'); toggleDirections(userAddress, panel); }); @@ -116,13 +133,13 @@ define( mapService.subscribeToMarkerEvents(whenMarkerEventsHappen); - renderers = $.map(earlyVotingLocations, function(location, index) { + renderers = $.map(earlyVotingLocations, function (location, index) { var panel = $('.early-voting-directions, [data-location=' + index + ']'); return mapService.getDirectionsRenderer(panel[0]); }); - $('#early-voting-address').siblings('button').click(function() { - userAddress = $('#early-voting-address').val(); + $address.siblings('button').click(function () { + userAddress = $address.val(); updatePollingDirections(userAddress); }); } diff --git a/app/scripts/map_service.js b/app/scripts/map_service.js index 4dd0188..07b4669 100644 --- a/app/scripts/map_service.js +++ b/app/scripts/map_service.js @@ -56,7 +56,7 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], } function createEarlyPollingMarkers() { - earlyPollingLocations.forEach(function (poll, index) { + earlyPollingLocations.forEach(function (poll) { var earlyVotingMarker = new google.maps.Marker({ position: poll.getGeometry().get() }); From b3f981ec9ac87095c13d66839b9587ca1481b144 Mon Sep 17 00:00:00 2001 From: Bella Bai and Enrique Arango Lyons Date: Sat, 29 Oct 2016 01:43:45 -0400 Subject: [PATCH 7/7] fixed bugs and toggling from markers --- app/scripts/app.js | 1 + app/scripts/early_voting_mgr.js | 71 +++++++++++-------- app/scripts/map_service.js | 22 +++++- .../templates/early_voting_sidebar.ejs | 2 +- 4 files changed, 64 insertions(+), 32 deletions(-) diff --git a/app/scripts/app.js b/app/scripts/app.js index 5f1ad35..c1f825b 100644 --- a/app/scripts/app.js +++ b/app/scripts/app.js @@ -94,6 +94,7 @@ require(['jquery', if (window.location.hash == "#early-voting") { mapService.displayEarlyPollingMarkers(); } else if (window.location.hash == "#election-day") { + earlyVotingManager.clearDirections(); mapService.displayUserPollingPlace(); } diff --git a/app/scripts/early_voting_mgr.js b/app/scripts/early_voting_mgr.js index 00bbd8c..efedfc8 100644 --- a/app/scripts/early_voting_mgr.js +++ b/app/scripts/early_voting_mgr.js @@ -13,7 +13,7 @@ define( var renderers = []; var $el = $('#early-voting'); - var userAddress = ''; + var userAddressLatlng = ''; var $address = $('#early-voting-address'); @@ -21,6 +21,7 @@ define( new google.maps.LatLng(42.360129, -71.148834), new google.maps.LatLng(42.389868, -71.075535) ); + var autocomplete = new google.maps.places.Autocomplete($address.get(0), { bounds: defaultBounds }); @@ -40,12 +41,10 @@ define( for (var i = 0; i < earlyVotingLocations.length; i++) { if (marker.getPosition().equals(earlyVotingLocations[i].getGeometry().get())) { var cardBody = $('#collapse' + i); - if (cardBody.hasClass('in')) { - cardBody.removeClass('in'); - } else { - cardBody.addClass('in'); - } + var panel = cardBody.find('.early-voting-directions'); + toggleDirections(userAddressLatlng, panel); + cardBody.collapse('toggle'); $el.scrollTo($('#location' + i), 800); } } @@ -57,8 +56,9 @@ define( sidebarDivs.each(function (i, sb) { $(sb).click(function () { - var panel = $(this).closest('.early-voting-location').find('.early-voting-directions'); - toggleDirections(userAddress, panel); + var container = $(this).closest('.early-voting-location'); + var panel = container.find('.early-voting-directions'); + toggleDirections(userAddressLatlng, panel); }); $(sb).mouseover(function () { @@ -72,12 +72,12 @@ define( } - function toggleDirections(address, panel) { + function toggleDirections(latlng, panel) { var isExpanded = panel.closest('.panel-collapse').hasClass('in'); if (isExpanded) { clearDirections(panel); } else { - showDirections(address, panel); + showDirections(latlng, panel); } } @@ -87,30 +87,41 @@ define( panel.empty(); } - function showDirections(address, panel) { + function showDirections(latlng, panel) { var index = panel.data('location'); var destination = earlyVotingLocations[index].getGeometry().get(); - mapService.searchAddress(address, function (results) { - mapService.displaySearchResults(results, panel, function (result) { - mapService.displayDirections(result, destination, renderers[index]); - }); - }, function () { - alert("Could not find the address"); - }); + panel.empty(); + mapService.displayDirections(latlng, destination, renderers[index]); } - function updatePollingDirections(address) { + function updatePollingDirections(latlng) { $('.early-voting-directions').each(function () { var panel = $(this); var isExpanded = panel.closest('.panel-collapse').hasClass('in'); if (isExpanded) { clearDirections(panel); - showDirections(address, panel); + showDirections(latlng, panel); } }); } + function setActiveTab(panel) { + var tab = panel.closest('li'); + tab.addClass('active'); + tab.siblings('li').removeClass('active'); + var content = panel.attr('href'); + var container = panel.closest('.early-voting-location-details'); + $('.tab-contents', container).hide(); + $('.tab-contents.' + content, container).show(); + } + return { + clearDirections: function() { + $.each(renderers, function(index, renderer) { + mapService.clearDirectionsRenderer(renderer); + }); + }, + init: function () { $el.find('#early-voting-sidebar').html(ejs.render(earlyVotingSidebarTmpl, { moment: moment, @@ -119,13 +130,7 @@ define( })); $('.early-voting-location-details .tab-header a', $el).click(function () { - var tab = $(this).closest('li'); - tab.addClass('active'); - tab.siblings('li').removeClass('active'); - var content = $(this).attr('href'); - var container = $(this).closest('.early-voting-location-details'); - $('.tab-contents', container).hide(); - $('.tab-contents.' + content, container).show(); + setActiveTab($(this)); return false; }); @@ -134,13 +139,19 @@ define( mapService.subscribeToMarkerEvents(whenMarkerEventsHappen); renderers = $.map(earlyVotingLocations, function (location, index) { - var panel = $('.early-voting-directions, [data-location=' + index + ']'); + var panel = $('.early-voting-directions[data-location=' + index + ']'); return mapService.getDirectionsRenderer(panel[0]); }); + $('.tab-contents.directions').hide(); + $address.siblings('button').click(function () { - userAddress = $address.val(); - updatePollingDirections(userAddress); + var address = $address.val(); + updatePollingDirections(address); + mapService.searchAddress(address, function (results) { + userAddressLatlng = results[0].geometry.location; + mapService.updateUserAddressMarker(userAddressLatlng); + }) }); } } diff --git a/app/scripts/map_service.js b/app/scripts/map_service.js index 07b4669..50d11d5 100644 --- a/app/scripts/map_service.js +++ b/app/scripts/map_service.js @@ -13,6 +13,8 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], zoom: DEFAULT_ZOOM_LEVEL }); + var userAddressMarker = null; + var earlyPollsDataLayer = new google.maps.Data(), precinctsDataLayer = new google.maps.Data(), electionPollsDataLayer = new google.maps.Data(), @@ -71,6 +73,9 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], earlyPollingMarkers.forEach(function (marker) { marker.setMap(null); }); + if (userAddressMarker) { + userAddressMarker.setMap(null); + } } function clearPollingLocation() { @@ -176,6 +181,7 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], results = $.grep(results, addressIsCambridgeStreetAddress); if (!results.length) { + // if there are no results, try searching for Cambridge geocoder.geocode({address: address + ' Cambridge, MA'}, function (results) { results = $.grep(results, addressIsCambridgeStreetAddress); if (!results.length) { @@ -184,13 +190,23 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], successCallback(results); } }); - // if there are no results, try searching for Cambridge } else { successCallback(results); } }); } + function updateUserAddressMarker(address) { + if (userAddressMarker) { + userAddressMarker.setMap(null); + } + userAddressMarker = new google.maps.Marker({ + position: address, + map: map, + icon: hoverIcon + }); + } + function drawPrecinct(latLng, destination, precinct) { userInputs.precinct = precinct; userInputs.homeAddress = latLng; @@ -212,6 +228,10 @@ define(['json!vendor/EARLY_VOTING_AddressPoints.geojson'], getDirectionsRenderer: getDirectionsRenderer, + updateUserAddressMarker: updateUserAddressMarker, + + clearDirectionsRenderer: clearDirectionsRenderer, + displayEarlyPollingMarkers: function () { clearPollingLocation(); diff --git a/app/scripts/templates/early_voting_sidebar.ejs b/app/scripts/templates/early_voting_sidebar.ejs index 8d9dff9..1542d91 100644 --- a/app/scripts/templates/early_voting_sidebar.ejs +++ b/app/scripts/templates/early_voting_sidebar.ejs @@ -9,7 +9,7 @@
    -
    +