This guide addresses the selection bugs that caused the Where to Buy Profiles and Priorities to not interact properly with one another.
The first thing you'll have to do is tweak a little bit of HTML in index.html. Instead of using JS to click on the "City Family" profile, I changed it so that it has the proper classes to look "pre-selected." Find this code block:
<div class="carousel-cell text-center is-selected" id="city-home">And change the classes so it looks like this:
<div class="carousel-cell text-center carousel-selected selected" id="city-home">The next thing you'll have to do is change some JS. A decent amount of code has changed since the last working version, but it's only changed in one specific location: the custom script block at the very end of index.html. Instead of performing surgery on this block, I'd recommend replacing the whole thing by copy/pasting this version over it:
<script>
$(function() {
// Initialize map and other goodies
WhereToBuy.initialize();
// Get the profile and priority widgets going
var $carousel = $('.carousel').flickity({
initialIndex: 1,
wrapAround: true});
var $grid = $('.grid').packery({
isInitLayout: false,
percentPosition: true,
itemSelector: '.grid-item',
gutter: 10,
});
// Get the price range slider going
$('#price-range-slider').slider({
min: WhereToBuy.priceMin,
max: WhereToBuy.priceMax,
step: 5000,
range: true,
values: [250000, 1750000], // Default price range
change: function(e, ui) {
// Update price range text
var $bound = ui.handleIndex == 1 ? $('#price-range-upper-bound') : $('#price-range-lower-bound');
$bound.html(accounting.formatMoney(ui.value, {precision: 0}));
// Trigger re-ranking of priorities
WhereToBuy.priceRange[ui.handleIndex] = ui.value;
WhereToBuy.displayRanking(WhereToBuy.rankCommunities());
},
create: function(e, ui) {
// Set price range index
var range = $('#price-range-slider').slider('values');
$('#price-range-lower-bound').html(accounting.formatMoney(range[0], {precision: 0}));
$('#price-range-upper-bound').html(accounting.formatMoney(range[1], {precision: 0}));
// Trigger re-ranking of priorities
WhereToBuy.priceRange = range;
}
});
// Bind click and return events for the profile carousel
function carouselHandler() {
if (WhereToBuy.getDataSource()) {
if ($(this).is('span')) {
$el = $(this).parent('.carousel-cell');
} else {
$el = $(this);
}
if (!$el.hasClass('carousel-selected')) {
WhereToBuy.viewProfile($el.attr('id'));
$('.carousel-cell').removeClass('carousel-selected selected');
$el.addClass('carousel-selected selected');
}
// Update priority title
var title = $el.find('.carousel-title strong').html();
// Handle plurals
title = (title.slice(-1) == 's') ? ('Priorities for ' + title) : ('Priorities for a ' + title);
$('#priority-title').html(title);
}
}
function resetCarouselHandler() {
// Rebind the carousel handler
$('.carousel-cell, .carousel-title').on('click', carouselHandler);
// Since this event handler is temporary, remove it at the end
$grid.off('layoutComplete', resetCarouselHandler);
}
$('.carousel-cell, .carousel-title').on('click', carouselHandler);
// Events for selecting a profile
$grid.on('profileSelected', function() {
// Temporarily disable carousel click events during animation
$('.carousel-cell, .carousel-title').off('click', carouselHandler);
$grid.on('layoutComplete', resetCarouselHandler);
WhereToBuy.displayRanking(WhereToBuy.rankCommunities());
})
// Allow user to drag around priorities
$('.grid-item').each(function(i, gridItem) {
var drag = new Draggabilly(gridItem);
$grid.packery('bindDraggabillyEvents', drag);
});
// Init priority order
$grid.on('layoutComplete', function() {
WhereToBuy.rankPriorities();
});
// When priorities get dragged around, recalculate top communities
$grid.on('dragItemPositioned', function() {
$('#priority-title').html('Custom Priorities');
WhereToBuy.rankPriorities();
WhereToBuy.displayRanking(WhereToBuy.rankCommunities());
});
// Trigger initial priority layout
$grid.packery();
// Define UX for the community rankings
$('.ranking').on('click', function(e) {
e.preventDefault();
WhereToBuy.selectCommunity($(this).find('span').text());
});
// Init search address
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('search-address'));
// Bind click and return events for the search bar
$('#search-button').on('click', WhereToBuy.addressSearch);
$('body').on('keypress', '#search-address', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
$('#search-button').click();
}
});
// Bind click events for the geography toggle
$('.geography-toggle').click(function(e) {
$('.geography-toggle').removeClass('active');
$(this).addClass('active');
if ($(this).attr('id') == 'suburbs-toggle') {
WhereToBuy.map.removeLayer(WhereToBuy.chicagoLayer);
WhereToBuy.map.addLayer(WhereToBuy.suburbLayer);
WhereToBuy.geography = 'suburbs';
WhereToBuy.map.setView(WhereToBuy.mapCentroid, 8, {animate: true});
} else {
WhereToBuy.map.removeLayer(WhereToBuy.suburbLayer);
WhereToBuy.map.addLayer(WhereToBuy.chicagoLayer);
WhereToBuy.geography = 'chicago';
WhereToBuy.map.setView(WhereToBuy.chicagoCentroid, 9, {animate: true});
}
WhereToBuy.rankPriorities();
WhereToBuy.displayRanking(WhereToBuy.rankCommunities());
});
// Init popovers
$("[data-toggle='popover']").popover();
});
</script>If you've added anything to this block, make sure to re-add it after you paste over!
These two changes should fix all of the selection bugs you've identified and update the code to behave like it does on wheretobuy.datamade.us. If anything isn't performing the way you expect it to, don't hesitate to be in touch and I can help debug.